/* premium-header.css */

/* --- 1. Sticky Overlay Structure --- */
/* Make header absolute so it sits ON TOP of the hero, not above it */
.main-header,
.main-header-two {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Remove default backgrounds/shadows from inner wrappers */
.main-menu,
.main-menu__wrapper,
.main-menu__wrapper-inner {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 2. Vertical Compression --- */
/* Hide the top bar (contact/socials) completely to save ~40-50px */
.main-menu__top {
    display: none !important;
}

/* Reduce vertical padding for the navigation items */
/* Existing was 45px top/bottom, reducing to 20px */
.main-menu .main-menu__list>li {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

/* Reduce logo padding */
/* Existing was 35px 0, reducing to 10px 0 */
.main-menu__logo {
    padding: 15px 0 !important;
}

/* Scale down logo slightly to fit slimmer profile */
.main-menu__logo img {
    max-width: 130px;
    height: auto;
    filter: brightness(0) invert(1);
    /* Invert to white for dark background */
    transition: all 0.3s ease;
}

/* --- 3. White Text Contrast --- */
/* Force links to be white to be visible on the dark hero background */
.main-menu .main-menu__list>li>a {
    color: #ffffff !important;
}

/* Hover Accent */
.main-menu .main-menu__list>li>a:hover {
    color: var(--anity-base-light, #4A90E2) !important;
}

/* Right side contact info to white */
.main-menu__call-icon i,
.main-menu__call-number a,
.main-menu__call-sub-title {
    color: #ffffff !important;
}

.main-menu__call-icon {
    background-color: rgba(255, 255, 255, 0.2) !important;
    /* Semi-transparent icon bg */
}

/* --- Modern "Crystal Touch" CTA Button --- */
.main-menu__btn-box .thm-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff !important;

    /* Glassmorphism Base */
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important;
    /* Full Pill Shape */

    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Hover State: "Ignite" */
.main-menu__btn-box .thm-btn:hover {
    background: #ffffff !important;
    color: #05014A !important;
    /* Deep Navy Text */
    border-color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(74, 144, 226, 0.3);
    /* Subtle Blue Glow */
    transform: translateY(-2px);
}

/* Remove default :before/:after from thm-btn if they exist/interfere */
.main-menu__btn-box .thm-btn:before,
.main-menu__btn-box .thm-btn:after {
    display: none !important;
}

/* Icon Animation */
.main-menu__btn-box .thm-btn i {
    font-size: 14px;
    transition: transform 0.4s ease;
}

.main-menu__btn-box .thm-btn:hover i {
    transform: translateX(4px);
    /* Slide arrow on hover */
}

/* Clean up span if it was wrapper */
.main-menu__btn-box .thm-btn span {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 4. Sticky Glassmorphic Header --- */
/* This element appears when scrolling */
.stricky-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    /* Deep Navy Glass Effect */
    background: rgba(5, 5, 51, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    visibility: visible !important;
    /* Javascript usually toggles this, but we ensure style is ready */
}

/* Ensure sticky items are also white */
.stricky-header .main-menu__list>li>a {
    color: #ffffff !important;
}

/* Shrink logo and padding on sticky */
.stricky-header .main-menu__logo img {
    max-width: 100px !important;
}

.stricky-header .main-menu__list>li {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* --- 5. Mobile Toggle --- */
.mobile-nav__toggler {
    color: #ffffff !important;
    font-size: 24px;
}

/* --- 6. Hero Adjustment --- */
/* Since header is absolute, it no longer takes up space in the document flow.
   The hero will naturally start at the top of the viewport.
   We just ensure it has no top margin/padding pushing it down. */
.premium-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- 7. Mobile Responsiveness --- */
@media (max-width: 991px) {

    /* 1. Ensure Header Wrapper has padding */
    .main-header .main-menu__wrapper .main-menu__wrapper-inner {
        padding: 15px 0 !important;
    }

    /* 2. Resize Logo for Mobile */
    .main-menu .main-menu__logo img {
        max-width: 100px !important;
    }

    /* 3. Show Hamburger Menu (Mobile Toggler) */
    .mobile-nav__toggler {
        display: block !important;
        color: #ffffff !important;
        /* Default to white for dark hero */
        font-size: 24px;
        margin-left: auto;
        /* Push to right */
        cursor: pointer;
        z-index: 10000;
    }

    /* 4. Hide Desktop Elements */
    .main-menu__list,
    .main-menu__btn-box,
    .main-menu__call {
        display: none !important;
    }

    /* 5. Ensure Container is flexible */
    .main-menu__wrapper-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}