/* CJAS design tokens — lifted from cjas.no Elementor kit-1122.
   Do not invent brand values here. Dark-mode surfaces are the only
   additions, because cjas.no does not define a dark theme. */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=PT+Sans:wght@400;700&family=Poppins:wght@400;500&family=Noto+Nastaliq+Urdu:wght@400;600&display=swap');

/* SCOPED COPY (2026-09-18, CA-95). The shared tokens.css styles a whole page:
   `* {}`, `body`, every heading, link, image and form field. That is right for
   the app, the panel and the TV, which ARE the page. On cjas.no the page is the
   mosque's own site, and this file is loaded on every page of it — activating
   the plugin would have changed the fonts and link colours of the entire
   website. Every rule here is limited to the plugin's own markup (every block
   it renders is wrapped in a `cjas-*` class); `:where()` keeps the specificity
   at zero, so the theme still wins anywhere it says something. The values are
   the shared file's; only the selectors differ. test/run-tests.php fails if an
   unscoped selector comes back. */

:where([class*="cjas-"]) {
  /* Brand — from cjas.no */
  --green:        #086A3C;
  --gold:         #A0700F;
  --ink:          #000000;
  --white:        #FFFFFF;
  --tint-green:   #F1FFF9;
  --tint-cream:   #FFF8EA;
  --field-grey:   #817B70;

  /* Text-safe variants. The brand fills above stay exactly as cjas.no
     defines them; these are used ONLY where the colour carries text at
     normal size, because #A0700F on white is 4.36:1 and WCAG AA needs 4.50.
     Verified: gold-text #8F630C 5.31 on white, 5.02 on cream (was #986A0E, A11Y-X-01);
     grey-text 4.50 on white. */
  --gold-text:    #8F630C;
  --grey-text:    #7C766C;
  /* Text sitting ON a gold fill. White on #A0700F is 4.36:1 and fails AA;
     ink on the same fill is 4.82:1 and passes. The fix is to flip the TEXT,
     not to darken the brand colour — the gold block stays exactly the gold
     cjas.no publishes. Never white on gold at normal size. */
  --gold-fill-text: #000000;
  --green-text:   #086A3C;
  --danger:       #c0392b;

  /* Derived (shading only, not new brand colours) */
  --green-dark:   #05512d;
  --green-soft:   rgba(8,106,60,.08);
  --gold-soft:    rgba(160,112,15,.12);
  --hairline:     rgba(0,0,0,.10);

  /* Surfaces — light */
  --bg:           #F4F6F4;
  --surface:      var(--white);
  --text:         var(--ink);
  --text-muted:   #5B6660;

  /* Type */
  --font-head:    'El Messiri', Georgia, serif;
  --font-body:    'PT Sans', system-ui, sans-serif;
  --font-form:    'Poppins', system-ui, sans-serif;
  --font-urdu:    'Noto Nastaliq Urdu', serif;

  /* Shape — from the kit */
  --r-btn:  4px;
  --r-img:  8px;
  --r-card: 12px;
  --pad-btn: 16px 25px;
}

[data-theme="dark"] :where([class*="cjas-"]), :where([class*="cjas-"])[data-theme="dark"] {
  --bg:         #0C1310;
  --surface:    #141D18;
  --text:       #EAF1EC;
  --text-muted: #93A29A;
  --tint-green: #16241C;
  --tint-cream: #241F14;
  --hairline:   rgba(255,255,255,.12);
  --green-soft: rgba(8,106,60,.22);

  /* Text-safe variants again, because the light ones fail on a dark surface.
     Measured against --surface #141D18:
     gold-text #C9A227 7.12, green-text #4CC38A 7.78,
     grey-text #A8B0AA 7.76, danger #FF6B5E 6.17.
     The brand fills (--green, --gold) are NOT redefined here. */
  --gold-text:  #C9A227;
  --green-text: #4CC38A;
  --grey-text:  #A8B0AA;
  --danger:     #FF6B5E;
}

:where([class*="cjas-"]), :where([class*="cjas-"]) * { box-sizing: border-box; }
/* No `body` rule: the page is cjas.no's, not ours. */
/* The OUTERMOST cjas block only (2026-09-18, found on the cjas.no demo page).
   On every cjas-* element this re-coloured the children of dark containers
   dark again: the janazah strip's name, time and burial line came out black
   on black. Children must INHERIT from their block, never be reset. */
:where([class*="cjas-"]):not(:where([class*="cjas-"]) *) { font-family: var(--font-body); color: var(--text); }
:where([class*="cjas-"]) :is(h1,h2,h3,h4,h5,h6) { font-family: var(--font-head); font-weight: 700; margin: 0; }
:where([class*="cjas-"]) :is(label, input, select, textarea) { font-family: var(--font-form); font-size: 18px; }
:where([class*="cjas-"]) :is(input, select, textarea) {
  color: var(--grey-text); border: 1px solid var(--field-grey);
  border-radius: var(--r-btn); padding: 12px 14px; background: var(--surface);
}
:where([class*="cjas-"]) a { color: var(--green); text-decoration: none; }
:where([class*="cjas-"]) a:hover { color: var(--gold-text); }
:where([class*="cjas-"]) img { max-width: 100%; border-radius: var(--r-img); }

:where([class*="cjas-"]) .btn {
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  background: var(--green); color: var(--white); border: 0;
  border-radius: var(--r-btn); padding: var(--pad-btn); cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
/* The hover state turns a green button gold. The label has to change with it
   — white on gold is 4.36:1. See --gold-fill-text. */
:where([class*="cjas-"]) .btn:hover { background: var(--gold); color: var(--gold-fill-text); transform: translateY(-4.5px); }
:where([class*="cjas-"]) .btn--gold { background: var(--gold); color: var(--gold-fill-text); }
:where([class*="cjas-"]) .btn--gold:hover { background: var(--green); color: var(--white); }

/* Urdu / RTL */
:where([class*="cjas-"])[dir="rtl"] { direction: rtl; }
:where([class*="cjas-"])[lang="ur"], :where([class*="cjas-"]) [lang="ur"], :where([class*="cjas-"])[lang="ur"] :is(h1,h2,h3) { font-family: var(--font-urdu); line-height: 2.1; }