/* ============================================================
   Munawarpath — shared design system
   ============================================================ */
:root{
  --bg:#FBFAF6; --surface:#FFFFFF; --surface-2:#F3F1E9;
  --ink:#16241F; --muted:#5A6B64; --line:#E4E1D5;
  --emerald:#0F6B52; --emerald-deep:#0A4A39;
  --blue:#2E6F8E; --gold:#C99A3F;
  --glow:rgba(201,154,63,.28); --glow-2:rgba(15,107,82,.20);
  --shadow:0 1px 2px rgba(20,40,30,.05), 0 12px 40px -18px rgba(20,40,30,.25);
  --select-bg:#FFFFFF;
  --r:18px;
}
[data-theme="dark"]{
  --bg:#0C1714; --surface:#122019; --surface-2:#16271F;
  --ink:#ECEFE9; --muted:#93A39B; --line:#21342B;
  --emerald:#3FBF96; --emerald-deep:#2E9C79;
  --blue:#6FB3CE; --gold:#E2B860;
  --glow:rgba(226,184,96,.22); --glow-2:rgba(63,191,150,.18);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 50px -20px rgba(0,0,0,.6);
  --select-bg:#16271F;
}

/* ---------- Deep Blue · Liquid Glass (macOS-style) ---------- */
[data-theme="blue"]{
  --bg:#071633; --surface:rgba(255,255,255,.07); --surface-2:rgba(255,255,255,.12);
  --ink:#EAF1FF; --muted:#9FB4DC; --line:rgba(255,255,255,.16);
  --emerald:#62A8FF; --emerald-deep:#9CC8FF;   /* accent → azure */
  --blue:#4F8DF5; --gold:#E6C778;
  --glow:rgba(98,168,255,.30); --glow-2:rgba(60,120,240,.20);
  --shadow:0 1px 1px rgba(255,255,255,.10) inset, 0 18px 50px -16px rgba(0,8,40,.7);
  --select-bg:#0A1E48;
}
[data-theme="blue"] body{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(80,140,250,.30), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(40,90,200,.28), transparent 55%),
    linear-gradient(160deg, #061230 0%, #0A1E48 55%, #061634 100%);
  background-attachment:fixed;
}
/* frosted glass on every surface */
[data-theme="blue"] header,
[data-theme="blue"] .mobile-nav,
[data-theme="blue"] .card,
[data-theme="blue"] .tile,
[data-theme="blue"] .ayah,
[data-theme="blue"] .article,
[data-theme="blue"] .prophet,
[data-theme="blue"] .pillar,
[data-theme="blue"] .toggle,
[data-theme="blue"] .chip,
[data-theme="blue"] .field,
[data-theme="blue"] footer{
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 40px -18px rgba(0,8,40,.65);
}
[data-theme="blue"] header{background:rgba(8,22,52,.55);}
[data-theme="blue"] footer{background:rgba(8,22,52,.45);}
[data-theme="blue"] .tile:hover,
[data-theme="blue"] .ayah:hover{background:var(--surface-2);}
[data-theme="blue"] .btn-primary{
  background:linear-gradient(180deg, #6FB0FF, #3E7BEF); color:#04122E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px -8px rgba(40,100,240,.7);
}
[data-theme="blue"] .num{background:rgba(255,255,255,.10);}
[data-theme="blue"] .surah .idx{background:rgba(255,255,255,.10);}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
.ar{font-family:var(--quran-font, "Amiri Quran", serif); direction:rtl; line-height:2.1;}
.ur{font-family:"Noto Nastaliq Urdu",serif; direction:rtl; line-height:2.4; text-align:right;}
.ayah .ur,.card .ur,.feature .ur{color:var(--blue); font-size:calc(1.15rem * var(--read-scale,1)); margin-top:8px;}
[data-theme="blue"] .ayah .ur,[data-theme="blue"] .card .ur{color:var(--emerald-deep);}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
header .wrap{max-width:1280px;}
.read{max-width:760px;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:6px;}
img{max-width:100%}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; justify-content:space-between; height:66px;}
.brand{display:flex; align-items:center; gap:11px; font-family:"Fraunces",serif; font-size:1.3rem; font-weight:600;}
.lamp{
  width:30px; height:30px; flex:none; display:block; vertical-align:middle;
  filter:drop-shadow(0 0 7px var(--glow));
}
.brand{align-items:center;}
.brand:hover .lamp{filter:drop-shadow(0 0 11px var(--glow));}
nav.main{display:flex; gap:20px; align-items:center; flex-wrap:nowrap;}
nav.main a{color:var(--muted); font-size:.9rem; font-weight:500; white-space:nowrap; transition:color .2s;}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--emerald);}
/* Attractive Learn call-to-action button */
.nav-learn-cta{display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap;
  color:#1a1205 !important; font-weight:700; font-size:.9rem; line-height:1;
  padding:8px 16px; border-radius:999px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#F3D483 0%,#E2B860 45%,#C99A3F 100%);
  box-shadow:0 4px 16px rgba(226,184,96,.40); transition:transform .18s, box-shadow .18s, filter .18s;}
.nav-learn-cta:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 7px 22px rgba(226,184,96,.55);}
.nav-learn-cta.on{box-shadow:0 0 0 2px var(--gold), 0 4px 16px rgba(226,184,96,.4);}
.nav-learn-cta .nlc-ico{font-size:.95em; animation:nlcSpark 2.4s ease-in-out infinite;}
.nav-learn-cta::after{content:""; position:absolute; top:0; left:-65%; width:42%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-18deg);
  animation:nlcShine 3.8s ease-in-out infinite;}
@keyframes nlcShine{0%,55%{left:-65%;} 100%{left:135%;}}
@keyframes nlcSpark{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.55; transform:scale(.82);}}
@media (prefers-reduced-motion:reduce){.nav-learn-cta::after{display:none;} .nav-learn-cta .nlc-ico{animation:none;}}
/* In the mobile drawer it sits as a full-width button at the top */
.m-links .nav-learn-cta{display:flex; justify-content:center; margin:2px 0 10px; padding:13px; font-size:1rem;}
.head-actions{display:flex; gap:10px; align-items:center;}
.toggle{
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.05rem;
  display:grid; place-items:center; transition:transform .3s, background .3s;
}
.toggle:hover{transform:rotate(-18deg);}
/* Square style for theme / font / language buttons — sun & moon stay round */
#langBtn, #fontBtn, #themeBtn{ border-radius:11px; }
#langBtn:hover, #fontBtn:hover, #themeBtn:hover{ transform:none; border-color:var(--gold); }

/* "Allah is the Light…" — gold shimmer + sparkles */
.hero .noor-verse{
  position:relative; display:inline-block;
  background:linear-gradient(100deg,#9c7012 0%,#e2b860 22%,#fff6d5 50%,#e2b860 78%,#9c7012 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 14px rgba(226,184,96,.45));
  animation:noorShine 6s linear infinite;
}
@keyframes noorShine{ to{ background-position:220% center; } }
.hero .noor-verse::before, .hero .noor-verse::after{
  content:"✦"; position:absolute; font-size:.42em; -webkit-text-fill-color:#fff6d5; color:#fff6d5;
  filter:drop-shadow(0 0 6px rgba(255,240,180,.95)); pointer-events:none;
  animation:noorSpark 2.6s ease-in-out infinite;
}
.hero .noor-verse::before{ top:-.15em; left:-.25em; }
.hero .noor-verse::after{ bottom:-.05em; right:-.2em; animation-delay:1.3s; }
@keyframes noorSpark{ 0%,100%{opacity:0; transform:scale(.5) rotate(0deg);} 50%{opacity:1; transform:scale(1.15) rotate(25deg);} }
@media (prefers-reduced-motion:reduce){
  .hero .noor-verse{ animation:none; }
  .hero .noor-verse::before, .hero .noor-verse::after{ animation:none; opacity:.85; }
}
.menu-btn{display:none;}
.mobile-nav{display:none; flex-direction:column; padding:8px 22px 18px; border-bottom:1px solid var(--line); background:var(--bg);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:11px 0; color:var(--ink); border-bottom:1px solid var(--line); font-weight:500;}

/* ---------- Buttons ---------- */
.btn{padding:13px 26px; border-radius:999px; font-weight:600; font-size:.96rem; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .25s, background .2s; display:inline-block;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--emerald); color:#fff; box-shadow:0 10px 24px -10px var(--emerald);}
[data-theme="dark"] .btn-primary{color:#08130E;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--emerald); color:var(--emerald);}
.chip{font-size:.85rem; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:.2s; font-weight:500;}
.chip:hover{border-color:var(--emerald); color:var(--emerald);}
.chip.active,.chip.saved{background:var(--emerald); color:#fff; border-color:var(--emerald);}
[data-theme="dark"] .chip.active,[data-theme="dark"] .chip.saved{color:#08130E;}
[data-theme="blue"] .chip.active,[data-theme="blue"] .chip.saved{color:#04122E;}
/* Segmented switch (Surah by surah / Ayah by ayah) */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface);}
.seg .seg-btn{border:none; border-radius:0; padding:9px 14px; white-space:nowrap;}
.seg .seg-btn:not(.active){background:transparent; color:var(--muted);}
.seg .seg-btn:not(.active):hover{color:var(--emerald);}
.seg .seg-btn.active{background:var(--emerald); color:#fff;}
[data-theme="dark"] .seg .seg-btn.active,[data-theme="blue"] .seg .seg-btn.active{color:#04122E;}

/* ---------- Typography & sections ---------- */
section{padding:60px 0;}
.center{text-align:center;}
h1.page-title{font-family:"Fraunces",serif; font-size:clamp(1.9rem,4.4vw,2.8rem); font-weight:600; margin:0 0 8px;}
h2.title{font-family:"Fraunces",serif; font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:600; margin:0 0 10px;}
.eyebrow{letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; font-weight:600; color:var(--gold);}
.hero-h1{ font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.35rem,3.4vw,1.85rem); color:var(--ink); line-height:1.28; margin:18px auto 6px; max-width:22ch; }
.sub{color:var(--muted); margin:0 auto 38px; max-width:52ch;}
.lead{font-size:1.18rem; line-height:1.85;}
.pagehead{padding:54px 0 8px; text-align:center;}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:16px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow);}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px; transition:transform .2s, border-color .2s, box-shadow .25s; display:block;}
.tile:hover{transform:translateY(-4px); border-color:var(--emerald); box-shadow:var(--shadow);}
.tile .ar{font-size:1.7rem; color:var(--gold); margin-bottom:6px;}
.tile h3{margin:0 0 4px; font-size:1.08rem; font-family:"Fraunces",serif;}
.tile p{margin:0; font-size:.86rem; color:var(--muted);}
.kicker{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600;}

/* ---------- Ayah block ---------- */
.ayah{border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; background:var(--surface); margin-bottom:16px;}
.ayah .num{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--surface-2); color:var(--emerald); font-size:.8rem; font-weight:700; border:1px solid var(--line);}
.ayah .ar{font-size:calc(1.85rem * var(--read-scale,1)); color:var(--emerald-deep); margin:14px 0 10px; text-align:right;}
[data-theme="dark"] .ayah .ar{color:var(--emerald);}
.ayah .trans{font-size:calc(1.02rem * var(--read-scale,1)); color:var(--ink); text-align:left; line-height:1.75;}
.ayah .ref{color:var(--muted); font-size:.85rem; margin-top:8px; text-align:left;}
/* Tajweed colouring — standard scheme on a light reading surface (legible in any theme) */
.ar.tajweed{background:#fbf7ec; color:#1c1a16; border:1px solid #e7dcc2; border-radius:12px; padding:14px 18px;}
.tj-h,.tj-s,.tj-l{color:#8f8f8f;}                 /* silent: hamzat wasl / silent / laam shamsiyah */
.tj-n{color:#3F6BEA;} .tj-p{color:#3346E0;} .tj-m{color:#000EBC;} .tj-o{color:#2144C1;}  /* madd (prolongation) */
.tj-q{color:#DD0008;}                              /* qalqalah */
.tj-f{color:#9400A8;} .tj-c{color:#D500B7;}        /* ikhfa / ikhfa shafawi */
.tj-i{color:#1aa6e0;}                              /* iqlab */
.tj-a{color:#169777;} .tj-u{color:#169200;} .tj-w{color:#3f9d00;}  /* idgham variants */
.tj-d,.tj-b{color:#8f8f8f;}                        /* idgham mutajanisayn / mutaqaribayn */
.tj-g{color:#E5701A;}                              /* ghunnah */
.tajweed-legend{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:18px;}
.tajweed-legend .kicker{display:block; margin-bottom:8px;}
.tj-leg-grid{display:flex; flex-wrap:wrap; gap:8px 16px;}
.tj-leg{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted);}
.tj-dot{width:12px; height:12px; border-radius:50%; display:inline-block;}
mark.hl{background:rgba(226,184,96,.32); color:inherit; padding:0; margin:0; border-radius:2px; box-shadow:0 0 0 1px rgba(226,184,96,.18);}
[data-theme="dark"] mark.hl{background:rgba(226,184,96,.26);}
/* Per-ayah tafsir panel */
@keyframes fadeIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
/* Currently-recited verse highlight (audio follow-along) */
.ayah.playing{border-color:var(--gold); background:var(--surface-2); box-shadow:0 10px 34px rgba(226,184,96,.14); position:relative;}
.ayah.playing::before{content:""; position:absolute; left:-1px; top:16px; bottom:16px; width:4px; border-radius:0 4px 4px 0; background:var(--gold); box-shadow:0 0 12px rgba(226,184,96,.7);}
.ayah.playing .num{background:var(--gold); color:#1a1205; border-color:var(--gold);}
/* Sticky now-playing bar */
.np{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:1200; display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:16px; background:var(--surface); border:1px solid var(--gold);
  box-shadow:0 12px 40px rgba(0,0,0,.28); backdrop-filter:blur(8px);}
.np.hidden{display:none;}
.np-btn{border:none; background:var(--surface-2); color:var(--ink); cursor:pointer; width:40px; height:40px; border-radius:11px; font-size:1.1rem; display:grid; place-items:center;}
.np-btn:hover{background:var(--gold); color:#1a1205;}
.np-btn.primary{background:var(--gold); color:#1a1205;}
.np-label{font-size:.86rem; font-weight:600; color:var(--ink); padding:0 8px; white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:520px){ .np-label{max-width:34vw;} .np-btn{width:38px; height:38px;} }
.ayah-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.ayah.playing{border-color:var(--emerald); box-shadow:0 0 0 1px var(--emerald), 0 12px 38px -16px var(--glow);}
.ayah.playing .num{background:var(--emerald); color:#fff;}
[data-theme="dark"] .ayah.playing .num,[data-theme="blue"] .ayah.playing .num{color:#04122E;}
.ayah.playing::before{content:"♪ now reciting"; position:absolute; top:-10px; left:16px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--emerald); padding:2px 10px; border-radius:999px;}
.ayah{position:relative;}

/* ---------- Forms / inputs ---------- */
.field{width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:.96rem;}
.field:focus{outline:none; border-color:var(--emerald);}
select.field{cursor:pointer; background-color:var(--select-bg); color:var(--ink); -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:38px;}
[data-theme="blue"] select.field{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.field option{ background-color:var(--select-bg); color:var(--ink); }
optgroup{ background-color:var(--select-bg); color:var(--ink); }
label.lbl{display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px; font-weight:600;}

/* ---------- States ---------- */
.loading{color:var(--muted); text-align:center; padding:40px 0;}
.spinner{width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--emerald); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px;}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center; color:var(--muted); padding:40px 0;}
.error{text-align:center; color:#b4452f; padding:30px 0;}
[data-theme="dark"] .error{color:#f0a08c;}

/* ---------- Article prose ---------- */
.prose{max-width:720px; margin:0 auto;}
.prose p{margin:0 0 18px; font-size:1.06rem;}
.prose h3{font-family:"Fraunces",serif; font-size:1.3rem; margin:30px 0 10px;}
.prose .ar{font-size:1.7rem; color:var(--emerald-deep); text-align:right; margin:18px 0;}
[data-theme="dark"] .prose .ar{color:var(--emerald);}

/* ---------- Footer ---------- */
footer{background:var(--surface-2); border-top:1px solid var(--line); padding:54px 0 30px; margin-top:40px;}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.fgrid h4{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 14px;}
.fgrid a{display:block; color:var(--ink); font-size:.92rem; padding:5px 0; opacity:.85;}
.fgrid a:hover{color:var(--emerald); opacity:1;}
.fbrand p{color:var(--muted); font-size:.92rem; max-width:30ch;}
.copyright{margin-top:38px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Toast ---------- */
#mp-toast{position:fixed; left:50%; bottom:26px; translate:-50% 20px;
  background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:999px;
  font-size:.9rem; font-weight:500; box-shadow:0 12px 40px -12px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease, translate .25s ease; z-index:200;}
#mp-toast.show{opacity:1; translate:-50% 0;}
[data-theme="blue"] #mp-toast{background:rgba(8,22,52,.92); color:#EAF1FF; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid var(--line);}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
/* With many nav items, switch to the menu button earlier so the bar never overflows */
@media(max-width:1150px){
  nav.main{display:none;}
  .menu-btn{display:grid;}
}
@media(max-width:860px){
  nav.main{display:none;}
  .menu-btn{display:grid;}
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .g4{grid-template-columns:1fr 1fr; gap:12px;}
  .fgrid{grid-template-columns:1fr;}
  .card{padding:20px;}
  .ayah{padding:20px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
  .reveal{opacity:1; transform:none;}
}

/* ---------- Modal (Tadabbur reflect) ---------- */
.modal-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(4,10,28,.6); backdrop-filter:blur(4px);}
.modal-overlay.hidden{display:none;}
.modal-box{position:relative; width:100%; max-width:520px; background:var(--select-bg); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); max-height:88vh; overflow:auto;}
.modal-close{position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:4px 8px;}
.modal-close:hover{color:var(--ink);}

/* ---------- Header dropdown menus (language / font) ---------- */
.hmenu{position:relative; display:inline-block;}
#fontBtn{font-family:"Fraunces",serif; font-size:.95rem; font-weight:600;}
.hmenu-pop{position:absolute; top:calc(100% + 8px); right:0; min-width:230px; max-height:60vh; overflow:auto;
  background:var(--select-bg); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:6px; display:none; z-index:120;}
.hmenu-pop.open{display:block;}
.hmenu-item{display:block; width:100%; text-align:left; background:transparent; border:none; color:var(--ink);
  padding:10px 12px; border-radius:9px; cursor:pointer; font:inherit; font-size:.9rem;}
.hmenu-item:hover{background:var(--surface-2);}
.hmenu-item.active{background:var(--emerald); color:#fff;}
[data-theme="dark"] .hmenu-item.active,[data-theme="blue"] .hmenu-item.active{color:#04122E;}
.hmenu-head{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:8px 12px 4px; margin-top:4px;}
.hmenu-head:first-child{margin-top:0;}

/* ---------- Live moon logo animation ---------- */
@keyframes mp-moonglow{0%,100%{filter:drop-shadow(0 0 5px var(--glow));}50%{filter:drop-shadow(0 0 12px var(--glow));}}
@keyframes mp-twinkle{0%,100%{opacity:.3;}50%{opacity:1;}}
.moon-mark{animation:mp-moonglow 3.6s ease-in-out infinite;}
.moon-mark .mp-stars > *{animation:mp-twinkle 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
.moon-mark .mp-stars > *:nth-child(2){animation-delay:.7s;}
.moon-mark .mp-stars > *:nth-child(3){animation-delay:1.4s;}
@media (prefers-reduced-motion: reduce){
  .moon-mark{animation:none;}
  .moon-mark .mp-stars > *{animation:none; opacity:.85;}
}

/* ---------- Always-shining sun logo + right-side live moon ---------- */
@keyframes mp-sunshine{0%,100%{filter:drop-shadow(0 0 5px var(--glow));}50%{filter:drop-shadow(0 0 13px var(--glow));}}
@keyframes mp-spin{to{transform:rotate(360deg);}}
.sun-mark{animation:mp-sunshine 3s ease-in-out infinite;}
.sun-mark .mp-rays{animation:mp-spin 22s linear infinite; transform-box:fill-box; transform-origin:center;}
@media (max-width:560px){ .nav-moon-wrap{display:inline-flex;} }
@media (prefers-reduced-motion: reduce){
  .sun-mark{animation:none;}
  .sun-mark .mp-rays{animation:none;}
}

/* ---------- Hijri moon popover ---------- */
.nav-moon .lamp{width:26px; height:26px;}
.moon-pop{min-width:210px; text-align:center; right:0;}
/* Sun → prayer times */
.brand-wrap{position:relative; display:flex; align-items:center; gap:11px;}
.brand-sun{padding:0; margin:0;}
.brand-sun .lamp{width:26px; height:26px;}
.brand-sun:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.sun-pop{left:0; right:auto; min-width:248px;}
.pray-in{padding:6px 6px 4px;}
.pray-row{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); font-size:.95rem;}
.pray-row:last-of-type{border-bottom:none;}
.pray-name{color:var(--ink);}
.pray-time{color:var(--muted); font-variant-numeric:tabular-nums;}
.pray-row.next{background:var(--surface-2); border-radius:10px; border-bottom-color:transparent;}
.pray-row.next .pray-name,.pray-row.next .pray-time{color:var(--gold); font-weight:700;}
.pray-loc{text-align:center; color:var(--muted); font-size:.78rem; padding:8px 12px 2px;}
.pray-msg{padding:16px 14px; text-align:center; color:var(--muted); font-size:.9rem; line-height:1.5;}
.pray-toggle{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:10px; margin:8px 8px 4px;}
.pray-school{flex:1; border:none; background:none; cursor:pointer; color:var(--muted); font:inherit; font-weight:600; font-size:.82rem; padding:7px; border-radius:7px;}
.pray-school.on{background:var(--emerald); color:#fff;}
[data-theme="dark"] .pray-school.on,[data-theme="blue"] .pray-school.on{color:#04122E;}
.pray-qibla{display:block; width:calc(100% - 16px); margin:8px 8px 4px; padding:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); border-radius:9px; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600;}
.pray-qibla:hover{border-color:var(--gold); color:var(--gold);}
/* Qibla compass modal */
.qibla-box{max-width:340px; text-align:center;}
.qibla-dial{position:relative; width:220px; height:220px; margin:18px auto 6px; border-radius:50%;
  border:2px solid var(--line); background:radial-gradient(circle at 50% 50%, var(--surface-2), var(--surface));}
.qibla-mark{position:absolute; top:6px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:1.1rem;}
.qibla-arrow{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2.6rem;
  transition:transform .15s ease-out; transform-origin:center;}
.qibla-info{font-family:"Fraunces",serif; font-size:1.1rem; color:var(--gold); margin:6px 0 2px;}
.qibla-sub{color:var(--muted); font-size:.86rem; margin:0; min-height:1.2em; line-height:1.5;}
.moon-pop-in{padding:6px 8px 4px;}
.hijri-main{font-family:"Fraunces",serif; font-size:1.18rem; color:var(--ink); margin-top:8px; font-weight:600;}
.hijri-ar{color:var(--gold); font-size:1.15rem; margin-top:4px;}
.hijri-greg{color:var(--muted); font-size:.82rem; margin-top:9px;}

@media (max-width:680px){ .toggle{width:38px; height:38px; font-size:1rem;} .head-actions{gap:7px;} }

/* ---------- "More" nav dropdown ---------- */
.nav-more{display:inline-block;}
.nav-more-btn{background:none; border:none; cursor:pointer; padding:0; font:inherit;
  color:var(--muted); font-size:.9rem; font-weight:500; display:inline-flex; align-items:center; gap:3px; transition:color .2s;}
.nav-more-btn:hover,.nav-more-btn.on{color:var(--emerald);}
.nav-more-pop{right:auto; left:0; min-width:170px;}
.nav-more-pop a{display:block; padding:9px 14px; color:var(--ink); font-size:.92rem; border-radius:8px; transition:background .15s;}
.nav-more-pop a:hover,.nav-more-pop a[aria-current="page"]{background:var(--surface-2); color:var(--emerald);}

/* ---------- Mobile: move all controls into the menu drawer ---------- */
@media(max-width:640px){
  .head-actions .hmenu{display:none;}             /* language, font → in the drawer */
  .head-actions .nav-moon-wrap{display:inline-flex;}  /* keep the moon in the header beside the sun */
  .head-actions #themeBtn{display:none;}
}
.mobile-nav{max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.m-links{display:flex; flex-direction:column;}
.m-settings{margin-top:6px;}
@media(min-width:641px){ .m-settings{display:none;} }   /* tablet keeps controls in the bar */
.m-set-row{display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line);}
.m-set-label{font-weight:600; color:var(--ink);}
.m-hijri-val{color:var(--gold); font-size:.92rem;}
.m-seg{display:inline-flex; gap:6px;}
.m-seg button{width:40px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:1.05rem;}
.m-seg button.on{background:var(--gold); color:#1a1205; border-color:var(--gold);}
.m-acc{border-bottom:1px solid var(--line);}
.m-acc summary{padding:13px 0; font-weight:600; cursor:pointer; list-style:none; color:var(--ink);}
.m-acc summary::-webkit-details-marker{display:none;}
.m-acc summary::after{content:"▾"; float:right; color:var(--muted);}
.m-acc[open] summary::after{content:"▴";}
.m-acc-body{display:flex; flex-direction:column; gap:6px; padding:2px 0 12px;}
.m-chip{text-align:left; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; font-size:.9rem;}
.m-chip.on{border-color:var(--gold); color:var(--gold); font-weight:600;}



/* Search intent card — "verses for this moment" */
.intent-card{ margin:0 0 22px; padding:18px 18px 8px; border-radius:16px; border:1px solid var(--gold); background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent); }
.intent-card .intent-label{ font-family:"Fraunces",serif; font-weight:600; color:var(--gold); font-size:1.02rem; margin:0 0 6px; letter-spacing:.02em; }
.intent-card .ayah{ border-bottom:1px solid var(--line); }
.intent-card .ayah:last-child{ border-bottom:none; }