/* Niyya look: Saudi Cyber Security Compliance Check (THIQA). English,
   Arabic (RTL) and bilingual. Its own green and navy become the site's
   ink, with the Niyya green as THIQA's accent (NUCCT, its US sibling,
   takes the pink). Framework colours (--fw, --rc), the score colours
   (--c) and ok / warn / bad / high keep their meaning. */

:root {
  --primary: var(--niyya-ink);
  --primary-600: var(--niyya-ink-3);
  --primary-50: var(--niyya-paper-2);
  --primary-100: var(--niyya-line);
  --navy: var(--niyya-ink);
  --navy-2: var(--niyya-ink-3);
  --navy-3: #000;
  --lime: var(--niyya-green);
  --lime-2: var(--niyya-green);
  --gold: var(--niyya-amber-ink);
  --gold-50: var(--niyya-amber-soft);
  --ink: var(--niyya-ink);
  --text: var(--niyya-ink);
  --muted: var(--niyya-muted);
  --line: var(--niyya-line);
  --bg: var(--niyya-paper);
  --card: #fff;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04);
  --shadow-lg: 0 10px 32px rgba(11, 11, 11, .14);
}
a { color: var(--niyya-green-ink); }
a:hover { color: var(--niyya-ink); }
:focus-visible, .choice input:focus-visible + label, .yesno input:focus-visible + label,
.seg input:focus-visible + label, .export-lang input:focus-visible + span { outline-color: rgba(62, 207, 142, .55); }
.brand-stripe, [dir=rtl] .brand-stripe { background: var(--niyya-rainbow); }

/* ---- public header: ink, as the site header ---- */
.public-header { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink); }
.public-brand, .public-brand strong { color: #fff; }
.public-brand small { color: var(--niyya-on-dark-2); }
.public-brand img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.public-header .btn-link { color: var(--niyya-on-dark); }
.public-header .btn-link:hover { color: #fff; }
.public-header .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.public-header .btn-outline:hover { background: #fff; color: var(--niyya-ink); border-color: #fff; }
.public-header .lang-switch { border-color: rgba(255, 255, 255, .3); }
.public-header .lang-switch a { background: transparent; color: var(--niyya-on-dark); }
.public-header .lang-switch a + a { border-inline-start-color: rgba(255, 255, 255, .3); }
.public-header .lang-switch a:hover { background: var(--niyya-dark-hover); color: #fff; }
.public-header .lang-switch a.active { background: #fff; color: var(--niyya-ink); }

/* ---- the green call to action: Niyya green with ink text ---- */
.btn-gold, .btn-gold:hover { background: var(--niyya-green); border-color: var(--niyya-green); color: var(--niyya-ink); }
.btn-gold:hover { background: #5AD9A0; border-color: #5AD9A0; }
.display-title .brand-hl { color: var(--niyya-green-ink); }
.eyebrow, .feature-card > i, .pillar .ico, .fieldset-title i, .insights li::before,
.method-steps li strong::before, .control summary, .branding-edit summary, .phase li b { color: var(--niyya-green-ink); }
.track > span { background: var(--niyya-green); }

/* ---- blue-greys become warm paper ---- */
.btn-light { background: var(--niyya-paper-2); border-color: var(--niyya-line); }
.btn-light:hover { background: var(--niyya-paper-3); border-color: var(--niyya-line-2); }
.public-footer, .section-alt, .export-exec, table.data th, table.data tr:hover td, .reg-group { background: var(--niyya-paper); }
.hero, [dir=rtl] .hero { background: linear-gradient(135deg, var(--niyya-paper-2) 0%, #fff 62%); }
[dir=rtl] .hero { background: linear-gradient(225deg, var(--niyya-paper-2) 0%, #fff 62%); }
.lead { color: var(--niyya-text-2); }
.note-box-light, .g-cell { background: var(--niyya-paper-2); }
.wizard .num { background: var(--niyya-paper-2); }
.wizard .current .num { background: var(--niyya-ink); }
.wizard .done .num { background: var(--ok); }
.heat-cell.empty { background: var(--niyya-paper-2) !important; }
.fw-card p, .control .question, .control details p, .risk-card p, .method-steps li span,
.start-why, .gap-rec, .tag { color: var(--niyya-text-2); }
input[type=text], input[type=email], input[type=password], select, textarea,
.yesno, .seg label { border-color: var(--niyya-line-2); }
.yesno label + input + label { border-inline-start-color: var(--niyya-line-2); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(62, 207, 142, .2); }
.choice input:checked + label, .fw-option:has(input:checked) { background: var(--niyya-paper-2); }
.seg label:hover { border-color: #9A9890; }
.track, .stackbar { background: var(--niyya-paper-3); }
.score-ring { background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--niyya-paper-3) 0); }
.disclaimer, .logo-preview { border-color: var(--niyya-line-2); }
.fw-card:hover { box-shadow: 0 4px 16px rgba(11, 11, 11, .1); }
.brand-logo-lg { box-shadow: 0 6px 20px rgba(11, 11, 11, .22); }
.sidebar-backdrop { background: rgba(11, 11, 11, .5); }
.guest-banner { background: linear-gradient(90deg, var(--niyya-ink), var(--niyya-ink-3)); }