/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — Nourelalam.com  ·  "Aurora" look
   Loaded LAST on every page: blue · white · gold, light & dark, floating nav.
   The home hero (.nh-hero) is intentionally left as designed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────────────────── */
:root{
  --bg:#070d1f;  --surface:#0b1633;  --card:#101f44;
  --border:rgba(120,160,240,.17);
  --ivory:#e9f0ff;  --muted:#9db0d8;  --accent:#5b8def;
  --gold:#d8b45e;  --gold-lt:#ecd08a;  --gold-dk:#9a7a2c;  --gold-xlt:#f5e3b0;
  --blue:#3d7df2;  --blue-dk:#1f55c4;  --blue-lt:#7fb0ff;
  --radius:20px;
  --shadow:0 18px 50px rgba(2,8,28,.55);
  --nav-bg:rgba(10,18,38,.68);  --nav-border:rgba(130,170,255,.20);
  --nav-shadow:0 10px 40px rgba(2,8,28,.55);
  --page-bg:linear-gradient(160deg,#060b1b 0%,#0a1226 38%,#0e2250 100%);
  --band:rgba(60,110,220,.09);
  --on-dark:#f2f6ff;
  --grad-primary:linear-gradient(135deg,var(--blue-dk),var(--blue));
  --grain-op:0;
}
html[data-theme="light"]{
  --bg:#ffffff;  --surface:#eef5ff;  --card:#ffffff;
  --border:rgba(37,99,235,.15);
  --ivory:#0f2350;  --muted:#587099;  --accent:#2563eb;
  --gold:#b8892a;  --gold-lt:#c9a24b;  --gold-dk:#8a6416;  --gold-xlt:#e2c36f;
  --blue:#2563eb;  --blue-dk:#1b4bbd;  --blue-lt:#3f78e0;
  --shadow:0 14px 40px rgba(37,99,235,.13);
  --nav-bg:rgba(255,255,255,.92);  --nav-border:rgba(37,99,235,.17);
  --nav-shadow:0 10px 34px rgba(37,99,235,.16);
  --page-bg:linear-gradient(180deg,#ffffff 0%,#f0f6ff 38%,#d6e7ff 100%);
  --band:rgba(37,99,235,.055);
}

/* ── 2. Page background (replaces the old flat colour + grain) ────────────── */
html{background:var(--bg)}
body{background:var(--page-bg) fixed !important;color:var(--ivory)}
body::before{display:none !important}
[id]{scroll-margin-top:96px}

/* ── 3. Floating glass navigation ─────────────────────────────────────────── */
nav:not(.sb-nav){
  position:fixed !important;top:14px !important;inset-inline:0 !important;margin-inline:auto !important;
  width:min(1200px,calc(100% - 28px)) !important;height:auto !important;min-height:60px;
  padding:.5rem .8rem .5rem 1.1rem !important;
  display:flex !important;align-items:center;gap:1rem !important;
  border-radius:999px !important;
  background:var(--nav-bg) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--nav-border) !important;border-bottom:1px solid var(--nav-border) !important;
  box-shadow:var(--nav-shadow);z-index:500 !important;
}
.nav-logo{
  font-weight:900;font-size:1.12rem;letter-spacing:.01em;text-decoration:none;flex-shrink:0;
  padding-inline-end:.4rem;
  background:linear-gradient(90deg,var(--blue-lt),var(--blue));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent !important;
}
.nav-logo em{font-style:normal;-webkit-text-fill-color:var(--gold);color:var(--gold) !important}
.nav-links{flex:1;justify-content:center;gap:.25rem !important}
.nav-links > li > a,.nav-links a.nav-dd-toggle{
  display:inline-flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border-radius:999px;
  font-size:.88rem;font-weight:700;color:var(--ivory) !important;opacity:.78;text-decoration:none;
  transition:background .2s,opacity .2s,color .2s,transform .2s;
}
.nav-links > li > a:hover,.nav-links a.nav-dd-toggle:hover,.nav-dd:hover > a{opacity:1;background:rgba(61,125,242,.14)}
.nav-links a.act,.nav-links a.act:hover{
  opacity:1;color:#fff !important;background:var(--grad-primary) !important;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}
nav .nav-dd-menu{
  top:calc(100% + .9rem) !important;min-width:200px !important;padding:.5rem !important;border-radius:20px !important;
  background:var(--nav-bg) !important;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--nav-border) !important;box-shadow:var(--nav-shadow) !important;
}
nav .nav-dd-menu a{padding:.65rem 1rem !important;border-radius:14px !important;color:var(--ivory) !important;opacity:.85}
nav .nav-dd-menu a:hover,nav .nav-dd-menu a.act{background:rgba(61,125,242,.16) !important;color:var(--blue-lt) !important;opacity:1}
html[data-theme="light"] nav .nav-dd-menu a:hover,html[data-theme="light"] nav .nav-dd-menu a.act{color:var(--blue) !important}
.nav-cta{
  background:var(--grad-primary) !important;color:#fff !important;border:0 !important;border-radius:999px !important;
  padding:.55rem 1.3rem !important;font-weight:800 !important;font-size:.85rem !important;
  box-shadow:0 8px 22px rgba(37,99,235,.38);transition:transform .2s,filter .2s;
}
.nav-cta:hover{transform:translateY(-2px);filter:brightness(1.1)}
.theme-toggle{
  width:40px !important;height:40px !important;border-radius:50% !important;
  background:rgba(61,125,242,.12) !important;border:1px solid var(--nav-border) !important;color:var(--ivory) !important;
}
.theme-toggle:hover{background:rgba(61,125,242,.24) !important}
.nav-hamburger{border-radius:50% !important;width:40px !important;height:40px !important;border-color:var(--nav-border) !important;background:rgba(61,125,242,.12) !important}
.nav-hamburger span{background:var(--ivory) !important}
.nav-login-btn,.nav-user-pill{
  border-radius:999px !important;background:rgba(61,125,242,.12) !important;border:1px solid var(--nav-border) !important;
  color:var(--ivory) !important;font-weight:700;
}
.nav-login-btn:hover,.nav-user-pill:hover{background:rgba(61,125,242,.24) !important}
.nav-dropdown{border-radius:20px !important;background:var(--nav-bg) !important;border:1px solid var(--nav-border) !important;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:var(--nav-shadow) !important}
.nd-item{border-radius:12px !important}
.nd-item:hover{background:rgba(61,125,242,.14) !important}

/* mobile drawer */
.nav-drawer-panel{background:var(--card) !important;border:1px solid var(--border);border-radius:28px 0 0 28px;box-shadow:var(--shadow)}
.nav-drawer-links a{border-radius:14px !important;color:var(--ivory) !important;opacity:.85}
.nav-drawer-links a:hover,.nav-drawer-links a.act{background:rgba(61,125,242,.15) !important;color:var(--blue-lt) !important;opacity:1}
html[data-theme="light"] .nav-drawer-links a:hover,html[data-theme="light"] .nav-drawer-links a.act{color:var(--blue) !important}
.nav-drawer-cta{background:var(--grad-primary) !important;color:#fff !important;border:0 !important;border-radius:999px !important}
.nd-group>span{color:var(--blue-lt) !important}
@media (max-width:900px){
  nav:not(.sb-nav){border-radius:26px !important;padding:.45rem .7rem !important;top:10px !important;width:calc(100% - 20px) !important}
}

/* ── 4. Typography + section headings ─────────────────────────────────────── */
.nh-head{margin-bottom:2.6rem}
.nh-head::after{display:none !important}
.nh-head .k{
  display:inline-block;padding:.28rem .95rem;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  background:rgba(61,125,242,.13);color:var(--blue-lt) !important;border:1px solid rgba(61,125,242,.25);
}
html[data-theme="light"] .nh-head .k{color:var(--blue) !important}
.nh-head h2{
  font-family:'Cairo',sans-serif !important;font-weight:900 !important;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4vw,2.5rem) !important;margin:.7rem 0 0 !important;color:var(--ivory) !important;
}
.nh-head h2 span{
  background:linear-gradient(90deg,var(--blue-lt),var(--gold));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent !important;
}
.nh-sec{padding:5rem 1.5rem}
.nh-sec[style*="surface"]{background:var(--band) !important}

/* ── 5. Cards, tiles, chips, buttons ──────────────────────────────────────── */
.nh-quick{gap:1.1rem}
.nh-q{
  border:1px solid var(--border) !important;border-top:1px solid var(--border) !important;border-radius:24px !important;
  background:var(--card) !important;padding:1.4rem !important;box-shadow:var(--shadow) !important;
  display:flex;flex-direction:column;gap:.15rem;
  transition:transform .25s,box-shadow .25s,border-color .25s !important;
}
.nh-q:hover{transform:translateY(-6px) !important;border-color:var(--blue-lt) !important}
.nh-q span.i{
  display:grid !important;place-items:center;width:54px;height:54px;border-radius:18px;margin-bottom:.5rem;
  background:var(--grad-primary);font-size:1.5rem !important;box-shadow:0 10px 24px rgba(37,99,235,.35);
}
.nh-q b{font-size:1.05rem !important;color:var(--ivory)}
.nh-q small{color:var(--muted) !important}

.nh-card,.nh-author{
  border-radius:24px !important;background:var(--card) !important;border:1px solid var(--border) !important;
  box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s !important;
}
.nh-card:hover,.nh-author:hover{transform:translateY(-6px) !important;border-color:var(--blue-lt) !important}
.nh-card h3{font-family:'Cairo',sans-serif !important;font-weight:800;font-size:1.12rem !important;line-height:1.7}
.nh-card .tag{background:rgba(61,125,242,.14) !important;color:var(--blue-lt) !important}
html[data-theme="light"] .nh-card .tag{color:var(--blue) !important}
.nh-card .by{border-top:1px dashed var(--border) !important}
.nh-card .cv{border-radius:18px !important}
.ev-date{border:0 !important;border-radius:18px !important;background:var(--grad-primary) !important;box-shadow:0 10px 22px rgba(37,99,235,.32)}
.ev-date span{color:#dbe8ff !important}
.nh-av{
  border:3px solid transparent !important;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--blue),var(--gold)) border-box !important;
}
.nh-empty{color:var(--muted)}

.nh-btn{border-radius:999px !important}
.nh-sec .nh-btn.gold,.pg-top ~ * .nh-btn.gold{background:var(--grad-primary) !important;color:#fff !important;box-shadow:0 10px 26px rgba(37,99,235,.35)}
.nh-hero .nh-btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-lt)) !important;color:#0a1226 !important}

.chip{border-radius:999px !important;background:var(--card) !important;border:1px solid var(--border) !important;color:var(--muted) !important;font-weight:700}
.chip:hover{color:var(--blue-lt) !important;border-color:var(--blue-lt) !important;background:rgba(61,125,242,.10) !important}
.chip.on{background:var(--grad-primary) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 8px 20px rgba(37,99,235,.3)}
.pager button{border-radius:12px !important;background:var(--card) !important;border:1px solid var(--border) !important;color:var(--ivory) !important}
.pager button.on{background:var(--grad-primary) !important;color:#fff !important;border-color:transparent !important}
.bar input{border-radius:999px !important;background:var(--card) !important;border:1px solid var(--border) !important;color:var(--ivory) !important;padding:.95rem 1.4rem !important;box-shadow:var(--shadow)}
.bar input:focus{outline:2px solid var(--blue-lt);outline-offset:2px}

/* ── 6. Banded blocks that stay dark in both themes (use on-dark text) ────── */
.pg-top{
  color:var(--on-dark);border:0 !important;border-radius:0 0 48px 48px;
  background:radial-gradient(700px 320px at 85% -10%,rgba(91,141,239,.42),transparent 65%),
             radial-gradient(500px 260px at 5% 120%,rgba(216,180,94,.18),transparent 70%),
             linear-gradient(160deg,#0a1226,#143a82) !important;
}
.pg-top h1{font-family:'Amiri',serif}
.pg-top p{color:rgba(242,246,255,.82)}
.nh-hero{color:var(--on-dark)}
.nh-verse-band{
  position:relative;overflow:hidden;color:var(--on-dark);
  width:calc(100% - 3rem);max-width:1150px;margin:1rem auto !important;border:0 !important;border-radius:36px;
  background:radial-gradient(500px 240px at 90% 0,rgba(216,180,94,.22),transparent 65%),linear-gradient(160deg,#0a1226,#143a82) !important;
  box-shadow:var(--shadow);
}
.nh-verse-band span{color:var(--gold-lt) !important}

/* ── 7. Detail pages ──────────────────────────────────────────────────────── */
.art h1{font-family:'Cairo',sans-serif !important;font-weight:900}
.art .cover{border-radius:28px !important;border:0 !important;box-shadow:var(--shadow)}
.art .ref{border-inline-start:0 !important;padding:1rem 1.3rem;border-radius:18px;background:var(--band);color:var(--gold) !important}
.facts{border-radius:20px !important;border:1px solid var(--border) !important;border-inline-start:1px solid var(--border) !important;
  background:var(--card) !important;box-shadow:var(--shadow)}
.auth-hero h1{font-family:'Cairo',sans-serif !important;font-weight:900}
.rx{border-top:1px dashed var(--border) !important}

/* ── 8. Footer (gradient, rounded top) ────────────────────────────────────── */
footer{
  margin-top:4rem;border:0 !important;border-radius:44px 44px 0 0;color:var(--on-dark);
  background:radial-gradient(600px 280px at 12% 0,rgba(91,141,239,.30),transparent 65%),linear-gradient(160deg,#0a1226,#143a82) !important;
  --ivory:#eaf1ff;--muted:#a9bde6;--border:rgba(255,255,255,.15);--gold:#e6c777;--gold-lt:#f3dfa6;
}
footer a{color:#cfdcf7 !important;transition:color .2s}
footer a:hover{color:var(--gold-lt) !important}
footer .nav-logo{-webkit-text-fill-color:transparent}

/* ── 9. Inner/admin pages: softer surfaces ────────────────────────────────── */
.card,.modal,.auth-card{border-radius:22px !important}
.card{box-shadow:var(--shadow) !important}
.sidebar{background:var(--surface) !important}
.btn-gold,.tb-btn.primary{background:var(--grad-primary) !important;color:#fff !important;border:0 !important}
.btn,.tb-btn,.row-btn{border-radius:12px !important}
input,select,textarea{border-radius:12px}

footer .footer-inner{grid-template-columns:1.5fr 1.2fr !important}
footer .footer-col ul{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.5rem;list-style:none;padding:0}
@media (max-width:700px){footer .footer-inner{grid-template-columns:1fr !important}}

/* ── 10. About page ───────────────────────────────────────────────────────── */
.page-hero{
  color:var(--on-dark);margin:0 !important;padding:8rem 1.5rem 3.5rem !important;border:0 !important;border-radius:0 0 48px 48px;
  background:radial-gradient(700px 320px at 85% -10%,rgba(91,141,239,.42),transparent 65%),
             radial-gradient(500px 260px at 5% 120%,rgba(216,180,94,.18),transparent 70%),
             linear-gradient(160deg,#0a1226,#143a82) !important;
}
.page-hero .hero-sub{color:rgba(242,246,255,.82) !important}
.verse-banner{
  color:var(--on-dark) !important;border:0 !important;border-radius:32px !important;
  background:radial-gradient(500px 240px at 90% 0,rgba(216,180,94,.2),transparent 65%),linear-gradient(160deg,#0a1226,#143a82) !important;
  box-shadow:var(--shadow);
}
.verse-banner-ref{color:var(--gold-lt) !important}
.sec-card{border-radius:26px !important;border:1px solid var(--border) !important;background:var(--card) !important;box-shadow:var(--shadow)}
.sec-title{font-family:'Cairo',sans-serif !important;font-weight:900 !important;color:var(--ivory) !important}
.sec-title span{background:linear-gradient(90deg,var(--blue-lt),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important}
.stat-box{border-radius:24px !important;background:var(--card) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow)}
.stat-box-num{background:linear-gradient(135deg,var(--blue-lt),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent !important;font-family:'Cairo',sans-serif !important;font-weight:900}
.feature-item{border-radius:16px !important}
.fi-icon{border-radius:14px !important}

/* Blocks that keep a dark gradient in BOTH themes need light text tokens */
.page-hero,.verse-banner,.pg-top,.nh-verse-band,.nh-hero{
  --ivory:#f2f6ff;--muted:#c3d2f3;--border:rgba(255,255,255,.18);--gold:#e6c777;--gold-lt:#f3dfa6;
}
.page-hero .hero-title,.verse-banner-text{color:var(--on-dark) !important}
.page-hero .hero-title span,.verse-banner-text span{color:var(--gold-lt) !important;-webkit-text-fill-color:currentColor}
.verse-banner-text-en{color:rgba(242,246,255,.7) !important}
.hero-eyebrow{color:var(--gold-lt) !important}

.art .nh-btn.gold{background:var(--grad-primary) !important;color:#fff !important;box-shadow:0 10px 26px rgba(37,99,235,.35)}

/* ── 11. Dynamic footer (social badges + related links) ───────────────────── */
.ft-social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.ft-badge{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  color:#fff !important;font-weight:900;font-size:1.05rem;line-height:1;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 20px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s;
}
.ft-badge:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.ft-badge span{pointer-events:none}
.ft-related ul{display:grid;gap:.45rem;list-style:none;padding:0;grid-template-columns:1fr !important}
.ft-related a{display:inline-flex;align-items:center;gap:.5rem}
.ft-ic{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;border-radius:9px;background:rgba(255,255,255,.12);font-size:.95rem}
footer.has-related .footer-inner{grid-template-columns:1.4fr 1.1fr 1fr !important}
@media (max-width:900px){footer.has-related .footer-inner{grid-template-columns:1fr !important}}

/* ── 12. Sermons (list, detail, home feature) ─────────────────────────────── */
.sm-filters{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:.7rem;max-width:1100px;margin:0 auto 1rem}
.sm-filters select,.sm-filters input[type=search]{padding:.85rem 1.1rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--ivory);font-family:'Cairo',sans-serif;font-size:.9rem;box-shadow:var(--shadow);min-height:44px}
.sm-row{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;color:var(--muted);font-size:.9rem}
.sm-row label{display:flex;gap:.4rem;align-items:center;cursor:pointer}
.sm-badge{display:inline-flex;gap:.3rem;align-items:center;font-size:.72rem;font-weight:800;padding:.2rem .7rem;border-radius:99px;background:rgba(216,180,94,.16);color:var(--gold)}
.sm-ref{color:var(--gold);font-family:'Amiri',serif;font-size:1.05rem}
.sm-player{width:100%;border:0;border-radius:18px;margin:1.2rem 0;min-height:166px;background:var(--card)}
.sm-text{font-family:'Amiri',serif;font-size:1.3rem;line-height:2.4;padding:1.5rem 1.7rem;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);margin:1.5rem 0;color:var(--ivory)}
.sm-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;margin:1.2rem 0}
.sm-gal img{width:100%;border-radius:16px;border:1px solid var(--border);display:block}
.sm-src{margin-top:2rem;padding:1rem 1.3rem;border-radius:18px;background:var(--band);color:var(--muted);font-size:.88rem}
.sm-src a{color:var(--blue-lt);font-weight:700}
.sm-tabs{margin-bottom:1.6rem}
.sm-intro{max-width:760px;margin:-.6rem auto 1.6rem;text-align:center;color:var(--muted);line-height:1.9}
@media(max-width:900px){.sm-filters{grid-template-columns:1fr 1fr}.sm-filters input[type=search]{grid-column:1/-1}}
/* featured "latest sermon" card on the home page */
.sm-feature{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;gap:1.5rem;align-items:center;
  max-width:1150px;margin:0 auto 1.6rem;padding:2.2rem;border-radius:32px;color:var(--on-dark);
  background:radial-gradient(520px 260px at 92% 0,rgba(216,180,94,.22),transparent 65%),linear-gradient(160deg,#0a1226,#143a82);
  box-shadow:var(--shadow);--ivory:#f2f6ff;--muted:#c3d2f3;--gold:#e6c777;
}
.sm-feature .lab{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.12em;padding:.28rem .9rem;border-radius:99px;background:rgba(255,255,255,.12);color:var(--gold-lt);margin-bottom:.9rem}
.sm-feature h3{font-family:'Cairo',sans-serif;font-weight:900;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.5;margin:0 0 .6rem}
.sm-feature .ref{font-family:'Amiri',serif;font-size:1.2rem;color:var(--gold-lt);margin-bottom:.6rem}
.sm-feature p{color:rgba(242,246,255,.82);line-height:2;margin:0 0 1.1rem}
.sm-feature .meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:rgba(242,246,255,.7);margin-bottom:1.2rem}
.sm-feature .act{display:flex;gap:.7rem;flex-wrap:wrap}
.sm-feature .play{display:grid;place-items:center;width:170px;height:170px;margin-inline:auto;border-radius:50%;line-height:1;padding-inline-start:.35rem;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.25);font-size:4rem;text-decoration:none;color:#fff;transition:transform .25s}
.sm-feature .play:hover{transform:scale(1.06)}
@media(max-width:800px){.sm-feature{grid-template-columns:1fr;padding:1.6rem}.sm-feature .play{width:96px;height:96px;font-size:2.4rem;order:-1}}