/* plugins/themes/uhiportal/styles/uhiportal.css
 * UHI Portal — OJS theme derived from the "Sevima Bootstrap" design system
 * mockup (Theme1). Hand-authored, token-driven CSS: no build step required.
 */

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	/* Brand / blue ramp */
	--brand-100: rgb(229, 244, 255);
	--brand-200: rgb(189, 227, 255);
	--brand-300: rgb(128, 202, 255);
	--brand-500: #3954a4;
	--brand-600: #2D46A0;
	--brand-700: #1E3082;
	--brand-800: #0F1F60;
	--brand-900: #07123E;

	/* Neutral / grey */
	--grey-50: rgb(250, 250, 250);
	--grey-100: rgb(245, 245, 245);
	--grey-200: rgb(230, 230, 230);
	--grey-300: rgb(217, 217, 217);
	--grey-400: rgb(160, 160, 160);
	--grey-500: rgb(117, 117, 117);
	--grey-600: rgb(68, 68, 68);
	--grey-700: rgb(56, 56, 56);
	--grey-800: rgb(44, 44, 44);

	/* Semantic */
	--green-200: rgb(207, 247, 211);
	--green-500: rgb(20, 174, 92);
	--green-600: rgb(0, 153, 81);
	--green-700: rgb(7, 131, 72);
	--red-300: rgb(255, 199, 194);
	--red-600: rgb(233, 53, 68);
	--red-700: rgb(208, 37, 51);
	--yellow-500: rgb(246, 181, 30);
	--orange-700: rgb(208, 94, 37);
	--sky-700: rgb(37, 151, 208);
	--purple-200: rgb(241, 229, 255);
	--purple-600: rgb(134, 56, 229);
	--purple-700: rgb(91, 44, 201);
	--warning-subtle: rgb(255, 244, 214);
	--info-subtle: rgb(229, 244, 255);

	/* Semantic aliases */
	--text-strong: var(--grey-800);
	--text-default: var(--grey-700);
	--text-sub: var(--grey-500);
	--text-disabled: var(--grey-400);
	--text-white: #fff;
	--text-brand: var(--brand-500);

	--surface-default: #fff;
	--surface-secondary: var(--grey-100);

	--border-default: var(--grey-200);
	--border-strong: var(--grey-300);
	--border-brand: var(--brand-500);

	--font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(10, 13, 20, 0.04), 0 2px 4px rgba(27, 28, 29, 0.04);
	--shadow-md: 0 2px 4px rgba(27, 28, 29, 0.04), 0 6px 10px rgba(10, 13, 20, 0.06);
	--shadow-lg: 0 4px 6px rgba(10, 13, 20, 0.04), 0 12px 24px rgba(27, 28, 29, 0.08);

	--container-max: 1180px;
	--page-gutter: 32px;
	--hero-gradient: linear-gradient(102deg, rgba(7,18,62,.98) 0%, rgba(30,48,130,.95) 48%, rgba(57,84,164,.9) 100%);
}

@media (max-width: 600px) {
	:root { --page-gutter: 16px; }
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;
	overflow-y: scroll;
}

body {
	margin: 0;
	background: var(--surface-default);
	color: var(--text-default);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: var(--fw-bold);
	letter-spacing: -.02em;
	color: var(--text-strong);
	line-height: 1.25;
	margin: 0 0 12px 0;
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--brand-600); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.pkp_screen_reader {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--brand-300);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.uhp-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
}

.uhp-icon { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   Header — utility bar + sticky brand/search bar + nav row
   ========================================================================== */
.uhp-skip-links a {
	position: absolute; left: -9999px; top: 0;
	background: var(--brand-700); color: #fff;
	padding: 8px 16px; z-index: 100; border-radius: var(--radius-sm);
}
.uhp-skip-links a:focus { left: 16px; top: 16px; }

.uhp-utility-bar {
	border-bottom: 1px solid var(--border-default);
	background: var(--grey-50);
}
.uhp-utility-bar .uhp-container {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; height: 40px; font-size: 12.5px; color: var(--text-sub);
	flex-wrap: wrap;
}
.uhp-utility-left { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.uhp-utility-left .uhp-issn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
.uhp-utility-right { display: flex; gap: 16px; align-items: center; }
.uhp-utility-right a { color: var(--text-sub); }
.uhp-utility-right a.uhp-login { color: var(--text-brand); font-weight: var(--fw-semibold); }
.uhp-utility-right .uhp-nav-list { height: auto; gap: 16px; position: relative; }
.uhp-utility-right .uhp-nav-list li { height: auto; }
.uhp-utility-right .uhp-nav-list li a { height: auto; padding: 0; color: var(--text-sub); }
.uhp-utility-right .uhp-nav-list li a:hover { background: none; color: var(--text-strong); }
.uhp-utility-right .uhp-nav-list > li > ul { top: 26px; }

.uhp-header {
	position: sticky; top: 0; z-index: 40;
	background: var(--surface-default);
	border-bottom: 1px solid var(--border-default);
}
.uhp-header-bar {
	display: flex; align-items: center; gap: 20px; min-height: 66px;
	/* Keep left/right gutters from .uhp-container (same element) */
	padding-top: 10px; padding-bottom: 10px;
}
.uhp-brand {
	display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; min-width: 0;
}
.uhp-brand:hover { text-decoration: none; }
.uhp-brand-mark {
	width: 40px; height: 40px; border-radius: var(--radius-sm);
	background: var(--brand-500); color: #fff; display: grid; place-items: center;
	font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-bold); flex: none;
}
.uhp-brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.uhp-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uhp-brand-title { font-size: 14.5px; font-weight: var(--fw-semibold); letter-spacing: -.01em; line-height: 1.25; color: var(--text-strong); }
.uhp-brand-sub { font-size: 11.5px; color: var(--text-sub); line-height: 1.35; }

.uhp-nav-toggle, .uhp-search-toggle {
	display: none; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--radius-sm);
	background: transparent; border: 1px solid var(--border-default); color: var(--text-default);
	cursor: pointer; flex: none;
}
.uhp-search-toggle { margin-left: auto; }
.uhp-search-toggle:hover, .uhp-nav-toggle:hover { background: var(--grey-100); }

.uhp-header-search { margin-left: auto; flex: 1; max-width: 400px; }
.uhp-search-form { display: flex; align-items: center; gap: 0; }
#uhpSearchFormMobile { display: none; }
.uhp-search-form input[type="text"], .uhp-search-form input[type="search"] {
	flex: 1; height: 34px; border: 1px solid var(--border-default);
	border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	padding: 0 12px; font-family: var(--font-sans); font-size: 13px; background: var(--grey-50);
}
.uhp-search-form input:focus { outline: none; border-color: var(--brand-500); background: #fff; }
.uhp-search-form button {
	height: 34px; width: 38px; border: 1px solid var(--border-default); border-left: none;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--brand-500); color: #fff;
	display: grid; place-items: center; cursor: pointer;
}
.uhp-search-form button:hover { background: var(--brand-600); }

.uhp-nav-row { border-top: 1px solid var(--border-default); }
.uhp-nav-list {
	list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; font-size: 13.5px;
	height: 44px; align-items: center;
}
.uhp-nav-list li { position: relative; height: 100%; display: flex; align-items: center; }
.uhp-nav-list li a {
	padding: 0 12px; height: 44px; display: inline-flex; align-items: center;
	color: var(--text-default); text-decoration: none;
}
.uhp-nav-list li a:hover { color: var(--text-strong); text-decoration: none; background: var(--grey-50); }
.uhp-nav-list li.current > a, .uhp-nav-list li a.current {
	color: var(--text-strong); font-weight: var(--fw-semibold);
	box-shadow: inset 0 -2px 0 var(--brand-500);
}
.uhp-nav-list > li > ul {
	list-style: none; margin: 0; padding: 6px 0; display: none; position: absolute;
	top: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid var(--border-default);
	border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50;
}
.uhp-nav-list > li:hover > ul, .uhp-nav-list > li:focus-within > ul { display: block; }
.uhp-nav-list > li > ul li a { height: auto; padding: 8px 14px; display: block; }

.uhp-nav-drawer, .uhp-search-toggle-form { display: none; }

@media (max-width: 900px) {
	.uhp-nav-toggle, .uhp-search-toggle { display: inline-flex; }
	.uhp-nav-row { display: none; }
	.uhp-header-search { display: none; }
	.uhp-nav-drawer {
		display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--border-default);
	}
	.uhp-nav-drawer.is-open { display: flex; }
	.uhp-nav-drawer .uhp-nav-list { flex-direction: column; height: auto; gap: 0; }
	.uhp-nav-drawer .uhp-nav-list li { height: auto; }
	.uhp-nav-drawer .uhp-nav-list li a { height: auto; padding: 12px 20px; width: 100%; border-bottom: 1px solid var(--border-default); }
	.uhp-nav-drawer .uhp-nav-list > li > ul { position: static; display: block; box-shadow: none; border: none; padding-left: 14px; }
	.uhp-search-form.is-open { display: flex; padding: 12px 20px; }
}

/* ==========================================================================
   Hero band (homepage + issue/archive/etc. sub-hero)
   ========================================================================== */
.uhp-hero {
	position: relative; overflow: hidden; background: var(--brand-800);
}
.uhp-hero-overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(102deg, rgba(7,18,62,.92) 0%, rgba(30,48,130,.84) 46%, rgba(57,84,164,.62) 100%);
}
.uhp-hero-inner {
	position: relative;
	/* Keep left/right gutters from .uhp-container (same element) */
	padding-top: 56px; padding-bottom: 56px;
	display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center;
}
.uhp-hero-eyebrow {
	font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--brand-300); margin-bottom: 14px;
}
.uhp-hero h1 { font-size: 36px; line-height: 1.18; color: var(--text-white); margin-bottom: 16px; max-width: 24ch; }
.uhp-hero p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.82); max-width: 58ch; margin: 0 0 26px; }
.uhp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.uhp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 40px; padding: 0 18px; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; border: 1px solid transparent;
	background: var(--brand-500); color: #fff; text-decoration: none; box-shadow: var(--shadow-sm);
}
.uhp-btn:hover { background: var(--brand-600); color: #fff; text-decoration: none; }
.uhp-btn.uhp-btn-light { background: #fff; color: var(--brand-700); box-shadow: 0 8px 20px rgba(7,18,62,.28); }
.uhp-btn.uhp-btn-light:hover { background: var(--brand-100); color: var(--brand-800); }
.uhp-btn.uhp-btn-outline-invert {
	background: transparent; border-color: rgba(255,255,255,.45); color: #fff;
}
.uhp-btn.uhp-btn-outline-invert:hover { background: rgba(255,255,255,.12); color: #fff; }
.uhp-btn.uhp-btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text-default); }
.uhp-btn.uhp-btn-outline:hover { background: var(--grey-50); color: var(--text-strong); }
.uhp-btn.uhp-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.uhp-btn.uhp-btn-xs { height: 28px; padding: 0 12px; font-size: 12.5px; }
.uhp-btn.uhp-btn-full { width: 100%; }

/* Current-issue card sitting on top of the hero */
.uhp-hero-issue-card {
	border-radius: var(--radius-lg); padding: 20px; background: var(--surface-default);
	box-shadow: 0 18px 44px rgba(7,18,62,.34);
}
.uhp-hero-issue-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 14px; }
.uhp-hero-issue-row { display: flex; gap: 16px; align-items: flex-start; }
.uhp-hero-issue-cover { width: 88px; height: 120px; border-radius: 6px; border: 1px solid var(--border-default); overflow: hidden; flex: none; background: var(--brand-100); }
.uhp-hero-issue-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uhp-hero-issue-cover-fallback {
	display: grid; place-items: center; background: linear-gradient(160deg, var(--brand-700), var(--brand-500));
	color: #fff; font-family: var(--font-mono); font-size: 16px; font-weight: var(--fw-bold); letter-spacing: .06em;
}
.uhp-hero-issue-title { font-size: 14.5px; font-weight: var(--fw-semibold); line-height: 1.35; letter-spacing: -.01em; margin-bottom: 6px; color: var(--text-strong); }
.uhp-hero-issue-desc { font-size: 13px; color: var(--text-default); line-height: 1.5; margin-bottom: 10px; }
.uhp-hero-divider { height: 1px; background: var(--border-default); margin: 18px 0; }
.uhp-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.uhp-hero-stat-num { font-family: var(--font-mono); font-size: 19px; color: var(--text-strong); }
.uhp-hero-stat-num.success { color: var(--green-700); }
.uhp-hero-stat-label { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }

/* Sub-hero used on interior pages (Arsip/Terkini/Pengumuman/Tentang/etc.) */
.uhp-subhero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--hero-gradient);
}
.uhp-subhero .uhp-hero-overlay {
	/* Keep gradient overlay clipped to this section only */
	position: absolute;
	inset: 0;
	z-index: 0;
}
.uhp-subhero > .uhp-container {
	position: relative;
	z-index: 1;
}
.uhp-subhero-plain { background: var(--grey-50); border-bottom: 1px solid var(--border-default); }
.uhp-subhero .uhp-container, .uhp-subhero-plain .uhp-container { padding-top: 26px; padding-bottom: 30px; }
.uhp-subhero h1 { color: var(--text-white); font-size: 30px; margin-bottom: 10px; }
.uhp-subhero-plain h1 { color: var(--text-strong); font-size: 30px; margin-bottom: 10px; }
.uhp-subhero p { color: rgba(255,255,255,.82); font-size: 14.5px; max-width: 62ch; margin: 0; }
.uhp-subhero-plain p { color: var(--text-sub); font-size: 14.5px; max-width: 62ch; margin: 0; }

@media (max-width: 900px) {
	.uhp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.uhp-breadcrumbs, .cmp_breadcrumbs {
	display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 16px; flex-wrap: wrap;
}
.uhp-subhero .uhp-breadcrumbs, .uhp-subhero .cmp_breadcrumbs { color: rgba(255,255,255,.68); }
.uhp-subhero .uhp-breadcrumbs a, .uhp-subhero .cmp_breadcrumbs a { color: rgba(255,255,255,.68); }
.uhp-subhero-plain .uhp-breadcrumbs, .uhp-subhero-plain .cmp_breadcrumbs,
.uhp-breadcrumbs, .cmp_breadcrumbs { color: var(--text-sub); }
.uhp-breadcrumbs a, .cmp_breadcrumbs a { color: var(--text-sub); }
.cmp_breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.cmp_breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.cmp_breadcrumbs .separator { color: var(--border-strong); }
.cmp_breadcrumbs .current span { color: var(--text-strong); font-weight: var(--fw-semibold); }
.uhp-subhero .cmp_breadcrumbs .current span { color: #fff; }

/* ==========================================================================
   Layout: content + sidebar
   ========================================================================== */
.uhp-layout {
	max-width: var(--container-max); margin: 0 auto;
	padding: 40px var(--page-gutter) 60px;
	display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start;
}
.uhp-layout.uhp-layout-narrow-side { grid-template-columns: 1fr 280px; }
.uhp-layout.uhp-layout-wide-side { grid-template-columns: 1fr 360px; }
.uhp-layout.uhp-layout-nav-side { grid-template-columns: 220px 1fr; }
.uhp-layout.uhp-layout-filters { grid-template-columns: 236px 1fr; gap: 40px; }
.uhp-main { min-width: 0; }
.uhp-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; }

@media (max-width: 960px) {
	.uhp-layout, .uhp-layout.uhp-layout-narrow-side, .uhp-layout.uhp-layout-wide-side,
	.uhp-layout.uhp-layout-nav-side, .uhp-layout.uhp-layout-filters {
		grid-template-columns: 1fr;
	}
	.uhp-aside { position: static; }
}

.uhp-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.uhp-section-heading h2 { font-size: 21px; margin: 0; }
.uhp-section-sub { font-size: 13.5px; color: var(--text-sub); margin: 0 0 20px; }
.uhp-more-link { font-size: 13px; font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* Content band under a full-bleed sub-hero (archive, announcements, etc.) */
.uhp-page-body {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 36px var(--page-gutter) 60px;
	background: var(--surface-default);
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.uhp-card {
	background: var(--surface-default); border: 1px solid var(--border-default);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px;
}
.uhp-card-hover:hover, a.uhp-card-hover-link:hover .uhp-card { box-shadow: var(--shadow-lg); }
.uhp-card-tight { padding: 16px 18px; }
.uhp-card-flush { padding: 0; overflow: hidden; }

.uhp-tint-card {
	border-radius: var(--radius-lg); padding: 18px; background: var(--grey-50); border: 1px solid var(--border-default);
}
.uhp-cta-card {
	border-radius: var(--radius-lg); padding: 18px; background: var(--brand-100); border: 1px solid var(--brand-200, var(--border-default));
}
.uhp-cta-card p { color: var(--brand-700); }
.uhp-card-title { font-size: 13.5px; font-weight: var(--fw-semibold); margin-bottom: 14px; letter-spacing: -.01em; color: var(--text-strong); }
.uhp-kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.uhp-kv-row + .uhp-kv-row { margin-top: 10px; }
.uhp-kv-row span:first-child { color: var(--text-sub); }
.uhp-kv-list { display: flex; flex-direction: column; gap: 10px; }
.uhp-divider { height: 1px; background: var(--border-default); }

/* ==========================================================================
   Badges
   ========================================================================== */
.uhp-badge {
	display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 10px;
	border-radius: var(--radius-full); font-size: 11.5px; font-weight: var(--fw-medium);
	white-space: nowrap; line-height: 1;
}
.uhp-badge.md { height: 24px; padding: 0 12px; font-size: 12px; }
.uhp-badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.uhp-badge.brand { background: var(--brand-100); color: var(--brand-700); }
.uhp-badge.success { background: var(--green-200); color: var(--green-700); }
.uhp-badge.warning { background: var(--warning-subtle); color: var(--orange-700); }
.uhp-badge.purple { background: var(--purple-200); color: var(--purple-700); }
.uhp-badge.neutral { background: var(--grey-100); color: var(--text-sub); }
.uhp-badge.outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-default); }

/* ==========================================================================
   Article / issue card listings
   ========================================================================== */
.uhp-list { display: flex; flex-direction: column; gap: 10px; }
.uhp-article-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; }
.uhp-article-card .meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.uhp-article-card .code { font-family: var(--font-mono); font-size: 11px; color: var(--text-disabled); }
.uhp-article-card h3 { font-size: 15.5px; line-height: 1.45; font-weight: var(--fw-semibold); letter-spacing: -.01em; margin: 0 0 8px; }
.uhp-article-card h3 a { color: var(--text-strong); }
.uhp-article-card .authors { font-size: 12.5px; color: var(--text-default); margin-bottom: 10px; }
.uhp-article-card .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uhp-article-card .actions .cmp_galley_link, .uhp-article-card .actions a {
	display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 12.5px;
	font-weight: var(--fw-medium); color: var(--text-default); text-decoration: none;
}
.uhp-article-card .actions .cmp_galley_link:hover, .uhp-article-card .actions a:hover { background: var(--grey-50); text-decoration: none; }
.uhp-article-card .downloads { font-size: 11.5px; color: var(--text-disabled); margin-left: 4px; }
.uhp-article-cover { width: 58px; height: 76px; border-radius: 6px; border: 1px solid var(--border-default); overflow: hidden; flex: none; }
.uhp-article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uhp-article-cover-fallback {
	display: grid; place-items: center; background: var(--grey-100); color: var(--text-sub);
	font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em;
}

.uhp-grid { display: grid; gap: 20px; }
.uhp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.uhp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.uhp-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .uhp-grid-3, .uhp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .uhp-grid-2, .uhp-grid-3, .uhp-grid-4 { grid-template-columns: 1fr; } }

.uhp-issue-card { display: block; text-decoration: none; }
.uhp-issue-card:hover { text-decoration: none; }
.uhp-issue-cover { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; border-bottom: 1px solid var(--border-default); }
.uhp-issue-cover img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
.uhp-issue-cover-placeholder {
	aspect-ratio: 3/4; background: var(--brand-100); display: grid; place-items: center; color: var(--brand-500); text-align: center;
	border-bottom: 1px solid var(--border-default);
}
.uhp-issue-body { padding: 14px 16px 16px; }
.uhp-issue-title { font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--text-strong); margin: 10px 0 4px; line-height: 1.4; }
.uhp-issue-meta { font-size: 12px; color: var(--text-sub); }

.uhp-feature-card { text-align: left; }
.uhp-feature-icon {
	width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--brand-100);
	display: grid; place-items: center; margin-bottom: 12px; color: var(--brand-500);
}
.uhp-feature-icon.green { background: var(--green-200); color: var(--green-700); }
.uhp-feature-card h3 { font-size: 14px; margin-bottom: 6px; }
.uhp-feature-card p { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ==========================================================================
   Alerts / notifications
   ========================================================================== */
.uhp-alert, .cmp_notification {
	display: flex; gap: 12px; border-radius: var(--radius-lg); padding: 16px 18px;
	background: var(--info-subtle); border: 1px solid var(--brand-200, var(--border-default)); margin-bottom: 20px;
}
.uhp-alert .title, .cmp_notification .title { font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 4px; }
.uhp-alert p, .cmp_notification p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-default); }
.cmp_notification.notice { background: var(--warning-subtle); border-color: var(--yellow-500); }

/* ==========================================================================
   Stats band (kept for pages that want a full-width variant)
   ========================================================================== */
.uhp-stats-band { background: var(--brand-800); color: #fff; padding: 40px 0; }
.uhp-stats-band .uhp-grid-4 { text-align: center; }
.uhp-stats-band .uhp-hero-stat-num { color: var(--brand-300); font-size: 26px; }
.uhp-stats-band .uhp-hero-stat-label { color: rgba(255,255,255,.75); }

/* ==========================================================================
   Steps / timeline
   ========================================================================== */
.uhp-steps { display: flex; flex-direction: column; }
.uhp-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border-default); }
.uhp-step:first-child { padding-top: 0; }
.uhp-step:last-child { border-bottom: none; padding-bottom: 0; }
.uhp-step-num {
	width: 28px; height: 28px; border-radius: 999px; background: var(--brand-500); color: #fff;
	display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; flex: none;
}
.uhp-step-title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); margin-bottom: 4px; }
.uhp-step-desc { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-default); }

.uhp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.uhp-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.uhp-checklist .uhp-icon { color: var(--green-600); flex: none; margin-top: 1px; }
.uhp-checklist p, .uhp-checklist li { font-size: 14px; line-height: 1.65; color: var(--text-default); margin: 0; }
/* The submission checklist is rendered by core as a single HTML blob (a <ul>
   of plain <li> items) — restyle it the same way without needing to loop it. */
.uhp-checklist-html ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.uhp-checklist-html ul li {
	position: relative; padding-left: 30px; font-size: 14px; line-height: 1.65; color: var(--text-default);
}
.uhp-checklist-html ul li::before {
	content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 999px;
	background: var(--green-200);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078348' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 11px;
}

/* ==========================================================================
   Forms (login, register, contact, search filters — core .cmp_form markup)
   ========================================================================== */
.cmp_form {
	background: var(--surface-default);
}
.cmp_form fieldset { border: none; margin: 0 0 20px 0; padding: 0; }
.cmp_form fieldset:last-of-type { margin-bottom: 0; }
.cmp_form legend { font-weight: var(--fw-semibold); font-size: 15px; color: var(--text-strong); width: 100%; margin-bottom: 4px; }
.cmp_form .fields { display: flex; flex-direction: column; gap: 14px; }
.cmp_form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cmp_form label .label { font-weight: var(--fw-medium); color: var(--text-strong); }
.cmp_form .required { color: var(--red-600); margin-left: 2px; }
.cmp_form input[type="text"], .cmp_form input[type="email"], .cmp_form input[type="password"],
.cmp_form input[type="number"], .cmp_form input[type="search"], .cmp_form select, .cmp_form textarea {
	height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm); background: var(--surface-default); color: var(--text-strong);
	font-family: var(--font-sans); font-size: 14px;
}
.cmp_form textarea { height: auto; min-height: 100px; padding: 10px 12px; resize: vertical; }
.cmp_form input:focus, .cmp_form select:focus, .cmp_form textarea:focus {
	outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.cmp_form .checkbox label, .cmp_form .optin label, .cmp_form .radio label {
	flex-direction: row; align-items: flex-start; gap: 8px; font-weight: var(--fw-regular);
}
.cmp_form .checkbox input, .cmp_form .optin input, .cmp_form .radio input {
	height: auto; width: auto; margin-top: 3px; flex: none;
}
.cmp_form .password a { font-size: 13px; margin-top: 4px; }
.cmp_form .buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cmp_form .buttons button.submit, .cmp_form button[type="submit"] {
	height: 40px; padding: 0 20px; background: var(--brand-500); color: #fff; border: none;
	border-radius: var(--radius-sm); font-weight: var(--fw-semibold); cursor: pointer; font-size: 14px;
}
.cmp_form .buttons button.submit:hover, .cmp_form button[type="submit"]:hover { background: var(--brand-600); }

#formErrors, .cmp_form .pkp_form_error {
	display: block; background: #fff1f1; border: 1px solid var(--red-300); border-left: 4px solid var(--red-600);
	border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; color: var(--red-700); font-size: 13.5px;
}
#formErrors .pkp_form_error_list { list-style: none; margin: 6px 0 0; padding: 0; }
#formErrors .pkp_form_error_list a { color: var(--red-700); text-decoration: underline; }

/* Auth pages (login/register) reuse the interior card layout; give the
   generic .page a comfortable measure. */
.page_login .cmp_form, .page_register .cmp_form, .page_contact .cmp_form {
	max-width: 640px; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); padding: 24px;
}

/* ==========================================================================
   Generic "page" wrapper — used by core pages we do not override
   (about, contact, login, register, announcements(single), search, article)
   ========================================================================== */
.pkp_structure_main > .page {
	max-width: var(--container-max); margin: 0 auto;
	padding: 30px var(--page-gutter) 60px;
}
.pkp_structure_main > .page > h1 { font-size: 28px; margin-top: 6px; }
.pkp_structure_main > .page > p { max-width: 75ch; }

/* Theme-managed pages already apply gutters via .uhp-container / .uhp-layout.
   Reset the generic .page inset so full-bleed heroes stay edge-to-edge while
   inner containers keep horizontal padding. */
.pkp_structure_main > .page_index_journal,
.pkp_structure_main > .page.page_issue,
.pkp_structure_main > .page.page_issue_archive,
.pkp_structure_main > .page.page_announcements,
.pkp_structure_main > .page.page_submissions {
	max-width: none;
	padding: 0;
	background: var(--surface-default);
}

/* Ensure content below the sub-hero sits on white, never under the hero overlay */
.page_announcements .uhp-page-body,
.page_issue_archive .uhp-page-body,
.page_submissions .uhp-layout,
.page_issue .uhp-layout,
.obj_issue_toc .uhp-layout,
.page_index_journal .uhp-layout {
	background: var(--surface-default);
	position: relative;
	z-index: 1;
}

/* Contact page */
.page_contact .contact_section { display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin-top: 10px; }
.page_contact .contact, .page_contact .address {
	background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	padding: 18px; box-shadow: var(--shadow-sm);
}
.page_contact h3 { font-size: 14.5px; margin-bottom: 10px; }
.page_contact .label { color: var(--text-sub); font-size: 11.5px; margin-right: 6px; }

/* Article page (core article_details.tpl classes) */
.obj_article_details { max-width: none; }
.obj_article_details .page_title { font-size: 28px; max-width: 34ch; margin-bottom: 8px; }
.obj_article_details .subtitle { font-size: 16px; font-weight: var(--fw-medium); color: var(--text-sub); margin-bottom: 16px; }
.obj_article_details .row { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; margin-top: 20px; }
.obj_article_details .main_entry { min-width: 0; max-width: 70ch; }
.obj_article_details .entry_details { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px; }
.obj_article_details .entry_details .item {
	background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	padding: 18px; box-shadow: var(--shadow-sm);
}
.obj_article_details .item { margin-bottom: 22px; padding-top: 0; border-top: 1px solid var(--border-default); padding-top: 22px; }
.obj_article_details .main_entry .item:first-child { border-top: none; padding-top: 0; }
.obj_article_details .item .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 10px; }
.obj_article_details .item.abstract { font-size: 14.5px; line-height: 1.75; }
.obj_article_details .authors ul, .obj_article_details ul.authors { list-style: none; margin: 0; padding: 0; }
.obj_article_details .authors .name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.obj_article_details .authors .affiliation { color: var(--text-sub); font-size: 13px; }
.obj_article_details .keywords .value { display: flex; flex-wrap: wrap; gap: 8px; }
.obj_article_details .references .value p { font-size: 13.5px; line-height: 1.65; color: var(--text-default); }
.obj_article_details .galleys_links, .obj_article_details .supplementary_galleys_links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.obj_article_details .galleys .cmp_galley_link {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; width: 100%; padding: 0 16px;
	background: var(--brand-500); color: #fff; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); font-size: 14px;
}
.obj_article_details .galleys .cmp_galley_link:hover { background: var(--brand-600); text-decoration: none; }
.obj_article_details .sub_item + .sub_item { margin-top: 10px; }
.obj_article_details .citation_display .value { font-size: 13px; line-height: 1.7; background: var(--grey-50); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px; }
.obj_article_details .citation_formats_button {
	margin-top: 10px; height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	background: transparent; font-size: 12.5px; cursor: pointer;
}
@media (max-width: 960px) {
	.obj_article_details .row { grid-template-columns: 1fr; }
	.obj_article_details .entry_details { position: static; }
}

/* Announcements */
.cmp_announcements { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.obj_announcement_summary {
	background: var(--surface-default); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	padding: 20px; box-shadow: var(--shadow-sm);
}
.obj_announcement_summary h2 { font-size: 18px; margin-bottom: 10px; }
.obj_announcement_summary .date { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-sub); margin-bottom: 10px; }
.obj_announcement_summary .summary { font-size: 13.5px; line-height: 1.7; color: var(--text-default); }
.obj_announcement_summary .read_more { display: inline-flex; margin-left: 6px; font-weight: var(--fw-semibold); }

/* Search page */
.page_search .cmp_form { max-width: 720px; padding: 20px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 16px 0 30px; }
.page_search .search_input input.query { height: 44px; font-size: 15px; }
.page_search .search_advanced { border: none; padding: 16px 0 0; margin-top: 16px; border-top: 1px solid var(--border-default); }
.page_search .search_advanced legend { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-sub); text-transform: uppercase; letter-spacing: .06em; }
.page_search .date_range { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page_search .submit { margin-top: 16px; }
.page_search ul.search_results { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* About page */
.page_about h2 { font-size: 20px; }
.page_about .value, .page_about > div { max-width: 72ch; font-size: 14.5px; line-height: 1.75; }

/* Empty state */
.uhp-empty { text-align: center; padding: 48px 20px; color: var(--text-sub); }

/* ==========================================================================
   Pagination
   ========================================================================== */
.uhp-pagination, .cmp_pagination {
	display: flex; align-items: center; justify-content: center; gap: 12px; padding: 28px 0 0; font-size: 13px;
}
.cmp_pagination a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); }
.cmp_pagination .current { color: var(--text-sub); }

/* ==========================================================================
   Footer
   ========================================================================== */
.uhp-footer { border-top: 1px solid var(--border-default); background: var(--grey-50); }
.uhp-footer-grid { padding: 44px 0 26px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.uhp-footer-grid h4 { font-size: 14px; margin-bottom: 10px; color: var(--text-strong); }
.uhp-footer-grid p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-default); max-width: 46ch; }
.uhp-footer-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 12px; }
.uhp-footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.uhp-footer-links a { color: var(--text-default); }
.uhp-footer-contact { font-size: 13px; line-height: 1.7; color: var(--text-default); }
.uhp-footer-bottom {
	border-top: 1px solid var(--border-default); padding: 16px 0; display: flex; justify-content: space-between;
	gap: 16px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap;
}
@media (max-width: 900px) {
	.uhp-footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* No horizontal scroll safety net — do NOT override .uhp-container / .uhp-layout
   max-width (those need --container-max for centered gutters). */
.pkp_structure_page { max-width: 100%; overflow-x: clip; }
.uhp-grid { max-width: 100%; }

/* Site index and other non-.page wrappers that lack theme containers */
.pkp_structure_main > .page_index_site {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 30px var(--page-gutter) 60px;
}