/* ======================================================================
   NA WEBSITE THEME v3 — Header & Navigation
   ====================================================================== */

/* ── Force Inter everywhere (except icon fonts) ─────────────────── */
#wrapwrap, #wrapwrap *:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.oi):not([class*="fa-"]) {
    font-family: var(--naw-font) !important;
}

/* ── Header — let the platform handle sticky/fixed, we only style it ──── */
/* Do NOT set position: sticky/fixed here — the platform's JS manages that
   via the o_header_affixed class. Overriding causes scroll stutter. */

/* ── Desktop navbar — default state ─────────────────────────────── */
header#top nav.navbar.navbar-expand-lg {
    padding: 14px 0 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    transition: padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

/* ── Desktop navbar — affixed (scrolled down) ────────────────────── */
header#top.o_header_affixed nav.navbar.navbar-expand-lg {
    padding: 8px 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

/* Smooth the fixed positioning the platform applies */
header#top.o_header_affixed {
    transition: none !important;
}
header#top.o_header_affixed nav.navbar {
    animation: nawSlideDown 0.25s ease-out !important;
}
@keyframes nawSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── Desktop layout — no logo, centered nav, actions on right ──── */
@media (min-width: 992px) {
    /* Hide logo on desktop — it lives on the hero instead */
    header#top .navbar-brand.logo {
        display: none !important;
    }

    /* Container: flex row, centered alignment */
    header#top nav.navbar.navbar-expand-lg > .container,
    header#top nav.navbar.navbar-expand-lg > .container-fluid,
    header#top nav.navbar.navbar-expand-lg > .container-xl {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    /* Nav links — centered with equal breathing room */
    header#top #top_menu.navbar-nav {
        flex: 0 1 auto !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 auto !important;
    }
    header#top #top_menu.navbar-nav.me-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Right-side actions — anchored right, doesn't push nav */
    header#top nav.navbar.navbar-expand-lg .navbar-nav.justify-content-end {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        gap: 8px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
}

/* ── Logo — mobile only (stays visible) ─────────────────────────── */
header#top .navbar-brand.logo img {
    max-height: 38px !important;
    transition: all 0.3s ease !important;
}

/* ── Nav links ──────────────────────────────────────────────────── */
header#top #top_menu.navbar-nav > li.nav-item > a.nav-link {
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    color: var(--naw-gray-600) !important;
    padding: 9px 20px !important;
    border-radius: var(--naw-radius-sm) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.01em !important;
}

header#top #top_menu.navbar-nav > li.nav-item > a.nav-link:hover {
    color: var(--naw-primary) !important;
    background: var(--naw-primary-50) !important;
}

header#top #top_menu.navbar-nav > li.nav-item > a.nav-link.active {
    color: var(--naw-primary) !important;
    font-weight: 600 !important;
    background: var(--naw-primary-50) !important;
}

/* ── Phone link — subtle, smaller on desktop ────────────────────── */
header#top a[href^="tel:"] {
    font-weight: 500 !important;
    color: var(--naw-gray-400) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em !important;
}
header#top a[href^="tel:"]:hover {
    color: var(--naw-primary) !important;
}

/* ── Sign in ────────────────────────────────────────────────────── */
header#top a.o_nav_link_btn.nav-link {
    border-radius: var(--naw-radius-full) !important;
    border-color: var(--naw-gray-200) !important;
    color: var(--naw-gray-500) !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    transition: all 0.2s ease !important;
}
header#top a.o_nav_link_btn.nav-link:hover {
    border-color: var(--naw-primary) !important;
    color: var(--naw-primary) !important;
    background: var(--naw-primary-50) !important;
}

/* ── Contact Us CTA ─────────────────────────────────────────────── */
header#top .btn.btn-primary.btn_cta,
header#top a.btn.btn-primary.btn_cta {
    background: linear-gradient(135deg, var(--naw-primary) 0%, var(--naw-primary-light) 100%) !important;
    border: none !important;
    border-radius: var(--naw-radius-full) !important;
    padding: 8px 22px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    box-shadow: 0 4px 16px rgba(var(--naw-primary-rgb), 0.25) !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    color: #fff !important;
    white-space: nowrap !important;
}
header#top .btn.btn-primary.btn_cta:hover,
header#top a.btn.btn-primary.btn_cta:hover {
    box-shadow: 0 6px 28px rgba(var(--naw-primary-rgb), 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ── Sign Up button ─────────────────────────────────────────────── */
header#top .naw-signup-btn {
    background: transparent !important;
    border: 2px solid var(--naw-primary) !important;
    border-radius: var(--naw-radius-full) !important;
    padding: 7px 20px !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--naw-primary) !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
header#top .naw-signup-btn:hover {
    background: var(--naw-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(var(--naw-primary-rgb), 0.3) !important;
    transform: translateY(-1px) !important;
}
/* Hide Sign Up when user is already logged in */
header#top .o_connected_user .naw-signup-btn-wrap {
    display: none !important;
}

/* ── Search trigger ─────────────────────────────────────────────── */
header#top a[data-bs-target="#o_search_modal"] {
    background: var(--naw-gray-50) !important;
    border: 1px solid var(--naw-gray-100) !important;
    transition: all 0.2s ease !important;
}
header#top a[data-bs-target="#o_search_modal"]:hover {
    background: var(--naw-primary-50) !important;
    border-color: var(--naw-primary-100) !important;
}

/* ── Search modal ───────────────────────────────────────────────── */
#o_search_modal .modal-content {
    border-radius: var(--naw-radius-lg) !important;
    border: none !important;
    box-shadow: var(--naw-shadow-xl) !important;
}
#o_search_modal .form-control {
    border-radius: var(--naw-radius) !important;
    border: 2px solid var(--naw-gray-200) !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
}
#o_search_modal .form-control:focus {
    border-color: var(--naw-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--naw-primary-rgb), 0.1) !important;
}

/* ── Dropdowns ──────────────────────────────────────────────────── */
header#top .dropdown-menu {
    border: 1px solid var(--naw-gray-100) !important;
    border-radius: var(--naw-radius) !important;
    box-shadow: var(--naw-shadow-lg) !important;
    padding: 6px !important;
    animation: nawDrop 0.18s ease-out !important;
}
header#top .dropdown-item {
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
}
header#top .dropdown-item:hover {
    background: var(--naw-primary-50) !important;
    color: var(--naw-primary) !important;
}
@keyframes nawDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile header ──────────────────────────────────────────────── */
header#top nav.o_header_mobile {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03) !important;
}

header#top .offcanvas.o_navbar_mobile {
    width: 85% !important;
    max-width: 360px !important;
    border-left: none !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.1) !important;
}

header#top .offcanvas.o_navbar_mobile .nav-link {
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    border-radius: var(--naw-radius-sm) !important;
    transition: all 0.15s ease !important;
}

header#top .offcanvas.o_navbar_mobile .nav-link:hover,
header#top .offcanvas.o_navbar_mobile .nav-link.active {
    background: var(--naw-primary-50) !important;
    color: var(--naw-primary) !important;
}