/* -----------------------------------------------------------
   FEMINIST LIGHT PURPLE THEME — FINAL FIXED VERSION
-----------------------------------------------------------*/

:root {
    /* Import Montserrat font */
}
:root {
    /* Primary Colors */
    --purple-main: #6A2FA0;
    --purple-dark: #3B0050;
    --purple-light: #F6E9FF;
    --purple-lighter: #FBF4FF;
    --purple-soft: #ECD7FA;
    --purple-accent: #9B57D3;

    /* Accent Colors */
    --pink-accent: #E9345B;
    --mint-accent: #00A7A0;

    /* Text Colors */
    --text-dark: #3B1B52;
    --text-gray: #5A5A5A;
    --white: var(--site-cream);

    /* Ubuntu Color System */
    --ubuntu-purple: #6A2FA0;
    --ubuntu-purple-light: #F6E9FF;
    --ubuntu-purple-soft: #ECD7FA;
    --ubuntu-red: #E9345B;
    --ubuntu-red-light: #FDE8EC;
    --ubuntu-teal: #00A7A0;
    --ubuntu-teal-light: #E0F5F4;
    --ubuntu-yellow: #FFC107;
    --ubuntu-yellow-light: #FFF3CD;
    --ubuntu-green: #28A745;
    --ubuntu-green-light: #D4EDDA;
    --ubuntu-dark: #3B1B52;
    --ubuntu-light: var(--site-cream);
    --site-cream: #F6F0E6;
}

/* Global */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600,700&display=swap');

/* Typography */
body {
    font-family: 'Roboto', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    background-color: var(--site-cream) !important;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: var(--header-height, 84px);
    margin: 0;
    padding: 0;
    background-color: var(--site-cream);
}

/* Universal cream background overrides */
.bg-white {
    background-color: var(--site-cream) !important;
}

.bg-gray-50 {
    background-color: var(--site-cream) !important;
}

/* Headings use Montserrat */
h1, h2, h3, h4, h5, h6, .section-title {
    font-family: 'Montserrat', 'Roboto', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Header & Footer — remain dark */
header, footer {
    background-color: var(--purple-dark) !important;
    color: var(--white);
}

/* Avoid color seams on the page edges (nav is max-width centered) */
header nav {
    background-color: transparent !important;
}

/* Keep main navigation visible while scrolling */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    width: 100%;
}

#header-container {
    background-color: var(--purple-dark) !important;
}

main {
    padding-top: var(--header-height, 84px) !important;
}

/* Hero sections that should tuck under the fixed header */
.hero-tight {
    margin-top: calc(-1 * var(--header-height, 84px)) !important;
    padding-top: calc(var(--header-height, 84px) + var(--hero-pad, 6rem)) !important;
}

/* Navigation */
.nav-link {
    color: var(--white);
    position: relative;
}

.nav-link::after {
    content: '';
    height: 2px;
    width: 0;
    position: absolute;
    left: 0;
    bottom: -4px;
    background: var(--pink-accent);
    transition: .3s ease;
}

.nav-link:hover::after { width: 100%; }

.active-page { color: var(--pink-accent) !important; }

/* Section Titles */
.section-title {
    color: var(--purple-main);
    position: relative;
    margin-bottom: 3rem;
}

.section-title::after {
    content: '';
    width: 45%;
    height: 3px;
    background: var(--pink-accent);
    position: absolute;
    left: 0;
    bottom: -8px;
}

/* Cards */
.card-hover {
    background: var(--white);
    border: 1px solid var(--purple-soft);
    border-radius: 12px;
    transition: .3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(106, 47, 160, 0.15);
}

/* Buttons */
.btn-primary {
    background: var(--pink-accent);
    color: var(--white);
    border-radius: 8px;
    padding: .6rem 1.2rem;
    transition: .3s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

.btn-primary:hover {
    background: #c42a4d;
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--mint-accent);
    color: var(--white);
    border-radius: 8px;
    padding: .6rem 1.2rem;
    transition: .3s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

.btn-secondary:hover {
    background: #008a84;
    transform: translateY(-2px);
}

/* Background Helpers */
.bg-light-purple { background: var(--purple-light) !important; }
.bg-lighter-purple { background: var(--purple-lighter) !important; }
.bg-soft-purple { background: var(--purple-soft) !important; }
.bg-white-purple { background: var(--site-cream) !important; }

.gradient-light-purple {
    background: linear-gradient(135deg, var(--purple-light), var(--purple-lighter));
}

.gradient-soft-purple {
    background: linear-gradient(135deg, var(--purple-soft), var(--purple-light));
}

/* Accent Cards */
.card-accent-purple {
    border-left: 4px solid var(--purple-accent);
    background: var(--white);
    box-shadow: 0 2px 12px rgba(155, 87, 211, 0.1);
}

.card-accent-red {
    border-left: 4px solid var(--pink-accent);
    background: var(--white);
    box-shadow: 0 2px 12px rgba(233, 52, 91, 0.1);
}

.card-accent-teal {
    border-left: 4px solid var(--mint-accent);
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0, 167, 160, 0.1);
}

.card-accent-green {
    border-left: 4px solid var(--ubuntu-green);
    background: var(--white);
    box-shadow: 0 2px 12px rgba(40, 167, 69, 0.1);
}

/* Text Helpers */
.text-purple { color: var(--purple-main); }
.text-gray-custom { color: var(--text-gray); }
.text-ubuntu-dark { color: var(--text-dark); }
.text-ubuntu-light { color: var(--white); }
.text-ubuntu-purple { color: var(--ubuntu-purple); }
.text-ubuntu-red { color: var(--ubuntu-red); }
.text-ubuntu-teal { color: var(--ubuntu-teal); }
.text-ubuntu-yellow { color: var(--ubuntu-yellow); }
.text-ubuntu-green { color: var(--ubuntu-green); }

/* Impact Cards */
.impact-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--site-cream);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(106, 47, 160, 0.1);
}

.impact-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--purple-main);
    margin-bottom: 0.5rem;
}

.impact-label {
    color: var(--text-gray);
    font-weight: 600;
}

/* Campaign Tabs */
.campaign-tab {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.campaign-tab.active {
    background: var(--mint-accent) !important;
    color: var(--white) !important;
}

.campaign-tab-content {
    transition: opacity 0.3s ease;
}

/* Links */
.link-teal {
    color: var(--ubuntu-teal);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.link-teal:hover {
    color: var(--purple-main);
    text-decoration: underline;
}

/* Ubuntu Background Colors */
.bg-ubuntu-purple { background-color: var(--ubuntu-purple); }
.bg-ubuntu-purple-light { background-color: var(--ubuntu-purple-light); }
.bg-ubuntu-purple-soft { background-color: var(--ubuntu-purple-soft); }
.bg-ubuntu-red { background-color: var(--ubuntu-red); }
.bg-ubuntu-red-light { background-color: var(--ubuntu-red-light); }
.bg-ubuntu-teal { background-color: var(--ubuntu-teal); }
.bg-ubuntu-teal-light { background-color: var(--ubuntu-teal-light); }
.bg-ubuntu-yellow { background-color: var(--ubuntu-yellow); }
.bg-ubuntu-yellow-light { background-color: var(--ubuntu-yellow-light); }
.bg-ubuntu-green { background-color: var(--ubuntu-green); }
.bg-ubuntu-green-light { background-color: var(--ubuntu-green-light); }
.bg-ubuntu-dark { background-color: var(--ubuntu-dark); }
.bg-ubuntu-light { background-color: var(--ubuntu-light); }

/* Utility Classes */
.hidden { display: none; }



/* -----------------------------------------------------------
   YELLOW ACTIVE PAGE STYLES
----------------------------------------------------------- */

/* Active page indicator - Yellow version */
.active-page-yellow {
    color: var(--ubuntu-yellow) !important;
    position: relative;
    font-weight: 700;
}

.active-page-yellow::after {
    content: '';
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -4px;
    background: var(--ubuntu-yellow);
    border-radius: 2px;
}

/* Override default nav-link::after for yellow theme */
.bg-ubuntu-dark .nav-link:hover::after {
    background: var(--ubuntu-yellow);
}

/* Mobile menu active page styles */
.mobile-menu .active-page-yellow {
    background-color: rgba(255, 193, 7, 0.15);
    border-left: 3px solid var(--ubuntu-yellow);
}

/* Better transition for navigation */
.nav-link {
    transition: all 0.3s ease;
}

.nav-link:hover {
    transform: translateY(-1px);
}

/* Desktop dropdown linger on mouseout */
.desktop-dropdown > div[role="menu"] {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 180ms;
}

.desktop-dropdown:hover > div[role="menu"] {
    transition-delay: 0s;
}

/* Mobile menu button animation */
.mobile-menu-button svg {
    transition: transform 0.3s ease;
}

.mobile-menu-button:active svg {
    transform: scale(0.9);
}