/*
  qkz.css — Quran ki Zuban shared design system
  ─────────────────────────────────────────────────────────────────────
  FONT: Jameel Noori Nastaleeq (primary Urdu font)
  Place "JameelNooriNastaleeq.woff2" in docs/fonts/
  Download: https://www.urdufonts.net/fonts/jameel-noori-nastaleeq
  Until added, Noto Nastaliq Urdu (Google Fonts) is the fallback.

  PATHS: All urls are relative to this CSS file (docs/css/).
  ../fonts/ = docs/fonts/  — works on GitHub Pages subdirectory.
  Do NOT use leading slashes here.
*/

@font-face {
  font-family:'JameelNoori';
  src:url('../fonts/JameelNooriNastaleeq.woff2') format('woff2'),
      url('../fonts/JameelNooriNastaleeq.ttf') format('truetype');
  font-display:swap;
}
@font-face {
  font-family:'IndoPak';
  src:url('../fonts/Indopak-nastaleeq-hanafi-normal-v4.2.2-with-waqf-lazmi.woff2') format('woff2');
  font-display:swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap');

:root{
  --bg:#FAF6EE; --bg-2:#F2EADC; --surface:#FFFFFF; --surface-2:#F8F4EC;
  --ink:#16292B; --ink-soft:#3C5557; --muted:#6E7E80;
  --teal:#0E7A88; --teal-deep:#0A5560; --teal-soft:#E1F0F1; --teal-line:rgba(14,122,136,.18);
  --gold:#B07A1F; --gold-deep:#8A5E14; --gold-soft:#F6EBD3; --gold-line:rgba(176,122,31,.22);
  --line:rgba(22,41,43,.10);
  --shadow:0 1px 3px rgba(10,85,96,.06), 0 14px 40px -18px rgba(10,85,96,.28);
  --shadow-sm:0 1px 2px rgba(10,85,96,.05), 0 4px 14px -10px rgba(10,85,96,.26);
  --radius:18px; --radius-sm:12px;
  --font-ur:'JameelNoori','Noto Nastaliq Urdu',serif;
  --font-ar:'IndoPak','Noto Naskh Arabic',serif;
  --font-en:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --maxw:1020px;
}
html.dark{
  --bg:#0D1A1C; --bg-2:#112022; --surface:#152526; --surface-2:#1C3032;
  --ink:#DCE9EB; --ink-soft:#8AAEB2; --muted:#527678;
  --teal:#2AC4D4; --teal-deep:#22A8B8;
  --teal-soft:rgba(42,196,212,.12); --teal-line:rgba(42,196,212,.22);
  --gold:#D4A844; --gold-deep:#E8BF5A;
  --gold-soft:rgba(212,168,68,.12); --gold-line:rgba(212,168,68,.22);
  --line:rgba(220,233,235,.09);
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 14px 40px -18px rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 14px -10px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ur);background:var(--bg);color:var(--ink);
  line-height:1.9;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .25s,color .25s;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(110% 55% at 100% 0%,var(--teal-soft) 0%,transparent 45%),
             radial-gradient(110% 55% at 0% 0%,var(--gold-soft) 0%,transparent 42%);
  opacity:1;transition:opacity .25s;
}
html.dark body::before{opacity:.25;}
.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
.lat{font-family:var(--font-en);direction:ltr;unicode-bidi:plaintext}
.ar{font-family:var(--font-ar);direction:rtl}

/* PWA banner */
#pwaBanner{display:none;position:relative;z-index:70;background:linear-gradient(135deg,var(--teal-deep),var(--teal));color:#fff;padding:11px 16px;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;font-size:.9rem;}
#pwaBanner button{font-family:var(--font-en);font-size:.74rem;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;padding:5px 14px;border-radius:999px;cursor:pointer;}
#pwaClose{background:none;border:none;font-size:1.1rem;cursor:pointer;opacity:.7;padding:0 4px}

/* Topbar */
.qkz-topbar{position:sticky;top:0;z-index:60;background:rgba(250,246,238,.88);backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line);transition:background .25s,border-color .25s;}
html.dark .qkz-topbar{background:rgba(13,26,28,.88)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.qkz-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand-icon{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--teal-deep));box-shadow:var(--shadow-sm);}
.brand-icon svg{width:20px;height:20px}
.brand-text b{font-family:var(--font-ar);font-size:1.2rem;display:block;line-height:1;color:var(--ink)}
.brand-text small{font-family:var(--font-en);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}
.topbar-nav{display:flex;align-items:center;gap:10px}
.topbar-nav a{font-family:var(--font-en);font-size:.74rem;color:var(--muted);text-decoration:none;letter-spacing:.04em;transition:.15s}
.topbar-nav a:hover{color:var(--teal-deep)}
@media(max-width:480px){.topbar-nav a{display:none}}

/* Dark toggle */
#darkToggle{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:.95rem;color:var(--muted);transition:.2s;line-height:1;}
#darkToggle:hover{border-color:var(--teal-line);background:var(--teal-soft)}
#darkToggle .sun{color:var(--gold)}
#darkToggle .moon{color:var(--teal-deep);opacity:.45}
html.dark #darkToggle .sun{opacity:.35}
html.dark #darkToggle .moon{opacity:1}

/* Footer */
.qkz-footer{margin-top:60px;padding:28px 18px;text-align:center;border-top:1px solid var(--line);font-family:var(--font-en);font-size:.76rem;color:var(--muted);direction:ltr;line-height:2;}
.qkz-footer .ar-line{font-family:var(--font-ar);font-size:1.05rem;color:var(--ink-soft);display:block;margin-bottom:8px;direction:rtl}
.qkz-footer a{color:var(--teal-deep);text-decoration:none}
.qkz-footer a:hover{text-decoration:underline}
.qkz-footer .sep{margin:0 8px;opacity:.4}

/* Cookie bar */
#cookieBar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--ink);color:#d1e4e6;padding:13px 20px;font-family:var(--font-en);font-size:.78rem;direction:ltr;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
#cookieBar a{color:#67e8f9;text-decoration:none}
#cookieBar button{background:var(--teal);color:#fff;border:none;border-radius:8px;padding:6px 16px;cursor:pointer;font-size:.76rem;font-family:var(--font-en);}

/* Scroll reveal */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.fade-in.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}*{scroll-behavior:auto !important}}