/* ============================================
   PREMIUM HEADER NAVIGATION - TOP LEVEL ONLY
   Fix: White links on green header (top-level only)
   ============================================ */

/* Top Level Menu Links - White on Green Header */
.site-header .main-navigation > ul > li > a,
.site-header .main-navigation > ul > li > a.menu-link-top {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.site-header .main-navigation > ul > li > a:hover,
.site-header .main-navigation > ul > li > a.menu-link-top:hover {
    color: #fbbf24 !important;
}

/* Menu Chevron - White */
.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: #fbbf24;
}

/* ============================================
   DROPDOWN & MEGA-MENU - Premium E-commerce Style
   Visible text on white background
   ============================================ */

/* Dropdown Container */
.site-header .dropdown-inner,
.site-header .mega-menu-inner {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    border-radius: 16px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15), 0 12px 24px -8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Dropdown Links - Dark text on white background */
.site-header .dropdown-list a,
.site-header .dropdown-list .menu-link-sub,
.site-header .mega-menu-items a,
.site-header .mega-menu-items .menu-link-sub {
    color: #4a5a50 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

/* Dropdown Links - Hover State */
.site-header .dropdown-list a:hover,
.site-header .dropdown-list .menu-link-sub:hover,
.site-header .mega-menu-items a:hover,
.site-header .mega-menu-items .menu-link-sub:hover {
    color: #1e5a3e !important;
    background: rgba(30, 90, 62, 0.04) !important;
}

/* Mega Menu Category Headers */
.site-header .mega-menu-header {
    color: #1e5a3e !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* ============================================
   SCROLL STATE - Glassmorphism Effect
   ============================================ */
.site-header.scrolled {
    background: linear-gradient(135deg, rgba(30, 90, 62, 0.95) 0%, rgba(45, 134, 89, 0.95) 50%, rgba(30, 90, 62, 0.95) 100%) !important;
    backdrop-filter: blur(10px);
}

/* ============================================
   CRITICAL FIX - MEGA MENU VISIBILITY
   Ultra-specific selectors to override all
   ============================================ */

/* Mega Menu Container - White Background */
body .site-header .mega-menu-wrapper .mega-menu-inner,
html body .site-header .mega-menu-inner,
body .mega-menu-inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Mega Menu Grid & Columns */
body .site-header .mega-menu-grid,
body .site-header .mega-menu-columns,
body .mega-menu-grid,
body .mega-menu-columns {
    background: transparent !important;
    background-color: transparent !important;
}

/* CRITICAL: Mega Menu Items Links - DARK TEXT */
body .site-header .mega-menu-items a,
body .site-header .mega-menu-items .menu-link-sub,
body .site-header .mega-menu-items a.menu-link,
body .site-header .mega-menu-items li a,
html body .mega-menu-items a,
html body .mega-menu-items .menu-link-sub,
.mega-menu-items a.menu-link-sub,
.mega-menu-items a {
    color: #374151 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Mega Menu Items - Hover State */
body .site-header .mega-menu-items a:hover,
body .site-header .mega-menu-items .menu-link-sub:hover,
html body .mega-menu-items a:hover,
.mega-menu-items a:hover {
    color: #1e5a3e !important;
    background: rgba(30, 90, 62, 0.06) !important;
}

/* Mega Menu Headers - GREEN */
body .site-header .mega-menu-header,
body .site-header a.mega-menu-header,
html body .mega-menu-header,
.mega-menu-column > a.mega-menu-header {
    color: #1e5a3e !important;
    background: transparent !important;
}

/* Dropdown List Links - For Blog menu */
body .site-header .dropdown-list a,
body .site-header .dropdown-list .menu-link-sub,
body .site-header .dropdown-inner a,
html body .dropdown-list a,
.dropdown-list a {
    color: #374151 !important;
    background: transparent !important;
}

body .site-header .dropdown-list a:hover,
body .site-header .dropdown-inner a:hover,
html body .dropdown-list a:hover,
.dropdown-list a:hover {
    color: #1e5a3e !important;
    background: rgba(30, 90, 62, 0.06) !important;
}

/* Dropdown Inner - White Background */
body .site-header .dropdown-inner,
html body .dropdown-inner,
.dropdown-inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Highlighted Items - Gold */
body .site-header .mega-menu-items .is-highlighted,
body .site-header .mega-menu-items a.is-highlighted,
html body .is-highlighted,
.mega-menu-items .is-highlighted {
    color: #b8860b !important;
    background: rgba(184, 134, 11, 0.08) !important;
}

/* ========== BLOC 2 ========== */

/* Dark Mode Styles */
html.dark {
    color-scheme: dark;
}

html.dark body,
body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Header Dark Mode */
html.dark .site-header-mobile,
html.dark .site-header {
    background: #1e293b !important;
}

html.dark .site-header-mobile svg,
html.dark .site-header svg {
    stroke: #e2e8f0 !important;
}

html.dark .flp-logo span,
html.dark .site-branding text {
    color: #e2e8f0 !important;
    fill: #e2e8f0 !important;
}

/* Mobile Top Bar Dark */
html.dark .mobile-top-bar {
    background: linear-gradient(90deg, #1e5a3e 0%, #0d3d2a 100%) !important;
}

/* Menu Panel Dark */
html.dark .flp-menu-panel {
    background: #1e293b !important;
}

html.dark .flp-menu-header {
    border-color: #334155 !important;
}

html.dark .flp-menu-header span {
    color: #e2e8f0 !important;
}

html.dark .flp-menu-list a {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark .flp-submenu {
    background: #0f172a !important;
    scrollbar-color: #fbbf24 #334155;
}

html.dark .flp-submenu::-webkit-scrollbar-track {
    background: #334155;
}

html.dark .flp-submenu::-webkit-scrollbar-thumb {
    background: #fbbf24;
}

html.dark .flp-submenu a {
    color: #94a3b8 !important;
}

/* Search Panel Dark */
html.dark .flp-search-panel {
    background: #1e293b !important;
}

html.dark .flp-search-form {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark .flp-search-form input {
    background: transparent !important;
    color: #e2e8f0 !important;
}

html.dark .flp-search-suggestions {
    color: #94a3b8 !important;
}

html.dark .flp-search-tags a {
    background: #334155 !important;
    color: #e2e8f0 !important;
}

/* Main Content Dark Mode */
html.dark main,
html.dark .site-content,
html.dark article {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

html.dark section {
    background-color: #0f172a !important;
}

html.dark .bg-white {
    background-color: #1e293b !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: #0f172a !important;
}

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: #f1f5f9 !important;
}

html.dark p, html.dark span, html.dark li {
    color: #cbd5e1 !important;
}

/* EXCEPTION: Hero sections - keep white/bright text */
html.dark .hero-section-premium p,
html.dark .hero-section-premium span,
html.dark .hero-section p,
html.dark .hero-section span,
html.dark [class*="hero"] p,
html.dark [class*="hero"] span {
    color: #ffffff !important;
}

html.dark .hero-category {
    color: #fbbf24 !important;
}

html.dark .hero-desc-premium {
    color: rgba(255, 255, 255, 0.95) !important;
}

html.dark a {
    color: #60a5fa !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800 {
    color: #94a3b8 !important;
}

/* Cards Dark Mode */
html.dark .benefit-card-premium,
html.dark .avantage-card,
html.dark .testimonial-card-premium,
html.dark .faq-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark .faq-item summary {
    color: #e2e8f0 !important;
}

html.dark .faq-answer {
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

/* Footer Dark Mode */
html.dark footer,
html.dark .site-footer {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Form Elements Dark Mode */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Button Styles in Dark Mode */
html.dark .dark-mode-btn {
    color: #e2e8f0;
}

html.dark .dark-mode-btn svg {
    stroke: #fbbf24 !important;
}

/* Smooth transition */
body, main, section, header, footer,
.site-header-mobile, .flp-menu-panel, .flp-search-panel {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   DESKTOP SUBMENU - DARK MODE FIX
   Ensures text visibility on submenu cards
   ============================================ */

/* Dark Mode: Dropdown & Mega Menu Background */
html.dark .site-header .dropdown-inner,
html.dark .site-header .mega-menu-inner,
html.dark body .dropdown-inner,
html.dark body .mega-menu-inner,
html.dark .dropdown-inner,
html.dark .mega-menu-inner {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.4) !important;
}

/* Dark Mode: Mega Menu Grid & Columns - Transparent */
html.dark .site-header .mega-menu-grid,
html.dark .site-header .mega-menu-columns,
html.dark body .mega-menu-grid,
html.dark body .mega-menu-columns {
    background: transparent !important;
}

/* Dark Mode: Dropdown & Mega Menu Links - Light Text */
html.dark .site-header .dropdown-list a,
html.dark .site-header .dropdown-list .menu-link-sub,
html.dark .site-header .dropdown-inner a,
html.dark .site-header .mega-menu-items a,
html.dark .site-header .mega-menu-items .menu-link-sub,
html.dark body .dropdown-list a,
html.dark body .mega-menu-items a,
html.dark .dropdown-list a,
html.dark .mega-menu-items a {
    color: #94a3b8 !important;
    background: transparent !important;
}

/* Dark Mode: Links Hover State */
html.dark .site-header .dropdown-list a:hover,
html.dark .site-header .dropdown-list .menu-link-sub:hover,
html.dark .site-header .mega-menu-items a:hover,
html.dark .site-header .mega-menu-items .menu-link-sub:hover,
html.dark body .dropdown-list a:hover,
html.dark body .mega-menu-items a:hover,
html.dark .dropdown-list a:hover,
html.dark .mega-menu-items a:hover {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode: Mega Menu Headers */
html.dark .site-header .mega-menu-header,
html.dark .site-header a.mega-menu-header,
html.dark body .mega-menu-header,
html.dark .mega-menu-header {
    color: #fbbf24 !important;
    background: transparent !important;
}

/* Dark Mode: Highlighted Items */
html.dark .site-header .mega-menu-items .is-highlighted,
html.dark .site-header .mega-menu-items a.is-highlighted,
html.dark body .is-highlighted,
html.dark .mega-menu-items .is-highlighted {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

/* Dark Mode: Column Separators */
html.dark .mega-menu-products .mega-menu-column:not(:last-child)::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent 100%
    ) !important;
}

/* ============================================
   LIGHT MODE REINFORCEMENT
   Ensures text is always visible on white bg
   ============================================ */

/* Light Mode: Force dark text on white background */
body:not(.dark) .site-header .dropdown-list a,
body:not(.dark) .site-header .dropdown-list .menu-link-sub,
body:not(.dark) .site-header .dropdown-inner a,
body:not(.dark) .site-header .mega-menu-items a,
body:not(.dark) .site-header .mega-menu-items .menu-link-sub,
html:not(.dark) .dropdown-list a,
html:not(.dark) .mega-menu-items a {
    color: #374151 !important;
}

body:not(.dark) .site-header .dropdown-list a:hover,
body:not(.dark) .site-header .mega-menu-items a:hover,
html:not(.dark) .dropdown-list a:hover,
html:not(.dark) .mega-menu-items a:hover {
    color: #1e5a3e !important;
    background: rgba(30, 90, 62, 0.06) !important;
}

body:not(.dark) .site-header .mega-menu-header,
html:not(.dark) .mega-menu-header {
    color: #1e5a3e !important;
}

/* ============================================
   ULTIMATE FIX - SUBMENU TEXT VISIBILITY
   Maximum specificity to override all styles
   ============================================ */

/* Light Mode - All submenu links must be dark/green */
html body .site-header .sub-menu a,
html body .site-header .sub-menu li a,
html body .site-header nav .sub-menu a,
html body .site-header ul .sub-menu a,
html body .site-header .main-navigation .sub-menu a,
html body .site-header .dropdown-menu a,
html body .site-header .dropdown a,
html body .site-header .submenu a,
html body .site-header .menu-item-has-children .sub-menu a,
html body .site-header .has-submenu .sub-menu a,
html body header .sub-menu a,
html body header nav .sub-menu a,
.site-header .sub-menu a,
.site-header .sub-menu li a,
.main-navigation .sub-menu a,
.sub-menu a,
.sub-menu li a {
    color: #2d5a3f !important;
    background-color: transparent !important;
}

html body .site-header .sub-menu a:hover,
html body .site-header .sub-menu li a:hover,
html body .site-header nav .sub-menu a:hover,
html body .site-header .main-navigation .sub-menu a:hover,
html body header .sub-menu a:hover,
.site-header .sub-menu a:hover,
.sub-menu a:hover,
.sub-menu li a:hover {
    color: #006241 !important;
    background-color: rgba(0, 98, 65, 0.08) !important;
}

/* Dark Mode - All submenu links must be light colored */
html.dark body .site-header .sub-menu a,
html.dark body .site-header .sub-menu li a,
html.dark body .site-header nav .sub-menu a,
html.dark body .site-header ul .sub-menu a,
html.dark body .site-header .main-navigation .sub-menu a,
html.dark body .site-header .dropdown-menu a,
html.dark body .site-header .dropdown a,
html.dark body .site-header .submenu a,
html.dark body .site-header .menu-item-has-children .sub-menu a,
html.dark body .site-header .has-submenu .sub-menu a,
html.dark body header .sub-menu a,
html.dark body header nav .sub-menu a,
html.dark .site-header .sub-menu a,
html.dark .site-header .sub-menu li a,
html.dark .main-navigation .sub-menu a,
html.dark .sub-menu a,
html.dark .sub-menu li a {
    color: #cbd5e1 !important;
    background-color: transparent !important;
}

html.dark body .site-header .sub-menu a:hover,
html.dark body .site-header .sub-menu li a:hover,
html.dark body .site-header nav .sub-menu a:hover,
html.dark body .site-header .main-navigation .sub-menu a:hover,
html.dark body header .sub-menu a:hover,
html.dark .site-header .sub-menu a:hover,
html.dark .sub-menu a:hover,
html.dark .sub-menu li a:hover {
    color: #fbbf24 !important;
    background-color: rgba(251, 191, 36, 0.1) !important;
}

/* Sub-menu container backgrounds */
html body .site-header .sub-menu,
html body .site-header nav .sub-menu,
html body .site-header .main-navigation .sub-menu,
.site-header .sub-menu,
.main-navigation .sub-menu,
.sub-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

html.dark body .site-header .sub-menu,
html.dark body .site-header nav .sub-menu,
html.dark body .site-header .main-navigation .sub-menu,
html.dark .site-header .sub-menu,
html.dark .main-navigation .sub-menu,
html.dark .sub-menu {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}