/**
 * ==========================================================
 * SUBMENU TEXT VISIBILITY - FINAL DEFINITIVE FIX
 * ==========================================================
 * This file MUST be loaded LAST to override all other styles
 * Fixes the intermittent text invisibility issue in dropdowns
 *
 * @package Forever_BE_Premium
 * @version 1.0.0 - FINAL FIX
 * ==========================================================
 */

/**
 * PROBLEM IDENTIFIED:
 * - dark-mode/_header.css uses ".menu-item a" which is too generic
 * - This selector matches BOTH top-level AND submenu items
 * - When dark mode toggles, submenu text becomes white on white background
 *
 * SOLUTION:
 * - Use extremely specific selectors for dropdown items
 * - Target dropdown containers explicitly
 * - Force correct colors with !important at maximum specificity
 * - Handle both light mode and dark mode explicitly
 */

/* ==========================================================
   PART 1: DROPDOWN CONTAINER BACKGROUNDS
   Ensure dropdown always has proper background
   ========================================================== */

/* Light Mode - White background for dropdowns */
.dropdown-wrapper .dropdown-inner,
.mega-menu-wrapper .mega-menu-inner,
.site-header .dropdown-wrapper .dropdown-inner,
.site-header .mega-menu-wrapper .mega-menu-inner,
.main-navigation .dropdown-wrapper .dropdown-inner,
.main-navigation .mega-menu-wrapper .mega-menu-inner,
html body .site-header .dropdown-inner,
html body .site-header .mega-menu-inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Dark Mode - Dark background for dropdowns */
html.dark .dropdown-wrapper .dropdown-inner,
html.dark .mega-menu-wrapper .mega-menu-inner,
html.dark .site-header .dropdown-wrapper .dropdown-inner,
html.dark .site-header .mega-menu-wrapper .mega-menu-inner,
html.dark .main-navigation .dropdown-wrapper .dropdown-inner,
html.dark .main-navigation .mega-menu-wrapper .mega-menu-inner,
html.dark body .site-header .dropdown-inner,
html.dark body .site-header .mega-menu-inner {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    background-color: #1e293b !important;
}

/* ==========================================================
   PART 2: LIGHT MODE - SUBMENU TEXT COLORS
   Dark text on white background
   ========================================================== */

/* Dropdown list items - MAXIMUM SPECIFICITY */
html body .site-header .dropdown-wrapper .dropdown-inner .dropdown-list li a,
html body .site-header .dropdown-wrapper .dropdown-inner .dropdown-list li a.menu-link-sub,
html body .site-header .dropdown-wrapper .dropdown-list a,
html body .site-header .dropdown-list li a,
html body .site-header .dropdown-list a.menu-link-sub,
html body .main-navigation .dropdown-list li a,
html body .main-navigation .dropdown-list a,
.site-header .dropdown-list li a,
.site-header .dropdown-list a,
.dropdown-wrapper .dropdown-list a,
.dropdown-inner .dropdown-list a,
.dropdown-list li a,
.dropdown-list a {
    color: #374151 !important;
    background-color: transparent !important;
}

/* Mega menu items - MAXIMUM SPECIFICITY */
html body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-column .mega-menu-items li a,
html body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-items li a,
html body .site-header .mega-menu-wrapper .mega-menu-items a,
html body .site-header .mega-menu-inner .mega-menu-items li a,
html body .site-header .mega-menu-items li a,
html body .site-header .mega-menu-items a,
html body .main-navigation .mega-menu-items li a,
html body .main-navigation .mega-menu-items a,
html body .mega-menu-items li a,
html body .mega-menu-items a,
.site-header .mega-menu-items a,
.mega-menu-wrapper .mega-menu-items a,
.mega-menu-inner .mega-menu-items a,
.mega-menu-items li a,
.mega-menu-items a,
ul.mega-menu-items li a,
ul.mega-menu-items a {
    color: #374151 !important;
    background-color: transparent !important;
}

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

/* ==========================================================
   BLOG MENU SPECIFIC FIX
   The Blog menu uses different classes: mega-menu-blog, mega-menu-type-blog
   Links use .mega-menu-header instead of .menu-link-sub

   CRITICAL: Must override contrast-fixes.css rule:
   [style*="linear-gradient"][style*="#1e5a3e"] a:not(.btn):not(.cta-btn)
   This has specificity 0,4,1 so we need to match or exceed it
   ========================================================== */

/* Blog menu links - Override contrast-fixes.css with HIGHER specificity */
/* contrast-fixes.css uses: [style*=][style*=] a:not(.btn):not(.cta-btn) = 0,4,1 */
/* We need 0,5,1 or higher, so we add more classes */
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-blog a.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-type-blog a.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.mega-menu-header,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.mega-menu-header {
    color: #374151 !important;
    background-color: transparent !important;
}

/* Blog menu headers - Green color for category headers */
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.mega-menu-header.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.mega-menu-header.menu-link,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-blog a.mega-menu-header,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-type-blog a.mega-menu-header {
    color: #1e5a3e !important;
    font-weight: 600 !important;
}

/* Blog menu hover */
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.menu-link:hover,
[style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.menu-link:hover {
    color: #1e5a3e !important;
    background-color: rgba(30, 90, 62, 0.06) !important;
}

/* Additional specificity rules - without attribute selector for fallback */
html body .site-header .mega-menu-wrapper.mega-menu-blog a,
html body .site-header .mega-menu-wrapper.mega-menu-type-blog a,
html body .site-header .mega-menu-blog a.mega-menu-header,
html body .site-header .mega-menu-type-blog a.mega-menu-header,
html body .site-header .mega-menu-blog .menu-link,
html body .site-header .mega-menu-type-blog .menu-link,
html body .site-header .mega-menu-wrapper.mega-menu-blog .mega-menu-header,
html body .site-header .mega-menu-wrapper.mega-menu-type-blog .mega-menu-header,
html body .mega-menu-blog a,
html body .mega-menu-type-blog a,
.site-header .mega-menu-blog a,
.site-header .mega-menu-type-blog a,
.mega-menu-blog a.mega-menu-header,
.mega-menu-type-blog a.mega-menu-header,
.mega-menu-blog .menu-link,
.mega-menu-type-blog .menu-link {
    color: #374151 !important;
    background-color: transparent !important;
}

/* Blog menu headers - Light Mode */
html body .site-header .mega-menu-blog a.mega-menu-header,
html body .site-header .mega-menu-type-blog a.mega-menu-header,
.mega-menu-blog a.mega-menu-header,
.mega-menu-type-blog a.mega-menu-header {
    color: #1e5a3e !important;
    font-weight: 600 !important;
}

/* Blog menu hover - Light Mode */
html body .site-header .mega-menu-blog a:hover,
html body .site-header .mega-menu-type-blog a:hover,
.mega-menu-blog a:hover,
.mega-menu-type-blog a:hover {
    color: #1e5a3e !important;
    background-color: rgba(30, 90, 62, 0.06) !important;
}

/* Text inside links */
html body .dropdown-list a .menu-item-text,
html body .mega-menu-items a .menu-item-text,
.dropdown-list .menu-item-text,
.mega-menu-items .menu-item-text,
.menu-link-sub .menu-item-text {
    color: inherit !important;
}

/* Hover states - Light Mode */
html body .site-header .dropdown-list a:hover,
html body .site-header .mega-menu-items a:hover,
html body .main-navigation .dropdown-list a:hover,
html body .main-navigation .mega-menu-items a:hover,
html body .dropdown-list a:hover,
html body .mega-menu-items a:hover,
.site-header .dropdown-list a:hover,
.site-header .mega-menu-items a:hover,
.dropdown-list a:hover,
.mega-menu-items a:hover {
    color: #1e5a3e !important;
    background-color: rgba(30, 90, 62, 0.06) !important;
}

/* ==========================================================
   PART 3: DARK MODE - SUBMENU TEXT COLORS
   Light text on dark background

   IMPORTANT: Dark mode selectors MUST have equal or higher
   specificity than light mode selectors to override them!
   ========================================================== */

/* Dropdown list items - Dark Mode - MAXIMUM SPECIFICITY */
html.dark body .site-header .dropdown-wrapper .dropdown-inner .dropdown-list li a,
html.dark body .site-header .dropdown-wrapper .dropdown-inner .dropdown-list li a.menu-link-sub,
html.dark body .site-header .dropdown-wrapper .dropdown-list a,
html.dark body .site-header .dropdown-list li a,
html.dark body .site-header .dropdown-list a.menu-link-sub,
html.dark body .main-navigation .dropdown-list li a,
html.dark body .main-navigation .dropdown-list a,
html.dark .site-header .dropdown-list li a,
html.dark .site-header .dropdown-list a,
html.dark .dropdown-wrapper .dropdown-list a,
html.dark .dropdown-inner .dropdown-list a,
html.dark .dropdown-list li a,
html.dark .dropdown-list a {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

/* Mega menu items - Dark Mode - MAXIMUM SPECIFICITY (matches light mode chain) */
html.dark body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-column .mega-menu-items li a,
html.dark body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-columns .mega-menu-items li a,
html.dark body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-grid .mega-menu-items li a,
html.dark body .site-header .mega-menu-wrapper .mega-menu-inner .mega-menu-items li a,
html.dark body .site-header .mega-menu-wrapper .mega-menu-items a,
html.dark body .site-header .mega-menu-inner .mega-menu-items li a,
html.dark body .site-header .mega-menu-items li a,
html.dark body .site-header .mega-menu-items a,
html.dark body .main-navigation .mega-menu-items li a,
html.dark body .main-navigation .mega-menu-items a,
html.dark body .mega-menu-items li a,
html.dark body .mega-menu-items a,
html.dark .site-header .mega-menu-items a,
html.dark .mega-menu-wrapper .mega-menu-items a,
html.dark .mega-menu-inner .mega-menu-items a,
html.dark .mega-menu-items li a,
html.dark .mega-menu-items a,
html.dark ul.mega-menu-items li a,
html.dark ul.mega-menu-items a {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

/* Mega menu headers - Dark Mode */
html.dark body .site-header .mega-menu-header,
html.dark body .main-navigation .mega-menu-header,
html.dark body .mega-menu-header,
html.dark .site-header .mega-menu-header,
html.dark .mega-menu-wrapper .mega-menu-header,
html.dark .mega-menu-inner .mega-menu-header,
html.dark .mega-menu-header,
html.dark a.mega-menu-header,
html.dark .mega-menu-header span {
    color: #fbbf24 !important;
}

/* Hover states - Dark Mode */
html.dark body .site-header .dropdown-list a:hover,
html.dark body .site-header .mega-menu-items a:hover,
html.dark body .main-navigation .dropdown-list a:hover,
html.dark body .main-navigation .mega-menu-items a:hover,
html.dark body .dropdown-list a:hover,
html.dark body .mega-menu-items a:hover,
html.dark .site-header .dropdown-list a:hover,
html.dark .site-header .mega-menu-items a:hover,
html.dark .dropdown-list a:hover,
html.dark .mega-menu-items a:hover {
    color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================
   BLOG MENU - DARK MODE
   Must also override contrast-fixes.css in dark mode
   ========================================================== */

/* Blog menu links - Dark Mode - Override gradient selector with HIGH specificity */
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-blog a.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-type-blog a.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.mega-menu-header,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.mega-menu-header {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

/* Blog menu headers - Dark Mode - Gold color */
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.mega-menu-header.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.mega-menu-header.menu-link,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-blog a.mega-menu-header,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-wrapper.mega-menu-type-blog a.mega-menu-header {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}

/* Blog menu hover - Dark Mode */
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-blog a.menu-link:hover,
html.dark [style*="linear-gradient"][style*="#1e5a3e"] .mega-menu-type-blog a.menu-link:hover {
    color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Blog menu links - Dark Mode - ULTRA HIGH SPECIFICITY (fallback) */
html.dark body .site-header .mega-menu-wrapper.mega-menu-blog a,
html.dark body .site-header .mega-menu-wrapper.mega-menu-type-blog a,
html.dark body .site-header .mega-menu-blog a.mega-menu-header,
html.dark body .site-header .mega-menu-type-blog a.mega-menu-header,
html.dark body .site-header .mega-menu-blog .menu-link,
html.dark body .site-header .mega-menu-type-blog .menu-link,
html.dark body .site-header .mega-menu-wrapper.mega-menu-blog .mega-menu-header,
html.dark body .site-header .mega-menu-wrapper.mega-menu-type-blog .mega-menu-header,
html.dark body .mega-menu-blog a,
html.dark body .mega-menu-type-blog a,
html.dark .site-header .mega-menu-blog a,
html.dark .site-header .mega-menu-type-blog a,
html.dark .mega-menu-blog a.mega-menu-header,
html.dark .mega-menu-type-blog a.mega-menu-header,
html.dark .mega-menu-blog .menu-link,
html.dark .mega-menu-type-blog .menu-link {
    color: #94a3b8 !important;
    background-color: transparent !important;
}

/* Blog menu headers - Dark Mode */
html.dark body .site-header .mega-menu-blog a.mega-menu-header,
html.dark body .site-header .mega-menu-type-blog a.mega-menu-header,
html.dark .mega-menu-blog a.mega-menu-header,
html.dark .mega-menu-type-blog a.mega-menu-header {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}

/* Blog menu hover - Dark Mode */
html.dark body .site-header .mega-menu-blog a:hover,
html.dark body .site-header .mega-menu-type-blog a:hover,
html.dark .mega-menu-blog a:hover,
html.dark .mega-menu-type-blog a:hover {
    color: #e2e8f0 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================
   PART 4: TOP-LEVEL MENU LINKS (Header Bar)
   These should ALWAYS be light colored (header is dark)
   ========================================================== */

/* Light Mode - White text on green header */
html body .site-header .main-navigation > ul > li > a,
html body .site-header .main-navigation > ul > li > a.menu-link-top,
html body .site-header nav.main-navigation > ul > li > a,
.site-header .main-navigation > ul > li > a,
.site-header nav > ul > li > a.menu-link-top,
.main-navigation > ul > li > a.menu-link-top {
    color: #ffffff !important;
}

/* Dark Mode - Also white text */
html.dark body .site-header .main-navigation > ul > li > a,
html.dark body .site-header .main-navigation > ul > li > a.menu-link-top,
html.dark .site-header .main-navigation > ul > li > a,
html.dark .site-header nav > ul > li > a.menu-link-top {
    color: #e2e8f0 !important;
}

/* Top-level hover */
html body .site-header .main-navigation > ul > li > a:hover,
html.dark body .site-header .main-navigation > ul > li > a:hover,
.site-header .main-navigation > ul > li > a:hover {
    color: #fbbf24 !important;
}

/* ==========================================================
   PART 5: FIX FOR .menu-item a CONFLICT
   Override the overly broad dark-mode selector
   ========================================================== */

/*
 * The problem: html.dark .site-header .menu-item a { color: #e2e8f0 }
 * This affects ALL .menu-item a, including dropdowns
 * Solution: More specific selectors for dropdown items
 */

/* Explicitly exclude dropdown items from the dark header text color */
html.dark .site-header .dropdown-wrapper .menu-item a,
html.dark .site-header .mega-menu-wrapper .menu-item a,
html.dark .site-header .dropdown-inner .menu-item a,
html.dark .site-header .mega-menu-inner .menu-item a {
    color: #94a3b8 !important;
}

html.dark .site-header .dropdown-wrapper .menu-item a:hover,
html.dark .site-header .mega-menu-wrapper .menu-item a:hover,
html.dark .site-header .dropdown-inner .menu-item a:hover,
html.dark .site-header .mega-menu-inner .menu-item a:hover {
    color: #e2e8f0 !important;
}

/* Light mode - Force dark text in dropdowns */
.site-header .dropdown-wrapper .menu-item a,
.site-header .mega-menu-wrapper .menu-item a,
.site-header .dropdown-inner .menu-item a,
.site-header .mega-menu-inner .menu-item a {
    color: #374151 !important;
}

.site-header .dropdown-wrapper .menu-item a:hover,
.site-header .mega-menu-wrapper .menu-item a:hover,
.site-header .dropdown-inner .menu-item a:hover,
.site-header .mega-menu-inner .menu-item a:hover {
    color: #1e5a3e !important;
}

/* ==========================================================
   PART 6: HIGHLIGHTED & SPECIAL ITEMS
   ========================================================== */

/* Highlighted items - Light Mode */
html body .dropdown-list .is-highlighted a,
html body .mega-menu-items .is-highlighted a,
html body .dropdown-list a.is-highlighted,
html body .mega-menu-items a.is-highlighted,
.dropdown-list .is-highlighted a,
.mega-menu-items .is-highlighted a,
li.highlight-gold a,
li.is-highlighted a {
    color: #92400e !important;
    background: rgba(251, 191, 36, 0.15) !important;
    font-weight: 600 !important;
}

/* Highlighted items - Dark Mode */
html.dark body .dropdown-list .is-highlighted a,
html.dark body .mega-menu-items .is-highlighted a,
html.dark body .dropdown-list a.is-highlighted,
html.dark body .mega-menu-items a.is-highlighted,
html.dark .dropdown-list .is-highlighted a,
html.dark .mega-menu-items .is-highlighted a,
html.dark li.highlight-gold a,
html.dark li.is-highlighted a {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.2) !important;
    font-weight: 600 !important;
}

/* ==========================================================
   PART 7: PREVENT COLOR TRANSITIONS ON DROPDOWN ITEMS
   Avoid flash of wrong color during hover/click
   ========================================================== */

.dropdown-list a,
.mega-menu-items a,
.dropdown-wrapper a,
.mega-menu-wrapper a {
    transition: background-color 0.2s ease, padding-left 0.2s ease !important;
    /* Color transition removed to prevent flashing */
}

/* ==========================================================
   PART 8: JAVASCRIPT STATE OVERRIDES
   Handle js-hover, js-active, and other dynamic states
   ========================================================== */

/* When JS adds active/hover classes */
.site-header .dropdown-list a.js-hover,
.site-header .mega-menu-items a.js-hover,
.site-header .dropdown-list a.active,
.site-header .mega-menu-items a.active,
.site-header .dropdown-list li.active > a,
.site-header .mega-menu-items li.active > a {
    color: #1e5a3e !important;
}

html.dark .site-header .dropdown-list a.js-hover,
html.dark .site-header .mega-menu-items a.js-hover,
html.dark .site-header .dropdown-list a.active,
html.dark .site-header .mega-menu-items a.active,
html.dark .site-header .dropdown-list li.active > a,
html.dark .site-header .mega-menu-items li.active > a {
    color: #e2e8f0 !important;
}

/* ==========================================================
   PART 9: MOBILE MENU (Below 1024px)
   Different rules for mobile navigation
   ========================================================== */

@media (max-width: 1023px) {
    /* Mobile menu text - Light Mode */
    .mobile-menu .menu-item a,
    .mobile-nav-menu .menu-item a,
    .mobile-menu a,
    .mobile-nav-menu a {
        color: #1f2937 !important;
    }

    .mobile-menu .sub-menu a,
    .mobile-nav-menu .sub-menu a {
        color: #4b5563 !important;
    }

    /* Mobile menu text - Dark Mode */
    html.dark .mobile-menu .menu-item a,
    html.dark .mobile-nav-menu .menu-item a,
    html.dark .mobile-menu a,
    html.dark .mobile-nav-menu a {
        color: #f8fafc !important;
    }

    html.dark .mobile-menu .sub-menu a,
    html.dark .mobile-nav-menu .sub-menu a {
        color: #e2e8f0 !important;
    }
}

/* ==========================================================
   PART 10: FORCE REPAINT FIX
   Ensure proper rendering after dark mode toggle
   ========================================================== */

.dropdown-wrapper,
.mega-menu-wrapper,
.dropdown-inner,
.mega-menu-inner {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Animation to force repaint on dark mode change */
html.dark .dropdown-inner,
html.dark .mega-menu-inner {
    animation: repaintFix 0.01s ease;
}

@keyframes repaintFix {
    from { opacity: 0.99; }
    to { opacity: 1; }
}