/* ============================================
   DARK MODE — CliCo PH
   Add <link rel="stylesheet" href="../darkmode.css"> to all pages
   ============================================ */

html.dark-mode { background: #0F0F14 !important; }
body.dark-mode {
    background-color: #0F0F14;
    color: #E2E0F0;
}

/* Navbar */
/* navbar handled in styles.css */

body.dark-mode .nav-link { color: rgba(180,130,230,0.85); }
body.dark-mode .nav-link:hover { color: #C084FC; background: rgba(107,47,160,0.15); }
body.dark-mode .nav-toggle span { background: #E2E0F0; }
body.dark-mode .nav-links {
    background: #0F0F14;
    border-bottom: none;
    box-shadow: none;
}
body.dark-mode .nav-links .nav-link { color: rgba(226,224,240,0.75); }

/* Hero */
body.dark-mode .hero {
    background: linear-gradient(160deg, #0F0F14 0%, rgba(214,51,132,0.08) 50%, rgba(107,47,160,0.12) 100%);
}
body.dark-mode .hero h1,
body.dark-mode .hero-sub { color: #E2E0F0; }
body.dark-mode .hero-sub { color: rgba(226,224,240,0.7); }
body.dark-mode .hero::before,
body.dark-mode .hero::after {
    background-image:
        linear-gradient(rgba(214,51,132,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214,51,132,0.04) 1px, transparent 1px);
}
body.dark-mode .stat-divider { background: rgba(214,51,132,0.2); }
body.dark-mode .stat-label { color: rgba(226,224,240,0.4); }

/* Page header */
body.dark-mode .page-header {
    background: linear-gradient(160deg, #0F0F14 0%, rgba(214,51,132,0.08) 100%);
    border-bottom-color: rgba(214,51,132,0.1);
}
body.dark-mode .page-header h1 { color: #E2E0F0; }
body.dark-mode .page-header p { color: rgba(226,224,240,0.6); }

/* About / White sections */
/* Hero headline fix for dark mode */
body.dark-mode .hero h1 span[style*="0F172A"],
body.dark-mode .hero h1 span[style*="color"] {
    -webkit-text-fill-color: #E2E0F0 !important;
    color: #E2E0F0 !important;
}

body.dark-mode .about,
body.dark-mode .what-we-do,
body.dark-mode .offerings-section,
body.dark-mode .faq-section,
body.dark-mode .resources-section,
body.dark-mode .contact-section,
body.dark-mode .community-section,
body.dark-mode .audience-section {
    background-color: #13131A;
}
body.dark-mode .about {
    border-top-color: rgba(214,51,132,0.1);
    border-bottom-color: rgba(214,51,132,0.1);
}
body.dark-mode .about h2,
body.dark-mode .section-intro h2,
body.dark-mode .faq-section h2,
body.dark-mode .resources-section h2,
body.dark-mode .contact-section h2,
body.dark-mode .community-section h2 { color: #E2E0F0; }
body.dark-mode .about > .container > p,
body.dark-mode .section-intro p,
body.dark-mode .feature-list li,
body.dark-mode .faq-answer p,
body.dark-mode .resource-card p,
body.dark-mode .feature-box p,
body.dark-mode .value-card p,
body.dark-mode .offering-row p,
body.dark-mode .audience-card p { color: rgba(226,224,240,0.6); }

/* Dropdown sections */
body.dark-mode .dropdown-section { border-color: rgba(214,51,132,0.15); }
body.dark-mode .dropdown-header {
    background: rgba(214,51,132,0.07);
    color: #E2E0F0;
}
body.dark-mode .dropdown-header:hover { background: rgba(214,51,132,0.12); }

/* Cards */
body.dark-mode .value-card,
body.dark-mode .audience-card,
body.dark-mode .feature-box,
body.dark-mode .resource-card,
body.dark-mode .contact-info {
    background: #0F0F14;
    border-color: rgba(214,51,132,0.12);
}
body.dark-mode .value-card h3,
body.dark-mode .audience-card h3,
body.dark-mode .feature-box h3,
body.dark-mode .resource-card h3 { color: #E2E0F0; }
body.dark-mode .ai-card {
    background: linear-gradient(160deg, #1A1A24 0%, rgba(107,47,160,0.08) 100%);
    border-color: rgba(107,47,160,0.2);
}
body.dark-mode .ai-card h3 { color: #E2E0F0; }
body.dark-mode .ai-card p { color: rgba(226,224,240,0.6); }

/* Offering rows */
body.dark-mode .offering-row {
    border-color: rgba(214,51,132,0.12);
}
body.dark-mode .offering-row:hover {
    background: rgba(214,51,132,0.06);
}
body.dark-mode .offering-row h4 { color: #E2E0F0; }

/* FAQ */
body.dark-mode .faq-item { border-color: rgba(214,51,132,0.12); }
body.dark-mode .faq-question {
    background: #1A1A24;
    color: #E2E0F0;
}
body.dark-mode .faq-question:hover,
body.dark-mode .faq-question.active { background: rgba(214,51,132,0.08); }

/* Notification / home connect section */
body.dark-mode .notification-section,
body.dark-mode .home-connect {
    background: linear-gradient(135deg, rgba(214,51,132,0.08) 0%, rgba(107,47,160,0.12) 100%);
    border-color: rgba(214,51,132,0.15);
}
body.dark-mode .notification-section h2,
body.dark-mode .connect-inner h2 { color: #E2E0F0; }
body.dark-mode .notification-subtitle,
body.dark-mode .connect-inner p { color: rgba(226,224,240,0.6); }
body.dark-mode .notification-form input,
body.dark-mode .connect-form input,
body.dark-mode .connect-form textarea,
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
    background: #1A1A24;
    border-color: rgba(214,51,132,0.2);
    color: #E2E0F0;
}
body.dark-mode .contact-form label { color: rgba(226,224,240,0.7); }

/* Resources */
body.dark-mode .card-news {
    background: #1A1A24;
    border-color: rgba(214,51,132,0.12);
}
body.dark-mode .news-body h3 { color: #E2E0F0; }
body.dark-mode .news-body p { color: rgba(226,224,240,0.55); }
body.dark-mode .news-source { color: rgba(226,224,240,0.35); }
body.dark-mode .skeleton-card { background: #1A1A24; }
body.dark-mode .skeleton-thumb,
body.dark-mode .skeleton-line { background: rgba(214,51,132,0.08); }
body.dark-mode .tabs-wrapper { background: #13131A; }
body.dark-mode .tab-btn {
    background: #1A1A24;
    color: rgba(226,224,240,0.6);
    border-color: rgba(214,51,132,0.2);
}
body.dark-mode .resources-main { background: #13131A; }
body.dark-mode .section-heading h2 { color: #E2E0F0; }

/* Audience search quote */
body.dark-mode .audience-search {
    background: rgba(107,47,160,0.1);
    color: rgba(214,51,132,0.9);
}

/* Philosophy pills */
body.dark-mode .phil-pill { color: rgba(226,224,240,0.6); }

/* Tooltip */
body.dark-mode .eyebrow-tooltip {
    background: #1A1A24;
    border-color: rgba(214,51,132,0.2);
    color: rgba(226,224,240,0.7);
}
body.dark-mode .eyebrow-tooltip strong { color: #E2E0F0; }
body.dark-mode .eyebrow-tooltip::before { background: #1A1A24; }

/* Secondary outline button */
body.dark-mode .btn[style*="background:white"],
body.dark-mode .btn-white {
    background: #1A1A24 !important;
    color: rgba(214,51,132,0.9) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* Contact info box */
body.dark-mode .contact-info { background: #1A1A24; }
body.dark-mode .contact-info h3 { color: #E2E0F0; }
body.dark-mode .contact-info p { color: rgba(226,224,240,0.6); }

/* ── Insights page ── */
body.dark-mode .insights-about {
    background: linear-gradient(160deg, #0F0F14 0%, rgba(214,51,132,0.08) 100%);
    border-bottom-color: rgba(214,51,132,0.1);
}
body.dark-mode .insights-about-left h2 { color: #E2E0F0; }
body.dark-mode .insights-about-left p { color: rgba(226,224,240,0.6); }
body.dark-mode .insights-pillar {
    background: #1A1A24;
    border-color: rgba(214,51,132,0.12);
}
body.dark-mode .insights-pillar:hover { border-color: rgba(214,51,132,0.3); }
body.dark-mode .insights-pillar h4 { color: #E2E0F0; }
body.dark-mode .insights-pillar p { color: rgba(226,224,240,0.6); }

body.dark-mode .spotlights-section { background: #13131A; }
body.dark-mode .spotlights-header h2 { color: #E2E0F0; }
body.dark-mode .spotlights-header p { color: rgba(226,224,240,0.6); }
body.dark-mode .spotlight-card {
    background: #1A1A24;
    border-color: rgba(107,47,160,0.2);
}
body.dark-mode .spotlight-card h3 { color: #E2E0F0; }
body.dark-mode .spotlight-card p { color: rgba(226,224,240,0.6); }
body.dark-mode .spotlight-tag {
    background: rgba(107,47,160,0.15);
    color: rgba(214,51,132,0.9);
}
body.dark-mode .coming-soon-banner { background: #0A0A10; }

/* ── Dark Mode Toggle Button ── */
.dark-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(214,51,132,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 9999;
}
.dark-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 8px 28px rgba(214,51,132,0.5);
}
.dark-toggle .icon-light { display: none; }
.dark-toggle .icon-dark  { display: block; }
body.dark-mode .dark-toggle .icon-light { display: block; }
body.dark-mode .dark-toggle .icon-dark  { display: none; }
body.dark-mode .audience-section {
    background: #13131A !important;
}