/**
 * assets/css/base.css
 * -----------------------------------------------------------------
 * Design tokens, CSS reset, and base typography — extracted out of
 * header.php's inline <style> block so the browser caches this once
 * instead of re-parsing an identical block on every single page
 * load. This is also where the Urdu/Mehr font rule lives: every
 * .ur-tagged element (rendered via helpers.php's urw()/ttu(), which
 * every Urdu string in the app already flows through — dropdowns
 * and subheadings included) gets Mehr Nastaliq with letter-spacing
 * forced to 0, so no raw Urdu string can slip through with
 * browser-default spacing.
 * -----------------------------------------------------------------
 */

/* ===================== TOKENS (Purple/Violet + Soft Gold) ===================== */
:root {
  --violet:     #6E3FA3;
  --violet-lt:  #8B5FC2;
  --gold:       #C9A65C;
  --gold-lt:    #E0C284;
  --ink:        #241B3A;
  --ink2:       #2F2350;
  --sage:       #6B7F6E;
  --bg:         #F8F6FC;
  --bg2:        #F0EAF9;
  --sidebar-bg: #EEE7F8;
  --card-bg:    #FFFFFF;
  --border:     #DED2EF;
  --text:       #2A2438;
  --muted:      #7C7390;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(36,27,58,.10);
  --font-ur:    'Mehr Nastaliq', 'Noto Nastaliq Urdu', serif;
  --font-h:     'Playfair Display', Georgia, serif;
  --font-b:     'Inter', system-ui, sans-serif;
  --header-h:   64px;
  --max-w:      1200px;
  --drawer-w:   300px;
  --warn-bg:    #FFF8E8;
  --warn-border:#EAD9A0;
  --warn-text:  #8A6D23;
}
[data-theme="dark"] {
  --bg:         #170F26;
  --bg2:        #1E1733;
  --sidebar-bg: #201938;
  --card-bg:    #201938;
  --border:     #382A54;
  --text:       #ECE6F7;
  --muted:      #9C90B4;
  --ink:        #ECE6F7;
  --shadow:     0 2px 12px rgba(0,0,0,.35);
  --warn-bg:    #2E2712;
  --warn-border:#5A4B25;
  --warn-text:  #E0C284;
}
/* Every h1 on the site (list-hero-banner's white, list-hero's violet,
   admin page-head, etc. — each set in components.css/admin.css, which
   load after this file) switches to the gold accent in dark mode.
   !important is needed since those page-specific rules share the same
   selector specificity and would otherwise win on load order alone —
   same precedent as the blanket .ur override below. */
[data-theme="dark"] h1 { color: var(--gold) !important; }

/* Same gold-accent treatment in dark mode for: the site tagline next
   to the logo (.site-name), active nav/dropdown/drawer button text
   (.nav-link.active etc. — the filled pills like .scope-pill.active
   stay white-on-violet, untouched, since their text was never violet
   to begin with), and body/sidebar section headings (.section-title,
   .sidebar-block h3). All of these are var(--violet) in
   layout.css/components.css normally; !important for the same
   load-order reason as the h1 rule above. */
[data-theme="dark"] .site-name,
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .nav-dropdown-btn.active,
[data-theme="dark"] .drawer-nav-link.active,
[data-theme="dark"] .section-title,
[data-theme="dark"] .sidebar-block h3 {
  color: var(--gold) !important;
}
/* @font-face for 'Mehr Nastaliq' is declared in header.php (inline,
   after this stylesheet) instead of here, so it can read the
   admin-configurable theme.font_ur_url setting — see header.php. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
/* overflow-x:hidden safety net — without it, any element that even
   slightly overflows horizontally lets the document scroll sideways.
   Combined with dir="rtl" (Urdu), that let the mobile drawer/backdrop
   in layout.css (position:fixed; right:0 / inset:0) render offset
   from the true right edge instead of flush against it, exposing a
   strip of undimmed page on both sides of the drawer. */
html, body { overflow-x: hidden }
/* scrollbar-gutter:stable reserves the scrollbar's width on every
   page, whether or not that page's content is tall enough to need
   one. Without this, a short page renders with no scrollbar, then a
   language switch or navigation to a taller page adds one and the
   whole layout shifts left by the scrollbar's width right as the
   #langPreloader fades out — a visible jerk. Reserving the gutter up
   front means that shift can never happen, preloader or not.
   Scoped to desktop only (min-width:768px, matching nav.main-nav's
   breakpoint): mobile browsers use overlay scrollbars that don't
   reserve layout space, so this bought nothing there — it only
   interacted badly with dir="rtl" and offset the fixed-position
   mobile drawer/backdrop away from the screen edges (see the
   overflow-x rule above and layout.css's .drawer/.drawer-backdrop
   comments). */
html  { scroll-behavior:smooth }
@media(min-width:768px){ html { scrollbar-gutter: stable } }
body  { font-family:var(--font-b); background:var(--bg); color:var(--text); line-height:1.6; transition:background .25s,color .25s }
a     { color:inherit; text-decoration:none }
img   { display:block; max-width:100% }
button{ cursor:pointer; font-family:inherit }
.ur   { font-family:var(--font-ur); line-height:2; letter-spacing:0 }
/* Previously this block only forced letter-spacing:0, NOT font-family —
   so any Urdu text rendered outside an explicit .ur-classed span (e.g.
   a heading built with `<h1 class="...">$urduString</h1>` instead of
   through urw()/ttu(), or any component CSS like .section-title that
   sets its own font-family) silently fell back to the body/heading
   font instead of Mehr Nastaliq. Forcing font-family here too (with
   !important, matching the existing letter-spacing precedent) means
   ANY text under an RTL/Urdu context gets Mehr Nastaliq automatically,
   headings and subheadings included, regardless of which component
   CSS also touches that element — closing the gap instead of relying
   on every string author remembering to wrap in .ur.
   Font Awesome icons (<i class="fa-solid fa-...">) are excluded via
   the [class*="fa-"] guard so glyphs don't get swapped for tofu. */
*:lang(ur):not([class*="fa-"]),
[dir="rtl"],
[dir="rtl"] *:not([class*="fa-"]),
.ur:not([class*="fa-"]), .ur *:not([class*="fa-"]),
[class*="ur "]:not([class*="fa-"]), [class$="ur"]:not([class*="fa-"]),
[style*="font-ur"] {
  font-family: var(--font-ur) !important;
  letter-spacing: 0 !important;
  /* Mehr Nastaliq/Noto Nastaliq Urdu have no true italic glyph set —
     browsers fake it with an oblique-slant transform, which distorts
     Nastaliq's connected letterforms into something unreadable. No
     Urdu text anywhere in the app should ever render italic/oblique,
     regardless of what a component's own CSS asks for (e.g.
     .member-why-close, .verse-block, .field-hint) — this blanket rule
     wins on the same load-order/specificity precedent as the
     font-family override above. */
  font-style: normal !important;
}
/* The blanket [dir="rtl"] rule above (correctly) forces every Urdu
   string onto Mehr Nastaliq — but it also catches badges whose
   content is plain Latin digits/punctuation (view counts, the 1/2/3
   numbered-list circles), because they're descendants of an RTL
   container even though they hold no Urdu text. Mehr Nastaliq's
   line-height/ascender metrics are much taller than the body font's,
   so a digit rendered in it no longer sits on the same baseline as
   the Font Awesome icon next to it — this is what made the eye icon
   look "unaligned" from its number on Urdu pages. Reset just these
   purely-numeric badges back to the body font; the class-selector
   specificity here beats the universal-selector rule above even
   though both are !important.
   NOTE: .date-badge is deliberately NOT included here — relativeDate()/
   formatDate() render real Urdu month names inside it (e.g. "26
   نومبر 2025"), so it still needs Mehr Nastaliq. Its icon/number
   alignment is handled with line-height instead, in components.css. */
[dir="rtl"] .views-badge,
[dir="rtl"] .views-badge *:not([class*="fa-"]),
[dir="rtl"] .chip.views-chip,
[dir="rtl"] .chip.views-chip *:not([class*="fa-"]),
[dir="rtl"] .sidebar-num {
  font-family: var(--font-b) !important;
  letter-spacing: normal !important;
}
.boxed { max-width:var(--max-w); margin:0 auto; padding:0 1rem }
.page-body { display:grid; grid-template-columns:1fr; gap:1.5rem; padding:1.5rem 0 2.5rem }
@media(min-width:960px){ .page-body{ grid-template-columns:2.2fr 1.15fr } }
/* Grid items default to min-width:auto, which lets long unbreakable
   content (long English/Roman words, etc) force the track wider than
   its assigned share and overflow the layout. min-width:0 lets them
   actually shrink so text-overflow:ellipsis and wrapping can kick in. */
.page-body > * { min-width:0 }
.section-title { font-family:var(--font-h); font-size:1.15rem; font-weight:700; color:var(--violet); display:flex; align-items:center; gap:.5rem; margin-bottom:1rem }