/* Hafdz WP — shared styles. Brand-true (matches Hafdz Mitra Imani.html tokens) +
   WordPress structural cues: admin bar, breadcrumbs, post meta, sidebar. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --sand: oklch(0.962 0.012 85);
  --sand-2: oklch(0.935 0.018 82);
  --sand-3: oklch(0.895 0.022 80);
  --paper: oklch(0.985 0.008 88);
  --ink: oklch(0.245 0.022 95);
  --ink-2: oklch(0.42 0.022 95);
  --ink-3: oklch(0.58 0.018 92);
  --olive: oklch(0.48 0.06 130);
  --olive-deep: oklch(0.34 0.05 130);
  --olive-soft: oklch(0.78 0.04 125);
  --line: oklch(0.245 0.022 95 / 0.14);
  --line-2: oklch(0.245 0.022 95 / 0.08);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --arabic: "Amiri", serif;

  /* WordPress admin bar */
  --wp-bar-bg: #1d2327;
  --wp-bar-fg: #c3c4c7;
  --wp-bar-fg-hover: #72aee6;
  --wp-bar-h: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--sand);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--olive); color: var(--paper); }

.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
.mono  { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.arabic{ font-family: var(--arabic); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

/* ─── WP admin bar ───────────────────────────────────────────────── */
.wp-adminbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--wp-bar-h);
  background: var(--wp-bar-bg);
  color: var(--wp-bar-fg);
  font: 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; align-items: stretch;
}
.wp-adminbar a { color: var(--wp-bar-fg); transition: color .15s; }
.wp-adminbar a:hover { color: var(--wp-bar-fg-hover); }
.wp-adminbar .wp-ab-inner { display: flex; align-items: stretch; width: 100%; max-width: 100%; padding: 0 12px; gap: 0; }
.wp-adminbar .wp-ab-item {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px; height: var(--wp-bar-h);
  border-right: 1px solid #2c3338;
  white-space: nowrap;
}
.wp-adminbar .wp-ab-item:first-child { border-left: 1px solid #2c3338; }
.wp-adminbar .wp-ab-logo { font-size: 16px; line-height: 1; }
.wp-adminbar .wp-ab-spacer { flex: 1; }
.wp-adminbar .wp-ab-item.right { border-right: 0; border-left: 1px solid #2c3338; }
.wp-adminbar .wp-ab-avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.5 0.06 130), oklch(0.34 0.05 130));
  border: 1px solid #2c3338;
}
.wp-adminbar .wp-ab-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: #2c3338; color: #fff; font-size: 11px;
}

/* ─── Theme header (matches landing nav) ─────────────────────────── */
/* Sticky offset is admin-bar-aware:
   • 0 by default (logged-out, no admin bar).
   • 32px on desktop (≥783px) where WP's admin bar is fixed at top: 0,
     so our header sits flush below it.
   • 0 on mobile (≤782px) — WP intentionally renders #wpadminbar as
     position: absolute (not fixed) on touch devices to avoid iOS
     Safari URL-bar jank. The admin bar scrolls away with the document,
     so our header should stick at top: 0 and naturally take over the
     viewport once the user has scrolled past the toolbar. */
:root { --hafdz-header-top: 0px; }
body.admin-bar { --hafdz-header-top: var(--wp-bar-h, 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar { --hafdz-header-top: 0px; }
}

/* WordPress wraps every wp:template-part in <div class="wp-block-template-
   part">. That wrapper becomes the .site-header's nearest containing
   block, which traps `position: sticky` within a div the same height as
   the header itself — so it never actually sticks. `display: contents`
   makes the wrapper disappear from layout, leaving the <header> as a
   direct child of <body>/.wp-site-blocks where sticky behaves correctly. */
.wp-block-template-part { display: contents; }

.site-header {
  border-bottom: 1px solid var(--line-2);
  position: -webkit-sticky;
  position: sticky;
  top: var(--hafdz-header-top); z-index: 50;
  isolation: isolate;
}
/* The frosted-glass background lives on a ::before pseudo-element so the
   header element itself does NOT carry `backdrop-filter`. Per CSS spec,
   `backdrop-filter` (along with transform/filter/perspective) turns its
   element into a *containing block for fixed-position descendants*, which
   would clip the wp:navigation overlay menu to the header's height (~64px)
   instead of letting it fill the viewport. With the blur on the pseudo,
   the header stays "transparent" to fixed positioning and the overlay
   covers the full screen as intended. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--sand) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease;
  pointer-events: none;
}
.site-header > * { position: relative; }
/* When the document has scrolled past the top, dim the sand to ~75% so
   the header reads as a frosted overlay over the content underneath. The
   .is-scrolled class is toggled on <body> by assets/js/header.js. */
body.is-scrolled .site-header::before {
  background: color-mix(in oklab, var(--sand) 75%, transparent);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.site-header .inner {
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand > span:last-child { white-space: nowrap; }
@media (max-width: 980px) { .brand { font-size: 19px; } }
/* Brand mark: rendered via CSS ::before so .brand only needs to contain
   <wp:site-title> in the block editor. The "H" stays a visual flourish
   (decorative, not part of the accessibility tree by default). */
.brand::before {
  content: "H";
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: 50%;
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
/* Backwards-compat: hide any stray .brand-mark span if older content
   still references it. */
.brand-mark { display: none; }
.site-nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.site-nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: all .2s; }
.site-nav a:hover, .site-nav a.current { color: var(--ink); border-bottom-color: var(--olive); }
.header-cta {
  border: 1px solid var(--ink); padding: 8px 14px; border-radius: 999px;
  font-size: 13px; transition: all .2s;
}
.header-cta:hover { background: var(--ink); color: var(--sand); }
.pill-time {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  letter-spacing: 0.06em;
}
/* Pulsing dot: rendered via ::before so the pill is a single editable
   wp:group + wp:paragraph in the Site Editor instead of a wp:html chunk. */
.pill-time::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--olive);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.pill-time .pill-text { margin: 0; }
.pill-time.wp-block-group { gap: 8px; }
.pill-time.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
/* Backwards-compat for any older render still emitting <span class="dot"> */
.pill-time .dot { display: none; }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (max-width: 980px) { .pill-time { display: none; } }

/* Vision & Values grid */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (max-width: 980px) { .values { grid-template-columns: 1fr; } }
.value-cell { background: var(--sand); padding: 36px 28px 28px; min-height: 220px; display: flex; flex-direction: column; position: relative; }
.value-cell .vnum { font-family: var(--mono); font-size: 11px; color: var(--olive-deep); letter-spacing: 0.14em; }
.value-cell .ar { position: absolute; top: 24px; right: 28px; font-family: var(--arabic); font-size: 28px; color: var(--olive); opacity: 0.85; }
.value-cell h4 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 18px 0 8px; letter-spacing: -0.01em; color: var(--ink); }
.value-cell p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* Journal cards */
.journal-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
@media (max-width: 980px) { .journal-grid { grid-template-columns: 1fr; } }
.j-card { display: flex; flex-direction: column; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; transition: all .2s; position: relative; }
.j-card:hover, .j-card:focus-within { transform: translateY(-3px); border-color: var(--ink); }
/* Stretched link: the .read paragraph holds an anchor whose ::before fills
   the whole card, so the editor sees a normal <div> wp:group while the
   front-end keeps the clickable-card behaviour from the design. */
.j-card .j-card-link { position: static; color: inherit; text-decoration: none; }
.j-card .j-card-link::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.j-card > * { position: relative; }
.j-card.feat { grid-row: span 1; }
.j-card .j-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; display: flex; justify-content: space-between; }
.j-card .j-thumb { aspect-ratio: 16/9; border-radius: 12px; background: var(--sand-3); border: 1px solid var(--line-2); margin: 16px 0; overflow: hidden; color: var(--olive-deep); }
.j-card.feat .j-thumb { aspect-ratio: 21/10; }
.j-card .j-thumb svg { width: 100%; height: 100%; display: block; opacity: 0.75; }

/* SVG decoration without an inline <svg>: each thumb class paints the
   pattern via CSS mask-image (so the olive tint stays theme-controlled
   through background-color), eliminating the wp:html chunk that used to
   carry the inline SVG. */
.j-card .j-thumb-diamonds,
.j-card .j-thumb-circles,
.j-card .j-thumb-hexagons {
  background-color: var(--olive-deep);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.75;
}
.j-card .j-thumb-diamonds {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'><path d='M20 0 L40 20 L20 40 L0 20 Z M20 8 L32 20 L20 32 L8 20 Z' fill='none' stroke='black' stroke-width='0.6'/></pattern></defs><rect width='200' height='100' fill='url(%23p)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='40' height='40' patternUnits='userSpaceOnUse'><path d='M20 0 L40 20 L20 40 L0 20 Z M20 8 L32 20 L20 32 L8 20 Z' fill='none' stroke='black' stroke-width='0.6'/></pattern></defs><rect width='200' height='100' fill='url(%23p)'/></svg>");
}
.j-card .j-thumb-circles {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'><circle cx='15' cy='15' r='14' fill='none' stroke='black' stroke-width='0.5'/><circle cx='15' cy='15' r='8' fill='none' stroke='black' stroke-width='0.5'/></pattern></defs><rect width='200' height='120' fill='url(%23p)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='30' height='30' patternUnits='userSpaceOnUse'><circle cx='15' cy='15' r='14' fill='none' stroke='black' stroke-width='0.5'/><circle cx='15' cy='15' r='8' fill='none' stroke='black' stroke-width='0.5'/></pattern></defs><rect width='200' height='120' fill='url(%23p)'/></svg>");
}
.j-card .j-thumb-hexagons {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='50' height='44' patternUnits='userSpaceOnUse'><polygon points='25,2 48,15 48,30 25,42 2,30 2,15' fill='none' stroke='black' stroke-width='0.5'/></pattern></defs><rect width='200' height='120' fill='url(%23p)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><defs><pattern id='p' x='0' y='0' width='50' height='44' patternUnits='userSpaceOnUse'><polygon points='25,2 48,15 48,30 25,42 2,30 2,15' fill='none' stroke='black' stroke-width='0.5'/></pattern></defs><rect width='200' height='120' fill='url(%23p)'/></svg>");
}
.j-card h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); text-wrap: balance; }
.j-card.feat h3 { font-size: 30px; }
.j-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; }
.j-card .read { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--olive-deep); letter-spacing: 0.08em; text-transform: uppercase; }

/* ─── Breadcrumbs (Yoast/RankMath style) ─────────────────────────── */
.breadcrumbs {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 16px 0 0;
}
.breadcrumbs .sep { opacity: 0.4; }
.breadcrumbs a:hover { color: var(--olive-deep); }
.breadcrumbs .current { color: var(--ink); }

/* ─── Page hero ──────────────────────────────────────────────────── */
.page-hero {
  padding: 28px 0 56px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%);
}
.page-hero .eyebrow {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
}
.page-hero .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--ink-3); }
.page-hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 18px 0 18px;
  text-wrap: balance;
}
.page-hero h1 em { font-style: italic; color: var(--olive); }
.page-hero .lede {
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  max-width: 640px; text-wrap: pretty; margin: 0;
}
.page-hero .meta {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  margin-top: 28px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.page-hero .meta b { color: var(--ink); font-weight: 500; }

/* ─── Two-column layout (content + sidebar) ──────────────────────── */
.layout-2col {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  padding: 64px 0 88px;
}
@media (max-width: 980px) {
  .layout-2col { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── Sidebar ────────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 36px; }
.widget {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
}
.widget h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px;
}
.widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.widget li { font-size: 14px; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.widget li a:hover { color: var(--olive-deep); }
.widget li .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.widget-search input {
  width: 100%; padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit; color: var(--ink);
  outline: none;
}
.widget-search input:focus { border-color: var(--olive); }

.widget-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.widget-tags a {
  font-family: var(--mono); font-size: 11px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); transition: all .2s;
}
.widget-tags a:hover { border-color: var(--ink); color: var(--ink); }

.widget-recent .post-mini { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); }
.widget-recent .post-mini:last-child { border-bottom: 0; }
.widget-recent .post-mini .num {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; flex-shrink: 0; padding-top: 2px;
}
.widget-recent .post-mini h5 {
  margin: 0 0 4px; font-family: var(--serif); font-weight: 500;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.005em;
}
.widget-recent .post-mini .when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; }

/* CTA widget */
.widget-cta {
  background: var(--ink); color: var(--paper);
  border-radius: 18px; padding: 24px;
  border-top: 0;
}
.widget-cta h4 { color: oklch(0.94 0.012 88 / 0.6); margin-bottom: 12px; }
.widget-cta p { font-size: 14px; color: oklch(0.94 0.012 88 / 0.85); margin: 0 0 16px; line-height: 1.5; }
.widget-cta .btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 500;
  transition: background .2s;
}
.widget-cta .btn-cta:hover { background: var(--olive-soft); }

/* ─── Article body (post + privacy) ──────────────────────────────── */
.article-body {
  font-size: 17.5px; line-height: 1.72; color: var(--ink-2);
}
.article-body > * + * { margin-top: 1em; }
.article-body h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin-top: 56px; margin-bottom: 16px;
  text-wrap: balance;
}
.article-body h2 em { font-style: italic; color: var(--olive); }
.article-body h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; letter-spacing: -0.01em;
  color: var(--ink); margin-top: 36px; margin-bottom: 8px;
}
.article-body h2 + p, .article-body h3 + p { margin-top: 6px; }
.article-body p { margin: 0; text-wrap: pretty; }
.article-body strong { color: var(--ink); font-weight: 500; }
.article-body a { color: var(--olive-deep); border-bottom: 1px solid var(--olive-soft); }
.article-body a:hover { background: color-mix(in oklab, var(--olive-soft) 30%, transparent); }
.article-body ul, .article-body ol { padding-left: 1.5em; margin-left: 0; }
.article-body li { margin: 0.5em 0; }
.article-body blockquote {
  border-left: 3px solid var(--olive);
  padding: 4px 0 4px 24px;
  margin: 32px 0; font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.4; color: var(--ink); letter-spacing: -0.005em;
}
.article-body blockquote cite {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-style: normal;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
}
.article-body .pullquote {
  font-family: var(--serif); font-weight: 500; font-size: 32px;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink);
  text-align: center; margin: 56px auto; max-width: 620px;
  position: relative; padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.article-body figure {
  margin: 36px 0;
}
.article-body figure .figbox {
  aspect-ratio: 16/9; border-radius: 16px;
  background: var(--sand-3);
  border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  color: var(--ink-3); font-size: 16px;
}
.article-body figure figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 12px; text-align: center;
}
.article-body hr {
  border: 0; height: 1px; background: var(--line);
  margin: 48px 0;
}
.article-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--sand-2); padding: 2px 6px; border-radius: 4px;
  color: var(--ink);
}

/* TOC widget */
.widget-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.widget-toc ol li {
  counter-increment: toc;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 14px; line-height: 1.4; color: var(--ink-2);
  position: relative; padding-left: 32px;
}
.widget-toc ol li:last-child { border-bottom: 0; }
.widget-toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em;
}
.widget-toc ol li a:hover { color: var(--olive-deep); }
.widget-toc ol li.active a { color: var(--olive-deep); }

/* ─── Blog index ────────────────────────────────────────────────── */
.blog-grid { display: flex; flex-direction: column; gap: 56px; }
.post-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 32px;
  padding-bottom: 56px; border-bottom: 1px solid var(--line);
}
.post-card:last-child { border-bottom: 0; padding-bottom: 0; }
.post-card.featured { grid-template-columns: 1fr; gap: 24px; }
.post-card.featured .thumb { aspect-ratio: 21/9; }
.post-card .thumb {
  aspect-ratio: 4/3; border-radius: 14px;
  background: var(--sand-3); border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
}
.post-card .thumb .pat { position: absolute; inset: 0; opacity: 0.7; color: var(--olive-deep); }
.post-card .thumb .pat svg { width: 100%; height: 100%; display: block; }
.post-card .body { display: flex; flex-direction: column; gap: 12px; }
.post-card .post-meta {
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.post-card .post-meta .cat { color: var(--olive-deep); }
.post-card h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 32px; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.post-card.featured h2 { font-size: 48px; }
.post-card .excerpt { font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0; text-wrap: pretty; }
.post-card .read-more {
  font-family: var(--mono); font-size: 11px;
  color: var(--olive-deep); letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.post-card .author {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; font-size: 13px; color: var(--ink-3);
}
.post-card .author .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  border: 1px solid var(--line);
}
.post-card .author b { color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .post-card { grid-template-columns: 1fr; }
}

/* Pagination */
.pagination {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pagination .nums { display: flex; gap: 8px; }
.pagination .nums a, .pagination .nums span {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--ink-2); transition: all .2s;
}
.pagination .nums a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .nums .on { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.pagination .pg-link { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.pagination .pg-link:hover { color: var(--ink); }

/* ─── Single post layout ─────────────────────────────────────────── */
.post-header .author-strip {
  display: flex; gap: 16px; align-items: center; margin-top: 28px;
  padding-top: 20px; border-top: 1px solid var(--line-2);
}
.post-header .author-strip .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.post-header .author-strip .who { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }
.post-header .author-strip .role { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.post-header .meta-row {
  display: flex; gap: 24px; flex-wrap: wrap; margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-header .meta-row b { color: var(--ink); font-weight: 500; }

.post-tags {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.post-tags .lbl { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.post-tags a {
  font-family: var(--mono); font-size: 11px;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2);
}
.post-tags a:hover { border-color: var(--ink); color: var(--ink); }

.share-row {
  margin-top: 24px;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.share-row a {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-2); transition: all .2s;
}
.share-row a:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }

/* Comments stub */
.comments-section { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.comments-section h3 {
  font-family: var(--serif); font-weight: 500; font-size: 28px;
  letter-spacing: -0.01em; margin: 0 0 24px;
}
.comment {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  padding: 20px 0; border-bottom: 1px dashed var(--line-2);
}
.comment .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--sand-3); border: 1px solid var(--line);
  display: grid; place-items: center; font-family: var(--serif);
  font-size: 18px; color: var(--ink-2);
}
.comment .who {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  color: var(--ink);
}
.comment .when {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-left: 8px;
}
.comment p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.comment .reply { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive-deep); }

.comment-form {
  margin-top: 24px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px; padding: 24px;
}
.comment-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 12px 14px;
  background: var(--sand); border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink); outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--olive); }
.comment-form textarea { min-height: 100px; resize: vertical; }
.comment-form button {
  margin-top: 12px; padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--sand); border: 0; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 13px;
  transition: background .2s;
}
.comment-form button:hover { background: var(--olive-deep); }

/* Related posts */
.related {
  margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line);
}
.related h3 {
  font-family: var(--serif); font-weight: 500; font-size: 28px;
  letter-spacing: -0.01em; margin: 0 0 24px;
}
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.related-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px;
  transition: all .2s;
}
.related-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.related-card .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.related-card h4 {
  font-family: var(--serif); font-weight: 500; font-size: 22px;
  line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
@media (max-width: 720px) { .related-grid { grid-template-columns: 1fr; } }

/* ─── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  padding: 64px 0 36px;
  background: var(--sand-2);
  border-top: 1px solid var(--line-2);
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.foot a:hover { color: var(--olive-deep); }
.foot-brand p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 12px 0 0; max-width: 280px; }
.foot-base {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-base .links { display: flex; gap: 16px; }
/* When .links is rendered as a wp:group of paragraphs (so each link is
   editable in the Site Editor), keep the same flex row + 16px gap and
   reset the paragraph margins. */
.foot-base .links.wp-block-group { gap: 16px; }
.foot-base .links.wp-block-group > p { margin: 0; }

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Below ~640px the footer collapses to one column so each nav block can
   breathe; the brand block leads, then the three foot columns stack. */
@media (max-width: 640px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-base.wp-block-group { row-gap: 8px; }
}

/* Tablet & mobile header polish:
   - `.wrap.inner` allows the brand to shrink so the navigation hamburger
     and the "Get the app" CTA stay on one line at tablet widths.
   - WordPress's core/navigation overlayMenu="mobile" attribute only
     swaps to the hamburger below 600px by default; we extend that
     breakpoint to 980px so tablets get the overlay too. Above 980px the
     inline nav fits comfortably alongside the brand + pill + CTA.
   - At ≤600px (mobile) the row collapses to just the prayer pill and
     hamburger as requested — brand and CTA hide so the live countdown
     stays visible without crowding the toggle. */
@media (max-width: 980px) {
  .site-header .inner.wp-block-group { gap: 16px; }
  /* Force the wp:navigation overlay button to show + hide the inline
     container until the user opens it. */
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
    display: none !important;
  }
  /* When the overlay IS open, force every nav item to render — guards
     against any inherited rule that might collapse the list to a single
     visible row. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 1000 !important;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
  }
  /* Drop margin-left:auto on the nav so the row can rebalance with
     `justify-content: space-between` once brand/CTA collapse. */
  .site-header .site-nav { margin-left: 0; }
  .site-header .inner.wp-block-group { justify-content: space-between; }
}

/* Mobile (≤600px): show the brand on the left + hamburger on the right.
   The live countdown pill and "Get the app" CTA still hide because they
   crowd the small viewport (the pill also keeps redrawing every second
   which the user reported as distracting). */
@media (max-width: 600px) {
  .site-header .header-cta-wrap,
  .site-header .pill-time { display: none !important; }
  /* Brand left, hamburger right. */
  .site-header .inner.wp-block-group { justify-content: space-between; }
  /* Slightly tighter brand typography on small screens so the H mark
     and the site title still feel comfortable next to the hamburger. */
  .site-header .brand .wp-block-site-title { font-size: 17px; }
  .site-header .brand::before { width: 24px; height: 24px; font-size: 14px; }
  .site-header .brand.wp-block-group { gap: 8px; }
}
@media (max-width: 720px) {
  .site-header .header-cta { padding: 6px 12px; font-size: 12px; }
}

/* The wp:navigation overlay menu (hamburger + slide-in panel) — pretty
   themed version that matches the brand: sand ground with a subtle
   olive star pattern, large serif menu links, fade+slide animation. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  color: var(--ink);
}
.site-header .wp-block-navigation__responsive-container-open { padding: 6px; }
.site-header .wp-block-navigation__responsive-container-close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  transition: all 0.2s;
}
.site-header .wp-block-navigation__responsive-container-close:hover {
  border-color: var(--ink); color: var(--ink); transform: rotate(90deg);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--sand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'><g fill='none' stroke='%234a5a32' stroke-width='0.6' opacity='0.18'><path d='M40 6 L52 28 L74 40 L52 52 L40 74 L28 52 L6 40 L28 28 Z'/><path d='M40 18 L48 32 L62 40 L48 48 L40 62 L32 48 L18 40 L32 32 Z'/></g></svg>");
  background-repeat: repeat;
  background-size: 80px 80px;
  padding: 0 !important;
}
/* Anchor the menu content to the centre of the viewport with breathing
   room around it. */
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
  gap: 4px !important;
  padding: 0;
  list-style: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--line-2);
  animation: hafdz-menu-item-in 0.32s ease-out both;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(1) { animation-delay: 0.04s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(2) { animation-delay: 0.08s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(3) { animation-delay: 0.12s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(4) { animation-delay: 0.16s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(5) { animation-delay: 0.20s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:nth-child(6) { animation-delay: 0.24s; }
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:last-child { border-bottom: 0; }

.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
  display: block !important;
  width: 100%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 6vw, 36px);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 18px 4px;
  transition: padding 0.2s, color 0.2s;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content[aria-current="page"] {
  color: var(--olive-deep);
  padding-left: 12px;
}
@keyframes hafdz-menu-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Front-page hero, sections, features, stats ─────────────────── */
/* Subtle Islamic 8-point-star tessellation behind the hero, baked into a
   data-URI so it ships as plain CSS (no extra HTTP request, no wp:html). */
.hero-section {
  position: relative;
  background-color: var(--sand);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'><g fill='none' stroke='%234a5a32' stroke-width='0.6'><path d='M40 6 L52 28 L74 40 L52 52 L40 74 L28 52 L6 40 L28 28 Z'/><path d='M40 18 L48 32 L62 40 L48 48 L40 62 L32 48 L18 40 L32 32 Z'/></g></svg>");
  background-repeat: repeat;
  background-position: top left;
  background-size: 80px 80px;
}
.hero-section > * { position: relative; }

/* Note: .hero-grid sits on the SAME element as .wrap (both classes are on
   one div). Using `padding: 56px 0 88px` shorthand here would zero the
   horizontal 32px padding that .wrap provides — invisible on desktop
   thanks to max-width: 1240px, but lets content go edge-to-edge on
   mobile. Use individual padding-block declarations so .wrap's
   horizontal padding survives. */
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; padding-top: 56px; padding-bottom: 88px; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.btn { padding: 14px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: all .2s; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.btn-primary { background: var(--ink); color: var(--sand); }
.btn-primary:hover { background: var(--olive-deep); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.hero-meta { margin-top: 48px; display: flex; gap: 36px; flex-wrap: wrap; color: var(--ink-3); font-size: 13px; }
.hero-meta b { color: var(--ink); font-weight: 500; }

.prayer-card { padding: 28px 30px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px oklch(0.245 0.022 95 / 0.18); }
.pc-head { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.pc-loc b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.pc-loc { font-size: 13px; color: var(--ink-2); }
/* When .pc-loc is a wp:group containing wp:paragraph blocks instead of an
   inline-styled <div>, project the design's two-line look onto those
   paragraphs explicitly. */
.pc-loc.wp-block-group { gap: 0; }
.pc-loc.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.pc-loc-label { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }

.pc-date { text-align: right; font-size: 12px; color: var(--ink-3); }
/* When .pc-date is a wp:paragraph (instead of an inline-styled <div>) it
   inherits browser default margins; reset them and keep the design's
   right-aligned mono-ish look. */
p.pc-date { margin: 0; }
.pc-row { display: grid; grid-template-columns: 1fr auto 8px; gap: 18px; align-items: center; padding: 13px 0; border-bottom: 1px dashed var(--line-2); font-size: 14px; position: relative; }
.pc-row:last-child { border-bottom: 0; }
.pc-row.now { color: var(--olive); }
.pc-row.now .pc-name b,
.pc-row.now .pc-name strong { color: var(--olive-deep); }
.pc-row.now .pc-marker { background: var(--olive); }
.pc-name { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.pc-name b,
.pc-name strong { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); }
.pc-name .ar { font-family: var(--arabic); color: var(--ink-3); font-size: 15px; }
.pc-time { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin: 0; }
.pc-marker { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid var(--line); }
/* CSS pseudo-marker so the prayer row no longer needs a wp:html span. The
   .pc-row is grid-laid-out with a reserved 8px third column; the ::after
   slots into that column naturally. */
.pc-row::after {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  align-self: center;
}
.pc-row.now::after { background: var(--olive); border-color: var(--olive); }
/* When .pc-row is a wp:group its children inherit is-layout-flow margins;
   suppress them so the grid layout owns spacing. */
.pc-row.wp-block-group { gap: 18px; }
.pc-row.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.pc-foot { margin-top: 16px; padding-top: 14px; display: flex; justify-content: space-between; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.pc-foot .countdown { color: var(--olive-deep); }

/* Prayer card — when each sub-section is its own wp:group, suppress the
   layout-flow block-gap so the dashed dividers and explicit margins from
   the design rule the spacing instead. */
.prayer-card.wp-block-group,
.pc-head.wp-block-group,
.pc-list.wp-block-group,
.pc-foot.wp-block-group { gap: 0; }
.prayer-card.wp-block-group > *,
.pc-head.wp-block-group > *,
.pc-list.wp-block-group > *,
.pc-foot.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
/* Restore the design's 16px gap between .pc-list and .pc-foot. */
.prayer-card.wp-block-group > .pc-foot { margin-top: 16px; }

/* Prayer card foot — countdown + madhab labels are paragraphs now. */
.pc-foot .pc-foot-countdown,
.pc-foot .pc-foot-meta { margin: 0; }

/* ─── Block bridges for templates and patterns ───────────────────── */
/* page-hero meta block (now wp:group + paragraphs instead of inline spans) */
.page-hero .meta.wp-block-group { gap: 24px; }
.page-hero .meta.wp-block-group > p { margin: 0; }

/* single.html — post author strip restructured into nested groups */
.post-author-strip.wp-block-group { gap: 16px; }
.post-author-strip.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-author-strip .author-id.wp-block-group { gap: 0; }
.post-author-strip .author-id.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-author-strip .meta-row.wp-block-group { gap: 24px; margin-left: auto; }
.post-author-strip .meta-row.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-author-strip .meta-row.wp-block-group > p { margin: 0; }

/* post-tags: <p class="lbl"> + wp:post-terms — flatten the terms wrapper
   so its inner anchors become direct flex items of .post-tags */
.post-tags.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-tags .lbl { margin: 0; }
.post-tags .wp-block-post-terms { display: contents; }

/* share-row label is now a paragraph */
.share-row.wp-block-group { gap: 8px; }
.share-row.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.share-row .share-label {
  margin: 0; margin-right: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}

/* related + comments sections — let the design's h3 margin win */
.related.wp-block-group { gap: 0; }
.related.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.related.wp-block-group > h3 { margin: 0 0 24px; }

.comments-section.wp-block-group { gap: 0; }
.comments-section.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.comments-section.wp-block-group > h3 { margin: 0 0 24px; }
.comments-section.wp-block-group > .comment-form { margin-top: 24px; }

/* sidebar-post: author-bio is now a wp:group flex row holding avatar + text group */
.author-bio.wp-block-group { gap: 12px; }
.author-bio.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.author-bio-text.wp-block-group { gap: 0; }
.author-bio-text.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

/* 404 — buttons row, originally inline-styled <p style="margin-top:28px"> */
.error-actions { margin-top: 28px; }

/* Hero actions: each .btn is now wrapped in a paragraph so it is editable
   in the Site Editor; keep flex layout, restore the design's 32px gap
   above the buttons (the global reset zeroed margin-block-start), and
   zero out paragraph margins. */
.hero-actions.wp-block-group { gap: 14px; margin-top: 32px; }
.hero-actions .hero-action { margin: 0; }

/* Pagination row at the bottom of the blog grid — was a single wp:html
   <nav>; now a wp:group with paragraph pg-links + a wp:html .nums atom. */
.pagination.wp-block-group { gap: 0; }
.pagination.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.pagination .pg-link { margin: 0; }
.pagination .pg-link a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); text-decoration: none;
}
.pagination .pg-link a:hover { color: var(--ink); }

/* Post-card meta row (home-blog-grid): three paragraphs in a flex row */
.post-card .post-meta.wp-block-group { gap: 16px; }
.post-card .post-meta.wp-block-group > p { margin: 0; }

/* Post-card author row: avatar (wp:html span) + paragraph */
.post-card .author.wp-block-group { gap: 10px; }
.post-card .author.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-card .author.wp-block-group > p { margin: 0; }

/* Breadcrumbs as a wp:group of paragraphs (one per crumb + .sep) */
.breadcrumbs.wp-block-group {
  gap: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 0 0;
}
.breadcrumbs.wp-block-group > p { margin: 0; }

/* Sidebar widgets — switch from <ul><li> to wp:group + .count-row paragraphs.
   The original .widget li styles target an <li>; mirror them onto .count-row. */
.widget-list.wp-block-group { gap: 10px; }
.widget-list.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.count-row.wp-block-group { gap: 12px; align-items: baseline; }
.count-row.wp-block-group > p { margin: 0; font-size: 14px; color: var(--ink-2); }
.count-row .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.count-row a:hover { color: var(--olive-deep); }

/* Sidebar simple link list (wp:list inside .widget-link-list) — match the
   spacing of the original .widget ul. */
.widget-link-list .wp-block-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.widget-link-list .wp-block-list li { font-size: 14px; color: var(--ink-2); margin: 0; }
.widget-link-list .wp-block-list li a:hover { color: var(--olive-deep); }

/* Recent posts widget — post-mini is now a wp:group instead of bare divs */
.post-mini.wp-block-group { gap: 12px; align-items: flex-start; }
.post-mini.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-mini.wp-block-group .num { margin: 0; padding-top: 2px; flex-shrink: 0; }
.post-mini-text.wp-block-group { gap: 4px; }
.post-mini-text.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-mini-text > h5 { margin: 0; }
.post-mini-text > .when { margin: 0; }

/* Tags widget — each tag is now a wp:paragraph (single anchor inside) */
.widget-tags.wp-block-group { gap: 6px; }
.widget-tags.wp-block-group > p { margin: 0; }

/* core/search block styled to match the design's bare input look */
.widget-search .wp-block-search { margin: 0; }
.widget-search .wp-block-search__label { display: none; }
.widget-search .wp-block-search__inside-wrapper { padding: 0; border: 0; background: transparent; }
.widget-search .wp-block-search__input {
  width: 100%; padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit; color: var(--ink); outline: none;
}
.widget-search .wp-block-search__input:focus { border-color: var(--olive); }

/* Front-cta buttons & 404 actions: each .btn now wrapped in a paragraph */
.cta-buttons.wp-block-group { gap: 14px; }
.cta-buttons .cta-action { margin: 0; }
.error-actions.wp-block-group { gap: 14px; margin-top: 28px; }
.error-actions.wp-block-group > p { margin: 0; }

/* front-vision: vnum and ar are paragraphs now (were inline-styled divs) */
.value-cell .vnum { margin: 0; }
.value-cell .ar { margin: 0; }
.value-cell.wp-block-group .ar {
  /* The Arabic flourish keeps its absolute position from the design rule. */
}

/* front-impact: stat-num is a paragraph wrapper holding number + .unit span */
.stat-cell .stat-num { margin: 0; }

/* front-journal j-meta is a wp:group flex row of two paragraphs */
.j-meta.wp-block-group { gap: 0; }
.j-meta.wp-block-group > p { margin: 0; }

.section { padding: 88px 0; border-top: 1px solid var(--line-2); }
.section.alt { background: var(--sand-2); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 56px; align-items: end; }
@media (max-width: 980px) { .section-head { grid-template-columns: 1fr; gap: 24px; } }
.section-num { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; }
.section-title { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 0; text-wrap: balance; }
.section-title em { font-style: italic; color: var(--olive); }
.section-lede { font-size: 17px; color: var(--ink-2); line-height: 1.6; max-width: 560px; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
@media (max-width: 980px) { .features-grid { grid-template-columns: 1fr; } }
.feat-cell { background: var(--sand); padding: 32px 28px; min-height: 240px; display: flex; flex-direction: column; gap: 0; }
.feat-cell.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.feat-cell .num { font-family: var(--mono); font-size: 11px; color: var(--olive-deep); letter-spacing: 0.12em; margin: 0; }
.feat-cell h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 14px 0 8px; letter-spacing: -0.01em; }
.feat-cell p:not(.num):not(.more) { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 auto 0; }
.feat-cell .more { margin: 18px 0 0; font-family: var(--mono); font-size: 11px; color: var(--olive-deep); letter-spacing: 0.08em; text-transform: uppercase; }
.feat-cell .more a { color: inherit; text-decoration: none; }

/* Section-head: keep its 64px grid gap intact. Reset only the INNER
   wp-block-group (the column holding section-num + section-title) so our
   own margins on .section-title win over the layout block-gap. */
.section-head > .wp-block-group { gap: 0; }
.section-head > .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.section-head .section-num { margin: 0; }

/* These design margins are restored further down the file (after the
   blanket .wp-block-group.is-layout-flow > * reset) so they win the
   source-order tiebreak at equal (0,2,0) specificity. */

/* features-grid is a CSS grid; ensure wp-block-group's gap doesn't override
   the 1px hairline gap that creates the cell dividers. */
.features-grid.wp-block-group { gap: 1px; }

/* Every CSS-grid (or flex-column) container we drive ourselves needs its
   children's auto margin-block-start zeroed, otherwise WP's
   :where(.is-layout-flow)>*+* adds 24px on top of our `gap`, doubling the
   vertical spacing between rows. We already do this on .blog-grid; add it
   here for every other grid container too. */
.features-grid.wp-block-group > *,
.values.wp-block-group > *,
.stats-grid.wp-block-group > *,
.journal-grid.wp-block-group > *,
.hero-grid.wp-block-group > *,
.foot-grid.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

/* ─── Layout container resets — let our design margins win ───────── */
/* WordPress injects this rule into the page's <style> block:
       :root :where(.is-layout-flow) > *           { margin-block-start: 24px; margin-block-end: 0; }
       :root :where(.is-layout-constrained) > *    { margin-block-start: 24px; margin-block-end: 0; }
   Specificity (0,1,0) — same as a single class. Because the <style> is
   rendered after our stylesheet link, source order ties go to WP and our
   design margins (`.section-head { margin-bottom: 56px }`, etc.) lose.
   Bump our reset to (0,2,0) by combining .wp-block-group with the
   layout-class so it wins universally. Per-element design margins like
   `.section-head.wp-block-group { margin-bottom: 56px }` are also (0,2,0)
   and live LATER in this file, so they re-introduce intentional spacing
   on top of the zeroed baseline. */
.wp-block-group.is-layout-flow > *,
.wp-block-group.is-layout-constrained > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Same problem at the document root: WordPress wraps the whole template
   in <body class="wp-site-blocks"> and injects
       :where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }
   at specificity (0,0,0). That puts a 24px gap above <main> and the
   footer template-part. Override with a plain class selector at (0,1,0)
   so the header stays flush against the main content and the footer sits
   directly after the main column. */
.wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* These wrappers carry their own internal spacing via explicit gaps or
   element-level margins; pin gap to 0 so WP's --wp--style--block-gap
   doesn't add invisible padding between immediate children. */
.wrap.wp-block-group, .wrap-narrow.wp-block-group,
.section.wp-block-group, .page-hero.wp-block-group { gap: 0; }

/* ─── Site header (template part) ────────────────────────────────── */
/* The outer <header class="site-header"> is itself a wp:group; ensure no
   block-gap creeps in around the single .wrap.inner row inside it. */
.site-header.wp-block-group { gap: 0; }
.site-header.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
/* The .wrap.inner row is a flex layout group. Pin gap to 32px so WP's
   default --wp--style--block-gap doesn't shrink the spacing. */
.site-header .inner.wp-block-group { gap: 32px; }
/* Header CTA: was a bare <a>, now wrapped in a paragraph for editability.
   The inner anchor inherits the .header-cta button look from earlier. */
.header-cta-wrap { margin: 0; }

/* ─── Site footer (template part) ────────────────────────────────── */
.site-footer.wp-block-group { gap: 0; }
.site-footer.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.site-footer .wrap.wp-block-group > * + * { margin-block-start: 0; }

/* foot-grid is a CSS grid with explicit gap; keep it. */
.foot-grid.wp-block-group { gap: 48px; }

/* Each .foot column: tighten internal gap so h5 + nav sit close together. */
.foot.wp-block-group { gap: 0; }
.foot.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.foot.wp-block-group > h5 { margin: 0 0 16px; }

/* Footer brand column: brand row + tagline paragraph */
.foot-brand.wp-block-group .brand.wp-block-group { gap: 10px; }
.foot-brand.wp-block-group > .brand { margin: 0; }
.foot-brand.wp-block-group > .foot-brand-tagline { margin: 12px 0 0; }

/* Bottom copyright row: flex space-between */
.foot-base.wp-block-group { gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-base.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.foot-base-copyright { margin: 0; }

/* ─── Hero (front page left column) ──────────────────────────────── */
.hero-copy.wp-block-group { gap: 0; }
.hero-copy.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.hero-eyebrow {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0;
}
.hero-headline {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 6.2vw, 88px); line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 24px 0 0;
  text-wrap: balance;
}
.hero-headline em { font-style: italic; color: var(--olive); }
.hero-subtitle {
  margin: 24px 0 0;
  font-size: 18px; line-height: 1.55;
  color: var(--ink-2); max-width: 540px;
  text-wrap: pretty;
}
.hero-meta.wp-block-group {
  display: flex; flex-wrap: wrap;
  margin-top: 48px; gap: 36px;
  color: var(--ink-3); font-size: 13px;
}
.hero-meta.wp-block-group > p { margin: 0; }
.hero-meta b { color: var(--ink); font-weight: 500; }

/* ─── About / manifesto ──────────────────────────────────────────── */
.section-title-tight { margin-bottom: 32px; }

.about-hadith.wp-block-quote {
  border-left: 3px solid var(--olive);
  padding: 4px 0 4px 24px;
  margin: 0 0 32px;
  font-family: var(--serif); font-style: italic;
  font-size: 28px; line-height: 1.3; color: var(--ink);
  letter-spacing: -0.005em;
}
.about-hadith.wp-block-quote p { margin: 0; }
.about-hadith.wp-block-quote cite {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-style: normal;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
}

.about-body.wp-block-group { gap: 16px; }
.about-body.wp-block-group > p {
  font-size: 17px; line-height: 1.7; color: var(--ink-2);
  margin: 0;
}

/* ─── Closing CTA ────────────────────────────────────────────────── */
.cta-section .wrap-narrow { text-align: center; }
.cta-section .section-num { text-align: center; margin: 0; }
.cta-title { margin: 14px 0 18px; }
.cta-body {
  font-size: 17px; color: var(--ink-2);
  max-width: 520px; margin: 0 auto 32px;
}
.cta-buttons {
  display: inline-flex; gap: 14px;
  flex-wrap: wrap; justify-content: center;
}

/* The dark "ink" box that holds the CTA copy — same visual treatment
   as .stats-grid (rounded ink rectangle on the section's sand-2 ground)
   but contained inside .wrap-narrow so it stays inset rather than full
   width. Text and button palettes flip to light-on-dark inside. */
.cta-box {
  background: var(--ink); color: var(--paper);
  border-radius: 24px;
  padding: 64px 40px;
  text-align: center;
}
.cta-box .section-num {
  color: oklch(0.94 0.012 88 / 0.55);
}
.cta-box .cta-title { color: var(--paper); }
.cta-box .cta-title em { color: var(--olive-soft); font-style: italic; }
.cta-box .cta-body {
  color: oklch(0.94 0.012 88 / 0.85);
}
/* Button palette flip on the dark ground. .btn-primary becomes the bright
   pill (paper background, ink text); .btn-ghost gets a translucent paper
   border + paper text so it stays legible. */
.cta-box .btn.btn-primary {
  background: var(--paper); color: var(--ink);
}
.cta-box .btn.btn-primary:hover {
  background: var(--olive-soft); color: var(--ink);
}
.cta-box .btn.btn-ghost {
  border-color: oklch(0.94 0.012 88 / 0.3);
  color: var(--paper);
}
.cta-box .btn.btn-ghost:hover {
  border-color: var(--paper); background: transparent;
}

/* The global :where(.is-layout-flow) > * reset zeros the design's
   margin-bottom on .cta-body and margin between .cta-title / .cta-body /
   .cta-buttons. Restore them with combined-class selectors that beat the
   reset's (0,2,0) specificity. */
.cta-section.wp-block-group .cta-title { margin: 14px 0 18px; }
.cta-section.wp-block-group .cta-body { margin: 0 auto 32px; }
.cta-section.wp-block-group .cta-buttons { margin-top: 0; }
.cta-box.wp-block-group { gap: 0; }
.cta-box.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.cta-box.wp-block-group > .section-num { margin: 0; }

/* ─── Sidebar widgets — reset block-gap, scope widget internals ──── */
.sidebar.wp-block-group { gap: 36px; }
.sidebar.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.widget.wp-block-group { gap: 16px; }
.widget.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
/* The .widget rule already has border-top + padding-top + h4 styles; just
   ensure the inner h4 carries the design's small margin instead of inheriting
   block-gap from is-layout-flow. */
.widget.wp-block-group > h4 { margin: 0 0 16px; }
.widget.wp-block-group .wp-block-paragraph,
.widget.wp-block-group p { margin: 0; }

/* Sidebar — author widget */
.widget-author .author-bio {
  display: flex; gap: 12px; align-items: flex-start;
}
.widget-author .author-bio > .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  border: 1px solid var(--line); flex-shrink: 0;
}
.widget-author .author-name {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.2; margin: 0;
}
.widget-author .author-role {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 4px 0 8px;
}
.widget-author .author-blurb {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  margin: 0;
}

/* Sidebar — CTA button wrapped in a paragraph for editability.
   The blanket .wp-block-group.is-layout-flow > * reset (0,2,0) zeroes
   the body paragraph's margin-bottom, so we open the gap from the
   button side instead — 16px matches `.widget-cta p { margin-bottom }`
   and lands in the same source order as the blanket, so this wins. */
.widget-cta .btn-cta-wrap { margin: 16px 0 0; }

/* ─── Vision / values grid ───────────────────────────────────────── */
.values.wp-block-group { gap: 1px; }
.value-cell.wp-block-group { gap: 0; }
.value-cell.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.value-cell.wp-block-group > h4 { margin: 18px 0 8px; }

/* ─── Stats grid ─────────────────────────────────────────────────── */
.stats-grid.wp-block-group { gap: 0; }
.stat-cell.wp-block-group { gap: 0; }
.stat-cell.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

/* When a stat-cell has no real number yet (.is-pending), the closure
   renders a `<p class="stat-num-skeleton">` in place of the headline
   figure. Style it as a shimmer block so the cell still has visual
   weight and the layout doesn't collapse. */
.stat-cell.is-pending .stat-num-skeleton {
  display: block;
  width: 70%;
  height: clamp(44px, 4.6vw, 60px);
  margin: 0;
  padding: 0;
  border-radius: 6px;
  background-color: oklch(0.94 0.012 88 / 0.10);
  background-image: linear-gradient(
    90deg,
    oklch(0.94 0.012 88 / 0)    0%,
    oklch(0.94 0.012 88 / 0.18) 50%,
    oklch(0.94 0.012 88 / 0)    100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  animation: hafdz-stat-shimmer 1.6s ease-in-out infinite;
  /* Hide the &nbsp; placeholder text from screen readers (the parent
     is aria-hidden) and prevent it taking visible space. */
  color: transparent;
  line-height: 1;
  user-select: none;
}
@keyframes hafdz-stat-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-cell.is-pending .stat-num-skeleton { animation: none; }
}

/* ─── Journal grid (front page) ──────────────────────────────────── */
.journal-grid.wp-block-group { gap: 24px; }
.j-card.wp-block-group { gap: 0; }
.j-card.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.j-card.wp-block-group h3 { margin: 0 0 8px; }
.j-card.wp-block-group p:not(.read) { margin: 0 0 14px; }
.j-card.wp-block-group .read { margin-top: auto; }

.journal-readall { margin-top: 32px; text-align: center; }
.journal-readall a {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink); padding: 8px 14px; border-radius: 999px;
  font-size: 13px; transition: all .2s; color: inherit; text-decoration: none;
}
.journal-readall a:hover { background: var(--ink); color: var(--sand); }

/* ─── Blog grid (home.html) ──────────────────────────────────────── */
.blog-grid.wp-block-group { gap: 56px; }
.blog-grid.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-card.wp-block-group { gap: 32px; }
.post-card.wp-block-group .body.wp-block-group { gap: 12px; }
.post-card.wp-block-group .body.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.post-card.wp-block-group .body.wp-block-group > h2 { margin: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: var(--paper); border-radius: 24px; overflow: hidden; }
@media (max-width: 980px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.stat-cell { padding: 40px 28px; border-right: 1px solid oklch(0.94 0.012 88 / 0.14); }
.stat-cell:last-child { border-right: 0; }
.stat-num { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.025em; }
.stat-num .unit { font-size: 0.5em; color: oklch(0.94 0.012 88 / 0.55); margin-left: 4px; }
.stat-lbl { margin-top: 14px; font-family: var(--mono); font-size: 11px; color: oklch(0.94 0.012 88 / 0.55); letter-spacing: 0.1em; text-transform: uppercase; }
.stat-sub { margin-top: 4px; font-size: 13px; color: oklch(0.94 0.012 88 / 0.85); font-family: var(--serif); font-style: italic; }

/* ─── Core block overrides — blend WordPress dynamic blocks ──────── */
.wp-block-group { box-sizing: border-box; }

/* Reset wp-block-group default vertical gap inside hero/wrap so the
   design's own margins on h1/p/etc remain authoritative. */
.page-hero.wp-block-group,
.page-hero .wp-block-group { gap: 0; }

/* Post title inside a page-hero behaves like the design's <h1>. */
.page-hero .wp-block-post-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 18px 0 18px;
  text-wrap: balance;
}
.page-hero .wp-block-post-title em { font-style: italic; color: var(--olive); }
.page-hero .wp-block-post-title a { color: inherit; text-decoration: none; }

/* Post excerpt acts as the .lede paragraph in heroes. */
.page-hero .wp-block-post-excerpt {
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  max-width: 640px; text-wrap: pretty; margin: 0;
}
.page-hero .wp-block-post-excerpt p { margin: 0; }
.page-hero .wp-block-post-excerpt__more-link,
.page-hero .wp-block-post-excerpt__more-text { display: none; }

/* Author strip (post header) — mimic design's flex row */
.post-author-strip {
  display: flex; gap: 16px; align-items: center;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.post-author-strip .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  border: 1px solid var(--line); flex-shrink: 0;
}
.post-author-strip .who,
.post-author-strip .wp-block-post-author-name {
  font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink);
}
.post-author-strip .wp-block-post-author-name a { color: inherit; text-decoration: none; }
.post-author-strip .role {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-author-strip .meta-row {
  display: flex; gap: 24px; flex-wrap: wrap; margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-author-strip .meta-row b { color: var(--ink); font-weight: 500; }
.post-author-strip .date-pill,
.post-author-strip .wp-block-post-date {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-author-strip .wp-block-post-date time { color: var(--ink); font-weight: 500; }

/* Article body — wp:post-content output */
article.article-body { font-size: 17.5px; line-height: 1.72; color: var(--ink-2); }
article.article-body > * + * { margin-top: 1em; }
article.article-body .wp-block-post-content > * + * { margin-top: 1em; }
article.article-body h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 36px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin-top: 56px; margin-bottom: 16px;
  text-wrap: balance;
}
article.article-body h2 em { font-style: italic; color: var(--olive); }
article.article-body h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; letter-spacing: -0.01em;
  color: var(--ink); margin-top: 36px; margin-bottom: 8px;
}
article.article-body p { margin: 0; text-wrap: pretty; }
article.article-body strong { color: var(--ink); font-weight: 500; }
article.article-body a { color: var(--olive-deep); border-bottom: 1px solid var(--olive-soft); }
article.article-body a:hover { background: color-mix(in oklab, var(--olive-soft) 30%, transparent); }
article.article-body ul, article.article-body ol { padding-left: 1.5em; margin-left: 0; }
article.article-body li { margin: 0.5em 0; }
article.article-body blockquote {
  border-left: 3px solid var(--olive); padding: 4px 0 4px 24px;
  margin: 32px 0; font-family: var(--serif); font-style: italic;
  font-size: 24px; line-height: 1.4; color: var(--ink); letter-spacing: -0.005em;
}
article.article-body blockquote cite {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 11px; font-style: normal;
  color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
}
article.article-body .pullquote {
  font-family: var(--serif); font-weight: 500; font-size: 32px;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ink);
  text-align: center; margin: 56px auto; max-width: 620px;
  position: relative; padding: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
article.article-body figure { margin: 36px 0; }
article.article-body figure .figbox {
  aspect-ratio: 16/9; border-radius: 16px;
  background: var(--sand-3); border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  color: var(--ink-3); font-size: 16px;
}
article.article-body figure figcaption {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-top: 12px; text-align: center;
}
article.article-body hr { border: 0; height: 1px; background: var(--line); margin: 48px 0; }
article.article-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--sand-2); padding: 2px 6px; border-radius: 4px;
  color: var(--ink);
}

/* Query loop styled as the .blog-grid post stream */
.wp-block-post-template.blog-grid {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 56px;
}
.wp-block-post-template.blog-grid > li { margin: 0; padding: 0; }
.wp-block-post-template.blog-grid .wp-block-post-featured-image.thumb {
  margin: 0; aspect-ratio: 4/3;
  border-radius: 14px; overflow: hidden;
  background: var(--sand-3); border: 1px solid var(--line-2);
}
.wp-block-post-template.blog-grid .wp-block-post-featured-image.thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wp-block-post-template.blog-grid .wp-block-group.post-card { gap: 32px; }
.wp-block-post-template.blog-grid .post-card .post-meta { gap: 16px; }
.wp-block-post-template.blog-grid .post-card .post-meta .wp-block-post-terms.cat a { color: var(--olive-deep); }
.wp-block-post-template.blog-grid .post-card .post-meta .wp-block-post-date {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.wp-block-post-template.blog-grid .post-card .wp-block-post-title {
  font-family: var(--serif); font-weight: 500;
  font-size: 32px; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.wp-block-post-template.blog-grid .post-card .wp-block-post-title a { color: var(--ink); }
.wp-block-post-template.blog-grid .post-card .wp-block-post-excerpt p {
  font-size: 16px; color: var(--ink-2); line-height: 1.55; margin: 0; text-wrap: pretty;
}
.wp-block-post-template.blog-grid .post-card .wp-block-post-excerpt__more-link {
  font-family: var(--mono); font-size: 11px;
  color: var(--olive-deep); letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
}

/* Pagination block */
.wp-block-query-pagination.pagination {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wp-block-query-pagination.pagination .wp-block-query-pagination-numbers {
  display: flex; gap: 8px;
}
.wp-block-query-pagination.pagination .page-numbers {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--ink-2); transition: all .2s;
}
.wp-block-query-pagination.pagination .page-numbers.current {
  background: var(--ink); color: var(--sand); border-color: var(--ink);
}
.wp-block-query-pagination.pagination a:hover { color: var(--ink); border-color: var(--ink); }

/* Comments using core/comments fall back to design's stub. */
.wp-block-comments-title { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -0.01em; margin: 0 0 24px; }

/* ─── core/site-title inside the .brand wrapper ──────────────────── */
.brand.wp-block-group { display: flex; align-items: center; gap: 10px; }
.brand .wp-block-site-title {
  margin: 0;
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); white-space: nowrap;
}
.brand .wp-block-site-title a { color: inherit; text-decoration: none; }
@media (max-width: 980px) { .brand .wp-block-site-title { font-size: 19px; } }

/* Footer brand: site-title without link, plus tagline paragraph */
.foot-brand .wp-block-site-title {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.foot-brand-tagline {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  margin: 12px 0 0; max-width: 280px;
}

/* ─── core/navigation styled as the design's .site-nav row ───────── */
.site-header .wp-block-navigation.site-nav {
  margin-left: auto; font-size: 14px; color: var(--ink-2);
}
.site-header .wp-block-navigation.site-nav ul { gap: 28px; }
.site-header .wp-block-navigation.site-nav .wp-block-navigation-item__content {
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: all .2s; color: var(--ink-2); font-size: 14px;
}
.site-header .wp-block-navigation.site-nav .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation.site-nav .current-menu-item .wp-block-navigation-item__content,
.site-header .wp-block-navigation.site-nav .current_page_item .wp-block-navigation-item__content {
  color: var(--ink); border-bottom-color: var(--olive);
}
/* Note: an earlier rule here hid the entire .site-nav at ≤980px, which
   was correct in the pre-block-editor era but broke the responsive
   hamburger because that button lives INSIDE the same <nav>. The
   wp-block-navigation block now handles its own desktop-vs-overlay
   visibility via the rules in the @media (max-width: 980px) block
   earlier in this file. */

/* Footer columns rendered through core/navigation */
.foot .wp-block-navigation.foot-nav { font-size: 14px; color: var(--ink-2); }
.foot .wp-block-navigation.foot-nav ul {
  display: flex; flex-direction: column; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.foot .wp-block-navigation.foot-nav .wp-block-navigation-item__content { color: var(--ink-2); }
.foot .wp-block-navigation.foot-nav .wp-block-navigation-item__content:hover { color: var(--olive-deep); }

/* ─── Late overrides — must come AFTER the .wp-block-group.is-layout-flow
   > * { margin-block-start: 0; margin-block-end: 0 } blanket reset to win
   the source-order tiebreak at equal (0,2,0) specificity. These restore
   the design's intended vertical rhythm where the reset would otherwise
   zero it out. ─────────────────────────────────────────────────────── */
.section-head.wp-block-group     { margin-bottom: 56px; }
.post-tags.wp-block-group        { margin-top: 56px; padding-top: 32px; }
.related.wp-block-group          { margin-top: 64px; padding-top: 40px; }
.comments-section.wp-block-group { margin-top: 64px; padding-top: 40px; }
/* Hero buttons need 32px breathing room above them (between subtitle and
   button row). Bumped to (0,3,0) via the .hero-section ancestor so it
   wins regardless of where it sits in the file. */
.hero-section .hero-actions.wp-block-group { margin-top: 32px; }
/* Hero-meta sits 48px below the buttons in the design; same source-order
   issue with the reset. */
.hero-section .hero-meta.wp-block-group { margin-top: 48px; }
/* "Read all essays →" pill below the 3 journal cards needs its own
   breathing room — the global is-layout-flow reset zeros the .journal-
   readall single-class margin-top. Anchor to #journal (id selector
   beats the reset's two-class (0,2,0) at (1,1,0)). */
#journal .journal-readall { margin-top: 48px; }
/* 404 buttons row — same source-order tie as the hero-actions fix.
   Bump to (0,3,0) via the .page-hero ancestor so the design's 28px
   gap above the Return-home / Browse-journal buttons survives. The
   horizontal `gap: 14px` between the two buttons is also re-asserted
   here (was getting overridden by WP's auto wp-container layout
   rule for is-layout-flex). */
.page-hero .error-actions.wp-block-group {
  margin-top: 28px;
  gap: 14px;
}

/* Two-column blog/sidebar layout. The earlier `.wrap.wp-block-group {
   gap: 0 }` reset (0,2,0) had higher specificity than the single-class
   `.layout-2col { gap: 64px }` design rule (0,1,0), zeroing the column
   gap between the post grid and the sidebar. Bump to (0,3,0) by
   chaining all three classes so the design's 64px column gap (40px on
   ≤980px stacked layout) survives. */
.wrap.layout-2col.wp-block-group { gap: 64px; padding: 64px 0 88px; }
@media (max-width: 980px) {
  .wrap.layout-2col.wp-block-group { gap: 40px; }
}

/* `templates/page-no-sidebar.html` puts the article body in a single
   wrap-narrow column. Mirror the 2-col template's vertical padding
   (64px above the article, 88px below) so pages without a sidebar
   feel similarly anchored. */
.wrap-narrow.page-body.wp-block-group { padding: 64px 0 88px; }

/* ─── Dedicated search-results template (templates/search.html) ─── */

/* core/query-title with type=search renders <h1 class="wp-block-query-
   title">Search results for: <span>"qibla"</span></h1>. Style it like
   the page-hero <h1> with the search term emphasised in olive. */
.search-hero .wp-block-query-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.5vw, 76px); line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 18px 0 18px;
  text-wrap: balance;
  color: var(--ink);
}
.search-hero .wp-block-query-title span {
  font-style: italic;
  color: var(--olive);
}

/* The inline re-search input on the search hero (button-inside variant). */
.search-hero .wp-block-search.search-hero-input { margin: 28px 0 0; }
.search-hero .wp-block-search.search-hero-input .wp-block-search__label { display: none; }
.search-hero .wp-block-search.search-hero-input .wp-block-search__inside-wrapper {
  display: flex; align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  transition: border-color .2s;
}
.search-hero .wp-block-search.search-hero-input .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--olive);
}
.search-hero .wp-block-search.search-hero-input .wp-block-search__input {
  flex: 1;
  padding: 12px 0;
  background: transparent;
  border: 0;
  font: inherit; color: var(--ink);
  outline: none;
}
.search-hero .wp-block-search.search-hero-input .wp-block-search__button {
  border: 0;
  background: var(--ink); color: var(--sand);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}
.search-hero .wp-block-search.search-hero-input .wp-block-search__button:hover {
  background: var(--olive-deep);
}

/* ─── Sidebar widgets driven by core WP blocks ─────────────────── */

/* core/categories list — emit each category as a label + auto-count
   row. WP renders <ul class="wp-block-categories"> with each <li>
   containing <a>Name</a> followed by " (N)" plain text. */
.widget-categories .wp-block-categories,
.widget-categories ul.wp-block-categories-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.widget-categories .wp-block-categories li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 14px; color: var(--ink-2);
}
.widget-categories .wp-block-categories li:last-child { border-bottom: 0; }
.widget-categories .wp-block-categories li a {
  color: var(--ink-2); text-decoration: none;
  flex: 1;
}
.widget-categories .wp-block-categories li a:hover { color: var(--olive-deep); }

/* core/archives list — same row treatment as categories. */
.widget-archive .wp-block-archives,
.widget-archive ul.wp-block-archives-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.widget-archive .wp-block-archives li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 14px; color: var(--ink-2);
}
.widget-archive .wp-block-archives li:last-child { border-bottom: 0; }
.widget-archive .wp-block-archives li a {
  color: var(--ink-2); text-decoration: none;
}
.widget-archive .wp-block-archives li a:hover { color: var(--olive-deep); }

/* core/tag-cloud — chips. WP renders <p class="wp-block-tag-cloud">
   with anchor children sized inline by usage. */
.widget-tags .wp-block-tag-cloud,
.widget-post-tags .wp-block-post-terms.widget-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0;
}
.widget-tags .wp-block-tag-cloud a,
.widget-post-tags .wp-block-post-terms.widget-tags a {
  font-family: var(--mono);
  padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 11px !important;  /* normalise the inline size= attribute WP injects */
}
.widget-tags .wp-block-tag-cloud a:hover,
.widget-post-tags .wp-block-post-terms.widget-tags a:hover {
  border-color: var(--ink); color: var(--ink);
}

/* core/page-list inside the page sidebar — mirror the link-list look. */
.widget-pages .wp-block-page-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.widget-pages .wp-block-page-list li {
  font-size: 14px; color: var(--ink-2);
}
.widget-pages .wp-block-page-list a {
  color: var(--ink-2); text-decoration: none;
}
.widget-pages .wp-block-page-list a:hover { color: var(--olive-deep); }

/* core/post-author block in the single-post sidebar — paint the brand
   "author bio" card layout: avatar (gradient circle if no Gravatar) +
   name + bio paragraph stacked beside it. */
.widget-author .wp-block-post-author {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0;
}
.widget-author .wp-block-post-author__avatar {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  overflow: hidden;
  line-height: 0;
}
.widget-author .wp-block-post-author__avatar img,
.widget-author .wp-block-post-author__avatar .avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  border: 0;
}
.widget-author .wp-block-post-author__content { display: flex; flex-direction: column; gap: 4px; }
.widget-author .wp-block-post-author__name {
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.2; margin: 0;
}
.widget-author .wp-block-post-author__name a { color: inherit; text-decoration: none; }
.widget-author .wp-block-post-author__bio {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  margin: 0;
}

/* core/query "Recent posts" widgets — render as the design's
   .post-mini stack. The post-template's <ul> picks up the .recent-list
   className we passed; we add the leading 01/02/03 numbering via a CSS
   counter so we don't need to author each item. */
.widget-recent .recent-list,
.widget-recent ul.wp-block-post-template.recent-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: hafdz-recent;
}
.widget-recent .recent-list > li {
  counter-increment: hafdz-recent;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0;
  /* The post-template <ul> wears `is-layout-flow`, so WP's auto rule
     :root :where(.is-layout-flow) > * { margin-block-start: 24px }
     would push every <li> down by 24px on top of its 10px padding.
     Our (0,2,0) blanket reset only catches `.wp-block-group`, not
     `.wp-block-post-template`, so the LI slips through — zero it
     here at (0,3,0) so consecutive items sit on a calm 20px rhythm. */
  margin: 0;
  border-bottom: 1px dashed var(--line-2);
}
.widget-recent .recent-list > li:last-child { border-bottom: 0; }
.widget-recent .recent-list > li::before {
  content: counter(hafdz-recent, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em;
  flex-shrink: 0; padding-top: 3px;
  width: 18px;
}
.widget-recent .recent-list > li > .post-mini { flex: 1; gap: 0; }
.widget-recent .recent-list .wp-block-post-title {
  /* `.post-mini-text` is a flex column with `gap: 4px`, which already
     spaces title → date — drop the title's margin-bottom so we don't
     double-count and end up with 8px instead of the intended 4px. */
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: 16px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--ink);
}
.widget-recent .recent-list .wp-block-post-title a { color: inherit; text-decoration: none; }
.widget-recent .recent-list .wp-block-post-title a:hover { color: var(--olive-deep); }
.widget-recent .recent-list .wp-block-post-date.when {
  margin: 0;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.08em;
}
.widget-recent .recent-empty {
  font-style: italic; color: var(--ink-3);
  margin: 0; padding: 8px 0;
}

/* ─── Home blog grid — WP block output bridged onto the design's
   `.post-card` look. wp:query renders a wp:post-template (a <ul>) with
   each post as a <li> wrapping our .post-card group. ─────────────── */

/* The post-template <ul> wears our .blog-grid class — strip its native
   list styling and let the design's flex-column layout take over. */
.blog-grid.wp-block-post-template,
ul.blog-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.blog-grid.wp-block-post-template > li { padding: 0; margin: 0; }
.blog-grid.wp-block-post-template > li:last-child .post-card { border-bottom: 0; padding-bottom: 0; }

/* Featured-image area: when the post HAS an image, wp:post-featured-image
   renders <figure class="thumb"><img></figure> in the first grid cell;
   when it doesn't, WP renders nothing — leaving an empty grid cell.
   We paint a sand-3 + Islamic-star pattern via a `.post-card::before`
   pseudo that always occupies cell (column 1, row 1). The actual image
   (if present) places into the same cell with z-index:1 so it covers
   the pseudo cleanly, and the body sits in column 2 row 1.
   Makes every card visually anchored regardless of featured-image
   state. */
.post-card { position: relative; }
.post-card::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  background-color: var(--sand-3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'><g fill='none' stroke='%234a5a32' stroke-width='0.6' opacity='0.35'><path d='M40 6 L52 28 L74 40 L52 52 L40 74 L28 52 L6 40 L28 28 Z'/><path d='M40 18 L48 32 L62 40 L48 48 L40 62 L32 48 L18 40 L32 32 Z'/></g></svg>");
  background-repeat: repeat;
  background-size: 80px 80px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  aspect-ratio: 4/3;
  align-self: start;
}
.post-card.featured::before {
  aspect-ratio: 21/9;
}
.post-card > .body { grid-column: 2; grid-row: 1; }
.post-card.featured > .body { grid-column: 1; grid-row: 2; }
.post-card > .wp-block-post-featured-image,
.post-card > figure.thumb {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  align-self: start;
}
.post-card.featured > .wp-block-post-featured-image,
.post-card.featured > figure.thumb { aspect-ratio: 21/9; }
.post-card .wp-block-post-featured-image img,
.post-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (max-width: 720px) {
  .post-card { grid-template-columns: 1fr; }
  .post-card > .body { grid-column: 1; grid-row: 2; }
}

/* Category badge inside the post-meta row — wp:post-terms emits a div
   wrapper with the className we passed; flatten it via display: contents
   so its inner anchors flow as direct flex items beside the date. */
.post-card .post-meta .wp-block-post-terms.cat { display: contents; }
.post-card .post-meta .wp-block-post-terms.cat a {
  color: var(--olive-deep);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.post-card .post-meta .wp-block-post-terms.cat a:hover { text-decoration: underline; }
/* Date block in the meta row picks up the design's mono uppercase look. */
.post-card .post-meta .wp-block-post-date {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.post-card .post-meta .wp-block-post-date time { color: inherit; }

/* Post title rendered through wp:post-title (with isLink) inherits our
   `.post-card h2` design rule — just normalise the link colour. */
.post-card .wp-block-post-title { margin: 0; }
.post-card .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.post-card .wp-block-post-title a:hover { color: var(--olive-deep); }

/* wp:post-excerpt with showMoreOnNewLine:true renders:
     <div class="wp-block-post-excerpt excerpt">
       <p class="wp-block-post-excerpt__excerpt">[body]</p>
       <p class="wp-block-post-excerpt__more-text"><a class="…__more-link">[label]</a></p>
     </div>
   Excerpt body uses the design's .excerpt typography; the more-text
   paragraph carries the gap above the "Continue reading →" link. */
.post-card .wp-block-post-excerpt.excerpt { margin: 0; }
.post-card .wp-block-post-excerpt.excerpt > p { margin: 0; }
.post-card .wp-block-post-excerpt__excerpt {
  font-size: 16px; color: var(--ink-2); line-height: 1.55;
  text-wrap: pretty;
}
.post-card .wp-block-post-excerpt__more-text { margin-top: 16px !important; }
.post-card .wp-block-post-excerpt__more-link {
  font-family: var(--mono); font-size: 11px;
  color: var(--olive-deep);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.post-card .wp-block-post-excerpt__more-link:hover { color: var(--ink); }

/* Author row: wp:avatar emits <figure class="wp-block-avatar"><a><img>
   (or just <img>) and wp:post-author-name emits <a class="wp-block-post-
   author-name">. The figure carries the design's olive gradient as a
   fallback background; if the user has a real Gravatar, the <img>
   covers the gradient. If no Gravatar is set, our get_avatar_data
   filter (functions.php) tells WP to serve a transparent 1x1 GIF as
   default — letting the gradient show through. */
.post-card .author .wp-block-avatar {
  margin: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--olive-soft), var(--olive-deep));
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}
.post-card .author .wp-block-avatar img,
.post-card .author .wp-block-avatar .avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  border: 0;
}
.post-card .author .wp-block-post-author-name {
  margin: 0;
  font-size: 13px; color: var(--ink-3);
}
.post-card .author .wp-block-post-author-name,
.post-card .author .wp-block-post-author-name a {
  color: var(--ink-3); text-decoration: none;
}
.post-card .author .wp-block-post-author-name:hover,
.post-card .author .wp-block-post-author-name a:hover { color: var(--ink); }

/* Pagination row: wp:query-pagination emits <nav class="wp-block-query-
   pagination pagination …"> with prev/numbers/next children. Match the
   design's mono uppercase pill row. */
.wp-block-query-pagination.pagination {
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wp-block-query-pagination.pagination .pg-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); text-decoration: none;
}
.wp-block-query-pagination.pagination .pg-link:hover { color: var(--ink); }
.wp-block-query-pagination.pagination .nums.wp-block-query-pagination-numbers {
  display: flex; gap: 8px;
}
.wp-block-query-pagination.pagination .page-numbers {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--ink-2); transition: all .2s;
  text-decoration: none;
}
.wp-block-query-pagination.pagination .page-numbers:hover {
  border-color: var(--ink); color: var(--ink);
}
.wp-block-query-pagination.pagination .page-numbers.current {
  background: var(--ink); color: var(--sand); border-color: var(--ink);
}

/* Empty-archive fallback paragraph. */
.blog-empty {
  padding: 64px 0;
  text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--ink-3);
}

/* App-store CTA row beneath the features grid (Apple App Store + Google
   Play). Anchored to #features so the (1,2,0) specificity beats the
   global is-layout-flow reset. */
#features .feature-cta.wp-block-group { gap: 14px; margin-top: 48px; }
.app-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: var(--ink); color: var(--sand);
  border-radius: 14px;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
  min-width: 168px;
}
.app-cta:hover { background: var(--olive-deep); transform: translateY(-1px); }
.app-cta-icon { width: 26px; height: 26px; flex-shrink: 0; }
.app-cta-label { display: flex; flex-direction: column; line-height: 1.1; }
.app-cta-label small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.94 0.012 88 / 0.65);
  margin-bottom: 2px;
}
.app-cta-label strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .app-cta { padding: 10px 16px; min-width: 0; }
  .app-cta-label small { font-size: 9.5px; }
  .app-cta-label strong { font-size: 16px; }
}