/* ============================================
   MELODIES — DARK MODE
   Activated via [data-theme="dark"] on <html>.
   Loaded AFTER styles.css and the inline <style>
   block, so these rules win on equal specificity
   without needing !important (except where the
   base rule itself used !important).
   ============================================ */

:root {
    --dm-bg:          #12172f;  /* page background */
    --dm-bg-alt:      #12172f;  /* same as --dm-bg on purpose — nav, footer,
                                    and every "alt" section background now
                                    resolve to one single fixed dark color
                                    site-wide, instead of the previous
                                    slightly-lighter two-tone look. */
    --dm-surface:     #1e2440;  /* cards */
    --dm-surface-alt: #232a4a;  /* tags, pills, icon tiles */
    --dm-text:        #eef0fa;  /* headings / primary text */
    --dm-text-muted:  #aab0d0;  /* secondary text (was #555/#666/#777/#888) */
    --dm-border:      rgba(255,255,255,0.08);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .national-card,
html[data-theme="dark"] .counter-box,
html[data-theme="dark"] .ksa-map-card,
html[data-theme="dark"] .impact-globe-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .about-interactive-card,
html[data-theme="dark"] .about-tag,
html[data-theme="dark"] footer {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* NAV */
html[data-theme="dark"] nav {
    background: var(--dm-bg-alt);
    box-shadow: 0 5px 20px rgba(0,0,0,0.35);
}

/* HERO */
html[data-theme="dark"] .hero::after {
    background: rgba(18,23,47,0.78);
}
html[data-theme="dark"] .coming {
    background: rgba(30,36,64,0.6);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .coming h1,
html[data-theme="dark"] .coming p {
    color: var(--dm-text);
}
html[data-theme="dark"] .tag {
    background: var(--dm-surface-alt);
    color: var(--dm-text);
}

/* SECTION HEADINGS (non-shimmer) */
html[data-theme="dark"] section h2:not(.why-melodies-heading):not(.about-shimmer-heading):not(.capability-content h2) {
    color: var(--dm-text);
}

/* VISION & MISSION */
html[data-theme="dark"] .vision-mission {
    background: var(--dm-bg-alt);
}
html[data-theme="dark"] .vision-mission h2.vm-watermark {
    color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] .vm-text {
    color: var(--dm-text);
}

/* ABOUT MELODIES */
html[data-theme="dark"] .about-melodies {
    background: var(--dm-bg);
}
html[data-theme="dark"] .about-copy p {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .about-interactive-card {
    background: var(--dm-surface);
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .pillar-tab {
    background: var(--dm-surface-alt);
}
html[data-theme="dark"] .pillar-panel h3 {
    color: var(--dm-text);
}
html[data-theme="dark"] .pillar-panel p {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .pillar-progress span {
    background: rgba(255,255,255,0.1);
}

/* SERVICES */
html[data-theme="dark"] .service-card {
    background: var(--dm-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .service-card h3 {
    color: var(--dm-text);
}

/* NATIONAL EVENTS */
html[data-theme="dark"] .national-events {
    background: var(--dm-bg);
}
html[data-theme="dark"] .national-card {
    background: var(--dm-surface);
    box-shadow: 0 20px 45px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .national-card .national-subtitle {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .national-card li {
    color: var(--dm-text-muted);
}
/* Card titles: the light theme deepens the teal for contrast (styles.css);
   on dark cards the bright tint reads best, and the brand purple is lifted
   so it stays legible (was 2.3:1 on the dark card) */
html[data-theme="dark"] .national-card[style*="#4fb9c2"] h3 {
    color: #4fb9c2;
}
html[data-theme="dark"] .national-card[style*="logo-purple"] h3 {
    color: #c16ac1;
}

/* Section eyebrows — bright brand green on dark (light theme uses a deeper
   green for contrast, see styles.css) */
html[data-theme="dark"] .cinema-eyebrow,
html[data-theme="dark"] .ksa-map-eyebrow,
html[data-theme="dark"] .impact-globe-eyebrow {
    color: #85BB33;
}

/* COUNTERS */
html[data-theme="dark"] .counters {
    background: var(--dm-bg);
}
html[data-theme="dark"] .counter-box {
    background: var(--dm-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .counter-box p {
    color: var(--dm-text-muted);
}

/* KSA MAP + GLOBAL REACH */
html[data-theme="dark"] .ksa-map-card,
html[data-theme="dark"] .impact-globe-card {
    background: var(--dm-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .ksa-map-text p,
html[data-theme="dark"] .impact-globe-text p {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .ksa-map-visual svg path {
    fill: #262c4e;
    stroke: #7d84ad;
    stroke-opacity: 0.35;
}

/* CINEMATIC SHOWCASE */
html[data-theme="dark"] .cinema-showcase {
    background: var(--dm-bg-alt);
}
html[data-theme="dark"] .cinema-sub {
    color: var(--dm-text-muted);
}

/* WHY WORK WITH MELODIES */
html[data-theme="dark"] .why-melodies-sub {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .why-card {
    background: var(--dm-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .why-card h3 {
    color: var(--dm-text);
}
html[data-theme="dark"] .why-card p {
    color: var(--dm-text-muted);
}

/* PORTFOLIO GALLERY */
html[data-theme="dark"] .portfolio-item {
    background: var(--dm-surface);
}

/* PARTNERS — intentionally left unstyled for dark mode: several partner
   logos are dark-colored marks/text with transparent backgrounds, so a
   dark card would make them unreadable. Cards stay white/light exactly
   as in normal mode regardless of the active theme. */

/* CONTACT FORM — message textarea sits on a light panel in the light theme */
html[data-theme="dark"] .form-field.message-field textarea {
    background: var(--dm-surface);
    color: var(--dm-text);
}
html[data-theme="dark"] .form-field.message-field label {
    color: rgba(238,240,250,0.55);
}

/* FOOTER */
html[data-theme="dark"] footer {
    background: var(--dm-bg-alt);
    color: var(--dm-text-muted);
}

/* LANGUAGE / THEME TOGGLE BUTTONS — keep visible against the dark nav */
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .theme-toggle {
    background: var(--dm-surface-alt);
}
html[data-theme="dark"] .lang-toggle:hover,
html[data-theme="dark"] .theme-toggle:hover {
    background: #ff00aa;
}

/* WAVE DECORATIONS — nudge brightness so the thin brand-colour strokes
   still read clearly against the dark backgrounds */
html[data-theme="dark"] section[style*="--wave-bg"],
html[data-theme="dark"] .vision-mission::before,
html[data-theme="dark"] .vision-mission::after,
html[data-theme="dark"] .services-grid::before,
html[data-theme="dark"] .national-events-grid::before,
html[data-theme="dark"] .impact-globe-group::before,
html[data-theme="dark"] .counters-grid::before,
html[data-theme="dark"] .cinema-waves-top,
html[data-theme="dark"] .cinema-waves-bottom,
html[data-theme="dark"] .why-waves-top,
html[data-theme="dark"] .why-waves-bottom,
html[data-theme="dark"] .profile-download-waves,
html[data-theme="dark"] .portfolio-waves-top,
html[data-theme="dark"] .portfolio-waves-bottom,
html[data-theme="dark"] .portfolio-gallery::before,
html[data-theme="dark"] .contact::after {
    filter: brightness(1.6) saturate(1.15);
}

/* THEME TOGGLE BUTTON — icon-only variant, dark-mode color handled above */
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


/* ============================================
   SERVICE PAGES (service-styles.css)
   Same [data-theme="dark"] overlay approach.
   ============================================ */

html[data-theme="dark"] body {
    background: var(--dm-bg);
    color: var(--dm-text);
}

/* SERVICE CARDS GRID (index-page services section reuses this too) */
html[data-theme="dark"] .service-card {
    background: var(--dm-surface);
    border-color: var(--dm-border);
}
html[data-theme="dark"] .detail-cards-grid .service-card p {
    color: var(--dm-text-muted);
}

/* SERVICE DETAIL PAGE HEADER */
html[data-theme="dark"] .page-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #ff00aa) 16%, var(--dm-bg)) 0%, var(--dm-bg) 100%);
}
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a {
    color: var(--dm-text-muted);
}
html[data-theme="dark"] .page-header h1 {
    color: var(--dm-text);
}
html[data-theme="dark"] .page-header .intro {
    color: var(--dm-text-muted);
}

/* DETAIL SECTION HEADINGS */
html[data-theme="dark"] .detail-section h2 {
    color: var(--dm-text);
}

/* WAVE BANDS BEHIND CARDS/GALLERY ON SERVICE PAGES */
html[data-theme="dark"] .detail-cards-grid::before,
html[data-theme="dark"] .portfolio-gallery::before {
    filter: brightness(1.6) saturate(1.15);
}

/* CONTACT EMAIL BUTTON — white pill on an already-dark gradient card;
   stays legible as-is, just soften the hover shadow slightly */
html[data-theme="dark"] .contact-email-btn:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .profile-download p {
    color: var(--dm-text-muted);
}