/* ==========================================================================
   Header
   ========================================================================== */
header {
    transition: all 200ms var(--ease-out);
}
.scrolled header[class*="sticky"] {
        box-shadow: var(--bs-box-shadow-xs);
    }


/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar-main > div {
        max-width: 100%;
    }
@media (min-width: 1400px) {
.navbar-main > div {
            max-width: 1320px
    }
        }
.navbar-main .navbar-nav {
        margin: 0 auto 0 0;
    }
.navbar-main .navbar-brand {
        padding: 0;
        margin-right: 3rem;
    }
.navbar-main .navbar-logo img {
        max-width: 200px;
    }
@media (min-width: 768px) {
.navbar-main .nav-item {
            margin: 0 .75rem 0 0;
            flex-shrink: 0
    }
        }
@media (min-width: 1400px) {
.navbar-main .nav-item {
            margin: 0 1rem 0 0
    }
        }
.navbar-main .offcanvas-backdrop {
        opacity: 1;
        backdrop-filter: blur(0);
        background-color: rgba(0, 0, 0, 0);
        transition: all 200ms var(--ease-out);
    }
.navbar-main .offcanvas-backdrop.show {
            opacity: 1;
            backdrop-filter: blur(4px);
            background-color: rgba(0, 0, 0, 0.5);
        }

/* ==========================================================================
   Offcanvas
   ========================================================================== */
.offcanvas {
    --bs-offcanvas-width: 600px;
    transition: all 250ms var(--ease-out);
}
.offcanvas .offcanvas-header {
        justify-content: space-between;
        align-items: flex-start;
    }
.offcanvas.show,
    .offcanvas.showing {
        border: none;
        box-shadow: 2.8px 0px 2.2px rgba(0, 0, 0, 0.02),
                    6.7px 0px 5.3px rgba(0, 0, 0, 0.028),
                    12.5px 0px 10px rgba(0, 0, 0, 0.035),
                    22.3px 0px 17.9px rgba(0, 0, 0, 0.042),
                    41.8px 0px 33.4px rgba(0, 0, 0, 0.05),
                    100px 0px 80px rgba(0, 0, 0, 0.07);
    }
.offcanvas.show.offcanvas-top, .offcanvas.showing.offcanvas-top {
            box-shadow: var(--bs-box-shadow-xl);
            height: -moz-fit-content;
            height: fit-content;
            overflow-y: scroll;
            max-height: 100%;
        }
.offcanvas.show.offcanvas-start,
        .offcanvas.show.offcanvas-end,
        .offcanvas.showing.offcanvas-start,
        .offcanvas.showing.offcanvas-end {
            max-width: 600px;
            width: 100%;
        }
.offcanvas.show .nav-link.active::after, .offcanvas.showing .nav-link.active::after {
            bottom: unset;
            left: 0;
            width: 5px;
            height: 80%;
            transition: none;
        }
.offcanvas.show .dropdown.open, .offcanvas.showing .dropdown.open {
            background-color: var(--bs-light);
            border-radius: var(--bs-border-radius-xl);
            padding-bottom: .5rem;
        }
.offcanvas.show .dropdown-menu, .offcanvas.showing .dropdown-menu {
            background-color: var(--bs-light);
            border-radius: var(--bs-border-radius);
            box-shadow: none;
            margin: 0;
            padding: 0;
        }
.offcanvas.show .dropdown-menu.show, .offcanvas.showing .dropdown-menu.show {
                margin: .5rem 0;
                /* padding: .5rem; */
            }
.offcanvas.show .dropdown-item, .offcanvas.showing .dropdown-item {
            font-size: .9rem;
            border: none;
            border-radius: var(--bs-border-radius);
            /* margin-bottom: .5rem; */
            transition: all 200ms var(--ease-out);
        }
.offcanvas.show .dropdown-item:hover,
            .offcanvas.show .dropdown-item:focus,
            .offcanvas.show .dropdown-item:focus-visible,
            .offcanvas.show .dropdown-item:active,
            .offcanvas.showing .dropdown-item:hover,
            .offcanvas.showing .dropdown-item:focus,
            .offcanvas.showing .dropdown-item:focus-visible,
            .offcanvas.showing .dropdown-item:active {
                background-color: #fff;
            }

/* ==========================================================================
   Toggle Button
   ========================================================================== */
.navbar-toggler {
    border: none;
    padding: 0;
}
.navbar-toggler:focus {
        box-shadow: none;
    }
.navbar-toggler path {
        opacity: 0;
        fill: none;
        stroke: var(--bs-primary);
        stroke-width: 3;
        stroke-linecap: round;
        transform: scale(1);
        transform-origin: center center;
        transition: all 180ms var(--ease-out);
    }
/* By default, the hamburger icon is visible */
.navbar-toggler .open-paths path {
        opacity: 1;
        scale: 1;
        stroke-width: 3;
    }
/* By default, the close icon is hidden */
.navbar-toggler .close-paths path {
        opacity: 0;
        scale: 0.25;
        stroke-width: 0;
    }
/*
      When the menu is open, hide the hamburger and show the close icon.
      This is now controlled by the '.is-open' class added via JS.
    */
.navbar-toggler.is-open .open-paths path {
            opacity: 0;
            scale: 0.25;
            stroke-width: 0;
        }
.navbar-toggler.is-open .close-paths path {
            opacity: 1;
            scale: 1;
            stroke-width: 3;
        }

/* ==========================================================================
   Floating Navbar
   ========================================================================== */
.navbar-floating-header {
    z-index: 10;
}

.navbar-floating {
    position: absolute;
    top: 7rem;
    padding-top: 1rem;
    z-index: 99;
    /* opacity: 0; */
    transition: opacity 200ms var(--ease-in-out);
}

.navbar-floating.init {
    opacity: 1;
}

.navbar-floating.sticky {
    position: fixed;
    top: 0;
}

.navbar-floating .js-nav-toggle {
    display: block;
    transform: scale(0);
    width: 0;
    transition: all 200ms var(--ease-in-out);
}

.navbar-floating.sticky .js-nav-toggle {
    width: 50px;
    transform: scale(1);
}

/*
.navbar-floating.navbar-closed #toggle-nav-btn {
    display: block;
} */

.navbar-floating .collapse-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    border-radius: var(--bs-border-radius-pill);
    box-shadow: var(--bs-box-shadow-lg);
    padding: .5rem;
    max-width: 100%;
    min-height: 50px;
    min-width: 50px
}

.navbar-floating .navbar-nav {
    /* width: 767px; */
    padding: 0 1rem;
}

.navbar-floating>.btn {
    box-shadow: var(--bs-box-shadow-lg);
}

/* ==========================================================================
   Floating Navbar - Mobile "Grow" Menu
   ========================================================================== */

/* This media query ENSURES these styles ONLY apply on mobile devices
   It uses the value defined in our --breakpoint-mobile variable */
@media (max-width: 1199.98px) {
    .navbar-floating {
        top: 0;
        right: .5rem;
    }

    .navbar-floating .navbar-nav {
        padding: 0;
    }

    /* On mobile, the toggle button should always be visible */
    .navbar-floating .js-nav-toggle {
        transform: scale(1);
        width: 50px;
        position: relative; /* This is the anchor */
        z-index: 1056;
    }

    .navbar-floating .collapse-wrapper {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        transition: box-shadow 200ms var(--ease-out);
    }

    .scrolled .navbar-floating .collapse-wrapper {
        box-shadow: var(--bs-box-shadow-lg);
    }

    /* Create a positioning context for the absolute-positioned menu */
    .navbar-floating .floating-nav-container {
        position: static; /* No longer needs positioning */
    }

    .navbar-floating .js-nav-collapse {
        position: absolute; /* Relative to the button now */
        top: 0.75rem;
        right: 0.75rem;
        width: 95vw !important; /* A more reasonable width for a pop-out menu */
        height: auto; /* Height will be determined by content */
        /* max-width: calc(100vw - 2rem); Ensure it doesn't overflow the viewport */
        max-width: 500px;
        background: #fff;
        border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xxl) var(--bs-border-radius-xl) var(--bs-border-radius-xl);
        box-shadow: var(--bs-box-shadow-lg);
        padding: 1.5rem;
        /* overflow-y: auto; Allow scrolling for long menus */

        /* Animation properties */
        transform-origin: top right; /* The animation will still grow from the button's corner */
        transform: scale(0);
        opacity: 0;
        visibility: hidden;
        transition: all 250ms var(--ease-out);
        will-change: transform, opacity; /* Performance optimization for animation */
    }

    /* The .is-open class, added by JS, triggers the animation and makes the menu visible */
    .navbar-floating .js-nav-collapse.is-open {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        top: 0;
        right: 0;
    }

    /* Ensure the toggle button stays on top of the menu overlay */
    .navbar-floating .js-nav-toggle {
        z-index: 1056; /* Bootstrap's highest z-index is 1055 for modals */
    }

    .navbar-floating .nav-item {
        border-top: 1px solid var(--bs-border-color);
        padding: .3rem 0 !important;
        margin: 0 !important;
    }

    .navbar-floating .nav-item:last-of-type {
        border-bottom: 1px solid var(--bs-border-color);
    }

    .navbar-floating .nav-link.active::after {
        bottom: unset;
        left: 0;
        width: 8px;
        height: 80%;
        transition: none;
    }

    .navbar-floating .navbar-nav .nav-link {
        padding: 1rem;
    }
}