/* Noor-e-Hidayah — site-wide image background (every page, light + dark).
   One fixed layer behind the whole page; content stays on top and readable. */
:root{
  --nbg-img:url(noor-bg.webp);
  --nbg-pos:62% 40%;
  /* dark mode: image clearly visible, softly dimmed so text stays crisp */
  --nbg-dark-top:rgba(4,14,12,.50);
  --nbg-dark-mid:rgba(4,14,12,.66);
  --nbg-dark-bot:rgba(4,14,12,.84);
  /* light mode: ivory wash over the image -> gentle emerald/gold glow on cream */
  --nbg-light-top:rgba(250,246,234,.80);
  --nbg-light-mid:rgba(248,243,229,.88);
  --nbg-light-bot:rgba(246,240,224,.93);
}
html{background-color:#f7f2e6}
html[data-theme="dark"]{background-color:#050f0d}

/* the page body must be see-through so the fixed layer shows */
html:not(#nbg) body{background:transparent!important;background-image:none!important}

/* fixed image layer */
html::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,var(--nbg-light-top) 0,var(--nbg-light-mid) 45%,var(--nbg-light-bot) 100%),
    var(--nbg-img) var(--nbg-pos)/cover no-repeat;
  background-color:#f7f2e6;
}
html[data-theme="dark"]::before{
  background:
    linear-gradient(180deg,var(--nbg-dark-top) 0,var(--nbg-dark-mid) 45%,var(--nbg-dark-bot) 100%),
    var(--nbg-img) var(--nbg-pos)/cover no-repeat;
  background-color:#050f0d;
}

/* soft gold glow + vignette for depth */
html::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 78%,rgba(216,188,120,.13),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(3,29,24,.10) 100%);
}
html[data-theme="dark"]::after{
  background:
    radial-gradient(ellipse 60% 45% at 18% 78%,rgba(216,188,120,.14),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 50%,rgba(0,0,0,.45) 100%);
}

/* phones: portrait crop (arch + Qur'an centred), lighter file, no fixed-attachment jank */
@media (max-width:760px){
  :root{--nbg-img:url(noor-bg-m.webp);--nbg-pos:50% 30%}
  html::before{background-size:auto,cover}
  html[data-theme="dark"]::before{background-size:auto,cover}
}

/* sections that were painting their own flat page-colour: let the image through,
   keep real cards / panels (they have their own colour) untouched */
html:not(#nbg) .daily-section,
html:not(#nbg) .hadith-section,
html:not(#nbg) .final-cta,
html:not(#nbg) main,
html:not(#nbg) .page,
html:not(#nbg) .wrap,
html:not(#nbg) .container{background-color:transparent!important;background-image:none!important}

/* readability helper: frosted panel behind long page headings/text blocks on plain sections */
html:not(#nbg) .section-heading{
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

@media print{html::before,html::after{display:none}html,html:not(#nbg) body{background:#fff!important}}
@media (prefers-reduced-data:reduce){:root{--nbg-img:none}}

/* home hero: its own (missing) hero.jpg / flat gradient is replaced by the shared background */
html:not(#nbg) .hero,
html:not(#nbg) .hero-bg{background:transparent!important;background-image:none!important;filter:none!important}
html:not(#nbg) .hero-overlay{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(4,14,12,.0),rgba(4,14,12,.28))!important}
html:not([data-theme="dark"]):not(#nbg) .hero-overlay{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(250,246,234,.35),rgba(250,246,234,0))!important}

/* full-width bands that painted a flat colour: make them translucent so the image shows through */
html:not(#nbg) .quick-start-section,
html:not(#nbg) .feature-section{background-color:transparent!important;background-image:linear-gradient(180deg,rgba(250,246,234,.50),rgba(246,240,224,.62))!important}
html[data-theme="dark"]:not(#nbg) .quick-start-section,
html[data-theme="dark"]:not(#nbg) .feature-section{background-image:linear-gradient(180deg,rgba(5,15,13,.38),rgba(5,15,13,.58))!important}

/* other full-width bands (calendar, duas, quran search, learn path …) */
html:not(#nbg) .learning-path,
html:not(#nbg) .today-section,
html:not(#nbg) .months-section,
html:not(#nbg) .events-section,
html:not(#nbg) .dua-category-section,
html:not(#nbg) .quran-search-section,
html:not(#nbg) .how-section{background-color:transparent!important;background-image:linear-gradient(180deg,rgba(250,246,234,.52),rgba(246,240,224,.64))!important}
html[data-theme="dark"]:not(#nbg) .learning-path,
html[data-theme="dark"]:not(#nbg) .today-section,
html[data-theme="dark"]:not(#nbg) .months-section,
html[data-theme="dark"]:not(#nbg) .events-section,
html[data-theme="dark"]:not(#nbg) .dua-category-section,
html[data-theme="dark"]:not(#nbg) .quran-search-section,
html[data-theme="dark"]:not(#nbg) .how-section{background-image:linear-gradient(180deg,rgba(5,15,13,.40),rgba(5,15,13,.60))!important}