@import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&display=swap');

.site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    padding: 0 !important;
    background: transparent !important;
}

.header-banner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 30px clamp(40px, 6vw, 120px) !important;
    box-sizing: border-box !important;
    height: auto !important;
    gap: 50px !important;
}

.header-logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.header-logo img {
    width: clamp(100px, 8vw, 140px) !important;
    height: auto !important;
    object-fit: contain !important;
}

.header-nav-desktop {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: center !important;
}

.header-nav-desktop .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 45px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-nav-desktop .nav-menu li a {
    font-family: 'Clash Display', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(15px, 1.1vw, 18px) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.3s ease, font-weight 0.1s ease !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
}

.header-nav-desktop .nav-menu li a:hover {
    color: #1A3C6E !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #1A3C6E !important;
}

.header-cta {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.header-cta .btn-quote {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 30px !important;
    background: #FFFFFF !important;
    border-radius: 100px !important;
    font-family: 'Clash Display', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

.header-cta .btn-quote:hover {
    background: #1A3C6E !important;
    color: #ffffff !important;
}

/* ===== FULLSCREEN MOBILE NAV ===== */
.header-nav {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0a0f1e !important;
    z-index: 999999 !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

.header-nav.active {
    display: flex !important;
}

.header-nav .nav-menu {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-nav .nav-menu li a {
    font-family: 'Clash Display', sans-serif !important;
    font-size: 28px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease !important;
}

.header-nav .nav-menu li a:hover {
    color: #b8960c !important;
}

/* X close button inside mobile nav */
.nav-close {
    display: none;
    position: absolute !important;
    top: 28px !important;
    right: 30px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 5px !important;
    z-index: 9999999 !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.header-nav.active .nav-close {
    display: flex !important;
}

.nav-close span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background: #ffffff !important;
}

.nav-close span:nth-child(1) {
    transform: translateY(1px) rotate(45deg) !important;
}

.nav-close span:nth-child(2) {
    transform: translateY(-1px) rotate(-45deg) !important;
}

/* ===== HAMBURGER ===== */
.mobile-toggle {
    display: none;
    flex-direction: column !important;
    gap: 5px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 5px !important;
    z-index: 9999999 !important;
    position: absolute !important;
    top: 25px !important;
    right: 24px !important;
}

.mobile-toggle span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* Hide hamburger when menu is open */
.mobile-toggle.open {
    display: none !important;
}

@media (max-width: 768px) {
    .header-banner {
        padding: 20px 24px !important;
        gap: 0 !important;
    }

    .header-nav-desktop {
        display: none !important;
    }

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

    .header-cta {
        display: none !important;
    }
}