/* ============================================================
   base.css — production port of the NAJDI V2 prototype chrome.
   The prototype control bar is stripped (production has none;
   --barh pinned to 0 so the sticky site-nav sits at top: 0 and
   all calc() offsets resolve cleanly). The LOCKED brand lockup
   (C2 worm + S3 bar-and-dot, NAJDI green dot #1a8c52 in both
   modes) carries over verbatim.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

:root { --barh: 0px; }

body {
  min-height: 100vh;
  background: #0e1116;
}

/* ---------- stage ---------- */

#stage { min-height: calc(100vh - var(--barh)); }

/* ---------- LOCKED brand lockup (identity, not direction) ---------- */
/* Worm = Reem Kufi 700; BAWADIR = Space Grotesk wide-tracked.
   The icon's bar rides currentColor (= each direction's ink);
   the dot stays NAJDI green in both modes. Always LTR. */

/* stacked nav lockup (per Monther, round 4): icon centered ABOVE
   the worm + BAWADIR — the same construction as the email header */
.bw-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.bw-lockup .bw-icon { flex: none; display: block; width: 19px; height: 19px; }

.bw-lockup .bw-ar {
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: 0;
}

.bw-lockup .bw-lat {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: .42em;
  text-indent: .42em;
  margin-top: 1px;
}

/* stacked masthead worm — size via font-size on .bw-stack */
.bw-stack {
  display: inline-block;
  text-align: center;
  font-size: 64px;
}

.bw-stack .bw-stack-ar {
  display: block;
  font-family: "Reem Kufi", sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.1;
  letter-spacing: 0;
}

.bw-stack .bw-stack-lat {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: .30em;
  letter-spacing: .42em;
  text-indent: .42em;
  margin-top: .30em;
}

/* email-safe icon (block elements + background colors, no SVG) */
.em-icon { display: block; width: 34px; margin: 0 auto 10px; }
.em-icon .bar { display: block; height: 7px; background: currentColor; }
.em-icon .dot { display: block; width: 9px; height: 9px; background: #1a8c52; margin: 6px auto 0; }

/* generic helper for LTR islands inside RTL text (dates, refs, acronyms) */
.num, .ltr-isolate { direction: ltr; unicode-bidi: isolate; }

/* ============================================================
   PRODUCTION PORT SHIMS — additions the SSR surfaces need that
   the prototype (client-rendered, forms non-wired by design)
   did not. Drawn in the bulletin hand: square ends, no blurs.
   ============================================================ */

/* light/dark selector button in the nav (production add 2026-06-13).
   On-brand: no border, currentColor icon, square ray caps. The icon
   shows the TARGET mode (moon=go dark in light, sun=go light in dark). */
.bl .nav-theme {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  padding: 6px 2px;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.bl .nav-theme:hover { color: var(--accent); }
.bl .nav-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl .nav-theme svg { width: 17px; height: 17px; display: block; }
.bl .nav-theme .ic-sun { display: none; }
.bl .nav-theme .ic-moon { display: block; }
html[data-theme="dark"] .bl .nav-theme .ic-moon { display: none; }
html[data-theme="dark"] .bl .nav-theme .ic-sun { display: block; }

/* language toggle renders as links in production (URL-based
   language per ADR-0007 §8) — mirror the prototype button rules */
.bl .nav-lang a { font: inherit; color: var(--ink-3); padding: 8px 4px; text-decoration: none; }
.bl .nav-lang a.on { color: var(--ink); }
.bl .nav-lang a:hover { color: var(--accent); }
.bl .nav-lang a[lang="ar"] { font-family: var(--cairo); letter-spacing: 0; }

/* live subscribe-form feedback (wired forms) */
.bl .sub-msg {
  margin: 10px 0 0;
  font-family: var(--data);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.bl[dir="rtl"] .sub-msg { font-family: var(--cairo); letter-spacing: 0; }
.bl .sub-msg.ok { color: var(--accent); }
.bl .sclose .sub-msg.ok { color: var(--accent-tint); }
.bl .sub-msg.err { color: var(--ink); font-weight: 700; }

/* Cloudflare Turnstile widget slot under the form */
.bl .cf-turnstile { margin-top: 12px; }

/* regulator detail head (NAJDI composition of the old per-slug page) */
.bl .reg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.bl .reg-logo {
  flex: none;
  width: 96px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--rule);
  background: #f7f3ea;
  padding: 12px;
}
.bl .reg-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bl .reg-stats {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--data);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2);
}
.bl[dir="rtl"] .reg-stats { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }
.bl .reg-stats a { color: var(--accent); }
.bl .detail-reg-link { margin-top: 26px; }

/* regulators directory rows are links in production */
.bl a.dir-row { color: inherit; }

/* the confirm landing page (subscribe loop) */
.bl .confirm-card { max-width: 720px; margin: 0 auto; padding: 110px 0 40px; }
.bl .confirm-h {
  font-family: var(--black);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.04;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.bl[dir="rtl"] .confirm-h { font-family: var(--cairo); font-weight: 900; text-transform: none; }
.bl .confirm-p { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 34px; max-width: 56ch; }