/* ========================================
   MODERN 2025 HEADER STYLES V2
   Ultra Specific Selectors to Override Everything
   ======================================== */

/* Root Variables */
:root {
    --baylab-primary: #ff5e15;
    --baylab-primary-dark: #e54d0a;
    --baylab-primary-light: #ff7a3d;
    --baylab-navy: #002052;
    --baylab-navy-dark: #001a40;
    --baylab-navy-light: #003075;
    --baylab-text-dark: #1a1a1a;
    --baylab-text-light: #666;
    --baylab-white: #ffffff;
    --baylab-gray-100: #f8f9fa;
    --baylab-gray-200: #e9ecef;
    --baylab-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --baylab-shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --baylab-shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
}

/* Hide old header if exists */
header:not(.modern-header) {
    display: none !important;
}

/* Ensure body allows sticky */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Modern Header Base - STICKY */
header.modern-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
}

/* Sticky Container for Topbar + Navigation */
header.modern-header .sticky-header-wrapper,
.sticky-header-wrapper {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
    background: var(--baylab-white) !important;
    box-shadow: var(--baylab-shadow-sm) !important;
    transition: all 0.3s ease !important;
}

/* Top Bar - Inside Sticky */
header.modern-header .header-topbar {
    background: linear-gradient(135deg, var(--baylab-navy) 0%, var(--baylab-navy-dark) 100%) !important;
    padding: 10px 0 !important;
    display: block !important;
}

header.modern-header .topbar-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

header.modern-header .topbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    flex-wrap: wrap !important;
}

header.modern-header .topbar-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--baylab-white) !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

header.modern-header .topbar-item i {
    color: var(--baylab-primary) !important;
    font-size: 14px !important;
}

header.modern-header .topbar-item a {
    color: var(--baylab-white) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

header.modern-header .topbar-item a:hover {
    color: var(--baylab-primary) !important;
}

header.modern-header .topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

header.modern-header .social-icon {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: var(--baylab-white) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(10px) !important;
}

header.modern-header .social-icon:hover {
    background: var(--baylab-primary) !important;
    transform: translateY(-3px) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 94, 21, 0.4) !important;
}

header.modern-header .social-icon.whatsapp:hover {
    background: #25D366 !important;
}

header.modern-header .social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

/* Main Navigation - Inside Sticky */
header.modern-header .main-navigation {
    background: var(--baylab-white) !important;
    padding: 15px 0 !important;
    display: block !important;
}

header.modern-header .nav-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

/* Logo */
header.modern-header .logo-container {
    flex-shrink: 0 !important;
}

header.modern-header .logo-link {
    display: block !important;
    transition: transform 0.2s ease !important;
}

header.modern-header .logo-link:hover {
    transform: scale(1.05) !important;
}

header.modern-header .logo-link img {
    height: 50px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* Menu Container */
header.modern-header .menu-container {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

/* Navigation Menu */
header.modern-header .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

header.modern-header .nav-menu > li {
    position: relative !important;
    list-style: none !important;
}

header.modern-header .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 12px 18px !important;
    color: var(--baylab-text-dark) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

header.modern-header .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 60% !important;
    height: 2px !important;
    background: var(--baylab-primary) !important;
    transition: transform 0.2s ease !important;
}

header.modern-header .nav-link:hover,
header.modern-header .nav-link.active {
    color: var(--baylab-primary) !important;
    background: rgba(255, 94, 21, 0.05) !important;
}

header.modern-header .nav-link:hover::after,
header.modern-header .nav-link.active::after {
    transform: translateX(-50%) scaleX(1) !important;
}

header.modern-header .dropdown-icon {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
}

/* Dropdown Menu */
header.modern-header .has-dropdown {
    position: relative !important;
}

header.modern-header .has-dropdown:hover .dropdown-icon {
    transform: rotate(180deg) !important;
}

/* Extend hover area to prevent menu from closing */
header.modern-header .has-dropdown::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 12px !important;
    display: block !important;
}

header.modern-header .nav-menu .has-dropdown .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    background: var(--baylab-white) !important;
    border-radius: 12px !important;
    box-shadow: var(--baylab-shadow-lg) !important;
    padding: 12px 8px !important;
    list-style: none !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s !important;
    border: 1px solid var(--baylab-gray-200) !important;
    z-index: 10001 !important;
    pointer-events: none !important;
    display: block !important;
}

header.modern-header .nav-menu .has-dropdown:hover .dropdown-menu,
header.modern-header .nav-menu .has-dropdown:focus-within .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s !important;
}

header.modern-header .dropdown-link {
    display: block !important;
    padding: 14px 18px !important;
    color: var(--baylab-text-dark) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 2px !important;
}

header.modern-header .dropdown-link:hover,
header.modern-header .dropdown-link.active {
    background: rgba(255, 94, 21, 0.08) !important;
    color: var(--baylab-primary) !important;
    transform: translateX(5px) !important;
}

/* CTA Button */
header.modern-header .cta-button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, var(--baylab-primary) 0%, var(--baylab-primary-dark) 100%) !important;
    color: var(--baylab-white) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 4px 15px rgba(255, 94, 21, 0.3) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: none !important;
}

header.modern-header .cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 94, 21, 0.4) !important;
    background: linear-gradient(135deg, var(--baylab-primary-dark) 0%, var(--baylab-primary) 100%) !important;
}

header.modern-header .cta-button i {
    animation: pulse 2s infinite !important;
}

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

/* Mobile Toggle */
header.modern-header .mobile-toggle {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    z-index: 10001 !important;
}

header.modern-header .hamburger-line {
    width: 28px !important;
    height: 3px !important;
    background: var(--baylab-text-dark) !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
}

header.modern-header .mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px) !important;
}

header.modern-header .mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
}

header.modern-header .mobile-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
}

/* Mobile Menu */
header.modern-header .mobile-menu-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 320px !important;
    height: 100vh !important;
    background: var(--baylab-white) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1) !important;
    z-index: 10000 !important;
    transition: right 0.5s ease !important;
    overflow-y: auto !important;
}

header.modern-header .mobile-menu-wrapper.active {
    right: 0 !important;
}

header.modern-header .mobile-menu-content {
    padding: 80px 20px 30px !important;
}

header.modern-header .mobile-nav-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

header.modern-header .mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px 20px !important;
    color: var(--baylab-text-dark) !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    margin-bottom: 5px !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

header.modern-header .mobile-nav-link:hover,
header.modern-header .mobile-nav-link.active {
    background: rgba(255, 94, 21, 0.08) !important;
    color: var(--baylab-primary) !important;
    transform: translateX(5px) !important;
}

header.modern-header .mobile-nav-link i {
    font-size: 18px !important;
    width: 24px !important;
}

header.modern-header .mobile-dropdown-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
    background: none !important;
    border: none !important;
    color: var(--baylab-text-dark) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    margin-bottom: 5px !important;
    text-align: left !important;
}

header.modern-header .mobile-dropdown-toggle span {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

header.modern-header .mobile-dropdown-toggle:hover {
    background: rgba(255, 94, 21, 0.05) !important;
}

header.modern-header .mobile-dropdown-toggle i:last-child {
    transition: transform 0.2s ease !important;
}

header.modern-header .mobile-dropdown-toggle[aria-expanded="true"] i:last-child {
    transform: rotate(180deg) !important;
}

header.modern-header .mobile-dropdown-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 0 36px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
}

header.modern-header .mobile-dropdown-menu.active {
    max-height: 300px !important;
}

header.modern-header .mobile-cta {
    margin-top: 30px !important;
    padding-top: 30px !important;
    border-top: 1px solid var(--baylab-gray-200) !important;
}

header.modern-header .mobile-cta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 16px !important;
    background: linear-gradient(135deg, var(--baylab-primary) 0%, var(--baylab-primary-dark) 100%) !important;
    color: var(--baylab-white) !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    box-shadow: 0 4px 15px rgba(255, 94, 21, 0.3) !important;
    transition: all 0.2s ease !important;
}

header.modern-header .mobile-cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 94, 21, 0.4) !important;
}

/* Keywords Ticker - NOT Sticky */
header.modern-header .keywords-ticker {
    background: linear-gradient(135deg, var(--baylab-primary) 0%, var(--baylab-primary-dark) 100%) !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

header.modern-header .ticker-wrapper {
    width: 100% !important;
    overflow: hidden !important;
}

header.modern-header .ticker-content {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: ticker 30s linear infinite !important;
    white-space: nowrap !important;
}

header.modern-header .ticker-content li {
    padding: 0 30px !important;
    flex-shrink: 0 !important;
}

header.modern-header .ticker-content li.separator {
    padding: 0 15px !important;
    color: var(--baylab-white) !important;
    opacity: 0.6 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
}

header.modern-header .ticker-content a {
    color: var(--baylab-white) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

header.modern-header .ticker-content a:hover {
    transform: scale(1.05) !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 1024px) {
    header.modern-header .menu-container {
        display: none !important;
    }
    
    header.modern-header .mobile-toggle {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    header.modern-header .header-topbar {
        padding: 8px 0 !important;
        font-size: 12px !important;
    }
    
    header.modern-header .topbar-item:nth-child(3) {
        display: none !important;
    }
    
    header.modern-header .logo-link img {
        height: 40px !important;
    }
    
    header.modern-header .mobile-menu-wrapper {
        width: 280px !important;
    }
}

@media (max-width: 480px) {
    header.modern-header .topbar-item:nth-child(2) {
        display: none !important;
    }
    
    header.modern-header .logo-link img {
        height: 35px !important;
    }
    
    header.modern-header .mobile-menu-wrapper {
        width: 100% !important;
    }
}


/* Extra Strong Dropdown Rules - Override Everything */
.modern-header .has-dropdown .dropdown-menu,
header.modern-header .has-dropdown .dropdown-menu,
.modern-header .nav-menu .has-dropdown .dropdown-menu {
    display: block !important;
}

.modern-header .has-dropdown:hover > .dropdown-menu,
header.modern-header .has-dropdown:hover > .dropdown-menu,
.modern-header .nav-menu .has-dropdown:hover > .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}