/* =========================================================
   Mizu Pool & Spa - Light/Dark theme toggle
   Base dark palette comes from the theme's own `.dark-scheme`
   body class (already ships with style.css). Everything below
   patches the custom sections/components built for this site
   that the built-in dark-scheme doesn't reach.
   ========================================================= */

/* Every built-in dark-scheme rule (and the site's permanently-dark
   sections like the footer/hero/products/projects) is painted using
   these three variables. Re-pointing them to black here — scoped to
   dark mode only — turns the whole toggle black instead of navy,
   without touching how those "always dark" sections look in light mode.
   NOTE: style.css sets these on a universal `*` selector rather than
   `:root`, which means every element gets its own direct value instead
   of inheriting one from `body` — so the override has to also be
   applied to `*` (scoped under body.dark-scheme) to actually reach
   descendants, not just to `body.dark-scheme` itself. */
body.dark-scheme,
body.dark-scheme * {
    --bg-dark-1: #0d0d0d;
    --bg-dark-1-rgb: 13, 13, 13;
    --bg-dark-2: #161616;
    --bg-dark-3: #202020;
}

/* ---------------- Toggle button ----------------
   Desktop keeps its original top-right spot; only mobile (where it was
   overlapping the hamburger button) moves it to a fixed bottom-left spot. */
.theme-toggle-btn {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 100000;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #001A4D;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.theme-toggle-btn:hover { transform: translateY(-2px); }
body.dark-scheme .theme-toggle-btn {
    background: rgba(255, 255, 255, .1);
    color: #FFC94D;
    border: 1px solid rgba(255, 255, 255, .2);
}
@media (max-width: 992px) {
    .theme-toggle-btn { top: auto; right: auto; bottom: 20px; left: 20px; }
}
@media (max-width: 480px) {
    .theme-toggle-btn { width: 34px; height: 34px; bottom: 14px; left: 14px; font-size: 13px; }
}

/* ---------------- Small dark-navy accents ----------------
   The little pill labels above every section heading ("Why Choose Us",
   "Our Services", "Mizu Advantage", "Testimonials", "Any Question?"...)
   use the light-mode heading navy (#001A4D) for their text, which is
   nearly invisible on a black background. Requested replacement accent:
   #00a7ed. */
body.dark-scheme .subtitle {
    color: #00a7ed;
    background: rgba(0, 167, 237, .12);
}
body.dark-scheme .id-color {
    color: #00a7ed !important;
}

/* ---------------- Header extras ---------------- */
/* header itself is always dark-navy (transparent over a dark hero/subheader
   video, solid navy once scrolled) so it needs no theme override. Only the
   white floating bits (mega menu, location pill) need a dark-mode variant. */
body.dark-scheme .mega-panel {
    background: #161616;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
body.dark-scheme .mega-item:hover {
    background: rgba(255, 255, 255, .08);
}
body.dark-scheme #mainmenu .mega-item span {
    color: #fff !important;
}
body.dark-scheme .location-pill {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    box-shadow: none;
}
body.dark-scheme .location-pill i {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* ---------------- Sections using a light background image ----------------
   ("Our Services", "Watch and Buy") set their background via a JS-applied
   inline style, which normally beats a class rule — so it needs !important
   here to actually switch off the light image in dark mode. */
body.dark-scheme section[data-bgimage] {
    background-color: var(--bg-dark-1) !important;
    background-image: none !important;
}

/* ---------------- Light cards (.bg-white) ----------------
   Plenty of pages (products, services, blog, testimonials, detail pages)
   put headings/text inside a permanently-white card. The theme's global
   ".dark-scheme h1..h6 { color:#fff }" rule would make those headings
   invisible on a white card, so re-assert dark text specifically inside
   any light card. (Higher specificity than the theme's plain
   ".dark-scheme h3" rule, so this wins regardless of load order.) */
body.dark-scheme .bg-white {
    color: var(--body-font-color) !important;
}
body.dark-scheme .bg-white h1,
body.dark-scheme .bg-white h2,
body.dark-scheme .bg-white h3,
body.dark-scheme .bg-white h4,
body.dark-scheme .bg-white h5,
body.dark-scheme .bg-white h6 {
    color: var(--heading-font-color) !important;
}

/* Product cards (homepage carousel + products.php grid) always keep their
   own light gradient background regardless of site theme. */
body.dark-scheme .mizu-light-card {
    color: var(--body-font-color) !important;
}
body.dark-scheme .mizu-light-card h1,
body.dark-scheme .mizu-light-card h2,
body.dark-scheme .mizu-light-card h3,
body.dark-scheme .mizu-light-card h4,
body.dark-scheme .mizu-light-card h5,
body.dark-scheme .mizu-light-card h6 {
    color: var(--heading-font-color) !important;
}

/* ---------------- Bootstrap form controls ----------------
   Contact / cost-estimator forms use plain Bootstrap classes rather than
   the theme's own .form-border/.form-underline components. */
body.dark-scheme .form-control,
body.dark-scheme .form-select {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}
body.dark-scheme .form-control::placeholder {
    color: rgba(255, 255, 255, .5);
}
body.dark-scheme .form-control:focus,
body.dark-scheme .form-select:focus {
    background-color: rgba(255, 255, 255, .12);
    border-color: var(--secondary-color);
    color: #fff;
    box-shadow: none;
}
body.dark-scheme .form-select option {
    color: #001A4D;
}