/**
 * plugins/themes/actaTheme/styles/acta.css
 *
 * Design-token stylesheet for the ACTA theme, implementing the approved
 * mockup-*.html spec (mockup-home.html, mockup-archive.html,
 * mockup-article-detail.html, mockup-issue-detail.html, mockup-search.html,
 * mockup-static-page.html, mockup-contact.html — these 7 files share one
 * byte-identical <style> block, so the tokens below apply uniformly across
 * all of them). Values (colors, sizes, spacing) are copied exactly from
 * that shared <style> block and verified against real getComputedStyle()
 * output (see theme-dev/style-reference.json). Selectors necessarily differ
 * from the mockups' because this targets real OJS/pkp-lib markup (core
 * template classnames) plus a handful of new wrapper classes added in this
 * theme's own header.tpl / footer.tpl / indexJournal.tpl /
 * article_summary.tpl overrides (all prefixed acta_).
 *
 * Loads after the parent "default" theme's compiled stylesheet, so equal-
 * specificity rules here win by cascade order (no !important needed except
 * where noted).
 */

/* ---------------------------------------------------------------------
   Design tokens (kept as a comment for reference — shared mockup-*.html
   <style> block / theme-dev/style-reference.json):
   maroon    #006b08
   red       #00870a
   topstrip  linear-gradient(90deg,#006b08,#00870a,#006b08)
   banner    linear-gradient(135deg,#002903,#001502)
   text      #333332   muted #777   bare-<p> body copy #4a4746   border #eee / #ddd
   heading font: Merriweather 700 | body font: Inter 400/500/600
   mobile breakpoint: 820px (mockups are desktop-only; this breakpoint is
   this theme's own addition, not derived from any mockup)
   --------------------------------------------------------------------- */

/* ============ Fonts ============ */
body,
.acta_page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============ Page shell ============ */
body {
	background: #e8e8e8;
}

.acta_page {
	max-width: 1100px;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.acta_topstrip {
	height: 4px;
	background: linear-gradient(90deg, #006b08, #00870a, #006b08);
}

/* ============ Header: toprow + navrow ============ */
.pkp_structure_head.acta_head {
	background: transparent;
	border-bottom: none;
}

.acta_toprow {
	background: #fff;
	padding: 10px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

.acta_toprow_title {
	font-size: 14px;
	color: #333332;
}

.acta_toprow_link,
.acta_toprow_link:hover,
.acta_toprow_link:focus {
	color: #333332;
	text-decoration: none;
}

.acta_toprow_actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.acta_toprow_actions .acta_user_nav {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.acta_toprow_actions .acta_user_nav > li {
	display: inline-block;
	position: relative;
}

.acta_toprow_actions .acta_user_nav a {
	color: #555;
	margin-left: 16px;
	text-decoration: none;
	font-size: 14px;
	display: inline-block;
}

.acta_toprow_actions .acta_user_nav a:hover,
.acta_toprow_actions .acta_user_nav a:focus {
	color: #006b08;
	text-decoration: underline;
}

/* Dropdown items in the user nav (e.g. logged-in Dashboard/Logout) */
.acta_toprow_actions .acta_user_nav ul {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 10em;
	z-index: 1000;
}

.acta_toprow_actions .acta_user_nav li:hover > ul,
.acta_toprow_actions .acta_user_nav li:focus-within > ul {
	display: block;
}

.acta_toprow_actions .acta_user_nav ul a {
	display: block;
	margin: 0;
	padding: 6px 14px;
	white-space: nowrap;
}

.acta_menu_toggle {
	display: none;
	background: none;
	border: none;
	color: #006b08;
	font-size: 18px;
	margin-left: 12px;
	padding: 4px;
	cursor: pointer;
}

.acta_navrow {
	background: #006b08;
	padding: 0 24px;
	display: flex;
	align-items: stretch;
	gap: 0;
}

.acta_navrow #siteNav {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.acta_navrow ul.acta_primary_nav {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acta_navrow .acta_primary_nav li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.acta_navrow .acta_primary_nav > li > a,
.acta_navrow > .acta_search_link {
	color: #fff;
	font-size: 15px;
	padding: 13px 18px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.acta_navrow .acta_primary_nav > li > a:hover,
.acta_navrow .acta_primary_nav > li > a:focus,
.acta_navrow > .acta_search_link:hover,
.acta_navrow > .acta_search_link:focus {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	outline: 0;
}

.acta_navrow > .acta_search_link {
	margin-left: auto;
}

/* Dropdown submenus (About, Submissions) — not in the mockup (which has a
   flat nav); added so the real multi-level menu stays usable, styled to
   match the maroon palette. */
.acta_navrow .acta_primary_nav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14em;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 1000;
}

.acta_navrow .acta_primary_nav li:hover > ul,
.acta_navrow .acta_primary_nav li:focus-within > ul {
	display: block;
}

.acta_navrow .acta_primary_nav ul a {
	display: block;
	color: #333;
	padding: 8px 16px;
	white-space: nowrap;
}

.acta_navrow .acta_primary_nav ul a:hover,
.acta_navrow .acta_primary_nav ul a:focus {
	background: #edf5ee;
	color: #006b08;
}

/* ============ Banner / identity band + accent bar ============ */
.acta_banner {
	position: relative;
	height: 150px;
	overflow: hidden;
	background: linear-gradient(135deg, #002903, #001502);
}

.acta_banner_svg {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 55%;
	opacity: .5;
}

.acta_namecard {
	position: absolute;
	left: 24px;
	top: 22px;
	background: #fff;
	padding: 14px 40px 14px 22px;
	clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
}

.acta_namecard .big {
	font-family: 'Merriweather', serif;
	font-weight: 700;
	font-size: 28px;
	color: #006b08;
}

.acta_namecard .small {
	font-size: 13px;
	color: #00870a;
	font-weight: 600;
	margin-left: 8px;
}

.acta_accent {
	background: #006b08;
	color: #d6e7d7;
	padding: 9px 24px;
	font-size: 13px;
}

/* ============ Main grid: content + sidebar ============
   .pkp_structure_content is the real shared parent of .pkp_structure_main
   and .pkp_structure_sidebar (siblings) — apply the mockup's 2-column grid
   directly to it instead of re-inventing the wrapper markup. */
.pkp_structure_content.has_sidebar {
	display: grid;
	grid-template-columns: 2.3fr 1fr;
	gap: 32px;
	padding: 28px 24px;
	width: auto;
	max-width: none;
	margin: 0;
}

/* The parent theme's own clearfix (content:" "; display:table on ::before/
   ::after) is meant for the old float-based layout. Under display:grid a
   generated pseudo-element with a real `content` value still counts as an
   implicit grid item, which pushed .pkp_structure_main/.pkp_structure_sidebar
   one cell off from where grid-template-columns intended them — main ended
   up in column 2 (sized for the sidebar) and sidebar wrapped to row 2. The
   clearfix itself is also unneeded once children are grid items (floats are
   already ignored by grid layout), so just remove the generated content. */
.pkp_structure_content.has_sidebar::before,
.pkp_structure_content.has_sidebar::after {
	content: none;
	display: none;
}

.pkp_structure_content.has_sidebar .pkp_structure_main,
.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	grid-row: 1;
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}

.pkp_structure_content.has_sidebar .pkp_structure_main {
	grid-column: 1;
}

.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
	grid-column: 2;
}

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

/* ============ Generic page title + breadcrumb ============
   Shared by every new inner page (Archive, Search, static pages) — design
   token: mockup-*.html "h1.page-title" / ".breadcrumb". Selector is
   "h1.acta_page_title" (not bare ".acta_page_title") to match/beat the
   parent theme's own ".pkp_structure_main h1" rule (specificity 0,1,1) —
   the bare class alone (0,1,0) loses that cascade regardless of load
   order; it only LOOKED correct because the parent's 1.714rem happens to
   compute to ~24px too, masking the wrong rule actually winning. */
h1.acta_page_title {
	font-family: 'Merriweather', serif;
	font-size: 24px;
	color: #006b08;
	border-bottom: 2px solid #006b08;
	padding-bottom: 10px;
	margin: 0 0 20px;
}

.cmp_breadcrumbs {
	display: block;
	padding: 14px 24px;
	font-size: 12.5px;
	color: #777;
	border-bottom: 1px solid #eee;
}

.cmp_breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.cmp_breadcrumbs li {
	display: inline;
}

.cmp_breadcrumbs a {
	color: #006b08;
	text-decoration: none;
}

.cmp_breadcrumbs .separator {
	margin: 0 6px;
}

/* ============ Archive ============
   Design token: mockup-archive.html — flat list of issue rows, cover
   thumbnail (or maroon placeholder when the issue has none) + title. */
.acta_archive_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Same double-border pattern already found in the sidebar (see
   CATATAN-KENDALA.md): the parent theme's own issueArchive.less wraps each
   row in an <li> with its OWN border-bottom (#ddd) AND ~30px padding on all
   sides (offset by a matching negative margin on the <ul>, which is why
   horizontal alignment still looked fine) — stacking with
   ".acta_archive_row"'s own border-bottom (#eee) below it to read as two
   close horizontal lines, and adding extra vertical space between rows the
   mockup doesn't have. Reset the <li>/<ul> box model back to zero so
   ".acta_archive_row" (padding:16px 0, single border-bottom) is the only
   box drawing anything, matching mockup-archive.html exactly. */
.page_issue_archive .issues_archive {
	margin-left: 0;
	margin-right: 0;
	border-top: none;
}

.page_issue_archive .issues_archive > li {
	padding: 0;
	border-bottom: none;
}

.acta_archive_row {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

.acta_archive_list li:last-child .acta_archive_row {
	border-bottom: none;
}

.acta_archive_row .acta_archive_cover,
.acta_archive_row .acta_archive_cover_placeholder {
	display: block;
	flex: 0 0 70px;
	width: 70px;
	height: 92px;
	box-sizing: border-box;
}

.acta_archive_cover img {
	width: 70px;
	height: 92px;
	object-fit: cover;
	border: 1px solid #eee;
}

.acta_archive_row .acta_archive_cover_placeholder {
	background: #006b08;
	color: #d6e7d7;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	padding: 4px;
}

.acta_archive_text {
	flex: 1 1 auto;
	min-width: 0;
}

.acta_archive_title {
	font-size: 15px;
	font-weight: 700;
	color: #333332;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}

/* Scoped to .acta_archive_row (co-located with .obj_issue_summary on the
   same element, per issue_summary.tpl) to match the parent theme's
   ".obj_issue_summary .series" specificity — a bare ".acta_archive_series"
   loses that cascade regardless of load order. */
.acta_archive_row .acta_archive_series {
	font-size: 12.5px;
	color: #777;
}

/* ============ Journal Description ============ */
.acta_section_title {
	font-size: 18px;
	color: #4a4746;
	margin: 0 0 16px;
}

.acta_about_row {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid #eee;
}

/* Big cover on its own row above the text (not cropped/thumbnailed —
   natural aspect ratio, width capped so it stays a sensible size on a
   711px-wide column). */
.acta_cover {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 0 16px;
	border: 1px solid #eee;
}

.acta_about_text p {
	font-size: 14px;
	color: #4a4746;
	line-height: 1.75;
	margin: 14px 0;
}

/* The journal's real "description" field already embeds cover-acta.png
   inline (unstyled, at natural size) — hide that copy so only the styled
   .acta_cover thumbnail above shows; avoids the cover appearing twice. */
.acta_about_text img[src*="adminjurnalfh/cover.png"] {
	display: none;
}

/* Small FontAwesome icons for otherwise-plain links in real (admin-managed)
   content — can't add an <i> tag inside that text, so use a ::before with
   the same icon font already loaded for the rest of the theme. */
.acta_about_text a[href*="no-originality-statement-link"]::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f56d"; /* fa-file-arrow-down */
	margin-right: 4px;
	color: #006b08;
}

.pkp_structure_sidebar.acta_sidebar a[href^="https://statcounter.com/p"]::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f201"; /* fa-chart-line */
	margin-right: 4px;
}

/* ============ Current Issue ============ */
/* Selector matches the parent theme's own compiled specificity
   (".pkp_page_index .current_issue .current_issue_title", indexJournal.less
   nested under the body's "pkp_page_index" class) — anything less specific
   loses the cascade and falls back to the parent's bold/@double-spaced
   defaults regardless of load order. */
.pkp_page_index .current_issue .current_issue_title {
	font-size: 13px;
	font-weight: 600;
	color: #4a4746;
	margin: 0 0 2px;
}

.obj_issue_toc .heading {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 11px;
	color: #777;
	margin: 0 0 16px;
}

.obj_issue_toc .heading .pub_id,
.obj_issue_toc .heading .published {
	display: flex;
	gap: 4px;
}

.obj_issue_toc .sections > .section > h3 {
	font-size: 15px;
	font-weight: 600;
	color: #333332;
	margin: 0 0 6px;
}

/* ============ Issue Detail (mockup-issue-detail.html) ============
   h1 (acta_page_title, shared with Archive/Search) shows the short series
   label; this subtitle carries the full descriptive title underneath.
   Meta row (DOI/Published) and "Articles" heading get a page-scoped style
   distinct from the homepage's compact Current Issue treatment of the same
   .obj_issue_toc markup. */
.acta_issue_subtitle {
	font-size: 13px;
	color: #777;
	margin: -10px 0 0;
}

.page_issue .obj_issue_toc .heading {
	font-size: 13px;
	color: #777;
	padding: 14px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin: 10px 0 0;
	gap: 24px;
}

.page_issue .obj_issue_toc .sections > .section > h2 {
	font-size: 16px;
	font-weight: 700;
	color: #333332;
	border-bottom: 2px solid #006b08;
	display: inline-block;
	padding-bottom: 6px;
	margin: 26px 0 12px;
}

/* Parent theme's issue_toc.less gives ".section"/".galleys" a decorative
   "card" treatment at desktop width (30px padding on all sides, negative
   horizontal margin, and a ::before top border line at 45px) — a completely
   different visual concept than the mockup's flat article list, and it was
   silently pushing the "Articles"/"Current Issue" heading ~90px further
   down than the mockup's 26px margin-top. Affects both the Home page's
   Current Issue section and the Issue Detail page (both reuse
   frontend/objects/issue_toc.tpl), so this is intentionally NOT scoped to
   .page_issue only. */
.obj_issue_toc .section,
.obj_issue_toc .galleys {
	margin: 0;
	padding: 0;
}

.obj_issue_toc .section::before,
.obj_issue_toc .galleys::before {
	display: none;
}

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

/* ============ Search (mockup-search.html) ============
   Primary query input + submit button restyled to match the mockup's
   simple search row; the real advanced-filters fieldset (date range,
   author, journal — not shown in the mockup) is kept fully functional,
   just given a plain, unobtrusive style below it. Results list reuses
   frontend/objects/article_summary.tpl (already styled site-wide). */
.acta_search_form .search_input {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

/* ".search_input input.query" needed to beat the parent theme's own
   ".page_search .search_input .query" rule (0,3,0) — the previous
   selector (0,2,1) lost that cascade on the class-count column. */
.acta_search_form .search_input input.query {
	flex: 1 1 auto;
	padding: 9px 12px;
	border: 1px solid #ccc;
	font-size: 14px;
	box-sizing: border-box;
}

.acta_search_submit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 3px;
	background: #006b08;
	color: #fff;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.acta_search_submit:hover {
	background: #005606;
}

.acta_search_form .search_advanced {
	border: 1px solid #eee;
	padding: 12px 16px;
	margin: 0 0 20px;
	font-size: 13px;
	color: #555;
}

.acta_search_form .search_advanced legend {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #777;
	padding: 0 6px;
}

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

/* ============ Static pages (mockup-static-page.html) ============
   One generic template (navigationMenuItemViewContent.tpl) covers every
   custom Navigation Menu Item page — Focus and Scope, Publication Ethics,
   Peer Review Process, Author Guidelines, Open Access Policy, Copyright
   Notice, Plagiarism Check, Publication Frequency, Reviewers, etc. Content
   itself ($content) is real admin-entered HTML, untouched. */
.acta_static_page p,
.acta_static_page li {
	font-size: 14px;
	line-height: 1.75;
	color: #4a4746;
}

.acta_static_page h2 {
	font-size: 16px;
	font-weight: 700;
	color: #333332;
	border-bottom: 2px solid #006b08;
	display: inline-block;
	padding-bottom: 6px;
	margin: 26px 0 12px;
}

/* ============ Contact (mockup-contact.html) ============ */
.acta_contact_table {
	width: 100%;
	max-width: 500px;
	border-collapse: collapse;
	font-size: 13px;
}

.acta_contact_table th,
.acta_contact_table td {
	text-align: left;
	padding: 8px;
	border-bottom: 1px solid #eee;
}

.acta_contact_table th {
	width: 120px;
	color: #333332;
	font-weight: 700;
	vertical-align: top;
}

.page_contact .acta_h,
.page_search .acta_h {
	font-size: 16px;
	font-weight: 700;
	color: #333332;
	border-bottom: 2px solid #006b08;
	display: inline-block;
	padding-bottom: 6px;
	margin: 26px 0 12px;
}

/* Articles */
.obj_article_summary.acta_article {
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

/* ".title" added: ties the parent theme's own ".obj_article_summary > .title"
   rule (2 classes) on raw specificity instead of losing to it outright (this
   was a big contributor to the "loose"/spaced-out feel of every article row
   on Home — margin was silently zeroed, but rendered as if title had no
   bottom margin at all rather than the mockup's tight 6px). */
.title.acta_article_title {
	margin: 0 0 6px;
}

.acta_article_title a {
	font-size: 16px;
	font-weight: 600;
	color: #333332;
	text-decoration: none;
	display: block;
}

.acta_article_title a:hover {
	color: #006b08;
	text-decoration: underline;
}

/* "p." added: matches the parent theme's own ".pkp_structure_main p" rule
   (class+tag) which otherwise wins on specificity and replaces the intended
   tight 5px bottom margin with its own ~20px vertical margin — one of
   several such collisions that made every article row on Home read much
   more loosely spaced than mockup-home.html. */
p.acta_article_doi {
	font-size: 12px;
	color: #777;
	margin: 0 0 5px;
}

.acta_article_doi i,
.acta_downloads i {
	color: #006b08;
}

/* Same "p." fix as .acta_article_doi above — same collision. */
p.acta_article_authors {
	font-size: 13px;
	color: #555;
	margin: 0 0 6px;
}

.acta_article_foot {
	font-size: 13px;
	color: #777;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.acta_article_foot .galleys_links {
	display: contents;
}

.acta_article_foot .galleys_links li {
	display: contents;
}

.obj_galley_link.pdf {
	border: 1px solid #006b08;
	color: #006b08;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 12px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.obj_galley_link.pdf:hover {
	background: #006b08;
	color: #fff;
}

.acta_view_all_issues {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: #00870a;
	text-decoration: none;
}

.acta_view_all_issues:hover {
	text-decoration: underline;
}

/* ============ Article Detail (mockup-article-detail.html) ============
   Single flowing column — replaces the parent theme's two-column
   main_entry/entry_details layout entirely (see article_details.tpl
   override): eyebrow section label, title, authors, action row, meta row,
   abstract, keyword tags, references, How to Cite. */
.acta_article_eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #00870a;
	margin: 0 0 8px;
}

/* "h1." prefix needed to match/beat the parent theme's ".pkp_structure_main
   h1" rule (specificity 0,1,1) — the bare class alone (0,1,0) loses that
   cascade regardless of load order. */
h1.acta_article_detail_title {
	font-family: 'Merriweather', serif;
	font-size: 24px;
	color: #333332;
	line-height: 1.35;
	margin: 0 0 16px;
}

.acta_article_authors_list {
	font-size: 14px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.acta_article_authors_list li {
	margin-bottom: 6px;
}

/* 3-class specificity needed to beat the parent theme's own
   ".obj_article_details .authors .affiliation" rule. */
.acta_article_detail .acta_article_authors_list .affiliation {
	display: block;
	color: #777;
	font-size: 12px;
}

.acta_article_actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.acta_article_actions .obj_galley_link,
.acta_cite_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 3px;
	line-height: 1.2;
}

.acta_article_actions .obj_galley_link {
	background: #006b08;
	color: #fff;
	border: none;
}

.acta_article_actions .obj_galley_link::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f1c1"; /* fa-file-pdf */
}

.acta_article_actions .obj_galley_link:hover {
	background: #005606;
	color: #fff;
}

.acta_cite_btn {
	border: 1px solid #006b08;
	color: #006b08;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
}

.acta_cite_btn:hover {
	background: #f5f0ec;
}

.acta_article_supp_files {
	margin: -10px 0 20px;
	font-size: 13px;
}

.acta_article_supp_files ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acta_article_meta_row {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
	font-size: 13px;
}

.acta_article_meta_row a {
	color: #00870a;
}

.acta_meta_label {
	display: block;
	color: #777;
	font-size: 11px;
	text-transform: uppercase;
}

/* The parent theme's own ".obj_article_details .item .label" rule is
   3 classes (0,3,0) — beats a 2-class + tag selector (0,2,1) outright,
   since the class column is compared before the tag column. These
   h2 elements also carry "label" themselves (<h2 class="acta_h label">),
   so add it here to reach (0,3,1) and win decisively. */
.acta_article_detail h2.acta_h.label {
	font-size: 16px;
	font-weight: 700;
	color: #333332;
	border-bottom: 2px solid #006b08;
	display: inline-block;
	padding-bottom: 6px;
	margin: 26px 0 12px;
}

.acta_article_detail .abstract {
	text-align: justify;
	font-size: 14px;
	line-height: 1.75;
	color: #4a4746;
}

.acta_article_keywords {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.acta_article_keywords li {
	background: #f5f0ec;
	border: 1px solid #eee;
	padding: 4px 10px;
	font-size: 12px;
	color: #006b08;
}

.acta_article_detail .references .value ol,
.acta_article_detail .references ol.value {
	font-size: 12.5px;
	line-height: 1.9;
	color: #555;
	margin: 0;
	padding-left: 1.4em;
}

.acta_how_to_cite {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

/* ============ Sidebar ============ */
/* Mockup's ".side-block" (every mockup-*.html) is ONLY "margin-bottom:24px" —
   no separator border between blocks. The block-container border-bottom
   that used to be here (#eee, borrowed from an unrelated reference site,
   not from the mockup) combined with the header's OWN border-bottom
   (#ddd, right below the block's title — see rule below) to draw TWO
   horizontal lines close together for any short block (Language, ISSN,
   etc.) — the "double line" look. Removed so only the header underline
   (which the mockup does have) remains. */
.pkp_structure_sidebar.acta_sidebar .pkp_block,
.pkp_structure_sidebar.acta_sidebar .acta_side_block {
	margin-bottom: 24px;
	/* Parent theme's sidebar.less sets ".pkp_block{padding:@triple}" (30px
	   all sides) — that was silently adding 30px of extra top/left/right/
	   bottom space to every block, not just visible once the bottom edge
	   was zeroed above. Mockup's ".side-block" has ZERO padding. */
	padding: 0;
}

.pkp_structure_sidebar.acta_sidebar .pkp_block:last-child,
.pkp_structure_sidebar.acta_sidebar .acta_side_block:last-child {
	margin-bottom: 0;
}

/* Block header: the real Custom Blocks give each block ONE visible label —
   either a normal <h2 class="title"> (Language) or, when the <h2> is
   screen-reader-only, a bare <span class="title"> as the very first thing
   inside .block_information (ISSN / Google Scholar Citation / Nationally
   Accredited / Visitor). Scoping to :first-child keeps this from also
   matching every individual link's own .title span further down (e.g. in
   the combined "For Authors" block), which was the actual cause of the
   uneven/bold-link look. */
.pkp_structure_sidebar.acta_sidebar .pkp_block > h2.title:not(.pkp_screen_reader),
.pkp_structure_sidebar.acta_sidebar .block_information > span.title:first-child,
.pkp_structure_sidebar.acta_sidebar .acta_side_h {
	font-size: 14px;
	font-weight: 700;
	color: #333332;
	border-bottom: 1px solid #ddd;
	padding-bottom: 7px;
	margin: 0 0 10px;
	display: block;
}

.pkp_structure_sidebar.acta_sidebar a {
	color: #00870a;
	text-decoration: none;
	font-size: 13px;
}

/* The parent theme's own ".pkp_block .title" rule (sidebar.less) — meant for
   a block's OWN heading — also matches the <span class="title"> that OJS
   custom-block links wrap their label text in (e.g. every link inside the
   combined "For Authors" block: <a><span class="title">Article Submit</span></a>).
   That gave every one of those links' TEXT its own explicit bold/gray/16px
   styling, silently overriding the red/normal-weight/13px color inherited
   from the <a> around it (an inherited value always loses to any explicit
   one, however unrelated). Scoped to "a .title" so it never touches a real
   block header (those are either an <h2.title> or a bare span.title that is
   NOT inside a link). */
.pkp_structure_sidebar.acta_sidebar a .title {
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-family: inherit;
	display: inline;
	margin-bottom: 0;
}

.pkp_structure_sidebar.acta_sidebar a:hover {
	text-decoration: underline;
}

.pkp_structure_sidebar.acta_sidebar .content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_sidebar.acta_sidebar .content p {
	margin: 0 0 8px;
}

/* "For Authors" combined block (id=customblock-sidebarmenu ONLY — the only
   block that packs links, bare labels and logos into one flat run with no
   wrapper divs). flex-wrap turns it into a clean list: each text link/
   label on its own full-width row with even vertical spacing, while the
   Indexing Site logos (the only <a> children that wrap an <img> instead
   of text) pack into a uniform grid within the same wrap flow. Scoped by
   #id, NOT applied to every .block_information, so the ISSN / Google
   Scholar / Nationally Accredited / Visitor blocks (plain <p> content)
   keep their normal block layout untouched. */
#customblock-sidebarmenu .block_information {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

#customblock-sidebarmenu .block_information > a:not(:has(img)) {
	flex: 0 0 100%;
	padding: 5px 0;
	line-height: 1.5;
}

#customblock-sidebarmenu .block_information > span.title {
	flex: 0 0 100%;
}

/* A bare label that ISN'T the block's own :first-child header (i.e.
   "Indexing Site" partway through the combined block — "Originality
   Statement" also matches this, since it has no link of its own in the
   source content) acts as an inline section break. Styled identically to
   every other sidebar block header (mockup shows "Indexing Site" as its
   own separate side-block with the same header treatment as "Editorial
   Team" etc — margin-top substitutes for the 24px gap a real separate
   .side-block would get from the previous block's margin-bottom). */
#customblock-sidebarmenu .block_information > span.title:not(:first-child) {
	margin: 24px 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid #ddd;
	font-size: 14px;
	font-weight: 700;
	color: #333332;
}

/* Indexing Site logo grid: 2 columns, no box framing, left-aligned, uniform height. */
#customblock-sidebarmenu .block_information > a:has(img) {
	flex: 0 0 calc(50% - 8px);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 36px;
	margin: 4px;
	box-sizing: border-box;
}

#customblock-sidebarmenu .block_information > a:has(img) img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	margin: 0;
}

/* Custom Block images in the OTHER blocks (ISSN barcodes, sertifikat,
   ClustrMaps, etc.) — best-effort sizing only; the source HTML for these
   blocks is managed by the journal admin (Custom Block Manager), not this
   theme. */
.pkp_structure_sidebar.acta_sidebar .block_information > p img {
	display: inline-block;
	max-width: 100%;
	margin: 4px 6px 4px 0;
	vertical-align: middle;
}

/* Design token: mockup-*.html shared "Google Scholar Citation" table — same
   font-size/padding/left-align as every other sidebar/contact table in the
   design system (was 11px/2px-vertical-only/right-aligned, matching none
   of them). */
.pkp_structure_sidebar.acta_sidebar #gsc_rsb_st {
	width: 100%;
	font-size: 13px;
	color: #333332;
	border-collapse: collapse;
}

.pkp_structure_sidebar.acta_sidebar #gsc_rsb_st td,
.pkp_structure_sidebar.acta_sidebar #gsc_rsb_st th {
	text-align: left;
	padding: 8px;
	border-bottom: 1px solid #eee;
}

/* Make Submission CTA */
.acta_make_submission {
	background: #006b08;
	color: #fff !important;
	text-align: center;
	padding: 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 3px;
	margin-bottom: 18px;
	display: block;
	text-decoration: none !important;
}

.acta_make_submission:hover {
	background: #005606;
}

/* Editorial team preview. Fully-scoped selector needed: this theme's own
   ".pkp_structure_sidebar.acta_sidebar .content p" rule (3 classes) was
   beating the plain ".acta_editor_text" (1 class) and replacing the intended
   margin:0 with its own 8px bottom margin — a self-inflicted version of the
   same specificity-collision pattern found elsewhere against the parent
   theme, this time between two of this theme's own rules. */
.pkp_structure_sidebar.acta_sidebar .content p.acta_editor_text {
	font-size: 13px;
	color: #4a4746;
	margin: 0;
	line-height: 1.75;
}

.acta_editor_role {
	font-size: 11.5px;
	color: #777;
}

.acta_archive_list {
	font-size: 12px;
	color: #555;
	line-height: 1.9;
	margin: 0;
}

/* ============ Footer ============ */
/* The parent theme's footer.less puts .pkp_structure_footer in the same
   "page container widths" mixin as header/nav (own width + centering
   margin), and the pasted pageFooter HTML (Logo/Address/Contact) uses
   leftover Bootstrap-style .container/.row/.col-md-* classes from wherever
   that markup was originally authored — neither matches this theme's own
   1100px .acta_page frame, which is what made the footer content start
   well to the right of the header/nav/content above it. Reset all of it so
   the footer uses exactly the same box as everything else. */
.pkp_structure_footer_wrapper {
	width: auto;
	max-width: none;
	margin: 0;
}

.pkp_structure_footer {
	background: #006b08;
	color: #d6e7d7;
	padding: 24px;
	width: auto;
	max-width: none;
	margin: 0;
	text-align: left;
}

.pkp_structure_footer .pkp_footer_content {
	width: auto;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content .container {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: auto;
	margin: 0;
}

/* Same clearfix-as-flex-item issue as .pkp_structure_content (see grid
   section above): a generic .row::before/::after clearfix with a real
   `content` value becomes actual flex items once .row is display:flex,
   which was pushing every column inward as if space-evenly, not
   space-between. */
.pkp_structure_footer .pkp_footer_content .row::before,
.pkp_structure_footer .pkp_footer_content .row::after {
	content: none;
	display: none;
}

.pkp_structure_footer .pkp_footer_content [class*="col-"] {
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

.pkp_structure_footer .pkp_footer_content h4 {
	color: #fff;
	font-size: 13px;
	margin: 0 0 5px;
}

.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_footer_content address,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_footer_content div {
	color: #d6e7d7;
	font-size: 13px;
}

.pkp_structure_footer .pkp_footer_content address {
	font-style: normal;
}

.pkp_structure_footer .pkp_footer_content a {
	text-decoration: underline;
}

/* Hide "Platform & workflow by OJS/PKP" branding, per brief */
.pkp_structure_footer .pkp_brand_footer {
	display: none;
}

/* ============ Mobile (breakpoint: 820px — this theme's own addition; the
   mockup-*.html spec files are desktop-only) ============ */
@media (max-width: 820px) {
	body {
		padding: 0;
	}

	.pkp_structure_content.has_sidebar {
		grid-template-columns: 1fr;
		padding: 20px 16px;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_main {
		grid-column: 1;
		grid-row: 1;
	}

	.pkp_structure_content.has_sidebar .pkp_structure_sidebar {
		grid-column: 1;
		grid-row: 2;
	}

	.acta_navrow {
		flex-wrap: wrap;
		display: none;
		padding: 0 16px;
	}

	.acta_navrow.acta_open {
		display: flex;
	}

	.acta_navrow ul.acta_primary_nav {
		flex-direction: column;
		width: 100%;
	}

	.acta_navrow .acta_primary_nav > li {
		width: 100%;
	}

	.acta_navrow .acta_primary_nav > li > a {
		padding: 11px 0;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.acta_navrow .acta_primary_nav ul {
		position: static;
		box-shadow: none;
		border: none;
		background: rgba(0, 0, 0, .15);
	}

	.acta_navrow .acta_primary_nav ul a {
		color: #fff;
		padding-left: 32px;
	}

	.acta_navrow > .acta_search_link {
		margin-left: 0;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.acta_toprow {
		padding: 10px 16px;
		flex-wrap: wrap;
	}

	.acta_menu_toggle {
		display: inline-block;
	}

	.acta_banner {
		height: 150px;
	}

	.acta_namecard {
		left: 14px;
		top: 16px;
		padding: 12px 34px 12px 16px;
	}

	.acta_namecard .big {
		font-size: 26px;
	}

	.acta_namecard .small {
		font-size: 12px;
		margin-left: 6px;
		display: block;
	}

	.acta_accent {
		padding: 9px 16px;
		font-size: 12px;
	}

	.acta_about_row {
		flex-direction: column;
	}

	.pkp_structure_footer {
		padding: 20px 16px;
	}

	.pkp_structure_footer .pkp_footer_content .row {
		flex-direction: column;
		gap: 16px;
	}
}