/*
 * Lite Scholar 1.6.6: overrides on top of the OJS 3.3 Default Theme.
 * Palette: Grain #D7CEC7, Blackboard #565656, Oxblood #76323F, Tan #C09F80.
 * Roles: Oxblood = header, navigation, links, buttons. Blackboard = text,
 * sidebar menu and footer. Grain = soft backgrounds and lines. Tan = thin
 * accent lines only (low contrast on white, never used for text).
 * One sans-serif font stack everywhere; no serif and no web fonts.
 */
:root {
	--ls-grain: #d7cec7;
	--ls-grain-soft: #f5f2ef;
	--ls-ink: #565656;
	--ls-ink-strong: #3b3b3b;
	--ls-accent: #76323f;
	--ls-accent-dark: #5c2530;
	--ls-tan: #c09f80;
	--ls-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.page_title,
.pkp_block .title,
.pkp_site_name .is_text,
.pkp_site_name > a,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_search_wrapper a,
.cmp_button, .pkp_button, .obj_galley_link {
	font-family: var(--ls-font);
}

body {
	background: var(--ls-grain-soft);
	color: var(--ls-ink);
}

h1, h2, h3, h4, h5, h6,
.page_title,
.pkp_block .title {
	color: var(--ls-ink-strong);
}

a { color: var(--ls-accent); }
a:hover, a:focus { color: var(--ls-accent-dark); }

.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main { background: transparent; }
.pkp_structure_page {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
	padding-bottom: 20px !important;
}

/* Header and navigation: one solid Oxblood band, no second colour */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary,
.pkp_navigation_user_wrapper,
.pkp_navigation_search_wrapper {
	background: var(--ls-accent);
}
.pkp_structure_head { border-bottom: 4px solid var(--ls-tan); }
.pkp_site_name .is_text,
.pkp_site_name > a,
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
	color: #fff;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
	color: #fff;
	background: var(--ls-accent-dark);
}
.pkp_navigation_primary ul {
	background: #fff;
	border: 1px solid var(--ls-grain);
}
.pkp_navigation_primary ul a { color: var(--ls-ink); }
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
	color: var(--ls-accent);
	background: var(--ls-grain-soft);
}

/* Header image. Sizing rules are !important so they win over the Default
 * Theme and over width/height attributes on the <img>.
 *
 * Desktop (992px and up): the image fills the page width (90% of the screen),
 * keeping its proportions. Upload a wide image, e.g. 1800 x 293 px.
 * Below 992px the Default Theme shows a slim bar with a menu button, so the
 * image is capped to fit that bar instead of overflowing it. */
@media (max-width: 991px) {
	html body .pkp_site_name .is_img img {
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		max-height: 48px !important;
	}
}
@media (min-width: 992px) {
	html body .pkp_site_name_wrapper {
		padding-left: 0;
		padding-right: 0;
	}
	html body .pkp_site_name {
		float: none;
		width: 100%;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	html body .pkp_site_name > a,
	html body .pkp_site_name .is_img {
		display: block !important;
		width: 100% !important;
		padding-top: 0;
		padding-bottom: 0;
	}
	html body .pkp_site_name .is_img img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 auto;
	}
	/* Register/Login float over the top-right corner of the header image.
	 * The full-width header is the only positioned ancestor, so "right: 5%"
	 * lands exactly on the right edge of the 90%-wide page. */
	html body .pkp_structure_head {
		position: relative !important;
	}
	html body .pkp_head_wrapper,
	html body .pkp_site_nav_menu {
		position: static !important;
	}
	html body .pkp_navigation_user_wrapper {
		position: absolute !important;
		top: 0 !important;
		right: 5% !important;
		bottom: auto !important;
		left: auto !important;
		float: none !important;
		width: max-content !important;
		max-width: 90% !important;
		margin: 0 !important;
		padding: 8px 16px 0 0 !important;
		transform: none !important;
		text-align: right !important;
		z-index: 20;
	}
	html body .pkp_navigation_user {
		display: flex !important;
		align-items: center;
		justify-content: flex-end !important;
		position: static !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: right !important;
	}
	html body .pkp_navigation_user > li > a {
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	}
}

/* Page width: 90% of the screen on desktop (header, content, footer, cards).
 * Below 992px the Default Theme's responsive layout is kept. */
@media (min-width: 992px) {
	html body .pkp_head_wrapper,
	html body .pkp_structure_content,
	html body .pkp_structure_footer {
		box-sizing: border-box;
		width: 90% !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	html body .ls-highlights {
		width: 90%;
		padding: 0;
	}

	/* Main column takes the remaining width; the sidebar keeps a fixed
	 * share, so the divider sits next to the sidebar instead of far from it. */
	html body .pkp_structure_content {
		display: flex !important;
		align-items: stretch;
	}
	html body .pkp_structure_main {
		position: relative;
		float: none !important;
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
		max-width: none !important;
	}
	/* The Default Theme draws the vertical dividers with pseudo-elements at
	 * fixed positions. Hide them and draw the dividers as borders of the main
	 * column, so they always follow its width. */
	html body .pkp_structure_content::before,
	html body .pkp_structure_content::after,
	html body .pkp_structure_main::before,
	html body .pkp_structure_main::after,
	html body .pkp_structure_sidebar::before,
	html body .pkp_structure_sidebar::after {
		content: none !important;
		display: none !important;
	}
	html body .pkp_structure_main {
		box-sizing: border-box;
		border-left: 1px solid var(--ls-grain);
		border-right: 1px solid var(--ls-grain);
	}
	html body .pkp_structure_sidebar {
		float: none !important;
		flex: 0 0 22%;
		box-sizing: border-box;
		width: 22% !important;
		min-width: 280px;
		max-width: 400px !important;
	}
}

/* Content */
.cmp_breadcrumbs,
.cmp_breadcrumbs a { color: var(--ls-ink); }
.obj_article_summary,
.obj_issue_summary,
.pkp_block { border-color: var(--ls-grain); }
.obj_article_summary .title a,
.obj_issue_summary .title { color: var(--ls-accent); }
.pkp_block .title { border-bottom: 2px solid var(--ls-tan); }
.cmp_pagination a,
.cmp_pagination .current { color: var(--ls-accent); }

/* Buttons, galley links and the "Make a Submission" block */
.cmp_button,
.pkp_button,
.obj_galley_link,
a.obj_galley_link,
.block_make_submission .block_make_submission_link,
.pkp_block .block_make_submission_link {
	background: var(--ls-accent);
	border: 1px solid var(--ls-accent);
	box-shadow: none;
	color: #fff;
	text-shadow: none;
}
.cmp_button:hover, .cmp_button:focus,
.pkp_button:hover, .pkp_button:focus,
.obj_galley_link:hover, .obj_galley_link:focus,
.block_make_submission .block_make_submission_link:hover,
.block_make_submission .block_make_submission_link:focus {
	background: var(--ls-accent-dark);
	border-color: var(--ls-accent-dark);
	color: #fff;
}
.cmp_button_wire {
	background: transparent;
	border: 1px solid var(--ls-accent);
	color: var(--ls-accent);
}

/* Sidebar menu tiles (navigation menu and custom blocks): Blackboard, with
 * Oxblood for hover and the current page. Other sidebar blocks keep the
 * Default Theme layout. */
.pkp_structure_sidebar .block_navigation_menu li a,
.pkp_structure_sidebar .block_custom li a {
	background: var(--ls-ink);
	border-color: var(--ls-grain-soft);
	color: #fff;
}
.pkp_structure_sidebar .block_navigation_menu li a:hover,
.pkp_structure_sidebar .block_navigation_menu li a:focus,
.pkp_structure_sidebar .block_navigation_menu li.current a,
.pkp_structure_sidebar .block_navigation_menu li.active a,
.pkp_structure_sidebar .block_custom li a:hover,
.pkp_structure_sidebar .block_custom li a:focus,
.pkp_structure_sidebar .block_custom li.current a,
.pkp_structure_sidebar .block_custom li.active a {
	background: var(--ls-accent);
	color: #fff;
}

/* Authors: affiliation, then country, each below the name */
.obj_article_details .authors .name,
.obj_article_details .item.authors .name {
	color: var(--ls-ink-strong);
	font-weight: 700;
}
.obj_article_details .authors .affiliation,
.obj_article_details .item.authors .affiliation {
	display: block;
	color: var(--ls-ink);
	font-size: 0.875em;
	line-height: 1.4;
	white-space: pre-line;
}

/* Issue coverage box */
.ls-issue-coverage {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	background: #fff;
	border-left: 4px solid var(--ls-tan);
	color: var(--ls-ink-strong);
}
.ls-issue-coverage p { margin: 0 0 0.5em; font-weight: 700; }
.ls-issue-coverage__countries {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
}
.ls-issue-coverage__countries li { display: flex; align-items: center; gap: 0.5em; }
.ls-issue-coverage .ls-flag {
	width: 24px;
	height: 18px;
	object-fit: cover;
	border: 1px solid var(--ls-grain);
}
.ls-issue-coverage .ls-count { color: var(--ls-ink); }

/* Home page cards: latest, most read, most downloaded */
.ls-highlights {
	max-width: none;
	margin: 2em auto;
	padding: 0 16px;
}
.ls-highlights__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.ls-highlight {
	padding: 24px 28px;
	background: #fff;
	border: 1px solid var(--ls-grain);
}
.ls-highlight h2 {
	margin: 0 0 1em;
	padding-bottom: 0.5em;
	position: relative;
	font-size: 1.375em;
	line-height: 1.2;
}
.ls-highlight h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--ls-accent);
}
.ls-highlight ul { margin: 0; padding: 0; list-style: none; }
.ls-highlight li { padding: 0.75em 0; border-bottom: 1px dotted var(--ls-grain); line-height: 1.45; }
.ls-highlight li:last-child { border-bottom: 0; }
.ls-highlight li a { color: var(--ls-ink-strong); text-decoration: none; }
.ls-highlight li a:hover, .ls-highlight li a:focus { color: var(--ls-accent); text-decoration: underline; }

/* Footer */
.pkp_structure_footer_wrapper {
	background: var(--ls-ink);
	border-top: 4px solid var(--ls-tan);
}
.pkp_structure_footer_wrapper,
.pkp_structure_footer_wrapper a,
.pkp_footer_content {
	color: var(--ls-grain-soft);
}

/* The "Platform & workflow by OJS / PKP" logo is black; make it light on the dark footer */
.pkp_structure_footer_wrapper .pkp_brand_footer img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}