/* =============================================
   Gentar News - Global styles
   Dimuat di semua halaman. Berisi:
     1. Design tokens, reset, layout dasar
     2. Header (top bar, branding, menu, tools, drawer)
     3. Footer
   Catatan: file ini sengaja digabung agar browser tidak memuat
   banyak file CSS. CSS spesifik halaman dimuat terpisah:
   single.css, page.css, archive.css, home.css, 404.css.
   ============================================= */

/* ============================================================
   1. BASE
   ============================================================ */

:root {
	--color-accent: #c8102e;
	--color-link: #c8102e;
	--color-text: #1a1a1a;
	--color-muted: #6b7280;
	--color-border: #e5e7eb;
	--color-bg: #ffffff;
	--color-bg-alt: #f7f7f8;
	--color-dark: #111418;

	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: "Georgia", "Times New Roman", serif;

	--container: 1200px;
	--gap: 24px;
	--radius: 6px;

	--header-logo-height: 48px;
	--header-logo-width: auto;
	--drawer-width: 300px;
	--header-sub-height: 42px;
	--header-sub-separator: rgba(0, 0, 0, 0.14);

	/* Chevron icon for dropdown parent items (matches the theme's line icons). */
	--chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

	color-scheme: light;
}

/* Header logo sizing driven from the Customizer. */
.site-branding .custom-logo {
	height: var(--header-logo-height);
	width: var(--header-logo-width);
	display: block;
}

/* Drawer body lock. */
body.drawer-open {
	overflow: hidden;
}

/* Dark mode token overrides. Toggled by adding .gentar-dark to <html>. */
html.gentar-dark {
	--color-text: #e7e9ee;
	--color-muted: #9aa1ad;
	--color-border: #2a3038;
	--color-bg: #12161b;
	--color-bg-alt: #1a1f26;
	--color-dark: #0d1014;
	--color-link: #ff5d74;
	--header-sub-separator: rgba(255, 255, 255, 0.16);

	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	line-height: 1.25;
	font-family: var(--font-heading);
	font-weight: 700;
}

p {
	margin: 0 0 1em;
}

/* Container */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/*
 * Mobile gutters.
 *
 * Every full-width band (header, sub header, search, ad slot, content,
 * footer) wraps its own `.container`, so overriding the container padding
 * here keeps the left/right edge identical from header through footer
 * instead of editing each band separately.
 */
@media (max-width: 860px) {
	.container {
		padding-inline: 16px;
	}
}

/* Layout */
.main-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	padding: 32px 0;
}

body.no-sidebar .main-content-layout {
	grid-template-columns: minmax(0, 1fr);
}

.site-content {
	min-height: 50vh;
}

/* Section titles */
.section-title {
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-left: 4px solid var(--color-accent);
	padding-left: 12px;
	margin-bottom: 20px;
}

/* Grid posts: dipakai di home, archive, search, dan related posts. */
.grid-posts-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--gap);
}

.grid-post {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease;
}

.grid-post:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.grid-post-thumbnail {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-alt);
	overflow: hidden;
}

.grid-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grid-post-content {
	padding: 14px 16px 18px;
}

.post-category {
	display: inline-block;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}

.grid-post-title {
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.grid-post-title a {
	color: var(--color-text);
}

.grid-post-title a:hover {
	color: var(--color-accent);
}

.post-date {
	color: var(--color-muted);
	font-size: 0.8rem;
}

/* Entry content: dipakai single dan static page. */
.entry-meta {
	color: var(--color-muted);
	font-size: 0.8rem;
}

.entry-content {
	font-size: 1.0625rem;
}

.entry-content > * + * {
	margin-top: 1em;
}

.entry-title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.entry-thumbnail {
	margin: 0 0 24px;
}

.entry-thumbnail figcaption,
.wp-caption-text {
	font-size: 0.8rem;
	color: var(--color-muted);
	padding-top: 6px;
}

/* Pagination */
.pagination,
.navigation.pagination {
	margin: 32px 0;
}

.pagination .nav-links,
.navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers,
.navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
}

.pagination .page-numbers.current,
.navigation .page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* Buttons */
.button,
input[type="submit"] {
	display: inline-block;
	background: var(--color-accent);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 10px 20px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	cursor: pointer;
}

.button:hover,
input[type="submit"]:hover {
	background: #a30d25;
	color: #fff;
	text-decoration: none;
}

/* Search form */
.search-form {
	display: flex;
	gap: 8px;
}

.search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 0.95rem;
}

.search-submit {
	background: var(--color-accent);
	color: #fff;
	border: 0;
	padding: 10px 18px;
	border-radius: var(--radius);
	cursor: pointer;
	font-size: 0.9rem;
}

/* Widgets */
.widget {
	margin-bottom: 32px;
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-accent);
	margin-bottom: 14px;
}

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

.widget ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
	border-bottom: 0;
}

/* Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	background: #fff;
	color: var(--color-text);
	padding: 12px 16px;
	border-radius: var(--radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Responsive layout */
@media (max-width: 1140px) {
	.main-content-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
	}
}

@media (max-width: 860px) {
	.main-content-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar {
		margin-top: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* Only dampen decorative motion (transforms, long transitions, keyframe
	   animations) instead of blanking every transition globally, so state
	   changes such as colour/opacity feedback still read as intentional. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-property: color, background-color, border-color, opacity !important;
		transition-duration: 0.15s !important;
	}

	/* Header affordances stay animated: they communicate state, not flourish. */
	.main-navigation .menu > li > a::before,
	.darkmode-thumb,
	.mobile-drawer-panel,
	.menu-toggle-icon,
	.menu-toggle-icon::before,
	.menu-toggle-icon::after {
		transition-property: transform, opacity, background-color !important;
		transition-duration: 0.3s !important;
	}

	.main-navigation .menu > li.menu-item-has-children > a::after {
		transition-property: transform !important;
	}
}


/* ============================================================
   2. HEADER
   Desktop (kiri ke kanan): logo, menu, search icon, dark mode.
   Mobile  (kiri ke kanan): hamburger, logo, search icon, dark mode.
   ============================================================ */

/* Top bar */
.top-bar {
	background: var(--color-dark);
	color: #d6d8dc;
	font-size: 0.8rem;
}

.top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	gap: 16px;
}

.top-bar .top-menu {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.top-bar a {
	color: #d6d8dc;
}

.top-bar a:hover {
	color: #fff;
}

/* Header main */
.site-header {
	position: relative;
	z-index: 50;
}

.header-main-inner {
	display: flex;
	align-items: center;
	/* Left to right: branding, horizontal menu, tools (search, dark mode). */
	gap: 24px;
	/* padding-block only: the horizontal padding comes from `.container` and
	   must stay in sync with `.header-sub__inner`. */
	padding-block: 14px;
	min-height: 76px;
}

/* Header layout variants from the Customizer (`gentar_header_layout`).
   Desktop only; mobile always stacks as hamburger, logo, search, dark mode. */
@media (min-width: 861px) {
	/* Logo Tengah (centered): two rows, branding on top, menu below. */
	.site-header.header-centered .header-main-inner {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 6px;
		padding-block: 18px;
	}

	.site-header.header-centered .site-branding {
		flex: 1 0 100%;
		display: flex;
		justify-content: center;
		text-align: center;
	}

	.site-header.header-centered .main-navigation {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}

	.site-header.header-centered .main-navigation .menu {
		justify-content: center;
	}

	/* Tools (search, dark mode) pinned to the top-right of the first row. */
	.site-header.header-centered .header-tools {
		order: -1;
		align-self: flex-start;
		margin-left: auto;
	}

	/* Logo Kiri (inline): single row, branding, menu, tools. */
	.site-header.header-inline .site-branding {
		flex: 0 1 auto;
	}

	.site-header.header-inline .main-navigation {
		flex: 1 1 auto;
	}

	.site-header.header-inline .main-navigation .menu {
		justify-content: flex-start;
	}
}

/* Logo sits flush with the left edge of the container when the menu follows
   inline, so the branding and the first menu item share the same baseline. */
.site-branding {
	flex: 0 1 auto;
	min-width: 0;
	/* Trim the display-font leadings so the logo box lines up optically with the
	   first menu item instead of floating a few pixels lower. */
	display: flex;
	align-items: center;
}

/* Flush-left menu: cancel the 10px inline padding of the first link so the
   menu text starts on the same vertical line as the logo. Scoped to desktop,
   where the menu sits inline with the branding. */
@media (min-width: 861px) {
	.site-header.header-inline .main-navigation .menu > li:first-child > a,
	.site-header:not(.header-centered):not(.header-inline) .main-navigation .menu > li:first-child > a {
		margin-left: -10px;
	}

	.site-header.header-centered .header-main-inner {
		column-gap: 24px;
	}
}

.site-branding .custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.custom-logo {
	display: block;
	height: var(--header-logo-height);
	width: var(--header-logo-width);
	max-width: 100%;
	max-height: var(--header-logo-height);
	object-fit: contain;
	flex-shrink: 0;
}

/* Text fallback when no logo is set. */
.site-title {
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.site-title a {
	color: var(--color-text);
}

.site-description {
	margin: 2px 0 0;
	color: var(--color-muted);
	font-size: 0.8rem;
	line-height: 1.3;
}

/* Tools column: search icon then dark mode toggle, aligned to the right edge. */
.header-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	margin-left: auto;
}

.header-tools .search-toggle {
	order: 1;
}

.header-tools .darkmode-toggle {
	order: 2;
}

.header-tools .menu-toggle {
	order: 3;
	display: none;
}

/* Icon buttons: no border, no background, no rounding ---------------------- */
.header-tools .icon-button,
.header-tools .search-toggle,
.mobile-drawer-close {
	background: none;
	border: 0;
	border-radius: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

.menu-toggle {
	background: none;
	border: 0;
	border-radius: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
}

/* Dark mode switch ------------------------------------------------------- */
.darkmode-toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--color-text);
}

.darkmode-track {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.darkmode-toggle:hover .darkmode-track {
	border-color: var(--color-accent);
}

/* Thumb: the only animated element, so the motion stays fluid. */
.darkmode-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform;
}

html.gentar-dark .darkmode-thumb {
	transform: translateX(30px);
}

/* Icons sit fixed on both ends of the track; only the thumb moves. */
.darkmode-track .icon-sun,
.darkmode-track .icon-moon {
	position: absolute;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	z-index: 1;
	stroke: var(--color-muted);
	transition: stroke 0.3s ease;
	pointer-events: none;
}

.darkmode-track .icon-sun {
	left: 6px;
}

.darkmode-track .icon-moon {
	right: 6px;
}

html.gentar-dark .darkmode-track .icon-moon {
	stroke: #fff;
}

html:not(.gentar-dark) .darkmode-track .icon-sun {
	stroke: #fff;
}

/* Hamburger animation ---------------------------------------------------- */
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	position: relative;
	transition: transform 0.25s ease, background-color 0.2s ease !important;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle-icon::before {
	top: -6px;
}

.menu-toggle-icon::after {
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Horizontal menu (desktop) ---------------------------------------------- */
.main-navigation {
	flex: 0 1 auto;
	min-width: 0;
}

.main-navigation .menu {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

.main-navigation .menu > li {
	position: relative;
}

.main-navigation .menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 10px;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.25s ease;
}

/*
 * Dropdown chevron.
 *
 * Rendered as an inline-flex child of the link (not a background image) so it
 * can rotate. It turns upside down while the pointer is anywhere inside the
 * parent item - including the open sub-menu - and returns to its default
 * downward state as soon as the pointer leaves.
 */
.main-navigation .menu > li.menu-item-has-children > a::after {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	margin-left: 1px;
	background-color: currentColor;
	-webkit-mask: var(--chevron-mask) center / contain no-repeat;
	mask: var(--chevron-mask) center / contain no-repeat;
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
	will-change: transform;
}

.main-navigation .menu > li.menu-item-has-children:hover > a::after,
.main-navigation .menu > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus {
	text-decoration: none;
}

.header-tools .icon-button:hover,
.header-tools .search-toggle:hover,
.menu-toggle:hover,
.mobile-drawer-close:hover {
	color: var(--color-accent);
}

.header-tools .search-toggle:active,
.menu-toggle:active,
.mobile-drawer-close:active {
	transform: scale(0.92);
}

.header-tools .icon-button svg,
.header-tools .search-toggle svg {
	display: block;
}
/*
 * Hover underline.
 *
 * Uses `::before` so it never competes with the chevron, which owns `::after`
 * on parent items. Sharing one pseudo-element meant the underline's
 * `position: absolute` / `left` / `right` / `transform-origin` leaked into the
 * chevron while a sub-menu was open, which made the arrow jump sideways as it
 * rotated.
 */
.main-navigation .menu > li > a::before {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 6px;
	height: 2px;
	background: var(--color-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
	will-change: transform;
}

.main-navigation .menu > li > a:hover::before,
.main-navigation .menu > li > a:focus-visible::before,
.main-navigation .menu > li.current-menu-item > a::before,
.main-navigation .menu > li.current-menu-ancestor > a::before,
.main-navigation .menu > li.current-menu-parent > a::before,
.main-navigation .menu > li:focus-within > a::before {
	transform: scaleX(1);
}

/* Menu items that are not hovered wipe back out to the right edge. */
.main-navigation .menu:hover > li:not(:hover) > a::before {
	transform-origin: right center;
}

.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current-menu-ancestor > a {
	color: var(--color-accent);
	background: var(--color-bg-alt);
	text-decoration: none;
}

/* Dropdown submenus. */
.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
	z-index: 60;
}

.main-navigation .menu > li:hover > .sub-menu,
.main-navigation .menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu li a {
	display: block;
	padding: 8px 16px;
	color: var(--color-text);
	font-size: 0.85rem;
}

.main-navigation .sub-menu li a:hover {
	color: var(--color-accent);
	background: var(--color-bg-alt);
	text-decoration: none;
}

/* Search panel ----------------------------------------------------------- */
.header-search {
	border-top: 1px solid var(--color-border);
	padding: 14px 0;
	background: var(--color-bg-alt);
}

.header-search[hidden] {
	display: none;
}

/* Header ad area */
.header-ad {
	padding: 16px 0;
	text-align: center;
	border-top: 1px solid var(--color-border);
}

/* Mobile drawer ---------------------------------------------------------- */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 9000;
	visibility: hidden;
	pointer-events: none;
}

.mobile-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mobile-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease !important;
}

.mobile-drawer.is-open .mobile-drawer-overlay {
	opacity: 1;
}

.mobile-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: var(--drawer-width);
	max-width: 88vw;
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
	overflow: hidden;
}

.mobile-drawer.is-open .mobile-drawer-panel {
	transform: translateX(0);
}

.mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
}

.mobile-drawer-title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

.mobile-drawer-nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 0 24px;
}

.mobile-drawer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-drawer-nav li {
	border-bottom: 1px solid var(--color-border);
}

.mobile-drawer-nav a {
	display: block;
	padding: 13px 18px;
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 600;
}

.mobile-drawer-nav a:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.mobile-drawer-nav .sub-menu a {
	padding-left: 34px;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--color-muted);
}

/* The drawer lists sub-items flat, so the desktop chevron does not apply. */
.mobile-drawer-nav .menu-item-has-children > a::after {
	display: none;
}

/* Drawer accordion -------------------------------------------------------
   Collapsing is opt-in via `.is-collapsible` on the list, which the script adds
   right before it wires up the chevron. Without JavaScript the sub menu simply
   stays open, so the drawer keeps working when theme.js fails to load.
   A `max-height` cap is used instead of `grid-template-rows`: this `<ul>` holds
   several `<li>` children, and `grid-template-rows` would only describe the
   first row. One cap transitions the whole list and needs no DOM wrapper.
   `visibility` keeps collapsed links out of the tab order, not merely clipped. */
.mobile-drawer-nav .sub-menu.is-collapsible {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.24s ease,
		visibility 0s linear 0.32s;
}

.mobile-drawer-nav .sub-menu.is-collapsible.is-open {
	max-height: 32rem;
	opacity: 1;
	visibility: visible;
	transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.2s ease 0.06s,
		visibility 0s;
}

/* Honour a reduced-motion preference: state still changes, nothing animates. */
@media (prefers-reduced-motion: reduce) {
	.mobile-drawer-nav .sub-menu.is-collapsible,
	.mobile-drawer-nav .sub-menu.is-collapsible.is-open,
	.mobile-drawer-nav .drawer-submenu-toggle::after {
		transition: none;
	}
}

/* `overflow: hidden` on the list clips every child, so no per-item clipper is
   needed. The divider moves from the `li` to its link so it travels with the
   collapse instead of drawing a stray line while closed. */
.mobile-drawer-nav .sub-menu > li {
	border-bottom: 0;
}

.mobile-drawer-nav .sub-menu > li + li > a {
	border-top: 1px solid var(--color-border);
}

/* Parent row: link and chevron toggle side by side, chevron flush right. */
.mobile-drawer-nav .menu-item-has-children > .drawer-submenu-row {
	display: flex;
	align-items: center;
}

.mobile-drawer-nav .drawer-submenu-row > a {
	flex: 1 1 auto;
	min-width: 0;
}

.mobile-drawer-nav .drawer-submenu-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	align-self: stretch;
	padding: 0;
	background: none;
	border: 0;
	border-left: 1px solid var(--color-border);
	color: var(--color-muted);
	cursor: pointer;
	transition: color 0.2s ease;
}

.mobile-drawer-nav .drawer-submenu-toggle:hover,
.mobile-drawer-nav .drawer-submenu-toggle:focus-visible {
	color: var(--color-accent);
}

/* Same mask-based chevron as the desktop menu, so the icon stays themeable
   through `currentColor` and picks up dark mode for free. */
.mobile-drawer-nav .drawer-submenu-toggle::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--chevron-mask) center / contain no-repeat;
	mask: var(--chevron-mask) center / contain no-repeat;
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.mobile-drawer-nav .drawer-submenu-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.mobile-drawer-nav .menu-item-has-children.is-open > .drawer-submenu-row > .drawer-submenu-toggle {
	color: var(--color-accent);
}

body.drawer-open .mobile-drawer {
	visibility: visible;
}

/* Desktop breakpoint: hide the hamburger, show everything else. */
@media (min-width: 861px) {
	.menu-toggle {
		display: none;
	}

	.mobile-drawer {
		display: none;
	}
}

/* Mobile breakpoint: left to right, hamburger, logo, search, dark mode.
   The primary menu lives in the slide-in drawer instead. */
@media (max-width: 860px) {
	/* Normal flow; ordering is handled per child below. `.header-tools`
	   becomes display:contents so its icons join the header flex row and
	   can be ordered independently of one another.

	   `column-gap: 10px` spaces the row. `.main-navigation` is hidden here, so
	   the row is: hamburger, logo, search, dark mode. The two adjacent icon
	   buttons cancel their facing gutters (margin rules below) so the gap the
	   eye reads between the search and dark-mode strokes is a true 10px. */
	.header-main-inner {
		padding-block: 12px;
		min-height: 64px;
		column-gap: 10px;
	}

	.main-navigation {
		display: none;
	}

	.header-tools {
		display: contents;
	}

	/* Visual order, left to right: hamburger, logo, search, dark mode. */
	.header-main-inner .site-branding {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.header-main-inner .search-toggle {
		order: 3;
	}

	.header-main-inner .darkmode-toggle {
		order: 4;
	}

	/* Mobile: no toggle, no thumb, no animation. Show one plain static
	   icon that swaps instantly when tapped. */
	.header-main-inner .menu-toggle {
		display: inline-flex;
		order: 1;
	}

	/* Icon buttons keep a fixed 40px tap target and never shrink. */
	.header-main-inner .menu-toggle,
	.header-main-inner .search-toggle,
	.header-main-inner .darkmode-toggle {
		flex: 0 0 auto;
	}

	/* Left/right edges: the icon button is a 40px box with the stroke centred,
	   so the visible glyph sits 10-11px inside the container padding and the
	   header reads narrower than the article and footer bands below it. Pull
	   the two outer buttons out by exactly their own gutter so the strokes
	   land on the 16px container line like every other band.
	   Gutters: hamburger bar 18px -> 11px, dark mode icon 20px -> 10px. */
	.header-main-inner .menu-toggle {
		margin-left: -11px;
	}

	.header-main-inner .darkmode-toggle {
		margin-right: -10px;
	}

	/* Interior gap: the row gap measures box edges, but the icons are 20px
	   inside a 40px box, so a facing pair would read as `gap + 10px + 10px`.
	   A negative gap is invalid, so the two adjacent icon buttons carry a
	   `-10px` inner margin instead: the boxes overlap their empty gutters and
	   the strokes end up exactly `gap` apart. */
	.header-main-inner .search-toggle {
		margin-right: -10px;
	}

	.header-main-inner .darkmode-toggle {
		margin-left: -10px;
	}

	.darkmode-track {
		position: static;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		border-radius: 0;
		transition: none !important;
	}

	.darkmode-toggle:hover .darkmode-track {
		border-color: transparent;
	}

	.darkmode-thumb {
		display: none;
	}

	/* Mobile shows one plain icon, centred in the same 40px box the search
	   button uses, so the two icons line up on the same optical axis. */
	.darkmode-track .icon-sun,
	.darkmode-track .icon-moon {
		position: static;
		display: block;
		flex: none;
		width: 20px;
		height: 20px;
		margin: 0;
		stroke: currentColor;
		transition: none !important;
	}

	html:not(.gentar-dark) .darkmode-track .icon-sun,
	html.gentar-dark .darkmode-track .icon-moon {
		display: block;
		/* Must beat the desktop `html.gentar-dark ... { stroke: #fff }` rule: on
		   mobile the track has no background, so a white icon would vanish on
		   the light header. */
		stroke: currentColor;
	}

	html.gentar-dark .darkmode-track .icon-sun,
	html:not(.gentar-dark) .darkmode-track .icon-moon {
		display: none;
		stroke: currentColor;
	}

	.site-title {
		font-size: 1.15rem;
	}

	/* Keep tall desktop logos from bloating the mobile bar. */
	.custom-logo {
		max-height: 44px;
		width: auto;
		max-width: 200px;
	}

	/* Mobile: drawer panel a bit narrower. */
	.mobile-drawer-panel {
		width: 86vw;
	}
}

/* Sub header: popular tag / category strip under the main header.
   A translucent separator line splits it from the header above; the list
   scrolls horizontally on narrow screens without showing a scrollbar. */
.header-sub {
	border-top: 1px solid var(--header-sub-separator);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.8125rem;
}

.header-sub__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: var(--header-sub-height);
}

.header-sub__label {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.header-sub__label svg {
	width: 15px;
	height: 15px;
	color: var(--color-accent);
	flex: none;
}

.header-sub__list {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}

.header-sub__list::-webkit-scrollbar {
	display: none;
}

.header-sub__item {
	flex: none;
	margin: 0;
	padding: 0;
}

.header-sub__link {
	display: inline-block;
	color: var(--color-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.header-sub__link:hover,
.header-sub__link:focus-visible {
	color: var(--color-accent);
	text-decoration: none;
}

@media (max-width: 860px) {
	.header-sub__inner {
		gap: 12px;
		height: 38px;
	}

	.header-sub__list {
		gap: 16px;
	}

	.header-sub__label span {
		display: none;
	}
}

/* ============================================================
   3. FOOTER
   ============================================================ */

.site-footer {
	background: var(--color-dark);
	color: #c3c7cd;
	margin-top: 40px;
}

.footer-widgets {
	padding: 44px 0 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-widgets-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.site-footer .widget-title {
	color: #fff;
	border-bottom-color: var(--color-accent);
	font-size: 0.95rem;
}

.site-footer a {
	color: #e6e8eb;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .widget ul li {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-info {
	padding: 18px 0;
	font-size: 0.85rem;
}

.site-info-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.footer-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
}

@media (max-width: 1140px) {
	.footer-widgets-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.footer-widgets-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.site-info-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}