/* ==========================================================================
   Masjid al Noor Media — main-site theme (Oct 2026)
   Loaded AFTER each page's own <style>. Keeps every layout rule and only
   re-skins colours, fonts and surfaces to match lancasterisoc.org and the
   events / calendar / announcements pages (blue & gold, DM Sans + Playfair).
   Used by: index.php (archive home) and every page built by media_page_shell()
   (talk, series and speaker pages). Remove the <link> to go back to dark.
   ========================================================================== */
:root{
  --nb-blue:#0f6288; --nb-blue-dark:#0b4765; --nb-blue-light:#1f86b3; --nb-tint:#eaf6fb;
  --nb-gold:#c8a85b; --nb-gold-soft:#f6efdc; --nb-gold-ink:#6b5520;
  --nb-ink:#18252d; --nb-muted:#5f707b; --nb-paper:#f8fcfe; --nb-line:#dfeaf0;
  --nb-shadow:0 18px 50px rgba(15,98,136,.10);

  /* remap both pages' dark-theme variables */
  --bg:var(--nb-paper); --panel:#fff; --panel-2:#fff; --card:#fff;
  --line:var(--nb-line); --txt:var(--nb-ink); --text:var(--nb-ink); --muted:var(--nb-muted);
  --accent:var(--nb-blue); --accent2:var(--nb-blue); --accent-2:var(--nb-blue);
  --shadow:var(--nb-shadow);
}
html body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--nb-ink);
  background:linear-gradient(180deg,var(--nb-tint) 0,var(--nb-paper) 460px);
}
h1,h2,h3{ color:var(--nb-ink); }
a{ color:inherit; }

/* ---------- shared: top bar / brand ---------- */
.topbar{
  background:rgba(248,252,254,.95); border-color:var(--nb-line); box-shadow:none;
  backdrop-filter:blur(10px);
}
.brand img{ background:#fff; border-color:var(--nb-line); }
.brand h1{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-blue); }
.brand .sub,.sub{ color:var(--nb-muted); }
.btn,.nav a{ background:#fff; border-color:var(--nb-line); color:var(--nb-blue); font-weight:700; }
.btn:hover,.nav a:hover{ background:var(--nb-tint); border-color:var(--nb-blue-light); }
.dot{ background:#d93025; box-shadow:0 0 0 4px rgba(217,48,37,.15); }

/* ---------- shared: chips, buttons ---------- */
.chip{ background:var(--nb-tint); border-color:var(--nb-line); color:var(--nb-blue); font-weight:700; }
.kicker .chip:first-child{ background:var(--nb-gold-soft); border-color:#eadfbf; color:var(--nb-gold-ink); }
.btnGhost,.smallBtn{ background:#fff; border-color:var(--nb-line); color:var(--nb-blue); box-shadow:none; font-weight:700; }
.btnGhost:hover,.smallBtn:hover{ background:var(--nb-tint); border-color:var(--nb-blue-light); }
.btnGhost.primary,.smallBtn.primary,.btnPrimary{ background:var(--nb-blue); border-color:var(--nb-blue); color:#fff; }
.btnGhost.primary:hover,.smallBtn.primary:hover,.btnPrimary:hover{ background:var(--nb-blue-dark); }

/* ==========================================================================
   ARCHIVE HOME (index.php)
   ========================================================================== */
.hero{ background:#fff; border-color:var(--nb-line); box-shadow:var(--nb-shadow); }
.panel{ background:var(--nb-paper); border-color:var(--nb-line); }
.panelHead{ border-color:var(--nb-line); }
.panelHead h2,.panelHead h3,.sectionTitle h2{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-blue); }
.sectionTitle .hint{ color:var(--nb-muted); }

.pillIcon{ background:#fff; border-color:var(--nb-line); color:var(--nb-ink); }
.pillIcon:hover{ background:var(--nb-tint); border-color:var(--nb-blue-light); }
.pillStatus{ background:var(--nb-paper); border-color:var(--nb-line); color:var(--nb-muted); }
.pillIcon.online{ background:#fff6f5; border-color:#f3b4ae; }
.pillIcon.online .pillStatus{ background:#d93025; border-color:#d93025; color:#fff; }
.liveAction{ background:#fff; border-color:var(--nb-line); color:var(--nb-blue); box-shadow:none; }
.liveAction:hover{ background:var(--nb-tint); border-color:var(--nb-blue-light); }
.liveAction.whatsapp{ background:#1fa855; border-color:#1fa855; color:#fff; }

.posterBox{ background:var(--nb-tint); border-color:var(--nb-line); }
.featureCard h3{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-ink); }
.featureMeta{ color:var(--nb-muted); }
.featureDesc{ color:var(--nb-ink); }

.controls{ background:#fff; border-color:var(--nb-line); box-shadow:var(--nb-shadow); }
.select,.search{ background:var(--nb-paper); border-color:var(--nb-line); color:var(--nb-ink); }
.select:focus,.search:focus{ outline:2px solid var(--nb-blue-light); outline-offset:1px; }
.filter-btn{ background:#fff; border-color:var(--nb-line); color:var(--nb-blue); font-weight:700; }
.filter-btn.active{ background:var(--nb-blue); border-color:var(--nb-blue); color:#fff; }

.seriesCard{ background:#fff; border-color:var(--nb-line); box-shadow:var(--nb-shadow); }
.seriesToggle{ color:var(--nb-ink); }
.seriesToggle:hover{ background:var(--nb-paper); }
.seriesTitle{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-blue); }
.seriesThumb,.seriesItemThumb,.thumb{ background:var(--nb-tint); border-color:var(--nb-line); }
.seriesBadge{ background:var(--nb-gold-soft); border-color:#eadfbf; color:var(--nb-gold-ink); }
.seriesSub,.seriesItemMeta{ color:var(--nb-muted); }
.seriesChevron{ background:#fff; border-color:var(--nb-line); color:var(--nb-blue); }
.seriesPanel{ border-color:var(--nb-line); }
.seriesItemRow,.mediaRow{ background:var(--nb-paper); border-color:var(--nb-line); }
.seriesItemRow:hover,.mediaRow:hover{ background:#fff; border-color:var(--nb-blue-light); box-shadow:0 6px 18px rgba(15,98,136,.08); }
.seriesItemTitle,.mediaTitle{ color:var(--nb-ink); }
.seriesItemDesc,.mediaDesc{ color:var(--nb-muted); }
.seriesHead{ background:#fff; border-color:var(--nb-line); }
.mediaSpeaker,.mediaDate,.mediaSeries{ color:var(--nb-muted); }
.mediaSeries{ color:var(--nb-gold-ink); }
.empty{ color:var(--nb-muted); }

/* modal player */
.modal{ background:rgba(11,71,101,.45); backdrop-filter:blur(3px); }
.modalCard{ background:#fff; border-color:var(--nb-line); }
.modalHead{ border-color:var(--nb-line); }
.modalTitle{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-blue); }
.modalClose{ background:var(--nb-tint); color:var(--nb-blue); }
.modalMeta{ color:var(--nb-muted); }
.modalDesc{ color:var(--nb-ink); }
.modalSnippet{ background:var(--nb-paper); border-color:var(--nb-line); color:var(--nb-ink); }
.modalSnippet strong,.audioLabel{ color:var(--nb-muted); }
.playerWrap.is-audio,.audioPanel{ background:var(--nb-tint); }
.audioPoster{ background:#fff; border-color:var(--nb-line); }
.note{ border-color:var(--nb-line); color:var(--nb-muted); }

/* ==========================================================================
   TALK / SERIES / SPEAKER PAGES (media_page_shell)
   ========================================================================== */
.heroGrid .posterPane{ background:var(--nb-paper); border-color:var(--nb-line); }
.posterFrame{ background:var(--nb-tint); border-color:var(--nb-line); box-shadow:0 10px 26px rgba(15,98,136,.12); }
.contentPane .title{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-ink); }
.contentPane .meta{ color:var(--nb-muted); }
.contentPane .playerWrap{ background:var(--nb-tint); border-color:var(--nb-line); }
.emptyPlayer{ color:var(--nb-muted); }
.copy{ background:#fff; border-color:var(--nb-line); }
.copy .capp,.copy .capp:first-child,.copy .caplist li{ color:var(--nb-ink); }
.copy strong{ color:var(--nb-ink); }
.copy a{ color:var(--nb-blue); }
.infoBlock,.listBlock{ background:#fff; border-color:var(--nb-line); }
.infoBlock h2,.listBlock h2{ font-family:"Playfair Display",Georgia,serif; color:var(--nb-blue); }
.infoRow{ color:var(--nb-ink); }
.infoRow strong{ color:var(--nb-muted); }
.infoRow a{ color:var(--nb-blue); }
.itemCard{ background:var(--nb-paper); border-color:var(--nb-line); }
.itemCard:hover{ border-color:var(--nb-blue-light); background:#fff; }
.itemThumb{ background:var(--nb-tint); border-color:var(--nb-line); }
.itemBody h3{ color:var(--nb-ink); }
.itemMeta{ color:var(--nb-muted); }
.itemBody p{ color:var(--nb-muted); }
.footerMeta{ border-color:var(--nb-line); color:var(--nb-muted); }
.emptyState{ color:var(--nb-muted); }
.topbar{ top:var(--noor-nav-h,0px); }   /* sit below the shared site navbar */
button.btnGhost,button.smallBtn,.filter-btn,.select,.search{ font-family:inherit; }
button.btnGhost,button.smallBtn{ font-size:inherit; font-weight:700; }