/* ============================================
   ExpertCE Modern Header Styles
   Applied sitewide via child theme
   ============================================ */

/* CSS Variables */
:root {
    --ece-primary: #2563eb;
    --ece-primary-dark: #1d4ed8;
    --ece-primary-light: #3b82f6;
    --ece-gray-50: #f9fafb;
    --ece-gray-100: #f3f4f6;
    --ece-gray-200: #e5e7eb;
    --ece-gray-300: #d1d5db;
    --ece-gray-400: #9ca3af;
    --ece-gray-500: #6b7280;
    --ece-gray-600: #4b5563;
    --ece-gray-700: #374151;
    --ece-gray-800: #1f2937;
    --ece-gray-900: #111827;
    --ece-radius: 8px;
    --ece-radius-lg: 16px;
    --ece-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ece-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --ece-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ece-transition: all 0.2s ease;
    --ece-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   MODERN HEADER - Main Styles
   ============================================ */

/* CRITICAL: NUCLEAR - Hide ALL other headers except ece-header */
/* Target anything inside wrapper-container that's a header */
body.ece-modern-header #wrapper-container header:not(.ece-header),
body.ece-modern-header #wrapper-container .site-header:not(.ece-header),
body.ece-modern-header .content-pusher > header:not(.ece-header),
body.ece-modern-header header#masthead:not(.ece-header) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide theme's navigation wrappers */
body.ece-modern-header .thim-nav-wrapper,
body.ece-modern-header .toolbar-wrapper,
body.ece-modern-header .header_v1,
body.ece-modern-header .header_v2,
body.ece-modern-header .header_v3,
body.ece-modern-header .header_v4,
body.ece-modern-header .header_v5,
body.ece-modern-header .navigation.col-sm-12:not(.ece-nav),
body.ece-modern-header .tm-table,
body.ece-modern-header .width-navigation,
body.ece-modern-header .width-logo:not(.ece-header-logo),
body.ece-modern-header .navbar-nav:not(.ece-nav-menu),
body.ece-modern-header .menu-main-menu-container,
body.ece-modern-header ul.nav.navbar-nav.menu-main-menu:not(.ece-nav-menu) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* MOBILE MENU FIX: Override the above hiding rules for mobile menu */
/* These have higher specificity (3 classes vs 2) so they win even with !important */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav,
body.ece-modern-header .mobile-menu-inner .nav.navbar-nav {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}

/* Also ensure menu items inside mobile menu are visible */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav > li {
    display: block !important;
    visibility: visible !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li > a,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav > li > a {
    display: block !important;
    visibility: visible !important;
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Mobile menu submenus - Hidden by default, shown when parent has .thim-ekits-menu__is-hover */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu {
    display: none;
    position: static !important;
    background: rgba(0,0,0,0.2) !important;
    padding-left: 20px;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
}

/* Show submenu when parent item is expanded (clicked) */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav li.thim-ekits-menu__is-hover > .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav li.thim-ekits-menu__is-hover > .sub-menu,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav li.current > .sub-menu,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav li.current > .sub-menu {
    display: block !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu li {
    display: block !important;
    visibility: visible !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a,
body.ece-modern-header .mobile-menu-container .nav.navbar-nav .sub-menu li a {
    display: block !important;
    visibility: visible !important;
    color: rgba(255,255,255,0.85);
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .sub-menu li a::before {
    display: none !important;
}

/* Icon toggle for expanding submenus - make visible and clickable */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .icon-toggle {
    display: block !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    cursor: pointer !important;
    color: rgba(255,255,255,0.6) !important;
    z-index: 10 !important;
}

body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav .icon-toggle i {
    font-size: 12px !important;
}

/* Rotate arrow when expanded */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav li.thim-ekits-menu__is-hover > .icon-toggle i {
    transform: rotate(180deg);
}

/* Menu items with children need relative positioning for the toggle */
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li.menu-item-has-children,
body.ece-modern-header .mobile-menu-wrapper .nav.navbar-nav > li.tc-menu-layout-builder {
    position: relative !important;
}

/* Modern Header Container */
.ece-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid var(--ece-gray-200) !important;
    padding: 0 !important;
    z-index: 9999 !important;
    box-shadow: none !important;
    height: 72px !important;
    font-family: var(--ece-font-family) !important;
    transition: transform 0.3s ease !important;
    transform: translateY(0) !important;
}

/* Hide header when scrolling down (headroom effect) - Mobile only */
@media (max-width: 768px) {
    .ece-header.header-hidden {
        transform: translateY(-120px) !important; /* Move fully off screen (covers 64px header + 46px admin bar + buffer) */
        pointer-events: none !important;
    }
}

.ece-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.ece-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 24px;
}

/* Logo */
.ece-header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ece-header-logo img {
    max-height: 60px;
    width: auto;
}

.ece-header-logo a {
    display: flex;
    align-items: center;
}

/* ============================================
   NAVIGATION - Main Menu Styling
   ============================================ */
.ece-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1;
    justify-content: center;
}

/* Style the wp_nav_menu output */
.ece-nav-menu,
.ece-nav .nav.navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level menu items */
.ece-nav-menu > li,
.ece-nav .nav.navbar-nav > li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level links */
.ece-nav-menu > li > a,
.ece-nav .nav.navbar-nav > li > a,
.ece-nav-menu > li > .tc-menu-inner > a,
.ece-nav .nav.navbar-nav > li > .tc-menu-inner > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ece-gray-600) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--ece-radius) !important;
    transition: var(--ece-transition) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-nav-menu > li > a:hover,
.ece-nav .nav.navbar-nav > li > a:hover,
.ece-nav-menu > li:hover > a,
.ece-nav .nav.navbar-nav > li:hover > a,
.ece-nav-menu > li > .tc-menu-inner > a:hover,
.ece-nav .nav.navbar-nav > li > .tc-menu-inner > a:hover {
    color: var(--ece-gray-900) !important;
    background: var(--ece-gray-50) !important;
    box-shadow: none !important;
}

/* Current/Active menu item */
.ece-nav-menu > li.current-menu-item > a,
.ece-nav .nav.navbar-nav > li.current-menu-item > a,
.ece-nav-menu > li.current-menu-parent > a,
.ece-nav .nav.navbar-nav > li.current-menu-parent > a {
    color: var(--ece-primary) !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

/* Dropdown arrow for items with children */
.ece-nav-menu > li.menu-item-has-children > a::after,
.ece-nav .nav.navbar-nav > li.menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    transition: transform 0.2s ease;
}

.ece-nav-menu > li.menu-item-has-children:hover > a::after,
.ece-nav .nav.navbar-nav > li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* ============================================
   MEGA MENU DROPDOWN STYLES (Matching Mockup)
   ============================================ */
.ece-nav-menu .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    padding: 24px !important;
    min-width: 320px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 100 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    list-style: none !important;
    margin: 0 !important;
    border: none !important;
}

.ece-nav-menu > li:hover > .sub-menu,
.ece-nav .nav.navbar-nav > li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(8px) !important;
}

/* Header text for dropdowns */
.ece-nav-menu .sub-menu::before,
.ece-nav .nav.navbar-nav .sub-menu::before {
    content: 'SELECT YOUR PROFESSION';
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-400) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
}

/* Safety menu header - target by URL */
.ece-nav-menu > li > a[href*="safetycompliance"] ~ .sub-menu::before,
.ece-nav-menu > li > a[href*="/safety/"] ~ .sub-menu::before {
    content: 'SELECT YOUR TRAINING' !important;
}

/* Learn menu header - target by URL */
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu::before {
    content: 'LEARN RESOURCES' !important;
}

/* Grid layout for profession items */
.ece-nav-menu .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
}

/* Center single item when only one profession exists (before "View All") */
.ece-nav-menu .sub-menu li:first-child:nth-last-child(2),
.ece-nav .nav.navbar-nav .sub-menu li:first-child:nth-last-child(2) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 200px !important;
}

/* Header spans full width */
.ece-nav-menu .sub-menu::before,
.ece-nav .nav.navbar-nav .sub-menu::before {
    grid-column: 1 / -1 !important;
}

/* Submenu items */
.ece-nav-menu .sub-menu li,
.ece-nav .nav.navbar-nav .sub-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ece-nav-menu .sub-menu li a,
.ece-nav .nav.navbar-nav .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ece-gray-700) !important;
    border-radius: 10px !important;
    transition: var(--ece-transition) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-nav-menu .sub-menu li a:hover,
.ece-nav .nav.navbar-nav .sub-menu li a:hover {
    background: var(--ece-gray-50) !important;
    color: var(--ece-primary) !important;
}

/* Icons for profession items via ::before */
.ece-nav-menu .sub-menu li a::before,
.ece-nav .nav.navbar-nav .sub-menu li a::before {
    content: '📖' !important; /* Default fallback icon for new professions */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05)) !important;
}

/* Electrician icon - matches both /electrician/ and /electricians/ */
.ece-nav-menu .sub-menu li a[href*="electrician"]::before,
.ece-nav-menu .sub-menu li a[href*="profession/electrician"]::before,
.ece-nav-menu .sub-menu li a[href*="learn/electricians"]::before {
    content: '⚡' !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)) !important;
}
/* Real Estate icon */
.ece-nav-menu .sub-menu li a[href*="real-estate"]::before {
    content: '🏠' !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
}
/* HVAC icon */
.ece-nav-menu .sub-menu li a[href*="hvac"]::before {
    content: '❄️' !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
}
/* Healthcare icon */
.ece-nav-menu .sub-menu li a[href*="healthcare"]::before {
    content: '🏥' !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
}
/* Plumbing icon */
.ece-nav-menu .sub-menu li a[href*="plumbing"]::before {
    content: '🔧' !important;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05)) !important;
}
/* Insurance icon */
.ece-nav-menu .sub-menu li a[href*="insurance"]::before {
    content: '🛡️' !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)) !important;
}
/* Contractor icon */
.ece-nav-menu .sub-menu li a[href*="contractor"]::before {
    content: '🏗️' !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05)) !important;
}

/* Safety items icons - specific overrides (dynamic CSS handles most icons) */
.ece-nav-menu .sub-menu li a[href*="osha-10"]::before,
.ece-nav-menu .sub-menu li a[href*="osha10"]::before,
.ece-nav-menu .sub-menu li a[href*="10-hour"]::before {
    content: '🔴' !important;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="osha-30"]::before,
.ece-nav-menu .sub-menu li a[href*="osha30"]::before,
.ece-nav-menu .sub-menu li a[href*="30-hour"]::before {
    content: '🟠' !important;
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="hipaa"]::before,
.ece-nav-menu .sub-menu li a[href*="HIPAA"]::before {
    content: '📋' !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)) !important;
}
.ece-nav-menu .sub-menu li a[href*="workplace"]::before,
.ece-nav-menu .sub-menu li a[href*="general-safety"]::before {
    content: '🏭' !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)) !important;
}

/* "View All" button style - spans full width */
.ece-nav-menu .sub-menu li:last-child,
.ece-nav .nav.navbar-nav .sub-menu li:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--ece-gray-100) !important;
}

.ece-nav-menu .sub-menu li:last-child a,
.ece-nav .nav.navbar-nav .sub-menu li:last-child a {
    justify-content: center !important;
    background: var(--ece-gray-100) !important;
    color: var(--ece-gray-700) !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
}

.ece-nav-menu .sub-menu li:last-child a::before {
    display: none !important;
}

.ece-nav-menu .sub-menu li:last-child a:hover,
.ece-nav .nav.navbar-nav .sub-menu li:last-child a:hover {
    background: var(--ece-primary) !important;
    color: white !important;
}

/* Blog and Contact Us have no submenu - hide dropdown styles by URL match */
/* Using URL matching instead of nth-child to be independent of menu order */
.ece-nav-menu > li > a[href*="/blog/"] ~ .sub-menu,
.ece-nav-menu > li > a[href*="/contact/"] ~ .sub-menu {
    display: none !important;
}

/* Learn menu - single column layout, no "View All" styling - target by URL */
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu {
    grid-template-columns: 1fr !important;
    min-width: 240px !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child {
    grid-column: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a {
    justify-content: flex-start !important;
    background: transparent !important;
    padding: 12px 16px !important;
    color: var(--ece-gray-700) !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a:hover {
    background: var(--ece-gray-50) !important;
    color: var(--ece-primary) !important;
}
.ece-nav-menu > li > a[href*="/learn/"] ~ .sub-menu li:last-child a::before {
    display: inline-flex !important;
}

/* CE Courses menu - 2 columns like Exam Prep - target by URL */
.ece-nav-menu > li > a[href*="/ce/"] ~ .sub-menu {
    grid-template-columns: repeat(2, 1fr) !important;
    min-width: 420px !important;
}

/* Nested submenus (3rd level) - not used but keeping for safety */
.ece-nav-menu .sub-menu .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
    transform: translateX(10px) !important;
}

.ece-nav-menu .sub-menu li:hover > .sub-menu,
.ece-nav .nav.navbar-nav .sub-menu li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* ============================================
   MEGA MENU STYLES (Theme's TC Mega Menu)
   ============================================ */
.ece-nav .nav.navbar-nav li.tc-menu-layout-builder > .sub-menu,
.ece-nav .nav.navbar-nav li.tc-menu-layout-column > .sub-menu,
.ece-nav .nav.navbar-nav li.widget_area > .sub-menu {
    min-width: 600px !important;
    padding: 20px !important;
}

.ece-nav .nav.navbar-nav .tc-megamenu-wrapper {
    background: white !important;
    border-radius: var(--ece-radius-lg) !important;
}

.ece-nav .nav.navbar-nav .widget-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--ece-gray-100) !important;
}

/* ============================================
   HEADER ACTIONS (Login/Profile Buttons)
   ============================================ */
.ece-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0;
}

/* Thim Login Popup Widget Styles */
.ece-header-actions .widget,
.ece-header-actions .widget_login-popup,
.ece-header-actions .thim-widget-login-popup {
    display: flex !important;
    align-items: center !important;
}

.ece-header-actions .thim-link-login,
.ece-header-actions .thim-login-popup {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ece-header-actions .thim-link-login a,
.ece-header-actions .thim-login-popup a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--ece-radius) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: var(--ece-transition) !important;
}

.ece-header-actions .thim-link-login a.login,
.ece-header-actions .thim-login-popup a.login {
    background: transparent !important;
    color: var(--ece-gray-600) !important;
    border: none !important;
}

.ece-header-actions .thim-link-login a.login:hover,
.ece-header-actions .thim-login-popup a.login:hover {
    background: var(--ece-gray-100) !important;
    color: var(--ece-gray-900) !important;
}

.ece-header-actions .thim-link-login a.register,
.ece-header-actions .thim-login-popup a.register {
    background: var(--ece-primary) !important;
    color: white !important;
    border: none !important;
}

.ece-header-actions .thim-link-login a.register:hover,
.ece-header-actions .thim-login-popup a.register:hover {
    background: var(--ece-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ece-shadow-md) !important;
}

/* Logged-in user styles */
.ece-header-actions .thim-link-login a.profile,
.ece-header-actions .thim-login-popup a.profile {
    background: transparent !important;
    color: var(--ece-gray-600) !important;
}

.ece-header-actions .thim-link-login a.profile:hover,
.ece-header-actions .thim-login-popup a.profile:hover {
    color: var(--ece-primary) !important;
}

.ece-header-actions .thim-link-login a.logout,
.ece-header-actions .thim-login-popup a.logout {
    background: transparent !important;
    color: var(--ece-gray-500) !important;
}

.ece-header-actions .thim-link-login a.logout:hover,
.ece-header-actions .thim-login-popup a.logout:hover {
    color: var(--ece-gray-700) !important;
}

/* User Profile Dropdown */
.ece-header-actions .thim-link-login.has_sub_info {
    position: relative;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile .author {
    color: var(--ece-gray-700);
    font-weight: 500;
    font-size: 14px;
}

/* Hide duplicate arrow - widget already provides one */
.ece-header-actions .thim-link-login.has_sub_info > a.profile::after {
    display: none !important;
}

/* Profile Link Styling */
.ece-header-actions .thim-link-login.has_sub_info > a.profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
}

.ece-header-actions .thim-link-login.has_sub_info > a.profile:hover {
    background: var(--ece-gray-100) !important;
}

/* Hide broken avatar images */
.ece-header-actions .thim-link-login.has_sub_info > a.profile img {
    display: none !important;
}

/* Dropdown arrow */
.ece-header-actions .thim-link-login.has_sub_info > a.profile .author::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ece-gray-500);
    transition: transform 0.2s ease;
}

.ece-header-actions .thim-link-login.has_sub_info.show > a.profile .author::after {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    padding: 8px;
    padding-top: 16px; /* Visual gap at top */
    margin: 0;
    list-style: none;
    display: none;
    z-index: 1000;
    font-family: var(--ece-font-family);
}

/* Invisible bridge to prevent hover gap */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* JS adds .show class on click */
.ece-header-actions .thim-link-login.has_sub_info.show ul.user-info {
    display: block !important;
}

/* Also show on hover */
.ece-header-actions .thim-link-login.has_sub_info:hover ul.user-info {
    display: block !important;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li {
    margin: 0;
    padding: 0;
}

/* Hide duplicate user profile at top - already shown in header */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-user {
    display: none;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--ece-gray-700);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a:hover {
    background: var(--ece-gray-50);
}

/* Icon styling with colored backgrounds */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* My Courses - Blue */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-courses a i {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.05));
    color: #2563eb;
}

/* My Orders - Green */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-orders a i {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: #10b981;
}

/* Certificates - Sober Amber */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-certificates a i {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.15), rgba(217, 119, 6, 0.05));
    color: #d97706;
}

/* Wishlist - Red */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-wishlist a i {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    color: #ef4444;
}

/* Edit Profile / Settings - Gray */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-settings a i {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
    color: #6b7280;
}

/* Referrals and other items - Purple */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li:not([class*="menu-item-"]) a i,
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li[class=""] a i {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
    color: #8b5cf6;
}

/* Logout styling */
.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out {
    border-top: 1px solid var(--ece-gray-200);
    margin-top: 8px;
    padding-top: 8px;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a {
    color: #dc3545;
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a:hover {
    background: rgba(220, 53, 69, 0.06);
}

.ece-header-actions .thim-link-login.has_sub_info ul.user-info li.menu-item-log-out a i {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05));
    color: #dc3545;
}

.ece-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--ece-radius) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--ece-transition) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.ece-btn-ghost {
    background: transparent !important;
    color: var(--ece-gray-600) !important;
}

.ece-btn-ghost:hover {
    background: var(--ece-gray-100) !important;
    color: var(--ece-gray-900) !important;
}

.ece-btn-primary {
    background: #f5a623 !important;
    color: white !important;
    font-weight: 700 !important;
}

.ece-btn-primary:hover {
    background: #e09100 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ece-shadow-md) !important;
}

.ece-btn-outline {
    background: transparent !important;
    border: 1px solid var(--ece-gray-300) !important;
    color: var(--ece-gray-700) !important;
}

.ece-btn-outline:hover {
    border-color: var(--ece-gray-400) !important;
    background: var(--ece-gray-50) !important;
}

.ece-btn-block {
    display: flex !important;
    width: 100% !important;
}

/* ============================================
   MOBILE MENU TOGGLE
   ============================================ */
.ece-mobile-toggle {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 10px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.ece-mobile-toggle .icon-bar {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: var(--ece-gray-700) !important;
    border-radius: 2px !important;
    transition: var(--ece-transition) !important;
}

.ece-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* Mobile Auth in mobile menu */
.mobile-menu-wrapper .ece-mobile-auth {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px;
    margin-top: 16px;
    border-top: 1px solid var(--ece-gray-200);
}

/* ============================================
   BODY PADDING FOR FIXED HEADER
   ============================================ */
body.ece-modern-header {
    padding-top: 72px !important;
}

body.ece-modern-header.admin-bar {
    padding-top: 72px !important;
}

body.ece-modern-header.admin-bar .ece-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.ece-modern-header.admin-bar .ece-header {
        top: 46px !important;
    }
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 1024px) {
    .ece-nav-menu > li > a,
    .ece-nav .nav.navbar-nav > li > a {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .ece-header-inner {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .ece-nav,
    .ece-header-actions {
        display: none !important;
    }

    .ece-mobile-toggle {
        display: flex !important;
    }

    /* Mobile header height */
    .ece-header {
        height: 64px !important;
    }

    .ece-header-inner {
        height: 64px;
    }

    body.ece-modern-header {
        padding-top: 64px !important;
    }

    .ece-header-logo img {
        max-height: 42px;
    }
}

/* ============================================
   HIDE THEME'S OLD HEADER ELEMENTS
   ============================================ */
body.ece-modern-header .thim-nav-wrapper:not(.ece-nav),
body.ece-modern-header #masthead .thim-nav-wrapper,
body.ece-modern-header #masthead .navigation,
body.ece-modern-header #masthead .toolbar-wrapper {
    display: none !important;
}

/* Keep wrapper container structure for rest of page */
body.ece-modern-header #wrapper-container {
    padding-top: 0 !important;
}

/* ============================================
   MINI CART - Position dropdown below cart icon
   ============================================ */
.ece-header-actions .widget_shopping_cart,
.ece-header-actions .woocommerce.widget_shopping_cart {
    display: block;
    position: relative;
}

/* Force dropdown to appear BELOW cart icon */
.ece-header-actions .widget_shopping_cart_content {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 15px !important;
    z-index: 9999 !important;
}

/* Hide menu_right sidebar items (we use explicit buttons) */
.ece-nav-menu > li.menu-right,
.ece-nav .nav.navbar-nav > li.menu-right {
    display: none !important;
}

/* Cart visibility - controlled by JS classes based on cart contents
   Note: Guest checkout is disabled, so guests can't add items.
   The .cart-empty class effectively hides the cart for guests. */

/* Hide cart when empty (JS adds .cart-empty class after fragments load) */
.ece-header-actions .widget_shopping_cart.cart-empty {
    display: none !important;
}

/* Show cart when has items (JS adds .cart-has-items class) */
.ece-header-actions .widget_shopping_cart.cart-has-items {
    display: block !important;
}

/* ============================================
   CE MEGA MENU WITH STATE SELECTION (V3)
   Full-width dropdown with profession -> state flow
   ============================================ */

/* Hide default submenu for CE Courses (1st menu item) - always hide when mega menu exists */
.ce-mega-menu-enabled .ece-nav-menu > li:first-child > .sub-menu,
.ce-mega-menu-enabled .ece-nav .nav.navbar-nav > li:first-child > .sub-menu,
.ece-nav-menu > li:first-child.ce-mega-active > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Also hide on hover when mega menu is enabled */
.ce-mega-menu-enabled .ece-nav-menu > li:first-child:hover > .sub-menu,
.ce-mega-menu-enabled .ece-nav .nav.navbar-nav > li:first-child:hover > .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CE Mega Menu Wrapper - Full Width */
.ce-mega-menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
    border-top: none;
    z-index: 9998;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.ce-mega-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Admin bar offset */
body.admin-bar .ce-mega-menu {
    top: 104px; /* 72px header + 32px admin bar */
}

@media screen and (max-width: 782px) {
    body.admin-bar .ce-mega-menu {
        top: 110px; /* 64px header + 46px admin bar on mobile */
    }
}

.ce-mega-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}

/* Mega Menu Header */
.ce-mega-menu-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.ce-mega-menu-back {
    display: none !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--ece-gray-600) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--ece-gray-200) !important;
    background: var(--ece-gray-50) !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ce-mega-menu-back:hover {
    background: var(--ece-gray-100) !important;
    border-color: var(--ece-gray-300) !important;
    color: var(--ece-gray-800) !important;
}

.ce-mega-menu-back:focus {
    outline: none !important;
    border-color: var(--ece-gray-300) !important;
}

.ce-mega-menu.state-view .ce-mega-menu-back {
    display: flex !important;
}

/* Hide back button in single-profession mode (only one profession enabled) */
.ce-mega-menu.single-profession-mode .ce-mega-menu-back {
    display: none !important;
}

.ce-mega-menu-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ece-gray-400);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    background: var(--ece-gray-50);
    border-radius: 6px;
}

.ce-mega-menu.state-view .ce-mega-menu-title {
    display: none;
}

/* Professions Grid - Horizontal Pills */
.ce-mega-menu-professions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ce-mega-menu.state-view .ce-mega-menu-professions {
    display: none;
}

.ce-mega-menu-profession {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px 12px 12px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--ece-gray-200) !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ece-gray-700) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.ce-mega-menu-profession:hover {
    background: #fff !important;
    border-color: var(--ece-gray-300) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    color: var(--ece-gray-900) !important;
}

.ce-mega-menu-profession:focus {
    outline: none !important;
    border-color: var(--ece-gray-300) !important;
}

.ce-mega-menu-profession-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(107, 114, 128, 0.04));
}

/* Profession-specific icon colors */
.ce-mega-menu-profession[data-profession="electrician"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
}
.ce-mega-menu-profession[data-profession="hvac"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
}
.ce-mega-menu-profession[data-profession="plumber"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(107, 114, 128, 0.05));
}
.ce-mega-menu-profession[data-profession="contractor"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.05));
}
.ce-mega-menu-profession[data-profession="real-estate"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
}
.ce-mega-menu-profession[data-profession="insurance"] .ce-mega-menu-profession-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
}

.ce-mega-menu-profession-arrow {
    font-size: 14px;
    color: var(--ece-gray-400);
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.ce-mega-menu-profession:hover .ce-mega-menu-profession-arrow {
    transform: translateX(3px);
    color: var(--ece-gray-600);
}

/* States Panel */
.ce-mega-menu-states {
    display: none;
}

.ce-mega-menu.state-view .ce-mega-menu-states {
    display: block;
    animation: ceMegaFadeIn 0.2s ease;
}

@keyframes ceMegaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Selected Profession Badge - hidden by default, shown in header when in state view */
.ce-mega-menu-selected-badge {
    display: none;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
    padding: 10px 18px 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

.ce-mega-menu-selected-badge .ce-mega-menu-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.95);
    border-radius: 8px;
    font-size: 16px;
}

.ce-mega-menu.state-view .ce-mega-menu-selected-badge {
    display: inline-flex;
}

/* Profession-specific badge colors */
.ce-mega-menu.state-view[data-profession="electrician"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}
.ce-mega-menu.state-view[data-profession="hvac"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
.ce-mega-menu.state-view[data-profession="plumber"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.35);
}
.ce-mega-menu.state-view[data-profession="contractor"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
.ce-mega-menu.state-view[data-profession="real-estate"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.ce-mega-menu.state-view[data-profession="insurance"] .ce-mega-menu-selected-badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

/* States Grid - Pills Layout */
.ce-mega-menu-states-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.ce-mega-menu-state {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--ece-gray-700);
    text-align: center;
    white-space: nowrap;
    background: #f8f9fa;
    border: 1px solid var(--ece-gray-200);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    display: block;
}

.ce-mega-menu-state:hover {
    background: #1e3a5a;
    color: white;
    border-color: #1e3a5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 90, 0.25);
}

.ce-mega-menu-state:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(30, 58, 90, 0.2);
}

/* Disabled state */
.ce-mega-menu-state.disabled {
    color: var(--ece-gray-300);
    background: var(--ece-gray-50);
    border-color: var(--ece-gray-100);
    cursor: not-allowed;
    pointer-events: none;
}

/* View All Link */
.ce-mega-menu-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 20px;
    color: #1e3a5a;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #1e3a5a;
    background: transparent;
    transition: all 0.2s ease;
}

.ce-mega-menu-view-all:hover {
    background: #1e3a5a;
    border-color: #1e3a5a;
    color: white;
}

/* ============================================
   CE MEGA MENU RESPONSIVE STYLES
   ============================================ */

/* Large tablets / small desktops */
@media (max-width: 1200px) {
    .ce-mega-menu-states-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .ce-mega-menu-professions {
        gap: 10px;
    }

    .ce-mega-menu-profession {
        padding: 10px 14px 10px 10px !important;
    }

    .ce-mega-menu-profession-icon {
        width: 32px;
        height: 32px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .ce-mega-menu-content {
        padding: 20px 24px;
    }

    .ce-mega-menu-states-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .ce-mega-menu-state {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Hide on mobile - mobile menu will handle this differently */
@media (max-width: 768px) {
    .ce-mega-menu {
        display: none !important;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .ce-mega-menu-state:hover {
        transform: none;
        box-shadow: none;
    }

    .ce-mega-menu-state:active {
        background: #1e3a5a;
        color: white;
        border-color: #1e3a5a;
    }

    .ce-mega-menu-profession:hover {
        transform: none;
        box-shadow: none;
    }

    .ce-mega-menu-profession:active {
        background: var(--ece-gray-50);
        border-color: var(--ece-gray-300);
    }
}