/* Shared theme and related-noha styles */
:root { color-scheme: light; }
body.dark-mode {
  color-scheme: dark;
  --paper:#06150f;
  --ink:#fdda86;
  --muted:#dbc681;
  --line:rgba(253,218,134,.22);
  --white:#10221a;
  --green:#0d382c;
  --deep:#020b07;
}
body.dark-mode, body.dark-mode main { background:#06150f; color:#fdda86; }
body.dark-mode header, body.dark-mode .nav-links { background:#06150f; border-color:var(--line); }
body.dark-mode .hero { background:#0b2b21; color:#fdda86; }
body.dark-mode .hero h1, body.dark-mode .hero p, body.dark-mode .hero .eyebrow,
body.dark-mode .hero-aside, body.dark-mode .page-hero, body.dark-mode .page-hero h1,
body.dark-mode .page-hero p { color:#fdda86; }
body.dark-mode footer { background:#020b07; color:#fdda86; }
body.dark-mode .library, body.dark-mode .intro, body.dark-mode .offerings,
body.dark-mode .calendar-section { background:#06150f; color:#fdda86; }
body.dark-mode .featured-noha, body.dark-mode .entry, body.dark-mode .toolbar,
body.dark-mode .empty, body.dark-mode .media-panel, body.dark-mode .credit,
body.dark-mode .similar-card, body.dark-mode .calendar-card, body.dark-mode .calendar-grid,
body.dark-mode .library-panel, body.dark-mode .selected-event, body.dark-mode .month-nav,
body.dark-mode .days-grid, body.dark-mode .today-card, body.dark-mode .today-controls select,
body.dark-mode .day-cell, body.dark-mode .card { background:#10231a; color:#fdda86; border-color:var(--line); }
body.dark-mode .tag-chip { background:#193126; color:#fdda86; border-color:var(--line); }
body.dark-mode .tag-chip.type-tag, body.dark-mode .status-tag, body.dark-mode .event-chip {
  background:#29351f; color:#fdda86;
}
body.dark-mode .lyric-text p, body.dark-mode .lyric-text .refrain,
body.dark-mode .featured-noha h2, body.dark-mode .entry h3, body.dark-mode .section-head h2,
body.dark-mode .library-copy h2, body.dark-mode .card h3, body.dark-mode .similar-nohas h2,
body.dark-mode .brand-copy strong, body.dark-mode .nav-links, body.dark-mode .nav-links a,
body.dark-mode .header-hijri-date, body.dark-mode .selected-date, body.dark-mode .selected-copy h4,
body.dark-mode .language-button, body.dark-mode .theme-toggle { color:#fdda86; }
body.dark-mode .featured-intro, body.dark-mode .audio-note, body.dark-mode .detail-bottom,
body.dark-mode .entry p, body.dark-mode .card p, body.dark-mode .intro-copy,
body.dark-mode .selected-copy p, body.dark-mode .gregorian-number, body.dark-mode .weekday,
body.dark-mode .count, body.dark-mode .footer-nav, body.dark-mode .footer-bottom { color:#dbc681; }
body.dark-mode .filter { color:#fdda86; border-color:var(--line); }
body.dark-mode .filter:hover, body.dark-mode .filter[aria-pressed="true"],
body.dark-mode .day-cell:hover, body.dark-mode .day-cell.selected { background:#263a2b; border-color:#d4b860; color:#fdda86; }
body.dark-mode .language-button[aria-pressed="true"] { color:#fdda86; border-color:#fdda86; }
body.dark-mode .searchbox input, body.dark-mode .today-controls select { color:#fdda86; }
body.dark-mode .searchbox input::placeholder { color:#dbc681; }
body.dark-mode .selected-date.sorrow { color:#fdda86; }
body.dark-mode .theme-toggle { border-color:rgba(253,218,134,.42); }
body.dark-mode .theme-toggle:hover { background:#10231a; }
body.dark-mode .selected-event a, body.dark-mode .youtube-link,
body.dark-mode .download-audio, body.dark-mode .selected-copy a { color:#fdda86; }
.lyric-text p { font-weight:700 !important; }
.similar-nohas { margin:34px 0 12px; padding:24px 0 0; border-top:1px solid var(--line); }
.similar-nohas h2 { margin:0 0 15px; color:var(--green); font-size:20px; }
.similar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.similar-card { display:block; min-height:100px; padding:15px; border:1px solid var(--line); background:#fff; transition:transform .2s,border-color .2s; }
.similar-card:hover { transform:translateY(-2px); border-color:var(--gold); }
.similar-card strong { display:block; color:var(--green); font-size:13px; line-height:1.5; }
.similar-card span { display:inline-block; margin-top:8px; color:var(--muted); font-size:10px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; margin-left:14px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--green); font:600 18px/1 'Poppins',sans-serif; cursor:pointer; }
.theme-toggle:hover { border-color:var(--gold); }
.theme-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media(max-width:900px) and (min-width:681px) {
  .nav { gap:12px; }
  .theme-toggle { width:36px; height:36px; flex-basis:36px; margin-left:8px; }
  .nav-links { gap:18px; }
}
@media(max-width:680px) {
  .similar-grid { grid-template-columns:1fr; }
  .similar-nohas { margin-top:27px; }
  .theme-toggle { position:absolute; top:18px; right:63px; width:36px; height:36px; margin:0; }
}
body.dark-mode .eyebrow, body.dark-mode .credit strong, body.dark-mode .media-panel h3,
body.dark-mode .tag-chip, body.dark-mode .similar-card strong, body.dark-mode .similar-nohas h2,
body.dark-mode .language-button[aria-pressed="true"] { color:#fdda86; }
body.dark-mode .detail-back, body.dark-mode .youtube-link, body.dark-mode .download-audio,
body.dark-mode .selected-copy a { color:#fdda86; }
body.dark-mode .credit { color:#dbc681; }

/* Lyric pages use a single-column hero after the decorative illustration is removed. */
.lyrics-page .hero-inner { grid-template-columns:1fr; }
.lyrics-page .hero { min-height:0; }
/* Related nohas use their matching YouTube thumbnails as featured images. */
.similar-nohas { margin:42px 0 12px; padding:28px 0 0; border-top:1px solid var(--line); }
.similar-nohas h2 { margin:0 0 20px; color:var(--green); font:700 clamp(24px,3vw,32px)/1.2 'Poppins',sans-serif; }
.similar-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.similar-card { display:block; min-width:0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; }
.similar-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 10px 25px rgba(13,57,52,.12); }
.similar-thumb { display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:#102c24; }
.similar-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.similar-card:hover .similar-thumb img { transform:scale(1.035); }
.similar-card-body { display:block; padding:12px 14px 16px; }
.similar-tag { display:inline-flex; margin:0 0 8px; padding:4px 7px; border:1px solid var(--line); border-radius:5px; background:#f5f1e6; color:#6f6655; font-size:10px; line-height:1.2; }
.similar-card strong { display:block; color:var(--green); font-size:16px; font-weight:700; line-height:1.4; }
body.dark-mode .similar-card { background:#10231a; color:#fdda86; border-color:var(--line); }
body.dark-mode .similar-tag { background:#26351f; color:#fdda86; border-color:var(--line); }
body.dark-mode .similar-card strong, body.dark-mode .similar-nohas h2 { color:#fdda86; }
@media(max-width:900px) and (min-width:681px) { .similar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media(max-width:680px) { .similar-grid { grid-template-columns:1fr; gap:14px; } .similar-nohas { margin-top:32px; padding-top:22px; } }

/* Dark-mode green accents use the light brand green for readable contrast. */
body.dark-mode .eyebrow,
body.dark-mode .brand-copy strong,
body.dark-mode .nav-links,
body.dark-mode .nav-links a,
body.dark-mode .menu-btn,
body.dark-mode .theme-toggle,
body.dark-mode .header-hijri-date,
body.dark-mode .intro h2,
body.dark-mode .section-head h2,
body.dark-mode .library-copy h2,
body.dark-mode .shrine-streams-head h2,
body.dark-mode .card-icon,
body.dark-mode .card h3,
body.dark-mode .card-arrow,
body.dark-mode .inline-link,
body.dark-mode .spark,
body.dark-mode .path-copy h2,
body.dark-mode .step strong,
body.dark-mode .instagram-head h2,
body.dark-mode .ig-follow svg,
body.dark-mode .ig-fallback a { color:#cdffb8; }
body.dark-mode .brand-mark { background-image:url('/logo-gold-transparent.webp')!important; }
body.dark-mode .theme-toggle { border-color:rgba(205,255,184,.42); }

/* Give the Instagram area the same dark surface as the rest of dark mode. */
body.dark-mode #instagram { background:#06150f; color:#fdda86; }
body.dark-mode #instagram .instagram-copy p { color:#dbc681; }
body.dark-mode #instagram .ig-card { background:#10231a; border-color:var(--line); }
body.dark-mode #instagram .ig-card blockquote.instagram-media { background:#10231a!important; }
body.dark-mode #instagram .ig-control { border-color:rgba(205,255,184,.42); color:#cdffb8; }
body.dark-mode #instagram .ig-control:hover { background:#193126; color:#cdffb8; }
body.dark-mode #instagram .ig-fallback { color:#dbc681; }

/* Keep the theme and menu controls side by side on narrow screens. */
@media(max-width:700px) {
  .theme-toggle { position:static; width:36px; height:36px; flex:0 0 36px; margin:0 8px 0 0; }
}
@media(max-width:420px) {
  .header-hijri-date { display:none; }
}

/* Homepage sections added for daily remembrance and recent nohas. */
body.dark-mode .today-history { background:#06150f; }
body.dark-mode .today-panel, body.dark-mode .recent-card { background:#10231a; color:#fdda86; border-color:var(--line); }
body.dark-mode .today-date,
body.dark-mode .today-copy h2,
body.dark-mode .recent-head h2,
body.dark-mode .recent-card strong { color:#cdffb8; }
body.dark-mode .today-copy p,
body.dark-mode .recent-head p,
body.dark-mode .recent-reciter { color:#dbc681; }
body.dark-mode .today-note a,
body.dark-mode .recent-tag { color:#cdffb8; }
body.dark-mode .recent-control { border-color:rgba(205,255,184,.42); color:#cdffb8; }
body.dark-mode .recent-control:hover { background:#193126; color:#cdffb8; }


/* Latest dark-mode refinements: alternate near-black and deep-green surfaces. */
body.dark-mode header .brand-copy strong,
body.dark-mode header .brand-copy small,
body.dark-mode header .header-hijri-date,
body.dark-mode header .nav-links,
body.dark-mode header .nav-links a,
body.dark-mode header .theme-toggle,
body.dark-mode header .menu-btn { color:#fdda86; }
body.dark-mode header .theme-toggle { border-color:rgba(253,218,134,.42); }
body.dark-mode .library-heading h2,
body.dark-mode .entry-link,
body.dark-mode .entry-link span { color:#cdffb8; }
body.dark-mode #today-in-history,
body.dark-mode #instagram,
body.dark-mode #recent-nohas { background:#06150f; }
body.dark-mode #home .quote-day,
body.dark-mode #live-shrines { background:#020b07; }
body.dark-mode #today-in-history .today-panel,
body.dark-mode #instagram .ig-card,
body.dark-mode #recent-nohas .recent-card,
body.dark-mode #live-shrines .shrine-card { background:#10231a; }
body.dark-mode #quoteTitle { color:#cdffb8; }
body.dark-mode #live-shrines .shrine-card-title h3,
body.dark-mode #live-shrines .shrine-watch,
body.dark-mode #live-shrines .shrine-streams-head h2 { color:#cdffb8; }
body.dark-mode #live-shrines .shrine-card-title span,
body.dark-mode #live-shrines .shrine-streams-head p { color:#dbc681; }
body.dark-mode .lyrics-page .hero { background:#0b2b21; }
body.dark-mode .lyrics-page .library { background:#06150f; }
body.dark-mode .language-button { color:#fdda86; }
body.dark-mode .language-button[aria-pressed="true"] { color:#cdffb8; border-color:#cdffb8; }
body.dark-mode .entry-link { color:#cdffb8; }

.audio-seek-status{min-height:1em;margin:8px 0 0;color:var(--muted);font-size:9px;line-height:1.5}

.lyrics-search{display:flex;align-items:center;gap:16px;margin:18px 0 24px;padding:14px 16px;background:var(--white, #fffaf0);border:1px solid var(--line);border-left:3px solid var(--gold)}
.lyrics-search-label{flex:0 0 auto;color:var(--green);font-size:10px;font-weight:600}
.lyrics-search-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.lyrics-search-field svg{width:18px;height:18px;flex:0 0 auto;color:var(--green)}
.lyrics-search-field input{flex:1;min-width:0;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink);padding:10px 12px;font-size:11px}
.lyrics-search-field input::placeholder{color:var(--muted)}
.lyrics-search-field button{flex:0 0 auto;border:0;border-radius:3px;background:var(--green);color:#fff0c7;padding:10px 15px;font-size:10px;font-weight:600;cursor:pointer}
.lyrics-search-field button:hover{background:var(--deep)}
.lyrics-search-field button:focus-visible,.lyrics-search-field input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
body.dark-mode .lyrics-search{background:#10231a;border-color:var(--line)}
body.dark-mode .lyrics-search-label,body.dark-mode .lyrics-search-field svg{color:#cdffb8}
body.dark-mode .lyrics-search-field input{background:#06150f;color:#fdda86;border-color:var(--line)}
body.dark-mode .lyrics-search-field button{background:#cdffb8;color:#06150f}
@media(max-width:680px){.lyrics-search{align-items:stretch;flex-direction:column;gap:8px;padding:13px}.lyrics-search-field{gap:7px}.lyrics-search-field button{padding:10px 11px}}

.entry-thumb-placeholder,.recent-thumb-placeholder{display:grid;place-items:center;background:#0d3934;color:#cdffb8;font-family:Anton,sans-serif;font-size:clamp(20px,3vw,34px);letter-spacing:.02em;text-align:center}.entry-thumb-placeholder span,.recent-thumb-placeholder span{padding:12px}

.tag-thumb-placeholder{display:grid;width:100%;height:100%;place-items:center;color:#cdffb8;background:#0d3934;font:26px Anton,sans-serif}