/* ============================================================
   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:1.15rem; 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;}
.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:24px; align-items:center;}
nav.main a{color:var(--muted); font-size:.92rem; font-weight:500; transition:color .2s;}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--emerald);}
.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);}
.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);}
.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:1.85rem; color:var(--emerald-deep); margin:14px 0 10px; text-align:right;}
[data-theme="dark"] .ayah .ar{color:var(--emerald);}
.ayah .trans{font-size:1.02rem; color:var(--ink);}
.ayah .ref{color:var(--muted); font-size:.85rem; margin-top:8px;}
.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:1024px){
  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:none;} }
@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;}
.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;} }