/* ============================================================
   DARK MODE — Version 11
   Full site dark mode with Glass-Dark Hero overlay
   ============================================================ */

body[data-theme="dark"] {
    background: #0d1117 !important;
    color: #e5e7eb !important;
    transition: background-color .25s ease, color .25s ease;
}

/* ============================================================
   1. DARK HEADER + LIGHT NAV 
   ============================================================ */

body[data-theme="dark"] .site-header-wrapper {
    background: linear-gradient(to bottom, #0f1a2a, #0d1723) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

body[data-theme="dark"] .si-mainnav a {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .si-mainnav a:hover {
    color: #bfdbfe !important;
}

body[data-theme="dark"] .si-mainnav .current a {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 6px;
    color: #ffffff !important;
}

/* ============================================================
   2. HERO BLOCK — BACKGROUND + GLASS OVERLAY (B2)
   ============================================================ */

/* DARK MODE — Apply actual moonlight background to the module that holds the hero */
body[data-theme="dark"] #hero .moduletable {
    background-image: url("/images/Homeslides/Moonlight-Hour-cropped.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

/* Add gentle dark overlay WITHOUT hiding the hero gradient */
body[data-theme="dark"] #hero {
    position: relative;
}

body[data-theme="dark"] #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);   /* Soft glass-dark overlay */
    z-index: 1;
    pointer-events: none;
}

/* Keep hero content readable on top of overlay */
body[data-theme="dark"] #hero .hero-block,
body[data-theme="dark"] #hero .hero-block * {
    position: relative;
    z-index: 2 !important;
    color: #f5f7fa !important;
    text-shadow: none !important;
}

/* Remove unwanted background/shading around hero text */
body[data-theme="dark"] .hero-block,
body[data-theme="dark"] .hero-block > div {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* HERO BUTTONS (Restore proper styling) */
body[data-theme="dark"] .hero-block a {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: underline !important;
    color: #bfdbfe !important;
}

/* Remove the blue-highlight bug */
body[data-theme="dark"] .hero-block .btn,
body[data-theme="dark"] .hero-block .btn-primary,
body[data-theme="dark"] .hero-block .btn-ghost {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   3. GENERAL CONTENT AREA
   ============================================================ */

body[data-theme="dark"] main#content {
    background: #111827 !important;
    color: #e5e7eb !important;
}

body[data-theme="dark"] .container {
    background: none !important;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3 {
    color: #f3f6f9 !important;
}

/* ============================================================
   4. FOOTER
   ============================================================ */

body[data-theme="dark"] #footer {
    background: #0b1220 !important;
    color: #e5e7eb !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
}

body[data-theme="dark"] #footer a {
    color: #bfdbfe !important;
}

body[data-theme="dark"] #footer a:hover {
    color: #ffffff !important;
}

/* ============================================================
   5. FORMS / INPUTS
   ============================================================ */

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border: 1px solid #374151 !important;
}

/* ============================================================
   6. LINK COLOR OUTSIDE HERO
   ============================================================ */

body[data-theme="dark"] a {
    color: #d0d7e2 !important;
}

body[data-theme="dark"] a:hover {
    color: #ffffff !important;
}

/* ============================================================
   7. THEME TOGGLE ICON
   ============================================================ */

body[data-theme="dark"] #themeToggleIcon {
    color: #ffffff !important;
}