/* ============================================================
   Navbar — Modern 2026 Look (site-wide)
   Covers: top mini bar, fixed main navbar, dropdowns, mobile.
   ============================================================ */

/* ---- top mini bar ---- */
#top_mini-navbar {
    background: #18372f;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    height: 2.4rem;
}

#top_mini-navbar .navbar-brand {
    padding: .3rem 0;
}

#top_mini-navbar .mini-brand {
    color: rgba(255, 255, 255, .82);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#top_mini-navbar .nav-link {
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    padding: .35rem .55rem;
    transition: color .2s ease;
}

#top_mini-navbar .nav-link:hover,
#top_mini-navbar .nav-link:focus-visible {
    color: #e9b65d;
}

#top_mini-navbar .nav-link i {
    font-size: .95rem;
    line-height: 1;
}

/* ---- main fixed navbar ---- */
/* Sit flush under the 2.4rem mini bar on desktop (styles.css still assumes
   the old 3.4rem bar). Below 976px the mini bar is hidden and styles.css
   already resets the offset, so leave mobile untouched. */
@media (min-width: 976px) {
    .navbar_top_space {
        margin-top: 2.4rem;
    }
}

.navbar_top_space.bg-color_main_nav {
    background: rgba(253, 251, 246, .92);
    border-bottom: 1px solid rgba(24, 55, 47, .1);
    box-shadow: 0 10px 30px rgba(19, 47, 39, .07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar_top_space .nav-link {
    color: #18372f;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .75rem .9rem;
    position: relative;
    transition: color .25s ease;
}

.navbar_top_space .nav-link:hover,
.navbar_top_space .nav-link:focus-visible {
    color: #e96d3d;
}

.navbar_top_space .nav-link.active {
    color: #e96d3d;
}

/* animated underline indicator */
.navbar_top_space .nav-link::after {
    background: linear-gradient(90deg, #e96d3d, #e9b65d);
    border-radius: 2px;
    bottom: .3rem;
    content: "";
    height: 2px;
    left: .9rem;
    position: absolute;
    right: .9rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.navbar_top_space .nav-link:hover::after,
.navbar_top_space .nav-link.active::after {
    transform: scaleX(1);
}

.navbar_top_space .nav-link:focus-visible {
    outline: 2px solid #e96d3d;
    outline-offset: 2px;
}

/* ---- dropdown menus ---- */
.navbar_top_space .dropdown-menu {
    background: #fdfbf6;
    border: 1px solid rgba(24, 55, 47, .1);
    border-radius: .9rem;
    box-shadow: 0 18px 40px rgba(19, 47, 39, .14);
    padding: .45rem;
}

.navbar_top_space .dropdown-item {
    border-radius: .5rem;
    color: #18372f;
    font-size: .85rem;
    font-weight: 500;
    padding: .55rem .8rem;
    transition: background .2s ease, color .2s ease;
}

.navbar_top_space .dropdown-item:hover,
.navbar_top_space .dropdown-item:focus-visible {
    background: rgba(24, 55, 47, .06);
    color: #e96d3d;
}

.navbar_top_space .dropdown-item:active {
    background: #18372f;
    color: #fff;
}

.navbar_top_space .dropdown-divider {
    border-color: rgba(24, 55, 47, .1);
    margin: .35rem .5rem;
}

.navbar_top_space .dropdown-toggle::after {
    font-size: .7rem;
    vertical-align: middle;
}

/* ---- hamburger button ---- */
.navbar_top_space .navbar-toggler {
    border: 1px solid rgba(24, 55, 47, .18);
    border-radius: .55rem;
    padding: .35rem .55rem;
}

.navbar_top_space .navbar-toggler:focus {
    box-shadow: none;
}

.navbar_top_space .navbar-toggler:focus-visible {
    outline: 2px solid #e96d3d;
    outline-offset: 2px;
}

/* ---- mobile collapse panel ---- */
@media (max-width: 767.98px) {
    .navbar_top_space .navbar-collapse {
        background: #fdfbf6;
        border: 1px solid rgba(24, 55, 47, .12);
        border-radius: 1rem;
        box-shadow: 0 18px 40px rgba(19, 47, 39, .15);
        margin-top: .8rem;
        max-height: 70vh;
        overflow-y: auto;
        padding: .75rem;
    }

    .navbar_top_space .nav-link {
        border-radius: .5rem;
        padding: .8rem .9rem;
    }

    .navbar_top_space .nav-link:hover {
        background: rgba(24, 55, 47, .05);
    }

    .navbar_top_space .nav-link.active {
        background: rgba(233, 109, 61, .1);
    }

    .navbar_top_space .nav-link::after {
        display: none;
    }

    .navbar_top_space .dropdown-menu {
        background: rgba(24, 55, 47, .04);
        border: 0;
        box-shadow: none;
        margin: .4rem .5rem 0;
        padding: .35rem;
    }

    .navbar_top_space .dropend .dropdown-menu {
        margin-left: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar_top_space .nav-link,
    .navbar_top_space .nav-link::after,
    .navbar_top_space .dropdown-item {
        transition: none !important;
    }
}


/* ---- resilient fixed navigation overrides ---- */
/* The main navigation is positioned explicitly because the legacy stylesheet
   also controls header positioning. JavaScript keeps it aligned with the
   utility bar until that bar has scrolled out of view. */
:root {
    --main-navbar-height: 5.5rem;
}

html {
    scroll-padding-top: calc(var(--main-navbar-height) + 1rem);
}

#main-navbar {
    left: 0;
    margin-top: 0 !important;
    padding-block: .9rem;
    position: fixed !important;
    right: 0;
    top: var(--main-navbar-top, 0px);
    transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
    z-index: 9999;
    pointer-events: auto;
}

#main-navbar-spacer {
    height: var(--main-navbar-height);
}

#main-navbar.is-scrolled {
    background: rgba(253, 251, 246, .98);
    box-shadow: 0 8px 24px rgba(19, 47, 39, .13);
    padding-block: .55rem;
}

#main-navbar .navbar-brand img {
    transition: transform .25s ease;
}

#main-navbar.is-scrolled .navbar-brand img {
    transform: scale(.92);
}

@media (max-width: 767.98px) {
    #main-navbar {
        padding-block: .7rem;
    }

    #main-navbar.is-scrolled {
        padding-block: .55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-navbar,
    #main-navbar .navbar-brand img {
        transition: none !important;
    }
}