/*
 * Pire ID LTR — Indonesian (/id/) front-end stylesheet.
 * Mobile-first, LTR, system fonts only, no icon fonts, no images except the logo.
 * Brand: navy #064f9a, gold #fdb615 (from the barad theme).
 */

:root {
	--id-navy: #064f9a;
	--id-navy-dark: #043a72;
	--id-gold: #fdb615;
	--id-bg: #ffffff;
	--id-fg: #1c2430;
	--id-muted: #545f6d;
	--id-link: #064f9a;
	--id-link-hover: #043a72;
	--id-surface: #f3f6fa;
	--id-border: #d5dde7;
	--id-focus: #064f9a;
	--id-header-fg: #ffffff;
	--id-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	/* Local fonts only: no @font-face, no third-party font requests. */
	--id-font-ar: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", "Scheherazade New", "Segoe UI", "Tahoma", serif;
	--id-font-fa: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Geeza Pro", "Arabic Typesetting", "Segoe UI", Tahoma, serif;
	--id-accent: #064f9a; /* checkbox/radio fill */
	--id-scroll-shadow: rgba(16, 36, 64, 0.28); /* table scroll hint */
	--id-measure: 68ch;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--id-bg: #10161f;
		--id-fg: #e7ebf0;
		--id-muted: #a9b3c0;
		--id-link: #fdc546;
		--id-link-hover: #ffe08f;
		--id-surface: #1a2330;
		--id-border: #33404f;
		--id-focus: #fdb615;
		--id-accent: #fdb615;
		--id-scroll-shadow: rgba(231, 235, 240, 0.22);
	}
}

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

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

body.pire-id {
	margin: 0;
	background: var(--id-bg);
	color: var(--id-fg);
	font-family: var(--id-font);
	font-size: 1.125rem; /* 18px */
	line-height: 1.7;
	text-align: left;
	direction: ltr;
	overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.pire-id img,
.pire-id video,
.pire-id iframe { max-width: 100%; height: auto; }
.pire-id img { vertical-align: middle; }

.pire-id a { color: var(--id-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pire-id a:hover { color: var(--id-link-hover); text-decoration-color: var(--id-gold); text-decoration-thickness: 3px; }

/* Visible keyboard focus everywhere (non-text contrast >= 3:1, see checks/contrast.py). */
.pire-id :focus-visible { outline: 3px solid var(--id-focus); outline-offset: 2px; border-radius: 2px; }
.pire-id .id-header :focus-visible,
.pire-id .id-footer :focus-visible { outline-color: var(--id-gold); }
.pire-id .id-main:focus { outline: none; }

/* Skip link */
.skip-link {
	position: absolute;
	left: 0.5rem;
	top: -100px;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--id-navy);
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none;
}
.skip-link:focus { top: 0.5rem; outline: 3px solid var(--id-gold); }

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

/* ---------- Header ---------- */
.id-header {
	background: var(--id-navy);
	color: var(--id-header-fg);
	border-bottom: 4px solid var(--id-gold);
}
.id-header-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: 0.5rem 1rem;
}
.pire-id .id-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	color: var(--id-header-fg);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
}
.pire-id .id-brand:hover { color: var(--id-header-fg); text-decoration: underline; text-decoration-color: var(--id-gold); }
.id-brand img { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; flex: 0 0 auto; }

.id-menu-toggle {
	min-width: 44px;
	min-height: 44px;
	padding: 0 1rem;
	border: 2px solid var(--id-gold);
	border-radius: 6px;
	background: transparent;
	color: var(--id-header-fg);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	flex: 0 0 auto;
	cursor: pointer;
}
.id-menu-toggle[aria-expanded="true"] { background: var(--id-gold); color: var(--id-navy-dark); }

.id-nav {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem 0.5rem;
}
/* Without JS the menu is always visible; with JS it collapses on small screens. */
.js-collapsible .id-nav { display: none; }
.js-collapsible.is-open .id-nav { display: block; }

.id-nav ul { list-style: none; margin: 0; padding: 0; }
.id-primary .id-menu { display: flex; flex-direction: column; }
.pire-id .id-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.5rem;
	color: var(--id-header-fg);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
}
.pire-id .id-nav a:hover,
.pire-id .id-nav .current-menu-item > a,
.pire-id .id-nav a[aria-current="page"] { color: var(--id-gold); text-decoration: underline; text-decoration-thickness: 2px; }

.id-lang { border-top: 1px solid rgba(255, 255, 255, 0.25); margin-top: 0.25rem; padding-top: 0.25rem; }
.id-lang ul { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.id-lang .current-lang > a { color: var(--id-gold); }

@media (min-width: 48em) {
	.id-menu-toggle { display: none; }
	.js-collapsible .id-nav,
	.id-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0 1rem;
	}
	.id-primary .id-menu { flex-direction: row; flex-wrap: wrap; gap: 0 0.25rem; }
	.id-lang { border-top: 0; margin: 0; padding: 0; }
}

/* ---------- Main / typography ---------- */
.id-main {
	display: block;
	max-width: calc(var(--id-measure) + 2rem);
	margin: 0 auto;
	padding: 1rem 1rem 3rem;
}

.pire-id h1, .pire-id h2, .pire-id h3, .pire-id h4 {
	line-height: 1.25;
	color: var(--id-fg);
	font-weight: 700;
	margin: 2em 0 0.6em;
}
.pire-id h1 { font-size: 2rem; margin-top: 0.5rem; letter-spacing: -0.01em; }
.pire-id h2 { font-size: 1.5rem; }
.pire-id h3 { font-size: 1.25rem; }
.pire-id h4 { font-size: 1.1rem; }
.pire-id h2::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--id-gold); margin-bottom: 0.5rem; }
.pire-id .id-card-title::before,
.pire-id .id-related h2::before { display: none; }

@media (min-width: 48em) {
	.pire-id h1 { font-size: 2.4rem; }
	.pire-id h2 { font-size: 1.75rem; }
	.pire-id h3 { font-size: 1.35rem; }
}

.pire-id p, .pire-id ul, .pire-id ol, .pire-id table, .pire-id figure { margin: 0 0 1.1em; }
.pire-id ul, .pire-id ol { padding-left: 1.4em; }
.pire-id li { margin-bottom: 0.35em; }
.pire-id strong, .pire-id b { font-weight: 700; }
.pire-id hr { border: 0; border-top: 1px solid var(--id-border); margin: 2rem 0; }

.entry-content { max-width: var(--id-measure); }
.entry-content > :first-child { margin-top: 0; }

/* Breadcrumb */
.id-breadcrumb { font-size: 0.875rem; color: var(--id-muted); margin: 0 0 0.75rem; line-height: 1.5; }
.pire-id .id-breadcrumb a { color: var(--id-muted); display: inline-flex; align-items: center; min-height: 44px; }
.id-breadcrumb .sep { margin: 0 0.35rem; }

/* Article header */
.id-article-header { margin-bottom: 1.25rem; }
.id-meta { font-size: 0.9rem; color: var(--id-muted); margin: 0; }
.id-updated { margin-left: 0.75rem; }
.id-lead { font-size: 1.15rem; color: var(--id-muted); }
.id-featured { margin: 0 0 1.5rem; }
.id-featured img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* ---------- Content components ---------- */

/* Arabic quotes: <blockquote lang="ar" dir="rtl"> */
.pire-id blockquote {
	margin: 1.5em 0;
	padding: 0.9em 1.1em;
	background: var(--id-surface);
	border-inline-start: 4px solid var(--id-navy);
	border-radius: 4px;
}
.pire-id blockquote[lang="ar"],
.pire-id blockquote[dir="rtl"] {
	direction: rtl;
	text-align: right;
	font-family: var(--id-font-ar);
	font-size: 1.25em;
	line-height: 2;
	border-inline-start-color: var(--id-gold); /* resolves to the right edge in RTL */
	unicode-bidi: isolate;
}
@media (prefers-color-scheme: dark) {
	.pire-id blockquote { border-inline-start-color: var(--id-link); }
}

/* Citation / reference lines */
.pire-id p.reference,
.pire-id .reference {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--id-muted);
	margin-top: -0.4em;
}

/* FAQ blocks: <div><h3>Question</h3><div>Answer</div></div> */
.entry-content > div > h3:first-child { margin: 0 0 0.4em; font-size: 1.15rem; }
.entry-content > div > h3:first-child + div { color: var(--id-fg); }
.entry-content > div:has(> h3:first-child) {
	margin: 0 0 1rem !important;
	padding: 1rem 1.1rem;
	border: 1px solid var(--id-border);
	border-left: 4px solid var(--id-gold);
	border-radius: 6px;
	background: var(--id-bg);
}

/* Tables: articles wrap them in <div style="overflow-x:auto">; also support .overflow */
.entry-content .overflow,
.entry-content div[style*="overflow"] {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1.25em;
	border: 1px solid var(--id-border);
	border-radius: 6px;
	max-width: 100%;
	/* Scroll hint without JS: the "local" covers scroll with the content and hide the
	   fixed ("scroll") edge shadows once the matching edge is reached. */
	background:
		linear-gradient(to right, var(--id-bg) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
		linear-gradient(to left, var(--id-bg) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, var(--id-scroll-shadow), rgba(0, 0, 0, 0)) left center / 0.9rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, var(--id-scroll-shadow), rgba(0, 0, 0, 0)) right center / 0.9rem 100% no-repeat scroll;
	background-color: var(--id-bg);
	/* Keep a visible scrollbar (not hidden/overlay-only where the browser allows it). */
	scrollbar-width: thin;
	scrollbar-color: var(--id-muted) var(--id-surface);
}
.pire-id table { border-collapse: collapse; width: 100%; font-size: 0.9rem; line-height: 1.5; }
.entry-content .overflow table,
.entry-content div[style*="overflow"] table { min-width: 34rem; margin: 0; }
.pire-id th, .pire-id td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--id-border); text-align: left; vertical-align: top; }
.pire-id th { background: var(--id-surface); font-weight: 700; }
.pire-id td[dir="rtl"], .pire-id th[dir="rtl"] { text-align: right; }

/* Inline Arabic/Persian text inside LTR paragraphs */
.pire-id :not(blockquote)[lang|="ar"] {
	font-family: var(--id-font-ar);
	font-size: 1.25em;
	line-height: 2;
	unicode-bidi: isolate;
}
.pire-id [lang|="ar"] [lang|="ar"] { font-size: 1em; } /* no compounding when nested */
.pire-id :not(blockquote)[lang="fa"] { font-family: var(--id-font-fa); unicode-bidi: isolate; }

/* Images and captions inside content */
.entry-content figure { max-width: 100%; }
.entry-content figcaption,
.entry-content .wp-caption-text { font-size: 0.875rem; color: var(--id-muted); margin-top: 0.4rem; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .alignleft, .entry-content .alignright, .entry-content .aligncenter { display: block; margin: 0 auto 1rem; float: none; }
@media (min-width: 48em) {
	.entry-content .alignleft { float: left; margin: 0.3rem 1.25rem 1rem 0; max-width: 50%; }
	.entry-content .alignright { float: right; margin: 0.3rem 0 1rem 1.25rem; max-width: 50%; }
}
.entry-content::after { content: ""; display: table; clear: both; }

/* Code */
.pire-id pre { overflow-x: auto; padding: 1rem; background: var(--id-surface); border-radius: 6px; font-size: 0.9rem; }

/* ---------- Lists of posts ---------- */
.id-list { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.id-card {
	padding: 1rem 1.1rem;
	border: 1px solid var(--id-border);
	border-radius: 8px;
	background: var(--id-bg);
}
.pire-id .id-card-title { font-size: 1.25rem; margin: 0 0 0.25rem; }
.pire-id .id-card-title a { text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.pire-id .id-card-title a:hover { text-decoration: underline; text-decoration-color: var(--id-gold); }
.id-excerpt { margin: 0.4rem 0 0 !important; font-size: 1rem; }

.id-section { margin-top: 2.5rem; }

/* Related posts */
.id-related {
	max-width: var(--id-measure);
	margin: 2.5rem 0 0;
	padding: 1rem 1.1rem;
	background: var(--id-surface);
	border-radius: 8px;
}
.pire-id .id-related h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.id-related ul { list-style: none; padding: 0; margin: 0; }
.id-related li { margin: 0; }
.pire-id .id-related a { display: flex; align-items: center; min-height: 44px; padding: 0.25rem 0; }

/* Tap targets for links in lists and tables (hub, glossary, related lists) on touch / small screens.
   List links get transparent vertical padding (bigger hit box, same look); list items get a little
   extra spacing so neighbouring hit boxes do not overlap. Table links become inline blocks >= 44px. */
@media (max-width: 47.99em), (pointer: coarse) {
	.pire-id .entry-content li:has(a),
	.pire-id .id-footer li:has(a) { padding-block: 0.3em; }
	.pire-id .entry-content li a { padding-block: 0.7em; }
	.pire-id .entry-content td a,
	.pire-id .entry-content th a {
		display: inline-block;
		min-height: 44px; /* text stays top-aligned with the other cells; the box grows downwards */
	}
}

/* Pagination & page links */
.pire-id .navigation.pagination { margin: 1.5rem 0; }
.pire-id .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pire-id .nav-links .page-numbers,
.pire-id .id-page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--id-border);
	border-radius: 6px;
	text-decoration: none;
}
.pire-id .nav-links .page-numbers.current { background: var(--id-navy); border-color: var(--id-navy); color: #ffffff; }

/* Fallback link list (404 / no results) */
.id-links .id-menu { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pire-id .id-links a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
	border: 1px solid var(--id-border); border-radius: 6px; text-decoration: none;
}

/* ---------- Forms (search + Contact Form 7) ---------- */
.id-search { margin: 1rem 0 1.5rem; max-width: var(--id-measure); }
.id-search label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.id-search-row { display: flex; gap: 0.5rem; }
.pire-id input[type="search"],
.pire-id input[type="text"],
.pire-id input[type="email"],
.pire-id input[type="url"],
.pire-id input[type="tel"],
.pire-id textarea,
.pire-id select {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	font-size: 1rem; /* >= 16px: no iOS zoom on focus */
	color: var(--id-fg);
	background: var(--id-bg);
	border: 1px solid #7a8594;
	border-radius: 6px;
}
.pire-id textarea { min-height: 8rem; }
.pire-id button,
.pire-id input[type="submit"],
.pire-id .wpcf7-submit {
	min-height: 44px;
	padding: 0 1.25rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	background: var(--id-navy);
	border: 2px solid var(--id-navy);
	border-radius: 6px;
	cursor: pointer;
}
.pire-id .id-header button { background: transparent; }
.pire-id .id-header button[aria-expanded="true"] { background: var(--id-gold); color: var(--id-navy-dark); }
.pire-id button:hover,
.pire-id input[type="submit"]:hover { background: var(--id-navy-dark); border-color: var(--id-gold); }
.pire-id .wpcf7 p { margin-bottom: 1rem; }
.pire-id .wpcf7 label { display: block; font-weight: 600; }
.pire-id .wpcf7-not-valid-tip { font-size: 0.9rem; }

/* CF7 acceptance / checkbox / radio: 24px box, whole label is a >= 44px tap area. */
.pire-id .wpcf7 .wpcf7-list-item { display: block; margin: 0; }
.pire-id .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.5rem 0.25rem;
	font-weight: 400;
	cursor: pointer;
	border-radius: 4px;
}
.pire-id .wpcf7 input[type="checkbox"],
.pire-id .wpcf7 input[type="radio"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0.15em 0 0;
	accent-color: var(--id-accent);
	cursor: pointer;
}
.pire-id .wpcf7 input[type="checkbox"]:focus-visible,
.pire-id .wpcf7 input[type="radio"]:focus-visible { outline: 3px solid var(--id-focus); outline-offset: 2px; }
.pire-id .wpcf7 .wpcf7-list-item label:has(input:focus-visible) { outline: 2px solid var(--id-focus); outline-offset: 2px; }

/* ---------- Footer ---------- */
.id-footer {
	background: var(--id-navy-dark);
	color: #ffffff;
	border-top: 4px solid var(--id-gold);
	font-size: 0.95rem;
	line-height: 1.6;
}
.id-footer-in { max-width: calc(var(--id-measure) + 2rem); margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.id-footer p { margin: 0 0 0.75rem; }
.id-footer-fa { display: block; font-family: var(--id-font-fa); opacity: 1; }
.pire-id .id-footer a { color: #ffffff; display: inline-flex; align-items: center; min-height: 44px; }
.pire-id .id-footer a:hover { color: var(--id-gold); }
.id-copy { font-size: 0.85rem; color: #d6e0ec; }

/* WordPress admin bar should not cover the skip link */
.admin-bar .skip-link:focus { top: 2.5rem; }

@media print {
	.id-header, .id-footer, .id-related, .skip-link, .id-breadcrumb { display: none; }
	body.pire-id { font-size: 12pt; color: #000; background: #fff; }
}