/*
 * Lite Scholar 1.21.2: 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);
}

/* Text size: by default (0px) the Default Theme's own sizes are used everywhere, so
 * every page looks the same. If you set --ls-font-bump to e.g. 2px, every text size is raised by that amount by
 * the theme's helper script (js/liteScholar.js) (the Default
 * Theme mixes px, rem and em, so CSS alone cannot add a fixed amount to all
 * of them). That only reaches pages that run the script (not stale cached pages or
 * visitors without JavaScript), which is why it is off by default. */
:root {
	/* border of the pill buttons; raise the alpha to 0.6 for a 3:1 contrast against the page (WCAG 1.4.11) */
	--ls-pill-border: rgba(118, 50, 63, 0.3);
	--ls-font-bump: 0px;
	/* extra size for the titles in article lists, on top of the bump */
	--ls-title-bump: 0px;
}

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;
	}
	/* Footer text starts exactly at the left edge of the page (and the logo
	 * ends at the right edge), in line with the content above it. */
	html body .pkp_structure_footer {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 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;
	}
	/* No left divider: the content starts exactly at the left edge of the
	 * page. Only the divider next to the sidebar stays. */
	html body .pkp_structure_main {
		box-sizing: border-box;
		border-left: 0 !important;
		border-right: 1px solid var(--ls-grain);
		padding-left: 0 !important;
	}
	html body .pkp_structure_main > * {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	/* Wider sidebar whose tiles end exactly at the right edge of the page, so
	 * the left and right edges of the page line up. */
	html body .pkp_structure_sidebar {
		float: none !important;
		flex: 0 0 26%;
		box-sizing: border-box;
		width: 26% !important;
		min-width: 300px;
		max-width: 520px !important;
		padding-left: 28px !important;
		padding-right: 0 !important;
	}
	html body .pkp_structure_sidebar .pkp_block {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-right: 0 !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: write a plain bulleted list in a custom block and give it the
 * class "ls-menu"; it is shown as a stack of tiles with an icon per link.
 * Icons come from Font Awesome 4 (already loaded by the Default Theme) and are
 * picked from words in the link URL. The current page is highlighted by a
 * small script the theme adds to each page. */
.pkp_block ul.ls-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pkp_block ul.ls-menu li {
	margin: 0 0 2px;
	padding: 0;
	list-style: none;
}
.pkp_block ul.ls-menu li a {
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 0.6em 0.8em;
	background: var(--ls-ink);
	border: 1px solid var(--ls-grain-soft);
	color: #fff;
	line-height: 1.35;
	text-decoration: none;
}
.pkp_block ul.ls-menu li a::before {
	flex: 0 0 1.25em;
	width: 1.25em;
	font: normal normal normal 1em/1 FontAwesome;
	text-align: center;
	content: "\f10c";
}
.pkp_block ul.ls-menu li a:hover,
.pkp_block ul.ls-menu li a:focus,
.pkp_block ul.ls-menu li a.is-active {
	background: var(--ls-accent);
	color: #fff;
}
/* general rules first, then the specific ones that override them */
.pkp_block ul.ls-menu li a[href*="/about"]::before { content: "\f05a"; }
.pkp_block ul.ls-menu li a[href*="/issue/"]::before { content: "\f02d"; }
.pkp_block ul.ls-menu li a[href*="submissions"]::before { content: "\f093"; }
.pkp_block ul.ls-menu li.home a::before { content: "\f015"; }
.pkp_block ul.ls-menu li a[href*="focusAndScope"]::before,
.pkp_block ul.ls-menu li a[href*="ublicationEthics"]::before { content: "\f10c"; }
.pkp_block ul.ls-menu li a[href*="editorialTeam"]::before { content: "\f2be"; }
.pkp_block ul.ls-menu li a[href*="peerReviewers"]::before { content: "\f0c0"; }
.pkp_block ul.ls-menu li a[href*="peerReviewProcess"]::before { content: "\f046"; }
.pkp_block ul.ls-menu li a[href*="uthorGuidelines"]::before { content: "\f044"; }
.pkp_block ul.ls-menu li a[href*="contact"]::before { content: "\f2ba"; }
.pkp_block ul.ls-menu li a[href*="openAccess"]::before { content: "\f09c"; }
.pkp_block ul.ls-menu li a[href*="opyright"]::before { content: "\f1f9"; }
.pkp_block ul.ls-menu li a[href*="uthorFees"]::before { content: "\f09d"; }
.pkp_block ul.ls-menu li a[href*="license"]::before { content: "\f24e"; }
.pkp_block ul.ls-menu li a[href*="drive.google.com"]::before,
.pkp_block ul.ls-menu li a[href*="download"]::before { content: "\f019"; }
.pkp_block ul.ls-menu li a[href*="ndexing"]::before { content: "\f002"; }
.pkp_block ul.ls-menu li a[href*="announcement"]::before { content: "\f0a1"; }

/* Authors on the article page: name, then affiliation and country right
 * below it with only a small gap, and a clear gap between authors. The
 * affiliation must NOT use white-space: pre-line: the template indents it
 * with newlines, which would then show up as blank lines. */
html body .obj_article_details .item.authors li {
	margin-top: 0 !important;
	margin-bottom: 0.9em !important;
	line-height: 1.35;
}
html body .obj_article_details .item.authors .name {
	display: block !important;
	margin: 0 0 0.1em !important;
	padding: 0 !important;
	color: var(--ls-ink-strong);
	font-weight: 700;
}
html body .obj_article_details .item.authors .affiliation,
html body .obj_article_details .item.authors .ls-country-line {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--ls-ink);
	line-height: 1.4;
}

/* Dimensions citation badge just above the DOI line of an article: it keeps
 * the left spacing of the other items, only the vertical spacing is tightened. */
html body .obj_article_details .item.ls-dimensions {
	margin-top: 0 !important;
	margin-bottom: 0.4rem !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	min-height: 0;
}
html body .obj_article_details .item.ls-dimensions + .item.doi {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Issue heading: cover on the left (a fixed share of the width, so a large
 * cover image cannot push the rest around), everything else (coverage box,
 * description, DOI, published date) stacked in the right column. */
@media (min-width: 768px) {
	.obj_issue_toc .heading {
		display: grid;
		grid-template-columns: clamp(200px, 28%, 420px) minmax(0, 1fr);
		/* Rows of the right column take only the height they need; the last
		 * row absorbs the rest of the cover's height (otherwise the cover's
		 * height is shared out over all rows and opens gaps between the box
		 * and the published date). */
		grid-template-rows: repeat(19, min-content) 1fr;
		column-gap: 40px;
		align-items: start;
		max-width: 100%;
		min-width: 0;
		margin-bottom: 1.5rem !important;
		padding-bottom: 0 !important;
	}
	.obj_issue_toc .sections {
		margin-top: 0 !important;
	}
	.obj_issue_toc .heading > .cover {
		grid-column: 1;
		grid-row: 1 / span 20;
		float: none;
		width: auto;
		max-width: 100%;
		margin: 0;
	}
	.obj_issue_toc .heading > .cover img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.obj_issue_toc .heading > :not(.cover) {
		grid-column: 2;
		min-width: 0;
		max-width: 100%;
		margin-left: 0;
	}
}

/* Issue coverage box */
.ls-issue-coverage {
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	margin: 1.5em 0;
	padding: 1em 1.25em;
	background: #fff;
	border-left: 2px solid var(--ls-tan);
	color: var(--ls-ink-strong);
}
.obj_issue_toc .heading .ls-issue-coverage { margin: 0 0 0.8rem; }
html body .obj_issue_toc .heading .published,
html body .obj_issue_toc .heading .description {
	margin-top: 0 !important;
}
.ls-issue-coverage p { margin: 0 0 0.5em; font-weight: 700; }
/* Countries in even columns (a flag, the name, the count), flags all the same
 * size with a thin neutral outline so white-edged flags do not disappear. */
.ls-issue-coverage__countries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0.75em 1.5em;
	margin: 0.9em 0 0;
	padding: 0.9em 0 0;
	border-top: 1px solid var(--ls-grain);
	list-style: none;
}
.ls-issue-coverage__countries li { display: flex; align-items: center; gap: 0.65em; min-width: 0; line-height: 1.25; }
.ls-issue-coverage .ls-country { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
html body .ls-issue-coverage .ls-flag {
	flex: none;
	display: block;
	width: 28px;
	height: 21px;
	margin: 0;
	padding: 0 !important; /* the Default Theme's image frame would thicken the flag */
	border: 0 !important;
	outline: 0;
	background: none;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); /* hairline so white flags keep their edge */
}
.ls-issue-coverage .ls-count { margin-left: auto; padding-left: 0.4em; color: var(--ls-ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Archives page: statistics card under each issue (authors, countries + flags, articles) */
.ls-archive-stats {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
	align-items: center;
	max-width: 640px;
	margin: 14px 0 4px;
	padding: 10px 6px;
	overflow: hidden; /* sits beside the cover instead of under it */
	background: #fff;
	border: 1px solid var(--ls-grain);
	border-left: 2px solid var(--ls-tan);
	color: var(--ls-ink-strong);
	line-height: 1.3;
}
.ls-archive-stats__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 2px 14px;
	border-right: 1px solid var(--ls-grain);
}
.ls-archive-stats__item:last-child { border-right: 0; }
.ls-archive-stats__icon {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--ls-accent);
	background: var(--ls-grain-soft);
	border: 1px solid var(--ls-grain);
	border-radius: 50%;
}
.ls-archive-stats__icon svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ls-archive-stats__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ls-archive-stats__num {
	font-size: 1em;
	font-weight: 700;
	color: var(--ls-accent);
	font-variant-numeric: tabular-nums;
}
.ls-archive-stats__label { color: var(--ls-ink); }
.ls-archive-stats__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
html body .ls-archive-stats .ls-flag {
	display: block;
	width: 22px;
	height: 16px;
	margin: 0;
	padding: 0 !important; /* the Default Theme's image frame would thicken the flag */
	border: 0 !important;
	outline: 0;
	background: none;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); /* hairline so white flags keep their edge */
}
.ls-archive-stats .ls-flag--text {
	width: auto;
	min-width: 22px;
	padding: 0 3px;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	background: #fff;
	color: var(--ls-ink);
}
.ls-archive-stats__more { font-size: 0.85em; color: var(--ls-ink); }
@media (max-width: 620px) {
	.ls-archive-stats { grid-template-columns: 1fr; }
	.ls-archive-stats__item { padding: 8px 8px; border-right: 0; border-bottom: 1px solid var(--ls-grain); }
	.ls-archive-stats__item:last-child { border-bottom: 0; }
}

/* Home page: little space between "View All Issues" and the cards below */
html body .pkp_structure_main {
	padding-bottom: 1rem !important;
}
html body .page_index_journal,
html body .page_index_journal .current_issue {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
html body .page_index_journal .current_issue .read_more {
	margin-bottom: 0 !important;
}

/* Home page cards: latest, most read, most downloaded */
.ls-highlights {
	max-width: none;
	margin: 1rem auto 2em;
	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__meta { display: block; margin-top: 0.2em; font-size: 0.857em; line-height: 1.3; color: var(--ls-ink); font-variant-numeric: tabular-nums; }
.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; }

/* Category cards below the journal description: click a card to list its articles */
.ls-categories { margin: 0 0 2em; }
.ls-categories > h2 {
	margin: 0 0 0.8em;
	padding-bottom: 0.5em;
	position: relative;
	font-size: 1.375em;
	line-height: 1.2;
}
.ls-categories > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--ls-accent);
}
.ls-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	align-items: start;
}
.ls-category {
	background: #fff;
	border: 1px solid var(--ls-grain);
	border-left: 2px solid var(--ls-accent);
}
.ls-category summary {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 14px 40px 14px 18px;
	position: relative;
	cursor: pointer;
	list-style: none;
}
.ls-category summary::-webkit-details-marker { display: none; }
.ls-category summary::after {
	content: "+";
	position: absolute;
	right: 16px;
	top: 50%;
	margin-top: -0.6em;
	font-size: 1.3em;
	line-height: 1.2;
	color: var(--ls-accent);
}
.ls-category[open] summary::after { content: "\2212"; }
.ls-category summary:hover .ls-category__name,
.ls-category summary:focus .ls-category__name { color: var(--ls-accent); }
.ls-category__name { font-weight: 700; color: var(--ls-ink-strong); line-height: 1.3; }
.ls-category__count { font-size: 0.857em; color: var(--ls-ink); }
.ls-category ul { margin: 0; padding: 0 18px 10px; list-style: none; border-top: 1px dotted var(--ls-grain); }
.ls-category li { padding: 0.6em 0; border-bottom: 1px dotted var(--ls-grain); line-height: 1.4; }
.ls-category li:last-child { border-bottom: 0; }
.ls-category li a { color: var(--ls-ink-strong); text-decoration: none; }
.ls-category li a:hover, .ls-category li a:focus { color: var(--ls-accent); text-decoration: underline; }

/* "Read more" button below the shortened current issue on the home page: the
 * same outlined pill as the article actions, right-aligned and close to the
 * last article (the spacing the Default Theme leaves under the list is removed). */
html body .current_issue .sections,
html body .current_issue .section:last-child,
html body .current_issue .section:last-child .cmp_article_list,
html body .current_issue .cmp_article_list > li:last-child,
html body .current_issue .cmp_article_list > li:last-child .obj_article_summary {
	margin-bottom: 0 !important;
}
html body .current_issue .cmp_article_list > li:last-child .obj_article_summary {
	padding-bottom: 0 !important;
}
/* Folded current issue (home page): the articles after the first few are in the
 * page but hidden until "Read more" is pressed. While folded, the last visible
 * article (.ls-edge) behaves like the last one of the list: no divider under
 * it and no extra space, so the button sits right below it. */
html body .current_issue [hidden] {
	display: none !important;
}
html body .current_issue.ls-collapsed .ls-edge-section,
html body .current_issue.ls-collapsed .ls-edge-section .cmp_article_list,
html body .current_issue.ls-collapsed .ls-edge,
html body .current_issue.ls-collapsed .ls-edge .obj_article_summary {
	margin-bottom: 0 !important;
}
html body .current_issue.ls-collapsed .ls-edge .obj_article_summary {
	padding-bottom: 0 !important;
	border-bottom: 0 !important;
}

html body .ls-readmore {
	/* above neighbouring positioned elements (e.g. the "View All Issues" link or the
	 * page numbers of the last article), which could otherwise cover most of the
	 * button and leave only its top edge clickable */
	position: relative;
	z-index: 10;
	margin: var(--ls-list-gap) 0 0.4rem !important;
	padding: 0 !important;
	text-align: right;
	line-height: 1.35;
}
html body .ls-readmore__button {
	display: inline-block;
	cursor: pointer;
	padding: 0.3em 1.1em;
	background: #fff;
	border: 1px solid var(--ls-pill-border);
	border-radius: 999px;
	color: var(--ls-accent);
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
html body .ls-readmore__button:hover,
html body .ls-readmore__button:focus {
	background: var(--ls-accent);
	border-color: var(--ls-pill-border);
	color: #fff;
	text-decoration: none;
}

/* Thin divider between listed articles (not after the last one of a list) */
html body .obj_article_summary {
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--ls-grain);
}
html body .cmp_article_list > li:last-child .obj_article_summary {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Action line under the authors of listed articles */
/* Title, authors and the action line sit close together with the same small
 * gap (--ls-list-gap) between them. Tight line heights and no padding or
 * top margin on the title and the meta block, so no hidden space is added. */
:root {
	--ls-list-gap: 0.2rem;
}
html body .obj_article_summary .title {
	margin: 0 0 var(--ls-list-gap) !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}
html body .obj_article_summary .meta {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
html body .obj_article_summary .meta .authors {
	margin: 0 7em 0 0 !important; /* room for the page numbers on the right */
	padding: 0 !important;
	line-height: 1.35;
}
html body .obj_article_summary .ls-article-actions {
	margin: var(--ls-list-gap) 0 0 !important;
	padding: 0 !important;
	line-height: 1.35;
}
/* Action links as outlined pill buttons (white, soft Oxblood border, Oxblood
 * text; filled on hover, focus and while the abstract is open). */
html body .obj_article_summary .ls-article-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.ls-article-actions .ls-sep { display: none; }
.ls-article-actions a {
	display: inline-block;
	padding: 0.3em 1.1em;
	background: #fff;
	border: 1px solid var(--ls-pill-border);
	border-radius: 999px;
	color: var(--ls-accent);
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.ls-article-actions a:hover,
.ls-article-actions a:focus,
.ls-article-actions a.is-open {
	background: var(--ls-accent);
	color: #fff;
	text-decoration: none;
}
.ls-abstract {
	margin: 0.6em 0 0.4em;
	padding: 0.8em 1em;
	background: #fff;
	border-left: 3px solid var(--ls-tan);
	color: var(--ls-ink);
	line-height: 1.55;
	text-align: justify;
}
.ls-abstract[hidden] { display: none; }

/* Keyboard focus: a visible ring on the buttons and cards that open or follow links */
.ls-article-actions a:focus-visible,
html body .ls-readmore__button:focus-visible,
.ls-category summary:focus-visible {
	outline: 2px solid var(--ls-accent);
	outline-offset: 2px;
}

/* 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);
}

/* Headings (h1-h6) written in the footer text: light Grain instead of the dark
 * page heading colour, which was unreadable on the dark footer. */
html body .pkp_structure_footer_wrapper h1,
html body .pkp_structure_footer_wrapper h2,
html body .pkp_structure_footer_wrapper h3,
html body .pkp_structure_footer_wrapper h4,
html body .pkp_structure_footer_wrapper h5,
html body .pkp_structure_footer_wrapper h6 {
	color: var(--ls-grain) !important;
}

/* 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;
}

/* Footer text on the left, the OJS / PKP logo at the right, both centred
 * vertically between the top and bottom of the footer (desktop) */
@media (min-width: 768px) {
	/* The Default Theme's clearfix pseudo-elements would become empty flex items
	 * and, with the gap, push the footer text to the right */
	html body .pkp_structure_footer::before,
	html body .pkp_structure_footer::after {
		content: none !important;
		display: none !important;
	}
	html body .pkp_structure_footer {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}
	html body .pkp_structure_footer .pkp_footer_content {
		flex: 1 1 auto;
		min-width: 0;
	}
	/* No extra left space inside the footer text: its left edge is the
	 * footer's own left edge (which a small script lines up with the content) */
	html body .pkp_structure_footer .pkp_footer_content,
	html body .pkp_structure_footer .pkp_footer_content > * {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	html body .pkp_structure_footer .pkp_footer_content > :first-child {
		margin-top: 0 !important;
	}
	html body .pkp_structure_footer .pkp_footer_content > :last-child {
		margin-bottom: 0 !important;
	}
	html body .pkp_structure_footer .pkp_brand_footer {
		flex: 0 0 auto;
		float: none !important;
		width: auto !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
		text-align: right;
	}
	html body .pkp_structure_footer .pkp_brand_footer img {
		display: block;
		width: 180px;
		max-width: 100%;
		height: auto;
		margin-left: auto;
	}
}

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