/* AJSTE custom theme — bold Kirinyaga University branding throughout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@600;700&display=swap');

:root {
	--primary: #1e964f;
	--primary-dark: #145c37;
	--gold: #c79b32;
	--gold-dark: #9c7726;
	--ink: #1a2233;
	--muted: #5b6472;
	--border: #e3e7ee;
	--bg: #ffffff;
	--bg-subtle: #f8fafc;
	--bg-tint: #eaf7ef;
	--card: #ffffff;
}

body {
	background: #eef3ee;
	font-family: 'Inter', 'Noto Sans', sans-serif;
	color: var(--ink);
}

h1, h2, h3, .pkp_site_name {
	font-family: 'Source Serif 4', Georgia, serif;
}

/* ===== HEADER — editorial banner ===== */
.pkp_structure_head {
	background: var(--primary-dark);
	color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 200;
	overflow: hidden;
}

.pkp_structure_head::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 11px);
	pointer-events: none;
}

.kyu_rule {
	height: 5px;
	background: linear-gradient(to right, var(--gold) 0 34%, var(--primary) 34% 100%);
}

/* Utility strip */
.kyu_top_bar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	position: relative;
}

.kyu_top_bar_inner.pkp_head_wrapper {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 30px;
}

.pkp_navigation_user_wrapper {
	background: transparent;
	padding: 0;
	margin: 0;
}

.pkp_navigation_user a {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.78rem;
}

.pkp_navigation_user a:hover {
	color: var(--gold);
}

.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a {
	color: rgba(255, 255, 255, 0.92);
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
	color: var(--gold);
}

/* Main banner: logo + title + submission/ISSN */
.kyu_main_bar.pkp_head_wrapper {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 24px 12px;
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
}

.pkp_site_name_wrapper {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pkp_site_name {
	flex: 0 0 auto;
	margin-left: -8px;
}

.kyu_title_block {
	min-width: 0;
}

.pkp_site_name_wrapper img {
	max-height: 44px;
	width: auto;
	height: auto;
	background: #ffffff;
	padding: 4px;
	border-radius: 6px;
}

.kyu_kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.kyu_journal_name {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	font-size: clamp(14px, 1.35vw, 21px);
	line-height: 1.2;
	margin-top: 4px;
	color: #ffffff;
	text-transform: capitalize;
	white-space: nowrap;
}

.kyu_journal_name .kyu_title_link {
	color: inherit;
	text-decoration: none;
}

.kyu_journal_name .kyu_title_link:hover {
	text-decoration: underline;
}

.kyu_journal_name .kyu_abbr {
	color: var(--gold);
	text-transform: uppercase;
}

.kyu_subtitle {
	margin-top: 6px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	gap: 6px;
}

.kyu_subtitle .kyu_dot {
	color: var(--gold);
}

.kyu_side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.kyu_submit_btn {
	display: inline-block;
	background: var(--gold);
	color: #2a1e00;
	font-weight: 700;
	font-size: 0.82rem;
	padding: 8px 16px;
	border-radius: 3px;
	text-decoration: none;
}

.kyu_submit_btn:hover {
	background: #d9ae42;
}

.kyu_issn {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
}

/* Nav row */
.pkp_navigation_primary_row {
	background: rgba(0, 0, 0, 0.16);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pkp_navigation_primary_wrapper.pkp_head_wrapper {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	min-height: 40px;
}

.pkp_navigation_primary {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.pkp_navigation_primary > li > a {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
	font-size: 0.88rem;
	padding: 8px 15px;
	border-radius: 2px;
}

.pkp_navigation_primary > li > a:hover {
	background: rgba(255, 255, 255, 0.12);
}

.pkp_navigation_primary li ul {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.24);
	overflow: hidden;
}

.pkp_navigation_primary li ul a {
	color: var(--ink);
	padding: 10px 16px;
	font-weight: 500;
	border-bottom: none;
}

.pkp_navigation_primary li ul a:hover {
	background: var(--bg-tint);
	color: var(--primary-dark);
}

.pkp_search {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.pkp_head_wrapper .pkp_search .search_prompt {
	color: rgba(255, 255, 255, 0.92);
}

.pkp_head_wrapper .pkp_search .search_prompt:hover,
.pkp_head_wrapper .pkp_search .search_prompt:focus {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

/* The header search box gets an opaque white background from core OJS
   once opened (.pkp_search.is_open), so its typed text must stay dark —
   not the header's own white nav-text color — or it becomes unreadable. */
.pkp_search input[type="text"] {
	color: var(--ink);
}

.pkp_search input[type="text"]::placeholder {
	color: var(--muted);
}

/* Same specificity bug as the make-a-submission button: core targets
   ".pkp_head_wrapper .pkp_search button" (higher specificity than a plain
   ".pkp_search button"), so its default gray/blue button style was winning
   over ours. Match the prefix to win cleanly. */
.pkp_head_wrapper .pkp_search button {
	background: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0 2px 2px 0;
	box-shadow: none;
}

.pkp_head_wrapper .pkp_search button:hover {
	background: #ffffff;
	color: var(--primary-dark);
}

/* ===== BODY ===== */
.pkp_structure_content {
	max-width: 1180px;
	margin: 28px auto;
	background: #ffffff;
	border: 1px solid var(--border);
	border-top: 6px solid var(--primary);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 10px 32px rgba(20, 60, 40, 0.1);
	padding: 36px;
}

/* Core OJS lays the sidebar out with float:right, which only sits beside
   the main column when both are short — with a long article list, the
   sidebar (much shorter) ends up looking like it starts far down the page.
   Flexbox guarantees the sidebar is always top-aligned with the main
   column instead. */
.pkp_structure_content.has_sidebar {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.pkp_structure_content.has_sidebar .pkp_structure_main {
	float: none;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 0 20px;
}

.pkp_structure_content.has_sidebar .pkp_structure_main::before,
.pkp_structure_content.has_sidebar .pkp_structure_main::after {
	display: none;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	float: none;
	width: 280px;
	flex: 0 0 280px;
	position: sticky;
	top: 210px;
	align-self: flex-start;
}

.page_index_journal {
	display: flex;
	flex-direction: column;
}

/* Real About-the-journal content (from additionalHomeContent), reordered above the issue */
.additional_content {
	order: -1;
	background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-subtle) 100%);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 28px 32px;
	margin-bottom: 24px;
}

.additional_content h2 {
	display: inline-block;
	background: var(--primary);
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 3px;
	margin-bottom: 14px;
}

.additional_content p {
	color: var(--ink);
	line-height: 1.6;
}

.additional_content .journal-meta {
	list-style: none;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(20, 92, 55, 0.2);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 0.88rem;
}

.additional_content .journal-meta strong {
	color: var(--primary-dark);
}

.additional_content .journal-meta a {
	color: var(--primary-dark);
	font-weight: 600;
}

.current_issue {
	background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-subtle) 100%);
	border: 1px solid var(--border);
	border-left: 8px solid var(--primary);
	border-radius: 4px;
	padding: 32px 36px;
}

.obj_issue_toc .heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 28px;
	margin-bottom: 20px;
}

.obj_issue_toc .heading .description {
	flex: 1 1 300px;
	color: var(--ink);
}

/* Published date used to sit in its own narrow flex column beside the much
   taller description text, leaving a large empty area below it for the rest
   of the row's height. Forcing it onto its own full-width line under the
   text removes that dead space instead of reserving a column for it. */
.obj_issue_toc .heading .published {
	flex: 1 1 100%;
	order: 3;
}

/* Same reasoning as the archive-list placeholder: when an issue has no real
   cover on record, show a neat placeholder in its place instead of leaving
   it blank. This variant drops the flex layout (nothing to sit beside) for
   a simple reserved-space + absolutely positioned placeholder. */
.obj_issue_toc .heading:not(:has(> a.cover)) {
	display: block;
	position: relative;
	padding-left: 178px;
	min-height: 190px;
}

.obj_issue_toc .heading:not(:has(> a.cover)) .published {
	margin-top: 12px;
}

.obj_issue_toc .heading:not(:has(> a.cover))::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	height: 190px;
	background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-subtle) 100%);
	border: 1px solid var(--border);
	border-radius: 4px;
}

.obj_issue_toc .heading:not(:has(> a.cover))::after {
	font-family: FontAwesome;
	content: "\f02d";
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--primary);
	opacity: 0.45;
}

.current_issue > h2 {
	display: inline-block;
	background: var(--primary);
	color: #ffffff;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 3px;
	margin-bottom: 14px;
}

.current_issue_title {
	color: var(--ink);
	font-size: 1.35rem;
	line-height: 1.35;
	margin-bottom: 14px;
}

.current_issue .description {
	color: var(--ink);
	margin-bottom: 14px;
}

.published .label {
	color: var(--primary-dark);
	font-weight: 600;
}

.published .value {
	color: var(--ink);
	font-weight: 500;
}

.obj_issue_toc .heading img.cover,
.obj_issue_toc a.cover img {
	border: 3px solid #ffffff;
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(20, 60, 40, 0.2);
	max-width: 150px;
}

.galleys h2 {
	color: var(--primary-dark);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	margin-top: 16px;
}

.galleys_links .obj_galley_link {
	display: inline-block;
	margin-top: 6px;
	padding: 5px 14px;
	background: var(--primary);
	border: 1px solid var(--primary);
	color: #ffffff;
	border-radius: 3px;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
}

.galleys_links .obj_galley_link:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
}

.read_more {
	display: inline-block;
	margin-top: 16px;
	color: #ffffff;
	background: var(--gold);
	padding: 8px 18px;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
}

.read_more:hover {
	background: var(--gold-dark);
}

/* Articles section */
.sections h2 {
	font-family: 'Source Serif 4', serif;
	font-size: 1.1rem;
	color: #ffffff;
	background: var(--primary);
	padding: 12px 20px;
	border-radius: 4px;
	margin: 32px 0 16px;
}

.sections {
	counter-reset: article-counter;
}

.cmp_article_list.articles {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cmp_article_list.articles > li {
	counter-increment: article-counter;
	position: relative;
	border-bottom: 1px solid var(--border);
	padding: 14px 2px 14px 50px;
}

.cmp_article_list.articles > li::before {
	content: counter(article-counter, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 12px;
	background: var(--gold);
	color: #ffffff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Source Serif 4', serif;
	font-weight: 700;
	font-size: 0.85rem;
}

.cmp_article_list.articles > li:last-child {
	border-bottom: none;
}

.obj_article_summary .title a {
	color: var(--ink);
	font-weight: 600;
	font-size: 1rem;
	font-family: 'Source Serif 4', serif;
	text-decoration: none;
}

.obj_article_summary .title a:hover {
	color: var(--primary);
	text-decoration: underline;
}

.obj_article_summary .authors {
	color: var(--muted);
	font-size: 0.88rem;
	margin-top: 3px;
}

.obj_article_summary .pages {
	color: var(--muted);
	font-size: 0.82rem;
}

.obj_article_summary .galleys_links .obj_galley_link {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 12px;
	background: #fdf8ec;
	border: 1px solid var(--gold);
	color: var(--gold-dark);
	border-radius: 3px;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
}

.obj_article_summary .galleys_links .obj_galley_link:hover {
	background: var(--gold);
	color: #ffffff;
}

/* Issue archive list — some issues have no cover image on record (never
   uploaded), so their title used to start flush-left while covered issues
   were indented past a floated 25%-wide image, throwing the list out of
   alignment. Reserve the same space with a placeholder for any entry
   missing a real cover so every row lines up. */
.obj_issue_summary:not(:has(> a.cover)) {
	position: relative;
	min-height: 90px;
	padding-left: calc(25% + 20px);
}

.obj_issue_summary:not(:has(> a.cover))::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
	max-width: 150px;
	height: 90px;
	background: linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-subtle) 100%);
	border: 1px solid var(--border);
	border-radius: 4px;
}

.obj_issue_summary:not(:has(> a.cover))::after {
	font-family: FontAwesome;
	content: "\f02d";
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
	max-width: 150px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--primary);
	opacity: 0.45;
}

/* Sidebar */
.pkp_structure_sidebar .pkp_block {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0 18px 16px;
	margin-bottom: 20px;
	overflow: hidden;
}

.pkp_structure_sidebar .pkp_block .title {
	display: block;
	background: var(--primary);
	color: #ffffff;
	text-transform: uppercase;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	font-weight: 700;
	padding: 10px 18px;
	margin: 0 -18px 14px;
}

.pkp_structure_sidebar .pkp_block a {
	color: var(--primary-dark);
	font-weight: 500;
}

.pkp_structure_sidebar .pkp_block a:hover {
	color: var(--gold-dark);
	text-decoration: underline;
}

/* Core OJS has its own default button style targeting ".block_make_submission a"
   (one class + a type selector), which beats a plain ".block_make_submission_link"
   class selector on specificity — the button rendered with core's flat gray
   background instead of ours, leaving only the (!important) text color applied
   and making it look disabled. Scoping to the sidebar wrapper gives ours enough
   specificity to win cleanly, so every property below actually applies. */
.pkp_structure_sidebar .block_make_submission_link {
	display: block;
	text-align: center;
	background: var(--gold);
	color: #ffffff;
	padding: 12px 14px;
	border: none;
	border-radius: 4px;
	box-shadow: none;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	line-height: normal;
}

.pkp_structure_sidebar .block_make_submission_link:hover {
	background: var(--gold-dark);
}

/* ===== FOOTER ===== */
.pkp_structure_footer_wrapper {
	background: var(--primary-dark);
	border-top: 5px solid var(--gold);
	color: #ffffff;
	margin-top: 28px;
}

.pkp_structure_footer {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 24px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pkp_footer_content {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr;
	gap: 18px;
	text-align: left;
}

.pkp_footer_content p {
	color: #ffffff;
	font-family: 'Source Serif 4', serif;
	font-size: 0.9rem;
	margin: 0;
}

.pkp_footer_content .footer-links {
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

.pkp_footer_content .footer-links a {
	display: block;
	margin-bottom: 4px;
	color: var(--gold);
	text-decoration: none;
	font-weight: 600;
}

.pkp_footer_content .footer-links a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.pkp_brand_footer {
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	width: 100%;
	display: flex;
	justify-content: center;
}

.pkp_brand_footer img {
	opacity: 0.75;
	filter: brightness(0) invert(1);
	max-height: 18px;
}

/* ===== MOBILE (<768px, matching core OJS's own breakpoint) =====
   None of the above was ever tested below desktop width: the header row,
   the two-column sidebar layout (with sticky positioning), and fixed
   paddings all assumed a wide viewport. On a phone this squeezed the
   kicker/title into a column narrow enough to wrap one word per line,
   made the sticky sidebar overlap the main text (its sticky offset was
   tuned for the desktop header's height, not the much taller wrapped
   mobile one), and left the search box fighting the nav row for space. */
@media (max-width: 767px) {
	.kyu_main_bar.pkp_head_wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 14px 16px;
	}

	.pkp_site_name_wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		width: 100%;
	}

	/* Flex items shrink-to-fit their content by default under
	   align-items:flex-start, so without an explicit width this block's
	   long title text sized itself to its full unwrapped width and
	   overflowed the viewport instead of wrapping. */
	.kyu_title_block {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Belt-and-braces: on very narrow phones (under ~480px) the title text
	   was still overflowing past the viewport edge before it wrapped.
	   Force it to respect the container width no matter what. */
	.kyu_kicker,
	.kyu_journal_name,
	.kyu_subtitle {
		max-width: 100%;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	body {
		overflow-x: hidden;
	}

	.pkp_site_name {
		margin-left: 0;
	}

	.kyu_kicker {
		font-size: 0.64rem;
	}

	.kyu_journal_name {
		font-size: 19px;
		white-space: normal;
	}

	.kyu_side {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.kyu_top_bar_inner.pkp_head_wrapper,
	.pkp_navigation_primary_wrapper.pkp_head_wrapper {
		padding: 0 16px;
	}

	/* Let the nav links and the search box each take their own full-width
	   row instead of competing for space on one line. */
	.pkp_navigation_primary_wrapper.pkp_head_wrapper {
		flex-wrap: wrap;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.pkp_navigation_primary {
		flex: 1 1 100%;
	}

	.pkp_head_wrapper .pkp_search {
		flex: 1 1 100%;
		margin-left: 0;
	}

	/* Drop the two-column layout entirely — stack the sidebar below the
	   main content in normal document flow, and turn off the sticky
	   behavior that was tuned for the desktop header's height. */
	.pkp_structure_content.has_sidebar {
		display: block;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
		position: static;
		width: auto;
		margin-top: 24px;
	}

	.pkp_structure_content {
		padding: 20px 16px;
	}

	.current_issue,
	.additional_content {
		padding: 20px;
	}

	.obj_issue_toc .heading:not(:has(> a.cover)) {
		padding-left: 0;
		min-height: 0;
	}

	.obj_issue_toc .heading:not(:has(> a.cover))::before,
	.obj_issue_toc .heading:not(:has(> a.cover))::after {
		display: none;
	}

	.pkp_footer_content {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}