/* ══════════════════════════════════════════════════════════════════
   BSA — design tokens, reset and accessibility helpers
   First stylesheet on every page. Colours live here and nowhere else.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --navy:#1B2A4A;
  --navy-light:#2D4070;
  --gold:#C4973B;
  --gold-light:#E8C47A;
  --gold-text:#856425;     /* gold for text/icons on light backgrounds: 5.5:1 on white, 4.6:1 on cream-dark (AA); --gold itself is 2.7:1 */
  --on-gold:var(--navy);   /* text on a gold fill (white on gold is 2.7:1; navy is 5.3:1) */
  --cream:#FAF8F3;
  --cream-dark:#F0ECE2;
  --white:#FFFFFF;
  --text:#2C2C2C;
  --text-light:#6B6B6B;
  --border:#DDD8CC;

  /* The viewport height sections size against. Real browsers get the live value;
     tools/check/shot.html pins it to a device height, because it renders the page
     in a very tall iframe where 100svh would otherwise be the whole page. */
  --vh:100svh;
}

*{margin:0;padding:0;box-sizing:border-box;}
/* overflow-x:clip on html stops any stray wide element from widening the
   layout viewport on Android. clip, unlike hidden, never becomes a scroll
   container — which also keeps position:sticky (privacy page contents)
   working, since a scroll container on body would capture it. */
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px;}
body{font-family:'Noto Naskh Arabic',serif;background:var(--cream);color:var(--text);overflow-x:clip;direction:rtl;}
body.ltr{font-family:'Lato',sans-serif;direction:ltr;}

[hidden]{display:none!important;}

/* ── Accessibility ── */
.skip-link{position:absolute;top:-100px;inset-inline-start:16px;z-index:5000;background:var(--navy);
  color:#fff;padding:12px 22px;border-radius:0 0 6px 6px;font-size:14px;font-weight:700;
  text-decoration:none;transition:top .2s;}
.skip-link:focus{top:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:2px;}
.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;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}