/* Professional Government/MNC Style Header Design */

/* Professional Color Palette */
:root {
    --navy-primary: #001f3f;
    --navy-dark: #00162e;
    --navy-light: #003366;
    --green-accent: #0d4d4d;
    --green-dark: #0a3d3d;
    --green-light: #1a5f5f;
    --cream-bg: #faf8f5;
    --cream-light: #fdf8f3;
    --cream-dark: #f0ede8;
    --text-dark: #1a1a1a;
    --text-muted: #5a5a5a;

    /* Back-compat vars used in css/header.css for mobile toggler */
    --brand-blue: var(--navy-primary);
    --bg-light: var(--cream-bg);
}

@media (max-width: 991px) {
    .navbar-donate-outside {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .navbar-donate-outside {
        display: inline-flex !important;
        align-items: center;
    }

    /* Keep navbar in one line and pin Donate CTA right */
    .navbar-main.navbar {
        flex-wrap: nowrap !important;
    }

    .navbar-main > .container-fluid {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .navbar-main.navbar-expand-lg .navbar-collapse {
        flex-basis: auto !important;
        flex-grow: 1 !important;
        min-width: 0 !important;
    }

    .navbar-donate-outside {
        flex: 0 0 auto !important;
        margin-left: 16px !important;
        white-space: nowrap !important;
    }
}

/* Remove all previous overrides for clean slate */
.navbar-main {
    background: linear-gradient(to bottom, var(--cream-bg) 0%, var(--cream-light) 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 31, 63, 0.12) !important;
    border-bottom: 2px solid var(--navy-primary) !important;
    padding: 0 !important;
}

.sticky-top.navbar-main {
    box-shadow: 0 4px 16px rgba(0, 31, 63, 0.18) !important;
}

/* Professional Government-Style Brand */
.brand-mark {
    width: 50px !important;
    height: 50px !important;
    /* User request: no background behind the logo */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Ensure the logo image itself has no forced background */
.brand-mark .brand-logo {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.brand-mark::before {
    display: none !important;
}

.brand-top {
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-light)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.brand-bottom {
    color: var(--green-accent) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Navigation Links - Government/MNC Professional Style */
.navbar-main .nav-link {
    color: var(--navy-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    /* Keep spacing professional but prevent wrapping on common desktop widths */
    padding: 16px 12px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    text-transform: capitalize !important;
}

@media (min-width: 992px) {
    .navbar-main .nav-link {
        padding: 14px 10px !important;
    }
}

@media (min-width: 1200px) {
    .navbar-main .nav-link {
        padding: 16px 12px !important;
    }
}

.navbar-main .nav-link:hover {
    color: var(--green-accent) !important;
    background: rgba(13, 77, 77, 0.05) !important;
    transform: none !important;
}

.navbar-main .nav-link.active {
    color: var(--green-accent) !important;
    background: rgba(13, 77, 77, 0.08) !important;
}

.navbar-main .nav-link::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--navy-primary), var(--green-accent)) !important;
    transition: width 0.3s ease !important;
}

.navbar-main .nav-link:hover::before,
.navbar-main .nav-link.active::before {
    width: 70% !important;
}

.navbar-main .nav-link::after {
    display: none !important;
}

/* Professional Dropdown Menu - Government Style */
.dropdown-menu {
    border: 2px solid var(--navy-primary) !important;
    box-shadow: 0 8px 32px rgba(0, 31, 63, 0.15) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-top: 0 !important;
    background: var(--cream-bg) !important;
}

@media (min-width: 992px) {
    /* Prevent hover-gap between nav link and dropdown */
    .navbar-main .nav-item.dropdown { position: relative !important; }

    .navbar-main .nav-item.dropdown > .dropdown-menu {
        top: calc(100% - 2px) !important;
        margin-top: 0 !important;
    }

    .navbar-main .nav-item.dropdown > .dropdown-menu::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }
}

.dropdown-menu .dropdown-item {
    padding: 12px 16px !important;
    border-radius: 6px !important;
    color: var(--navy-primary) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-menu .dropdown-item i {
    width: 20px !important;
    margin-right: 12px !important;
    color: #2563eb !important;
}

.dropdown-menu .dropdown-item:hover {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    color: #1e40af !important;
    transform: translateX(3px) !important;
}

/* Mega Menu NGO Style */
.mega-menu {
    width: 950px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 32px !important;
    border-radius: 16px !important;
}

.mega-menu .menu-heading {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--navy-dark) !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--cream-dark) !important;
    display: flex !important;
    align-items: center !important;
}

.mega-menu .menu-heading::before {
    content: '' !important;
    width: 4px !important;
    height: 18px !important;
    background: linear-gradient(135deg, var(--green-accent), var(--navy-primary)) !important;
    margin-right: 12px !important;
    border-radius: 2px !important;
}

.mega-menu .menu-item {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    color: var(--navy-dark) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

.mega-menu .menu-item:hover {
    background: rgba(13, 77, 77, 0.08) !important;
    color: var(--navy-primary) !important;
    transform: translateX(3px) !important;
}

.mega-menu .menu-item i {
    width: 24px !important;
    margin-right: 12px !important;
    color: var(--green-accent) !important;
    font-size: 16px !important;
}

/* Compact, corporate-style dropdown for “Ways to give” */
.mega-menu.mega-menu--ways {
    width: 760px !important;
    padding: 18px !important;
    border-radius: 14px !important;
}

.mega-menu.mega-menu--ways .menu-heading {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
}

.mega-menu.mega-menu--ways .menu-item {
    padding: 10px 12px !important;
    border: 1px solid rgba(0, 31, 63, 0.10) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    margin-bottom: 8px !important;
}

.mega-menu.mega-menu--ways .menu-item:hover {
    border-color: rgba(13, 77, 77, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Mega Menu Cards for Ways to Give */
.mega-menu--compact .menu-item.d-flex {
    padding: 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 2px solid #e5e7eb !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
}

.mega-menu--compact .menu-item.d-flex:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-color: #2563eb !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15) !important;
}

.mega-menu--compact .menu-item i {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.mega-menu--compact .menu-item.d-flex:hover i {
    transform: scale(1.1) rotate(-5deg) !important;
}

.mega-menu--compact .menu-item .fw-bold {
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.mega-menu--compact .menu-item small {
    color: #6b7280 !important;
    font-size: 13px !important;
}

/* Professional Donate Button - Government Style */
.btn-donate-header {
    background: linear-gradient(135deg, var(--green-accent) 0%, var(--green-dark) 100%) !important;
    color: var(--cream-light) !important;
    padding: 12px 32px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 2px solid var(--green-accent) !important;
    box-shadow: 0 4px 12px rgba(13, 77, 77, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.btn-donate-header:hover {
    background: linear-gradient(135deg, var(--green-light) 0%, var(--green-accent) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13, 77, 77, 0.4) !important;
    border-color: var(--green-light) !important;
}

.btn-donate-header i {
    margin-right: 8px !important;
    animation: heartbeat 2s ease-in-out infinite !important;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(1.15); }
    20%, 40% { transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Header Top Bar - Government Style */
.header-top {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%) !important;
    padding: 12px 0 !important;
    border-bottom: 2px solid var(--green-accent) !important;
}

.header-top::before {
    display: none !important;
}

.header-top .info,
.header-top a {
    color: var(--cream-light) !important;
    font-weight: 500 !important;
}

.header-top a:hover {
    color: var(--green-light) !important;
}

.header-top .social-links a {
    background: rgba(13, 77, 77, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(13, 77, 77, 0.5) !important;
}

.header-top .social-links a:hover {
    background: var(--green-accent) !important;
    border-color: var(--green-light) !important;
    transform: translateY(-2px) !important;
}

/* Mobile Menu */
@media (max-width: 991px) {
    .navbar-main .nav-link {
        padding: 14px 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .mega-menu {
        padding: 20px !important;
    }
    
    .mega-menu .menu-heading {
        font-size: 11px !important;
    }
}

/* ===== WAYS TO GIVE CARD STYLES - Government/MNC Professional ===== */
.give-card {
    background: var(--cream-light) !important;
    border: 2px solid var(--navy-primary) !important;
    border-radius: 8px !important;
    padding: 28px 24px !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: relative !important;
    overflow: hidden !important;
}

.give-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 0 !important;
    background: linear-gradient(to bottom, var(--green-accent), var(--green-dark)) !important;
    transition: height 0.3s ease !important;
}

.give-card:hover::before {
    height: 100% !important;
}

.give-card:hover {
    border-color: var(--green-accent) !important;
    box-shadow: 0 8px 24px rgba(0, 31, 63, 0.18) !important;
    transform: translateY(-4px) !important;
    background: var(--cream-bg) !important;
}

.give-icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--navy-primary), var(--navy-light)) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    border: 2px solid var(--green-accent) !important;
}

.give-icon i {
    color: var(--cream-light) !important;
    font-size: 26px !important;
}

.give-card h6 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--navy-primary) !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.give-desc {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    flex-grow: 1 !important;
}

.give-link {
    color: var(--green-accent) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.give-link:hover {
    color: var(--green-dark) !important;
    gap: 12px !important;
}