/* ============================================================================
   FAJR — the Fotoh design language, v1 token layer.  (Approved by Awwad
   2026-07-23; this approval is the written reversal of the Amendment-A
   navy/gold kit per Foundations §8.)
   SKIN, NOT SURGERY: this file overrides CSS custom properties + type only.
   It must NEVER touch layout, ids, classes used by JS, or any functional DOM.
   Method contract: website/Fajr-Rollout-Method-Skin-Not-Surgery-v1.md
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

:root{
  /* shared family tokens */
  --navy:#14161A; --navy-soft:#2B2E35; --navy2:#2B2E35;
  --gold:#B99441; --gold-soft:#D9BC72;
  --cream:#FAF8F3; --cream-soft:#FDFCF8; --paper:#FAF8F3;
  --white:#FFFFFF; --border:#E7E2D6; --line:#E7E2D6;
  --ink:#14161A; --ink-soft:#3D434D; --ink-mute:#8A8F98;
  /* per-door accents (used progressively in the per-page copy pass) */
  --accent-inc:#2B2E35; --accent-athan-a:#1B2650; --accent-athan-b:#B96E2E;
  --accent-qcom:#0E6B4F; --accent-qorg:#14555A;
}
body{ background:var(--cream); }
h1,h2,h3{ font-family:'Fraunces',Georgia,'Times New Roman',serif; letter-spacing:-0.01em; }
/* money + display figures — Fraunces carries the numbers */
.amt, .tot, .price-line .val, .stat .n, .monthly-display .amt{ font-family:'Fraunces',Georgia,serif; }
/* soften primary CTAs into the Fajr pill */
.btn-primary, .nav-cta, button.go{ border-radius:999px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOTOH EMBLEM — rotating blue globe (added 2026-07-23, Awwad's directive).
   liveathan.com's main pages already carry the globe as a real <span
   class="globe sm"> inside the brand — this rule only fills the gap on pages
   whose brand has NO globe span yet (e.g. start.html), using the same sprite.
   The :has() guard keeps it from doubling on index.html.
   ═══════════════════════════════════════════════════════════════════════ */
header .brand:not(:has(.globe))::before{
  content:"";
  display:inline-block;
  width:30px; height:30px;
  background:url("/assets/globe/globe_sprite.jpg") 0 0 no-repeat;
  background-size:720px 30px;
  border-radius:50%;
  flex:none;
  vertical-align:-8px;
  margin-inline-end:10px;
  box-shadow:0 0 0 1px rgba(212,175,55,.45), 0 0 14px 2px rgba(212,175,55,.28),
             inset 0 0 8px 2px rgba(0,0,0,.4);
  animation:fotoh-globe-spin 2s steps(24) infinite;
}
@keyframes fotoh-globe-spin{from{background-position:0 0}to{background-position:-720px 0}}
@media (prefers-reduced-motion:reduce){
  header .brand:not(:has(.globe))::before{animation:none;background-position:0 0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   16-LANGUAGE SWITCHER — always there (added 2026-07-23)
   Awwad's directive: "The languages switch should always be there — we are
   serving the whole world." Identical UX to qardon.org's switcher (2026-06-08
   engine incl. the 2026-07-07 iOS fixes). The engine auto-mounts next to the
   brand on every page; this block styles it. var() fallbacks keep it correct
   even on pages that don't load the site's full stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */
.lang-switcher{ position:relative; display:inline-flex; }
.lang-switcher .lang-current{
  display:inline-flex; align-items:center; gap:6px; background:transparent;
  border:1.5px solid var(--border-strong, var(--border, #D8D2C4));
  border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600;
  color:var(--ink-soft, #3D434D); cursor:pointer; transition:all .2s ease;
}
.lang-switcher .lang-current:hover{ border-color:var(--gold, #B99441); color:var(--navy, #14161A); }
.lang-switcher .lang-current::after{ content:"\25BE"; font-size:10px; color:var(--ink-mute, #8A8F98); }
.lang-switcher .lang-globe{ font-size:14px; line-height:1; }
.lang-switcher .lang-backdrop{ display:none; position:fixed; inset:0; background:rgba(10,14,26,.45); z-index:290; }
.lang-switcher.is-open .lang-backdrop{ display:block; }
.lang-switcher .lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:200px;
  background:var(--white, #FFFFFF); border:1px solid var(--border, #E7E2D6);
  border-radius:12px; box-shadow:var(--shadow-lg, 0 18px 44px rgba(20,22,26,.16));
  padding:6px; display:none; z-index:300;
  max-height:min(420px,70vh); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.lang-switcher.is-open .lang-menu{ display:block; }
.lang-switcher .lang-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; padding:9px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--ink-soft, #3D434D); cursor:pointer;
}
.lang-switcher .lang-menu button:hover{ background:var(--cream-soft, #FDFCF8); color:var(--navy, #14161A); }
.lang-switcher .lang-menu button[aria-current="true"]{
  color:var(--navy, #14161A); font-weight:700; background:rgba(185,148,65,.12);
}
.lang-switcher .lang-menu button .lang-native{ color:var(--ink-mute, #8A8F98); font-size:12px; margin-left:auto; }
.lang-switcher .lang-menu-close{
  display:flex; width:100%; justify-content:flex-end; background:transparent; border:none;
  color:var(--ink-soft, #3D434D); font-size:16px; font-weight:700; line-height:1;
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.lang-switcher .lang-menu-close:hover{ background:var(--cream-soft, #FDFCF8); color:var(--navy, #14161A); }
[dir="rtl"] .lang-switcher .lang-menu{ right:auto; left:0; }
[dir="rtl"] .lang-switcher .lang-menu button{ text-align:right; }
[dir="rtl"] .lang-switcher .lang-menu button .lang-native{ margin-left:0; margin-right:auto; }
[dir="rtl"] .lang-switcher .lang-menu-close{ justify-content:flex-start; }
@media (max-width:768px){
  .lang-switcher .lang-menu,
  [dir="rtl"] .lang-switcher .lang-menu{
    position:fixed; left:16px; right:16px;
    top:calc(env(safe-area-inset-top, 0px) + 72px);
    max-height:min(70vh, calc(100vh - 120px)); z-index:300;
  }
}
/* RTL base typography for sites without their own RTL blocks (fonts are
   lazy-loaded by the engine the first time an RTL language is chosen). */
[dir="rtl"] body{ font-family:'Cairo','Inter',-apple-system,'Segoe UI',sans-serif; }
html[lang="fa"] body{ font-family:'Vazirmatn','Cairo','Inter',sans-serif; }
html[lang="ur"] body{ font-family:'Noto Nastaliq Urdu','Cairo',serif; line-height:2; }