/* ===================================================================
   Site-wide chrome overrides.
   Loaded on every page AFTER its inline <style>, so these rules win.
   Centralises fixes that must be consistent across all page types
   (root pages, Quran reader, Salat steps, Learn pages).
   =================================================================== */

/* --- Nav: keep the primary links in a fixed, centred position so they
   never shift between pages regardless of which right-side controls
   (search, theme toggle, hamburger) a given page has. The parent nav is
   position:fixed on every page, so it is the positioning context. --- */
@media (min-width: 769px) {
  .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  /* With the links taken out of flow, pin the right-side controls to the
     right edge (some pages relied on .nav-links margin-left:auto for this). */
  .search-wrap { margin-left: auto; }
  /* Consistent nav-bar height everywhere (content varies by page — search
     button on some, theme toggle on others — which otherwise changes the
     bar height). Vertically centre the contents. */
  .main-nav, body > nav:first-of-type {
    height: 70px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }
}

/* --- Theme: dark-default channel variables + the shared light theme.
   Defined here once so every page (including ones that only have the dark
   palette inline) can switch to light. Pages that already define these
   inline are unaffected (same values / same selector, loaded later). --- */
:root {
  --midnight-rgb: 10, 14, 26;
  --surface-rgb: 31, 41, 66;
  --footer-bg: #06080f;
}
html[data-theme="light"] {
  --midnight: #f7f2e9;
  --indigo: #efe7d6;
  --surface: #ffffff;
  --parchment: #211f1a;
  --linen: #46433b;
  --gold: #9c7a37;
  --gold-deep: #7c6029;
  --stone: #6f6e68;
  --midnight-rgb: 247, 242, 233;
  --surface-rgb: 255, 255, 255;
  --footer-bg: #ece2cd;
}
.theme-toggle {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--gold); display: flex; align-items: center;
  opacity: 0.8; transition: opacity 0.2s;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* --- Spacing: tighten oversized vertical rhythm. Content sections used
   5-6rem top+bottom, so stacked sections left 160-192px gaps of wasted
   space. Reduce to 3.5rem (≈112px between sections). The .page-header /
   hero keep their larger top padding (they clear the fixed nav). --- */
.about, .new-here, .pillars-section, .intro, .ref-section, .prayer-selector,
.step-section, .category-section, .names-section, .glossary-section,
.sources-section, .section-block, .qibla-section, .tasbih-section,
.pathway, .note-section, .completion {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

/* The footer already has its own top padding, so its margin-top just added
   an extra empty band above the footer on every page. */
footer { margin-top: 0; }

/* Logo crescent: the cut-out disc is now an SVG mask in the markup, so the
   real background shows through it on any surface (hero gradient, translucent
   nav, footer) in both themes. No colour override needed here. */

/* Reader pages put a bare .theme-toggle directly in the nav (no .search-wrap),
   so justify-content:space-between floated it to the centre once .nav-links is
   hidden on small screens. Push it (and the hamburger beside it) to the right,
   matching every other page type. */
nav > .theme-toggle { margin-left: auto; }

/* .search-wrap is only position:relative, but its children (theme toggle +
   search button) are display:flex and therefore block-level, so they stacked
   vertically in the nav. Lay them out side by side. */
.search-wrap { display: flex; align-items: center; gap: 0.4rem; }

/* Mobile/tablet: keep the logo on the left and group the search + theme
   controls (and the hamburger that follows them) tightly on the right edge.
   Some pages' base `.search-wrap { margin-left: 1.5rem }` was defined after
   their own media-query override, so the controls bunched up after the logo
   and floated mid-bar. This file loads last, so it wins. */
@media (max-width: 800px) {
  .search-wrap { margin-left: auto; }
}

/* Reader pages style every <nav> with `position: fixed`, which wrongly pinned
   the in-content related-links nav to the top, overlapping the main menu.
   Only the top nav (first one) should be fixed. */
body > nav:not(:first-of-type):not(.surah-nav) { position: static; }

/* The bottom (mirrored) prev/next surah nav sat flush against the footer —
   give it breathing room below. */
.surah-nav-bottom { margin-bottom: 3rem; }

/* Back-to-top button (shared) — used by pages that don't already define one;
   reader.js injects the button on Quran pages. */
.scroll-top-btn {
  position: fixed; bottom: 1.75rem; right: 1.75rem; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(var(--midnight-rgb), 0.92);
  border: 0.5px solid var(--gold); color: var(--gold); cursor: pointer;
  z-index: 120; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0;
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--gold); color: var(--midnight); }
.scroll-top-btn svg { width: 20px; height: 20px; }