/* ============================================================================
   AMAADOR INHERITANCE — site override (mawarithpro.com)  ·  Design 3.0
   Loads AFTER amaador-design-system.css AND style.css.
   1) Sets the site accent (used sparingly: nav-active, eyebrow, stats).
   2) Remaps style.css's legacy token vocabulary (--gold-*/--paper*/--ink*/
      --aurora/…) onto the monochrome Design 3.0 palette so every token-driven
      rule + inline style re-skins at once. No jewel accent left driving color.
   RTL: the site is Arabic-capable; --arabic is DELIBERATELY kept on Tajawal so
   [dir="rtl"]/[lang="ar"] never falls back to a Latin display family.
   ============================================================================ */
:root { --accent: #6B3A1A; } /* Sienna — used sparingly (nav-active, eyebrow, stats) */

:root{
  /* accent scale (was aurora violet) → chrome (monochrome). No colored brand fills. */
  --gold-600:#9496AA; --gold-500:#C8CAD8; --gold-400:#E8EAF0; --gold-300:#E8EAF0;
  --teal:#9496AA;
  --aurora:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA);
  --aurora-soft:linear-gradient(110deg,#E8EAF0,#C8CAD8 50%,#9496AA);

  /* legacy emerald tokens → neutral chrome (kept defined for safety) */
  --emerald-900:#040508; --emerald-800:#07080F; --emerald-700:#0C0D18;
  --emerald-600:#111220; --emerald-500:#181928;

  /* backgrounds → monochrome (paper < paper-2 < card) */
  --paper:#07080F; --paper-2:#0C0D18; --card:#111220;

  /* ink */
  --ink:#F2F3FA; --ink-soft:#B8BAD0; --ink-faint:#6E7090;

  /* borders */
  --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09);

  /* accent aliases → chrome (NOT the sienna jewel; that stays sparing via --accent above)
     accent-strong drives strong brand fills, so it must read as chrome not violet. */
  --accent-strong:#9496AA;

  /* fonts → Design 3.0. Arabic KEPT on Tajawal for RTL. */
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Lora','Georgia',serif;
  --serif:'Lora',Georgia,serif;
  --arabic:'Tajawal','Amiri','Scheherazade New',serif;
}

/* light variant: keep the same monochrome discipline (rarely used, but safe) */
[data-theme="light"]{
  --paper:#F2F3FA; --paper-2:#E8EAF0; --card:#FFFFFF;
  --ink:#111220; --ink-soft:#3A3C52; --ink-faint:#6E7090;
  --line:rgba(0,0,0,.16); --line-soft:rgba(0,0,0,.09);

  /* --- 2026-07-04d: LIGHT-MODE COMPLETION — decorative/accent tokens that had
     no light value at all, so cards/buttons/nav/accents stayed dark-colored
     even after the toggle flipped html[data-theme]. These were neutralized to
     a light-on-dark chrome family (#9496AA-#E8EAF0) for dark mode; on a light
     canvas that same chrome would nearly vanish, so they are DARKENED to the
     mid/dark chrome family (mirrors amaador-design-system.css's light-theme
     --chrome-bright/--chrome-mid), matching the ladder direction already used
     by the base --ink/--paper light values above. No jewel hues introduced. */
  --accent:#3D3F52;          /* sienna → dark chrome; kept sparing (nav-active/eyebrow/stats) */
  --accent-strong:#202235;   /* drives strong brand fills; must read dark, not light chrome */
  --gold-600:#202235; --gold-500:#3D3F52; --gold-400:#6B6E85; --gold-300:#8688A0;
  --teal:#3D3F52;
  --aurora:linear-gradient(100deg,#202235,#3D3F52 55%,#6B6E85);
  --aurora-soft:linear-gradient(110deg,#202235,#3D3F52 50%,#6B6E85);

  /* legacy emerald ramp: dark-mode near-black chrome → light-mode near-white
     chrome (kept defined for safety only, mirrors the inverse relationship of
     the dark block below). */
  --emerald-900:#FFFFFF; --emerald-800:#FAF9F6; --emerald-700:#F2F1EC;
  --emerald-600:#EAE8E1; --emerald-500:#DFDCD3;
}
/* CTA fill on light: a white button vanishes on a light canvas, so flip dark. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.primary,
[data-theme="light"] button[type="submit"]{ --accent:#14151C; }

/* CTA / primary buttons → white chrome (Design 3.0 CTA) */
.btn-primary, .btn.primary, button[type="submit"]{ --accent:#FFFFFF; }

/* ===== 2026-07-04 glossy-monochrome polish ===== */
/* Neutralizes hard-coded saturated hexes (violet #7b4fd8/#8b5cf6/#a78bfa,
   blue #3b6dff/#4a3bd0/#60a5fa, magenta #c44fe0, cyan #1fc8d6, green #34d399,
   red #ef4444/#f87171, amber #f59e0b) that live directly in style.css rules and
   in per-page inline <style> blocks — token remaps above cannot reach those.
   Chrome sheen for gradient TEXT: linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA). */

/* --- (2) REASSERT DARK (dark theme only): glossy-dark-black palette on dark.
   NOTE (2026-07-04c): html[data-theme="light"] was REMOVED from this selector
   list — it previously forced these dark token values onto the light theme
   too, which made the dark/light toggle a no-op (clicking it changed
   localStorage but the visible palette never changed). The shared core
   (amaador-design-system.css) now ships a complete, monochrome light-theme
   token block under html[data-theme="light"]; let it win under that attribute. --- */
:root,
html,
html[data-theme="dark"]{
  --paper:#07080F; --paper-2:#0C0D18; --card:#111220;
  --ink:#F2F3FA; --ink-soft:#B8BAD0; --ink-faint:#6E7090;
  --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.09);
  --gold-600:#9496AA; --gold-500:#C8CAD8; --gold-400:#E8EAF0; --gold-300:#E8EAF0;
  --accent-strong:#9496AA; --teal:#9496AA;
  --aurora:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA);
  --aurora-soft:linear-gradient(110deg,#E8EAF0,#C8CAD8 50%,#9496AA);
}
/* Light-theme body: warm off-white surface + dark ink, as a robustness net
   against this site's own legacy style.css body rules (was forced dark). */
html[data-theme="light"] body{
  background:#F2F1EC !important; color:#111220 !important;
}

/* --- PITCH (OLED true-black refinement of dark): background-only tokens push
   to near-true-black; every other token (ink/line/gold/accent/aurora) is
   copied VERBATIM from the dark block above. Wins over the bare :root/html
   selector on attribute-selector specificity alone, so append-order is fine. --- */
html[data-theme="pitch"]{
  --paper:#000000; --paper-2:#000000; --card:#050505;
  --ink:#F2F3FA; --ink-soft:#B8BAD0; --ink-faint:#6E7090;
  --line:rgba(255,255,255,.07); --line-soft:rgba(255,255,255,.18);
  --gold-600:#9496AA; --gold-500:#C8CAD8; --gold-400:#E8EAF0; --gold-300:#E8EAF0;
  --accent-strong:#9496AA; --teal:#9496AA;
  --aurora:linear-gradient(100deg,#E8EAF0,#C8CAD8 55%,#9496AA);
  --aurora-soft:linear-gradient(110deg,#E8EAF0,#C8CAD8 50%,#9496AA);
  color-scheme:dark;
}

/* --- (1) MONOCHROME: hero / ambient aurora → neutral chrome haze (no jewel hues) --- */
.hero{
  background:
    radial-gradient(56% 78% at 88% 46%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(46% 62% at 99% 82%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(48% 64% at 101% 12%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(40% 50% at 64% 98%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(160deg,#0C0D18,#07080F) !important;
  color:#F2F3FA !important;
}
[dir="rtl"] .hero{
  background:
    radial-gradient(56% 78% at 12% 46%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(46% 62% at 1% 82%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(48% 64% at -1% 12%, rgba(255,255,255,.045), transparent 60%),
    radial-gradient(40% 50% at 36% 98%, rgba(255,255,255,.03), transparent 60%),
    linear-gradient(200deg,#0C0D18,#07080F) !important;
}
body::before{
  background:
    radial-gradient(36% 30% at 100% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(32% 28% at 0% 100%, rgba(255,255,255,.035), transparent 60%) !important;
}

/* --- (1) MONOCHROME: colored button/CTA gradients → white-chrome fills --- */
.btn-gold,
.donate-pop a.primary,
.calc-btn-full,
.cta-box .btn,
.fab-btn-services,
.fab-btn-sitenav,
.fab-btn-donate{
  background:linear-gradient(120deg,#E8EAF0,#C8CAD8 55%,#9496AA) !important;
  color:#04050A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 30px rgba(0,0,0,.5) !important;
}
.btn-gold:hover,
.calc-btn-full:hover,
.cta-box .btn:hover,
.fab-circle:hover .fab-btn-services, .fab-circle.fab-near .fab-btn-services,
.fab-circle:hover .fab-btn-sitenav,  .fab-circle.fab-near .fab-btn-sitenav,
.fab-circle:hover .fab-btn-donate,   .fab-circle.fab-near .fab-btn-donate{
  color:#04050A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 12px 42px rgba(0,0,0,.6) !important;
}

/* --- (1) MONOCHROME: gradient TEXT (.num / .svc-brand / .snav-title) → SOLID dark-white.
   (2026-07-04b) un-clipped from gradient to a plain #E8EAF0 fill: gradient text is
   an AI-tell, and these carry inline clip-to-text, so we restore border-box clip
   + an opaque text-fill to render them as flat dark-white, not a rainbow. --- */
.svc-brand,
.snav-title,
.stat-card .num,
[class*="stat-"] .num,
.gx{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#E8EAF0 !important; color:#E8EAF0 !important;
}

/* --- (1) MONOCHROME: colored links, badges, chips, tiers, status → chrome ladder --- */
[data-theme="light"] a, a{ color:var(--gold-500); }
.tier-1, .tier-2, .tier-3,
.compare-tbl .yes, .compare-tbl .partial,
.cap-table .has-cap,
.warning-box strong,
.result-row.positive .value{ color:#C8CAD8 !important; }
.chip-low,
.tier-badge, .tier-badge.tier-2, .tier-badge.tier-3,
.status-badge, .status-badge.pretrial,
.badge-mod51,
.svc-item.svc-active,
.network-link.network-active{
  background:rgba(255,255,255,.08) !important;
  color:#C8CAD8 !important;
  border-color:rgba(255,255,255,.16) !important;
}
.snav-cat ul li a:hover{ background:rgba(255,255,255,.08) !important; }

/* --- (1) MONOCHROME: colored card / cta surfaces authored inline --- */
.cta-card{
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
  border-color:rgba(255,255,255,.16) !important;
}

/* --- (3) GLOSS REINFORCEMENT: layered white sheen wins on real surfaces --- */
.hero-bar a, .article-card, .stat-card, .state-card,
.calc-shell, .calc-card, .feature-box, .well, .snav-cat,
.donate-pop, .services-pop, .sitenav-pop, .svc-header{
  background-image:linear-gradient(158deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.015) 55%,transparent 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.5);
}

/* --- (4) SELECTOR OVER-MATCH FIXES ---
   .cards-grid is a bare layout wrapper wrongly caught by core [class*="card"]
   (glass+blur+shadow); .state-* are caught by [class*="stat-"] and blown to 42px. */
.cards-grid{
  background:none !important; backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important; box-shadow:none !important;
  border:0 !important; padding:0; border-radius:0;
}
.state-card, .state-grid, .state-icon, .state-name, .state-pill, .state-arrow,
.empty-state, .idle-state, .hero-state{
  font-size:inherit !important; font-weight:inherit !important;
  letter-spacing:normal !important;
}
.state-icon{ font-size:1.3rem !important; }

/* --- (5) CONTRAST / READABILITY: inputs + muted text on the dark-white ladder --- */
input, select, textarea{
  background:#0C0D18 !important; color:#F2F3FA !important;
  border-color:rgba(255,255,255,.16) !important;
}
input::placeholder, textarea::placeholder{ color:#6E7090 !important; }
input:focus, select:focus, textarea:focus{
  outline:2px solid #C8CAD8 !important; outline-offset:1px; border-color:transparent !important;
}

/* --- (6) RTL GUARD: Arabic keeps rtl + Tajawal + comfortable rhythm on dark --- */
[lang="ar"], [dir="rtl"], .arabic{
  direction:rtl; font-family:var(--arabic); line-height:1.9; color:#F2F3FA;
}

/* ===== 2026-07-04b round-2 polish ===== */
/* Round-1 remapped tokens + the obvious classes; this pass kills the residual
   saturated leaks that live ONLY in per-page inline <style> blocks (which lose
   to an override !important) and in the SVG logo-mark gradient, upgrades the
   hero CTA silver->glossy WHITE, and resets the logo anchors so the core's
   `nav a`->pill rule can't padding/hover them. Monochrome ladder only:
   shine #E8EAF0 · bright #C8CAD8 · mid #9496AA · dim #6E7090. No new hues. */

/* --- (R2-1) SVG LOGO MARK: violet->magenta aperture gradient -> chrome ladder.
   #iosg/#iosgf/#iosg2/#iosf drive the .brand .mark art via url(#id); CSS can
   override <stop> presentation attrs. 419+417 residual leak refs collapse here. */
#iosg stop:first-child,#iosgf stop:first-child,#iosg2 stop:first-child,#iosf stop:first-child{ stop-color:#E8EAF0 !important; }
#iosg stop:nth-child(2),#iosgf stop:nth-child(2),#iosg2 stop:nth-child(2),#iosf stop:nth-child(2){ stop-color:#C8CAD8 !important; }
#iosg stop:last-child,#iosgf stop:last-child,#iosg2 stop:last-child,#iosf stop:last-child{ stop-color:#9496AA !important; }

/* --- (R2-2) HERO/PRIMARY CTA -> GLOSSY WHITE (mandate).
   THIS site's hero button is `.btn.btn-gold.btn-lg`; round-1 left it silver.
   Force glossy white; keep the site's radius/padding untouched. --- */
.btn-gold,.btn.btn-gold,a.btn-gold,.hero-cta .btn-gold{
  background:#FFFFFF !important;
  background-image:linear-gradient(180deg,#FFFFFF,#EDEFF5) !important;
  color:#04050A !important; border-color:#FFFFFF !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 30px rgba(0,0,0,.5) !important;
}
.btn-gold:hover,.btn.btn-gold:hover,a.btn-gold:hover,.hero-cta .btn-gold:hover{
  background-image:linear-gradient(180deg,#FFFFFF,#E4E7EF) !important;
  color:#04050A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 42px rgba(0,0,0,.6) !important;
}

/* --- (R2-3) HEADER + NAV: logo anchors must NOT become pills; active nav is a
   clean chrome pill (no jewel/underline). --- */
.brand,.amaador-brand-logo,[class*="brand-logo"]{
  padding:0 !important; background:none !important; background-image:none !important;
  box-shadow:none !important; border-radius:0 !important;
}
.brand:hover,.amaador-brand-logo:hover{ background:none !important; box-shadow:none !important; }
.brand b,.brand .pro{ color:#C8CAD8 !important; }              /* keep brand accent on chrome, not gold */
/* this site's real nav items are `.nav-links a`; tighten the core pill so the
   top row doesn't crowd, and make active read as a filled chrome pill. */
.nav-links a{ padding:7px 11px !important; }
.nav-links{ gap:2px; }
.nav-links a.active,.nav-links a[aria-current="page"]{
  color:#F2F3FA !important; background:rgba(255,255,255,.08) !important;
  border-radius:10px !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.nav-links a.active::after{ display:none !important; }        /* kill the chrome/hued underline bar */
.nav-links a.btn{ padding:8px 16px !important; }               /* the nav CTA keeps comfortable pill padding */

/* --- (R2-4) CHOICE CHIPS / FILTERS / SEGMENTS -> polished monochrome pills.
   Selected = filled chrome; unselected = glossy dark. Covers site-unique
   classes the core [class*=chip]/[class*=tag] net misses via specificity. --- */
.chip-free,.chip-med,.chip-low,.chip-high,
.badge-pill,.badge-pill.red,.badge-pill.green,.badge-pill.amber,
.rate-badge,.rate-badge.short,.sys-tag,.sys-tag.contrib,
.tier-badge,.tier-1,.tier-2,.tier-3{
  background:rgba(255,255,255,.07) !important;
  color:#C8CAD8 !important;
  border-color:rgba(255,255,255,.16) !important;
}
.seg-3 button.on,.seg-4 button.on,.seg-5 button.on,
[class*="seg-"] button.on,button.on[class],.chip.active,.tag.active{
  background:#FFFFFF !important; color:#04050A !important; border-color:#FFFFFF !important;
}
.seg-3 button:hover,.seg-4 button:hover,.seg-5 button:hover{
  background:rgba(255,255,255,.10) !important; color:#F2F3FA !important;
}

/* --- (R2-5) INLINE-STYLE COLOR LEAKS: settlement good/bad, tiers, tort heads,
   callouts, cap-table -> chrome. These are financial value colorings, NOT
   safety signage, so they go monochrome. Bright=strong, mid=weak. --- */
.result-row .r-val.good,.result-row .r-val.warn,.result-row .r-val.bad,
.result-row.negative .value,.result-row.positive .value,
.scenario-row .value.green,.scenario-row .value.red,
.scenario-label.good,.scenario-label.bad,
.pro,.con,
.tort-card.full .tc-head,.tort-card.limited .tc-head,
.cap-table .has-cap,.tier-1,.tier-2,.tier-3,
.callout-warn strong,.warning-box strong{
  color:#C8CAD8 !important;
}
/* muted / caution variants read one step down the ladder for hierarchy */
.result-row .r-val.warn,.scenario-label.bad,.tort-card.limited .tc-head,
.result-row.negative .value,.scenario-row .value.red{
  color:#9496AA !important;
}

/* --- (R2-6) GRADIENT-TEXT KILL: these inline stats/values clip a violet->magenta
   fill onto their glyphs (authored in per-page <style>). Rather than disguise it
   as a chrome sheen, fully UN-CLIP it to SOLID dark-white: restore border-box
   plus an opaque text-fill so each renders as a plain #F2F3FA fill — flat, no
   decorative multi-hue glyph fill at all. */
.stat-card .sv,.stat-card .num,.cta-box h3,.compare-item .ci-val,[class*="ci-val"]{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#F2F3FA !important; color:#F2F3FA !important;
}

/* --- (R2-7) RTL: nav pills + chips symmetric padding, no clipped Arabic text --- */
[dir="rtl"] .nav-links a,[dir="rtl"] .chip-free,[dir="rtl"] .chip-med,
[dir="rtl"] .badge-pill,[dir="rtl"] .tier-1,[dir="rtl"] .tier-2,[dir="rtl"] .tier-3{
  padding-inline:11px !important;
}
[dir="rtl"] .nav-links a.active::after{ display:none !important; }
[dir="rtl"] .btn-gold{ color:#04050A !important; }             /* dark-on-white stays legible in RTL */

/* ===== 2026-07-04c: footer sister-site network row → icon-only ===== */
/* Site name is intentionally removed from VISIBLE layout (kept via .sr-only
   in the DOM for crawlability + title/aria-label for a native tooltip and
   screen-reader announcement). This is not the blank-label bug: the label is
   deliberately off-screen, not accidentally invisible, and each icon still
   gets a clear hover/focus treatment so the control doesn't look unlabeled. */
.network-links{ gap:10px !important; }
.network-link{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0 !important;
  border-radius:50% !important; font-size:1.05rem; line-height:1;
  transition:background-color .15s, border-color .15s, transform .15s;
}
.network-link .network-link-icon{ display:inline-block; }
.network-link .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.network-link:hover,
.network-link:focus-visible{
  background:rgba(255,255,255,.10) !important;
  border-color:#C8CAD8 !important;
  color:#F2F3FA !important;
  transform:translateY(-2px);
}
.network-link:focus-visible{
  outline:2px solid #C8CAD8; outline-offset:2px;
}
.network-link.network-active{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.3) !important;
}
@media (max-width:680px){
  .network-link{ width:36px; height:36px; font-size:.95rem; }
}