/**
 * ==========================================================
 * PREMIUM SUBMENU FIX - Expert Frontend UX WorldClass
 * ==========================================================
 * Correction du probleme de visibilite des sous-menus
 * Design e-commerce premium inspire de Zara, Apple, Sephora
 *
 * @package Forever_BE_Premium
 * @version 8.2.0
 * @author Expert Frontend UX - 20 ans d'experience
 * ==========================================================
 */

/* ==========================================================
   1. CSS VARIABLES - DESIGN SYSTEM PREMIUM
   ========================================================== */
:root {
    /* Submenu Colors */
    --submenu-bg: #ffffff;
    --submenu-bg-gradient: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    --submenu-text-primary: #1a2f23;
    --submenu-text-secondary: #4a5a50;
    --submenu-text-muted: #6b7b72;
    --submenu-border: rgba(0, 0, 0, 0.06);
    --submenu-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15),
                       0 12px 24px -8px rgba(0, 0, 0, 0.08);
    --submenu-shadow-hover: 0 30px 70px -10px rgba(0, 0, 0, 0.2);

    /* Accent Colors */
    --submenu-accent-green: #1e5a3e;
    --submenu-accent-green-light: #2d8659;
    --submenu-accent-gold: #c9a227;
    --submenu-accent-gold-light: #d4af37;

    /* Hover States */
    --submenu-hover-bg: rgba(30, 90, 62, 0.04);
    --submenu-hover-bg-strong: rgba(30, 90, 62, 0.08);
    --submenu-active-indicator: var(--submenu-accent-gold);

    /* Transitions */
    --submenu-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --submenu-transition-fast: all 0.15s ease;
    --submenu-transition-bounce: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================
   2. DROPDOWN WRAPPER - Container Principal
   ========================================================== */
@media (min-width: 1024px) {
    /* Standard Dropdown Container */
    .site-header .dropdown-wrapper,
    .site-header .mega-menu-wrapper,
    .main-navigation .dropdown-wrapper,
    .main-navigation .mega-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9999;
    }

    /* Show on hover */
    .site-header .has-submenu:hover > .dropdown-wrapper,
    .site-header .has-submenu:hover > .mega-menu-wrapper,
    .main-navigation .has-submenu:hover > .dropdown-wrapper,
    .main-navigation .has-submenu:hover > .mega-menu-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 80ms;
    }

    /* Dropdown Inner Container */
    .site-header .dropdown-inner,
    .main-navigation .dropdown-inner {
        min-width: 260px;
        max-width: 320px;
        background: var(--submenu-bg-gradient) !important;
        border-radius: 16px;
        box-shadow: var(--submenu-shadow);
        border: 1px solid var(--submenu-border);
        overflow: hidden;
        transform: translateY(-10px);
        transition: var(--submenu-transition-bounce);
    }

    .site-header .has-submenu:hover > .dropdown-wrapper .dropdown-inner,
    .main-navigation .has-submenu:hover > .dropdown-wrapper .dropdown-inner {
        transform: translateY(0);
    }

    /* Dropdown List */
    .site-header .dropdown-list,
    .main-navigation .dropdown-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        background: transparent !important;
    }

    .site-header .dropdown-list > li,
    .main-navigation .dropdown-list > li {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================
   3. SUBMENU LINKS - Style Premium E-commerce
   ========================================================== */
@media (min-width: 1024px) {
    /* Base Link Style */
    .site-header .dropdown-list .menu-link-sub,
    .site-header .dropdown-list a,
    .site-header .sub-menu a,
    .main-navigation .dropdown-list .menu-link-sub,
    .main-navigation .dropdown-list a,
    .main-navigation .sub-menu a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--submenu-text-secondary) !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        transition: var(--submenu-transition) !important;
        position: relative !important;
        margin: 2px 0 !important;
        background: transparent !important;
    }

    /* Left accent indicator */
    .site-header .dropdown-list .menu-link-sub::before,
    .site-header .dropdown-list a::before,
    .main-navigation .dropdown-list .menu-link-sub::before,
    .main-navigation .dropdown-list a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: linear-gradient(180deg, var(--submenu-accent-gold) 0%, var(--submenu-accent-gold-light) 100%);
        border-radius: 0 3px 3px 0;
        transition: height 0.2s ease;
    }

    /* Hover State */
    .site-header .dropdown-list .menu-link-sub:hover,
    .site-header .dropdown-list a:hover,
    .site-header .sub-menu a:hover,
    .main-navigation .dropdown-list .menu-link-sub:hover,
    .main-navigation .dropdown-list a:hover,
    .main-navigation .sub-menu a:hover {
        background: var(--submenu-hover-bg) !important;
        color: var(--submenu-accent-green) !important;
        padding-left: 20px !important;
    }

    .site-header .dropdown-list .menu-link-sub:hover::before,
    .site-header .dropdown-list a:hover::before,
    .main-navigation .dropdown-list .menu-link-sub:hover::before,
    .main-navigation .dropdown-list a:hover::before {
        height: 60%;
    }

    /* Menu Item Icon */
    .site-header .menu-item-icon,
    .main-navigation .menu-item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        font-size: 14px;
        background: linear-gradient(135deg, rgba(30, 90, 62, 0.08), rgba(30, 90, 62, 0.03));
        border-radius: 8px;
        transition: var(--submenu-transition-fast);
    }

    .site-header .dropdown-list a:hover .menu-item-icon,
    .main-navigation .dropdown-list a:hover .menu-item-icon {
        background: linear-gradient(135deg, var(--submenu-accent-gold) 0%, var(--submenu-accent-gold-light) 100%);
        transform: scale(1.1);
    }

    /* Highlighted Items */
    .site-header .dropdown-list .is-highlighted,
    .main-navigation .dropdown-list .is-highlighted {
        background: linear-gradient(135deg, rgba(201, 162, 39, 0.12) 0%, rgba(201, 162, 39, 0.05) 100%) !important;
        color: var(--submenu-accent-gold) !important;
        font-weight: 600 !important;
    }
}

/* ==========================================================
   4. MEGA MENU - Design Premium Multi-colonnes
   ========================================================== */
@media (min-width: 1024px) {
    /* Mega Menu Container */
    .site-header .mega-menu-inner,
    .main-navigation .mega-menu-inner {
        background: var(--submenu-bg-gradient) !important;
        border-radius: 20px;
        box-shadow: var(--submenu-shadow);
        border: 1px solid var(--submenu-border);
        overflow: hidden;
        transform: translateY(-12px);
        transition: var(--submenu-transition-bounce);
    }

    .site-header .has-submenu:hover > .mega-menu-wrapper .mega-menu-inner,
    .main-navigation .has-submenu:hover > .mega-menu-wrapper .mega-menu-inner {
        transform: translateY(0);
    }

    /* Mega Menu Grid */
    .site-header .mega-menu-grid,
    .main-navigation .mega-menu-grid {
        padding: 32px 40px !important;
        background: transparent !important;
    }

    /* Mega Menu Columns */
    .site-header .mega-menu-columns,
    .main-navigation .mega-menu-columns {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 40px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Boutique Mega Menu - More columns */
    .site-header .mega-menu-products .mega-menu-columns,
    .main-navigation .mega-menu-products .mega-menu-columns {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 32px !important;
    }

    /* Blog Mega Menu - Fewer, wider columns */
    .site-header .mega-menu-blog .mega-menu-columns,
    .main-navigation .mega-menu-blog .mega-menu-columns {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 48px !important;
    }

    /* Mega Menu Column */
    .site-header .mega-menu-column,
    .main-navigation .mega-menu-column {
        min-width: 0;
        position: relative;
        padding-right: 16px;
    }

    /* Column Separator */
    .site-header .mega-menu-products .mega-menu-column:not(:last-child)::after,
    .main-navigation .mega-menu-products .mega-menu-column:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.06) 30%,
            rgba(0, 0, 0, 0.06) 70%,
            transparent 100%
        );
    }

    /* Category Header */
    .site-header .mega-menu-header,
    .main-navigation .mega-menu-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 0 12px 0 !important;
        margin-bottom: 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--submenu-accent-green) !important;
        text-decoration: none !important;
        border-bottom: none !important;
        background: linear-gradient(90deg, var(--submenu-accent-gold) 0%, transparent 100%) left bottom no-repeat !important;
        background-size: 40px 2px !important;
        transition: var(--submenu-transition) !important;
    }

    .site-header .mega-menu-header:hover,
    .main-navigation .mega-menu-header:hover {
        background-size: 60px 2px !important;
        color: var(--submenu-accent-green-light) !important;
    }

    /* Mega Menu Items List */
    .site-header .mega-menu-items,
    .main-navigation .mega-menu-items {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        max-height: 280px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 4px !important;
        background: transparent !important;
    }

    /* Custom Scrollbar */
    .site-header .mega-menu-items::-webkit-scrollbar,
    .main-navigation .mega-menu-items::-webkit-scrollbar {
        width: 4px;
    }

    .site-header .mega-menu-items::-webkit-scrollbar-track,
    .main-navigation .mega-menu-items::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }

    .site-header .mega-menu-items::-webkit-scrollbar-thumb,
    .main-navigation .mega-menu-items::-webkit-scrollbar-thumb {
        background: var(--submenu-accent-gold);
        border-radius: 4px;
    }

    /* Mega Menu Sub Links */
    .site-header .mega-menu-items .menu-link-sub,
    .site-header .mega-menu-items a,
    .main-navigation .mega-menu-items .menu-link-sub,
    .main-navigation .mega-menu-items a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        font-weight: 450 !important;
        color: var(--submenu-text-muted) !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: var(--submenu-transition-fast) !important;
        position: relative !important;
        background: transparent !important;
    }

    /* Mega Menu Items - Left Accent */
    .site-header .mega-menu-items .menu-link-sub::before,
    .site-header .mega-menu-items a::before,
    .main-navigation .mega-menu-items .menu-link-sub::before,
    .main-navigation .mega-menu-items a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: var(--submenu-accent-gold);
        border-radius: 0 3px 3px 0;
        transition: height 0.15s ease;
    }

    /* Mega Menu Items - Hover */
    .site-header .mega-menu-items .menu-link-sub:hover,
    .site-header .mega-menu-items a:hover,
    .main-navigation .mega-menu-items .menu-link-sub:hover,
    .main-navigation .mega-menu-items a:hover {
        background: var(--submenu-hover-bg) !important;
        color: var(--submenu-accent-green) !important;
        padding-left: 16px !important;
    }

    .site-header .mega-menu-items .menu-link-sub:hover::before,
    .site-header .mega-menu-items a:hover::before,
    .main-navigation .mega-menu-items .menu-link-sub:hover::before,
    .main-navigation .mega-menu-items a:hover::before {
        height: 60%;
    }
}

/* ==========================================================
   5. ANIMATIONS - Cascade Elegante
   ========================================================== */
@media (min-width: 1024px) {
    /* Staggered Animation for Columns */
    .site-header .mega-menu-products .mega-menu-column,
    .main-navigation .mega-menu-products .mega-menu-column {
        opacity: 0;
        transform: translateY(8px);
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column,
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column {
        animation: fadeInColumn 0.3s ease forwards;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(1),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(1) {
        animation-delay: 0.05s;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(2),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(2) {
        animation-delay: 0.1s;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(3),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(3) {
        animation-delay: 0.15s;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(4),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(4) {
        animation-delay: 0.2s;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(5),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(5) {
        animation-delay: 0.25s;
    }

    .site-header .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(6),
    .main-navigation .has-submenu:hover .mega-menu-products .mega-menu-column:nth-child(6) {
        animation-delay: 0.3s;
    }

    @keyframes fadeInColumn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Column Hover Enhancement */
    .site-header .mega-menu-column:hover,
    .main-navigation .mega-menu-column:hover {
        z-index: 10;
    }

    .site-header .mega-menu-column:hover .mega-menu-items,
    .main-navigation .mega-menu-column:hover .mega-menu-items {
        background: rgba(30, 90, 62, 0.015);
        border-radius: 8px;
        padding: 4px;
        margin: -4px;
    }
}

/* ==========================================================
   6. TABLET ADJUSTMENTS (768px - 1023px)
   ========================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Dropdown adjustments for tablet */
    .site-header .dropdown-wrapper,
    .main-navigation .dropdown-wrapper {
        position: fixed !important;
        top: auto !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        padding-top: 12px;
    }

    .site-header .dropdown-inner,
    .main-navigation .dropdown-inner {
        max-width: 100% !important;
        width: 100% !important;
    }

    .site-header .mega-menu-wrapper,
    .main-navigation .mega-menu-wrapper {
        position: fixed !important;
        top: auto !important;
        left: 16px !important;
        right: 16px !important;
        transform: none !important;
        width: auto !important;
    }

    .site-header .mega-menu-columns,
    .main-navigation .mega-menu-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .site-header .mega-menu-grid,
    .main-navigation .mega-menu-grid {
        padding: 24px !important;
    }
}

/* ==========================================================
   7. DARK MODE SUPPORT
   ========================================================== */
html.dark {
    --submenu-bg: #1e293b;
    --submenu-bg-gradient: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --submenu-text-primary: #e5e7eb;
    --submenu-text-secondary: #94a3b8;
    --submenu-text-muted: #64748b;
    --submenu-border: rgba(255, 255, 255, 0.08);
    --submenu-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4),
                       0 12px 24px -8px rgba(0, 0, 0, 0.3);
    --submenu-hover-bg: rgba(255, 255, 255, 0.05);
    --submenu-hover-bg-strong: rgba(255, 255, 255, 0.08);
}

html.dark .site-header .dropdown-inner,
html.dark .site-header .mega-menu-inner,
html.dark .main-navigation .dropdown-inner,
html.dark .main-navigation .mega-menu-inner {
    background: var(--submenu-bg-gradient) !important;
    border-color: var(--submenu-border) !important;
}

html.dark .site-header .dropdown-list .menu-link-sub,
html.dark .site-header .dropdown-list a,
html.dark .site-header .mega-menu-items .menu-link-sub,
html.dark .site-header .mega-menu-items a,
html.dark .main-navigation .dropdown-list .menu-link-sub,
html.dark .main-navigation .dropdown-list a,
html.dark .main-navigation .mega-menu-items .menu-link-sub,
html.dark .main-navigation .mega-menu-items a {
    color: var(--submenu-text-secondary) !important;
}

html.dark .site-header .dropdown-list .menu-link-sub:hover,
html.dark .site-header .dropdown-list a:hover,
html.dark .site-header .mega-menu-items .menu-link-sub:hover,
html.dark .site-header .mega-menu-items a:hover,
html.dark .main-navigation .dropdown-list .menu-link-sub:hover,
html.dark .main-navigation .dropdown-list a:hover,
html.dark .main-navigation .mega-menu-items .menu-link-sub:hover,
html.dark .main-navigation .mega-menu-items a:hover {
    background: var(--submenu-hover-bg) !important;
    color: var(--submenu-text-primary) !important;
}

html.dark .site-header .mega-menu-header,
html.dark .main-navigation .mega-menu-header {
    color: var(--submenu-accent-gold) !important;
}

html.dark .site-header .mega-menu-products .mega-menu-column:not(:last-child)::after,
html.dark .main-navigation .mega-menu-products .mega-menu-column:not(:last-child)::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.06) 70%,
        transparent 100%
    );
}

/* ==========================================================
   8. ACCESSIBILITY ENHANCEMENTS
   ========================================================== */
@media (min-width: 1024px) {
    /* Focus Styles */
    .site-header .dropdown-list a:focus-visible,
    .site-header .mega-menu-items a:focus-visible,
    .main-navigation .dropdown-list a:focus-visible,
    .main-navigation .mega-menu-items a:focus-visible {
        outline: 2px solid var(--submenu-accent-gold) !important;
        outline-offset: 2px !important;
        border-radius: 8px !important;
    }

    /* Keyboard Navigation */
    .site-header .has-submenu:focus-within > .dropdown-wrapper,
    .site-header .has-submenu:focus-within > .mega-menu-wrapper,
    .main-navigation .has-submenu:focus-within > .dropdown-wrapper,
    .main-navigation .has-submenu:focus-within > .mega-menu-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .site-header .has-submenu:focus-within > .dropdown-wrapper .dropdown-inner,
    .site-header .has-submenu:focus-within > .mega-menu-wrapper .mega-menu-inner,
    .main-navigation .has-submenu:focus-within > .dropdown-wrapper .dropdown-inner,
    .main-navigation .has-submenu:focus-within > .mega-menu-wrapper .mega-menu-inner {
        transform: translateY(0);
    }
}

/* ==========================================================
   9. REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .site-header .dropdown-wrapper,
    .site-header .mega-menu-wrapper,
    .site-header .dropdown-inner,
    .site-header .mega-menu-inner,
    .site-header .dropdown-list a,
    .site-header .mega-menu-items a,
    .main-navigation .dropdown-wrapper,
    .main-navigation .mega-menu-wrapper,
    .main-navigation .dropdown-inner,
    .main-navigation .mega-menu-inner,
    .main-navigation .dropdown-list a,
    .main-navigation .mega-menu-items a {
        transition: none !important;
        animation: none !important;
    }

    .site-header .mega-menu-products .mega-menu-column,
    .main-navigation .mega-menu-products .mega-menu-column {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================
   10. PERFORMANCE OPTIMIZATIONS
   ========================================================== */
@media (min-width: 1024px) {
    .site-header .dropdown-wrapper,
    .site-header .mega-menu-wrapper,
    .main-navigation .dropdown-wrapper,
    .main-navigation .mega-menu-wrapper {
        will-change: opacity, visibility;
        contain: layout style paint;
    }

    .site-header .dropdown-inner,
    .site-header .mega-menu-inner,
    .main-navigation .dropdown-inner,
    .main-navigation .mega-menu-inner {
        will-change: transform;
        backface-visibility: hidden;
    }

    /* Release will-change after hover */
    .site-header .has-submenu:hover > .dropdown-wrapper,
    .site-header .has-submenu:hover > .mega-menu-wrapper,
    .main-navigation .has-submenu:hover > .dropdown-wrapper,
    .main-navigation .has-submenu:hover > .mega-menu-wrapper {
        will-change: auto;
    }
}

/* ==========================================================
   11. CRITICAL FIX - Submenu Text Color Override
   Force dark text on white background - MAX SPECIFICITY
   ========================================================== */

/* ULTRA HIGH SPECIFICITY - Force dark text */
html body .site-header .main-navigation .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-column .mega-menu-items li a,
html body .site-header .main-navigation .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-column .mega-menu-items li a.menu-link-sub,
html body .site-header .main-navigation .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-column .mega-menu-items a,
html body .site-header .mega-menu-items a,
html body .site-header .mega-menu-items li a,
html body .main-navigation .mega-menu-items a,
html body .mega-menu-items a,
html body .mega-menu-items li a,
.mega-menu-items a.menu-link-sub,
.mega-menu-items li a.menu-link-sub,
ul.mega-menu-items li a,
ul.mega-menu-items a {
    color: #374151 !important;
}

/* Hover state */
html body .site-header .mega-menu-items a:hover,
html body .site-header .mega-menu-items li a:hover,
html body .main-navigation .mega-menu-items a:hover,
html body .mega-menu-items a:hover,
.mega-menu-items a.menu-link-sub:hover,
ul.mega-menu-items li a:hover {
    color: #1e5a3e !important;
    background: rgba(30, 90, 62, 0.08) !important;
}

/* Highlighted items - darker gold for readability */
html body .site-header .mega-menu-items a.is-highlighted,
html body .site-header .mega-menu-items li a.is-highlighted,
html body .main-navigation .mega-menu-items a.is-highlighted,
html body .mega-menu-items a.is-highlighted,
.mega-menu-items a.is-highlighted,
ul.mega-menu-items li a.is-highlighted,
li.highlight-gold a,
li.highlight-gold a.menu-link-sub {
    color: #92400e !important;
    font-weight: 600 !important;
    background: rgba(251, 191, 36, 0.2) !important;
}

/* Category headers */
html body .site-header .mega-menu-header,
html body .site-header .mega-menu-header span,
html body .main-navigation .mega-menu-header,
html body .mega-menu-header,
.mega-menu-header,
.mega-menu-header span,
a.mega-menu-header,
a.mega-menu-header span {
    color: #1e5a3e !important;
}

/* Menu item text spans */
html body .mega-menu-items a .menu-item-text,
html body .mega-menu-items li a .menu-item-text,
.mega-menu-items .menu-item-text,
.menu-link-sub .menu-item-text {
    color: inherit !important;
}

/* ==========================================================
   12. TOP-LEVEL NAVIGATION LINKS - Visibility Fix
   ========================================================== */
@media (min-width: 1024px) {
    /* Ensure top-level links are white on green header */
    .site-header .main-navigation > ul > li > a,
    .site-header .main-navigation .menu-link-top {
        color: #ffffff !important;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 0.3px;
        transition: color 0.2s ease;
    }

    .site-header .main-navigation > ul > li > a:hover,
    .site-header .main-navigation .menu-link-top:hover {
        color: var(--submenu-accent-gold-light) !important;
    }

    /* Chevron in top-level items */
    .site-header .menu-chevron {
        stroke: #ffffff;
        transition: transform 0.3s ease, stroke 0.2s ease;
    }

    .site-header .has-submenu:hover .menu-chevron {
        transform: rotate(180deg);
        stroke: var(--submenu-accent-gold-light);
    }
}