/* ==========================================================================
   SIRAT · Membaca yang tersirat, menghitung yang tersurat
   Gaya utama child theme. Dimuat setelah CSS GeneratePress.
   ========================================================================== */

/* ---------- 1. Font lokal ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/newsreader-latin-600-italic.woff2") format("woff2"); }

/* ---------- 2. Token warna dan huruf ---------- */
:root {
	--sirat-tinta: #1A1A1A;
	--sirat-tinta-2: #4A4640;
	--sirat-tinta-3: #6B665E;
	--sirat-indigo: #2B3A67;
	--sirat-indigo-gelap: #1E2A4D;
	--sirat-gading: #F5F1E8;
	--sirat-gading-2: #FBF8F2;
	--sirat-garis: #D9D2C3;
	--sirat-malam: #141414;

	--sirat-font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sirat-font-baca: "Newsreader", Georgia, "Times New Roman", serif;
	--sirat-lebar-baca: 720px;

	/* Warna global GeneratePress diarahkan ke palet SIRAT */
	--contrast: var(--sirat-tinta);
	--contrast-2: var(--sirat-tinta-2);
	--contrast-3: var(--sirat-garis);
	--base: var(--sirat-garis);
	--base-2: var(--sirat-gading);
	--base-3: #FFFFFF;
	--accent: var(--sirat-indigo);
}

/* ---------- 3. Dasar ---------- */
body {
	background: var(--sirat-gading);
	color: var(--sirat-tinta);
	font-family: var(--sirat-font-baca);
	font-size: 19px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.main-navigation, .entry-meta, button, input, select, textarea,
.wp-block-button__link, .site-info, .widget-title, .page-header, .nav-links {
	font-family: var(--sirat-font-ui);
}
h1, h2, h3, h4, h5, h6 { color: var(--sirat-tinta); line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; color: var(--sirat-indigo); }
h3, h4 { font-weight: 700; }

a { color: var(--sirat-indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--sirat-tinta); }
::selection { background: var(--sirat-indigo); color: #fff; }
:focus-visible { outline: 2px solid var(--sirat-indigo); outline-offset: 2px; }

/* ---------- 4. Header dan navigasi ---------- */
.site-header { background: var(--sirat-gading); border-bottom: 1px solid var(--sirat-garis); }
.site-header .inside-header { padding-top: 18px; padding-bottom: 18px; }
.site-logo img, .site-header .header-image { width: 200px; height: auto; }
.main-navigation, .main-navigation ul ul { background: var(--sirat-gading); }
.main-navigation .main-nav ul li a {
	color: var(--sirat-tinta);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.02em;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--sirat-indigo); background: transparent; }
.main-navigation .main-nav ul li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--sirat-indigo); }
.menu-toggle { color: var(--sirat-tinta); font-weight: 600; }

/* ---------- 5. Kolom baca ---------- */
.site-content { padding-top: 24px; }
.one-container .container, .one-container .site-content, .inside-article { background: transparent; }
.single .entry-header,
.single .entry-content,
.single .sirat-kotak-angka,
.single .sirat-setelah-artikel,
.single .sirat-label-ai,
.page .entry-header,
.page .entry-content,
.single .comments-area,
.single .post-navigation {
	max-width: var(--sirat-lebar-baca);
	margin-left: auto;
	margin-right: auto;
}

.entry-title { font-size: clamp(30px, 4.6vw, 46px); margin-bottom: 12px; }
.entry-title a { color: var(--sirat-tinta); text-decoration: none; }
.entry-title a:hover { color: var(--sirat-indigo); }
.entry-meta { font-size: 14px; color: var(--sirat-tinta-3); letter-spacing: 0.01em; }
.entry-meta a { color: var(--sirat-tinta-2); text-decoration: none; }

.entry-content > * + * { margin-top: 1.1em; }
.entry-content p { margin-bottom: 0; }
.entry-content h2 { font-size: 1.45em; margin: 2em 0 0.5em; }
.entry-content h3 { font-size: 1.18em; margin: 1.6em 0 0.4em; }
.entry-content ul, .entry-content ol { margin-left: 1.3em; }
.entry-content li + li { margin-top: 0.35em; }
.entry-content img, .entry-content figure { border-radius: 8px; }
.entry-content figcaption, .wp-element-caption {
	font-family: var(--sirat-font-ui);
	font-size: 14px;
	color: var(--sirat-tinta-3);
	text-align: left;
	margin-top: 8px;
}

/* ---------- 6. Label jenis konten ---------- */
.sirat-jenis {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--sirat-font-ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--sirat-indigo);
}
.sirat-jenis:hover, .sirat-jenis:focus { color: #fff; background: var(--sirat-tinta); }
.sirat-jenis--update-sinyal { background: transparent; color: var(--sirat-indigo); box-shadow: inset 0 0 0 1.5px var(--sirat-indigo); }
.sirat-jenis--catatan-data { background: var(--sirat-tinta); }

/* ---------- 7. Elemen isi: tabel, kutipan, kotak ---------- */
.entry-content table, .sirat-page table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sirat-font-ui);
	font-size: 15.5px;
	line-height: 1.5;
	margin: 1.4em 0;
	background: #fff;
}
.entry-content th, .entry-content td,
.sirat-page th, .sirat-page td {
	border: 1px solid var(--sirat-garis);
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
}
.entry-content th, .sirat-page th { background: var(--sirat-gading); font-weight: 600; }
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content blockquote, .wp-block-quote {
	margin: 1.6em 0;
	padding: 0 0 0 20px;
	border-left: 3px solid var(--sirat-indigo);
	font-style: italic;
	color: var(--sirat-tinta-2);
	background: transparent;
}
.entry-content blockquote cite, .wp-block-quote cite {
	display: block;
	margin-top: 6px;
	font-family: var(--sirat-font-ui);
	font-style: normal;
	font-size: 14px;
	color: var(--sirat-tinta-3);
}

.entry-content hr, .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--sirat-garis);
	margin: 2.4em auto;
}

.entry-content code, .entry-content kbd {
	font-size: 0.88em;
	background: var(--sirat-gading);
	border: 1px solid var(--sirat-garis);
	border-radius: 4px;
	padding: 1px 5px;
}

/* Kelas SIRAT (juga dipakai 10 halaman wajib) */
.sirat-page { max-width: var(--sirat-lebar-baca); margin: 0 auto; }
.sirat-lead { font-size: 1.16em; color: var(--sirat-tinta-2); }
.sirat-box {
	background: var(--sirat-gading-2);
	border: 1px solid var(--sirat-garis);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 1.5em 0;
}
.sirat-box > :first-child { margin-top: 0; }
.sirat-box > :last-child { margin-bottom: 0; }
.sirat-meta {
	font-family: var(--sirat-font-ui);
	font-size: 14px;
	color: var(--sirat-tinta-3);
	border-top: 1px solid var(--sirat-garis);
	margin-top: 2.5em;
	padding-top: 1em;
}

/* Angka besar (dipakai Kotak Angka Utama dan Catatan Data) */
.sirat-angka {
	font-family: var(--sirat-font-ui);
	font-weight: 800;
	font-size: clamp(44px, 8vw, 72px);
	line-height: 1;
	color: var(--sirat-indigo);
	letter-spacing: -0.02em;
}

/* ---------- 8. Label bantuan AI ---------- */
.sirat-label-ai {
	margin-top: 2.5em;
	padding-top: 1em;
	border-top: 1px solid var(--sirat-garis);
	font-family: var(--sirat-font-ui);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sirat-tinta-3);
}

/* ---------- 9. Daftar artikel (beranda, arsip) ---------- */
.blog .inside-article, .archive .inside-article, .search .inside-article {
	border-bottom: 1px solid var(--sirat-garis);
	padding-bottom: 32px;
	margin-bottom: 8px;
}
.blog .entry-title, .archive .entry-title, .search .entry-title { font-size: clamp(24px, 3.2vw, 32px); }
.blog .entry-summary, .archive .entry-summary, .search .entry-summary { color: var(--sirat-tinta-2); }
.page-header .page-title { font-weight: 800; }
.read-more { font-family: var(--sirat-font-ui); font-weight: 600; font-size: 15px; }

/* ---------- 10. Tombol dan formulir ---------- */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, .wp-block-button__link {
	background: var(--sirat-indigo);
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	padding: 11px 20px;
	border: 0;
}
button:hover, input[type="submit"]:hover, a.button:hover, .wp-block-button__link:hover {
	background: var(--sirat-tinta);
	color: #fff;
}
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, select {
	background: #fff;
	border: 1px solid var(--sirat-garis);
	border-radius: 8px;
	color: var(--sirat-tinta);
	padding: 10px 12px;
}
input:focus, textarea:focus, select:focus { border-color: var(--sirat-indigo); outline: none; box-shadow: 0 0 0 2px rgba(43, 58, 103, 0.18); }

/* ---------- 11. Komentar ---------- */
.comments-area { font-family: var(--sirat-font-ui); font-size: 16px; }
.comments-title, .comment-reply-title { font-size: 22px; color: var(--sirat-tinta); }
.comment-content { font-family: var(--sirat-font-baca); font-size: 17px; }
.comment-meta .avatar { border-radius: 50%; }

/* ---------- 12. Footer ---------- */
.site-footer .site-info { background: var(--sirat-malam); color: #CFC8B8; }
.site-info .inside-site-info { padding-top: 48px; padding-bottom: 48px; }
.sirat-footer { width: 100%; text-align: center; font-family: var(--sirat-font-ui); }
.sirat-footer-logo { width: 150px; height: auto; display: block; margin: 0 auto 10px; }
.sirat-footer-tagline { font-family: var(--sirat-font-baca); font-style: italic; font-size: 17px; color: var(--sirat-gading); margin: 0 0 22px; }
.sirat-footer-menu {
	list-style: none;
	margin: 0 auto 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 18px;
	max-width: 820px;
}
.sirat-footer-menu li { margin: 0; }
.sirat-footer-menu a { color: #CFC8B8; font-size: 14.5px; text-decoration: none; }
.sirat-footer-menu a:hover, .sirat-footer-menu a:focus { color: #fff; text-decoration: underline; }
.sirat-footer-copy { font-size: 13px; color: #8F887B; margin: 0; }

/* ---------- 13. Ponsel ---------- */
@media (max-width: 768px) {
	body { font-size: 18px; }
	.site-logo img, .site-header .header-image { width: 150px; }
	.site-header .inside-header { padding-top: 12px; padding-bottom: 12px; }
	.entry-content table, .sirat-page table { display: block; overflow-x: auto; font-size: 14.5px; }
	.sirat-box { padding: 16px 18px; }
}

/* ---------- 14. Cetak ---------- */
@media print {
	.site-header, .main-navigation, .site-footer, .comments-area, .post-navigation { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	a { color: var(--sirat-tinta); }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--sirat-tinta-3); }
}