/* Classic/top navigation switches to the same offcanvas interaction on mobile. */
body.b2sme-nav--top .b2sme-nav-toggle {
    display: none;
}

@media (max-width: 64rem) {
    body.b2sme-nav--top::after {
        content: "";
        position: fixed;
        z-index: 1000;
        inset: 0;
        background: rgb(10 15 26 / .28);
        opacity: 0;
        pointer-events: none;
        transition: opacity .32s ease;
    }

    body.b2sme-nav--top.b2sme-nav-open::after {
        opacity: 1;
        pointer-events: auto;
    }

    body.b2sme-nav--top .b2sme-nav-toggle {
        position: fixed;
        z-index: 1002;
        top: 1.25rem;
        right: 1.25rem;
        display: inline-grid;
        min-width: 3.25rem;
        min-height: 3.25rem;
        place-items: center;
        padding: .75rem 1rem;
        border: 1px solid rgb(255 255 255 / .72);
        border-radius: 999px;
        background: var(--b2sme-primary);
        color: #fff;
        font-weight: 800;
        box-shadow: 0 .6rem 1.8rem rgb(10 15 26 / .18);
        transition: transform .24s ease, background-color .24s ease, box-shadow .24s ease;
    }

    body.b2sme-nav--top .b2sme-nav-toggle:hover {
        transform: translateY(-1px);
        box-shadow: 0 .8rem 2rem rgb(10 15 26 / .22);
    }

    body.b2sme-nav--top.b2sme-nav-open .b2sme-nav-toggle {
        width: 3.75rem;
        height: 3.75rem;
        padding: 0;
        font-size: 0;
        transform: rotate(90deg);
    }

    body.b2sme-nav--top.b2sme-nav-open .b2sme-nav-toggle::before,
    body.b2sme-nav--top.b2sme-nav-open .b2sme-nav-toggle::after {
        content: "";
        position: absolute;
        width: 1.55rem;
        height: .18rem;
        border-radius: 999px;
        background: currentColor;
    }

    body.b2sme-nav--top.b2sme-nav-open .b2sme-nav-toggle::before { transform: rotate(45deg); }
    body.b2sme-nav--top.b2sme-nav-open .b2sme-nav-toggle::after { transform: rotate(-45deg); }

    body.b2sme-nav--top header {
        min-height: 0;
        border: 0;
        background: transparent;
    }

    body.b2sme-nav--top.b2sme-nav-open header {
        z-index: 1001;
    }

    body.b2sme-nav--top nav.mod_navigation,
    body.b2sme-nav--top .mod_navigation {
        position: fixed;
        z-index: 1001;
        inset: 0 0 0 auto;
        display: block;
        width: min(28rem, 94vw);
        min-height: 100dvh;
        margin: 0;
        padding: clamp(6rem, 12vh, 8rem) 1.75rem 3rem;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        color: var(--b2sme-secondary);
        box-shadow: -1.5rem 0 4rem rgb(0 0 0 / .16);
        opacity: 0;
        transform: translateX(102%);
        visibility: hidden;
        transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility 0s linear .36s;
    }

    body.b2sme-nav--top nav.mod_navigation.is-open,
    body.b2sme-nav--top .mod_navigation.is-open {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    body.b2sme-nav--top .mod_navigation > ul,
    body.b2sme-nav--top .mod_navigation ul {
        display: grid;
        width: 100%;
        gap: .25rem;
        overflow: visible;
    }

    body.b2sme-nav--top .mod_navigation li {
        opacity: 0;
        transform: translateX(1.25rem);
        transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
    }

    body.b2sme-nav--top .mod_navigation.is-open li {
        opacity: 1;
        transform: translateX(0);
    }

    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(1) { transition-delay: .07s; }
    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(2) { transition-delay: .11s; }
    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(3) { transition-delay: .15s; }
    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(4) { transition-delay: .19s; }
    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(5) { transition-delay: .23s; }
    body.b2sme-nav--top .mod_navigation.is-open li:nth-child(n + 6) { transition-delay: .27s; }

    body.b2sme-nav--top .mod_navigation a,
    body.b2sme-nav--top .mod_navigation strong {
        position: relative;
        display: block;
        min-height: 0;
        padding: .95rem 0 .95rem 1.25rem;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-size: clamp(1.4rem, 7vw, 2rem);
        font-weight: 800;
        line-height: 1.15;
        white-space: normal;
        transform: none;
        transition: color .2s ease, transform .2s ease;
    }

    body.b2sme-nav--top .mod_navigation a::after,
    body.b2sme-nav--top .mod_navigation strong::after {
        display: none;
    }

    body.b2sme-nav--top .mod_navigation a::before,
    body.b2sme-nav--top .mod_navigation strong::before {
        content: "";
        position: absolute;
        top: .85rem;
        bottom: .85rem;
        left: 0;
        width: .22rem;
        border-radius: 999px;
        background: var(--b2sme-primary);
        opacity: 0;
        transform: scaleY(.35);
        transition: opacity .2s ease, transform .2s ease;
    }

    body.b2sme-nav--top .mod_navigation a:hover,
    body.b2sme-nav--top .mod_navigation a:focus-visible {
        background: transparent;
        color: var(--b2sme-primary);
        transform: translateX(.25rem);
    }

    body.b2sme-nav--top .mod_navigation strong,
    body.b2sme-nav--top .mod_navigation .active > a {
        background: transparent;
        color: var(--b2sme-primary);
    }

    body.b2sme-nav--top .mod_navigation strong::before,
    body.b2sme-nav--top .mod_navigation .active > a::before {
        opacity: 1;
        transform: scaleY(1);
    }

    body.b2sme-nav--top .mod_navigation ul ul {
        position: static;
        display: grid;
        min-width: 0;
        gap: .1rem;
        margin: .15rem 0 .5rem 1.25rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.b2sme-nav--top .mod_navigation ul ul a,
    body.b2sme-nav--top .mod_navigation ul ul strong {
        padding-block: .55rem;
        font-size: 1rem;
        font-weight: 700;
        color: color-mix(in srgb, var(--b2sme-secondary) 72%, transparent);
    }

    body.b2sme-nav--top nav.mod_navigation .b2sme-nav-contact,
    body.b2sme-nav--top .mod_navigation .b2sme-nav-contact {
        display: grid;
        width: 100%;
        gap: .55rem;
        margin: 2rem 0 0;
        padding: 1.5rem 0 0;
        border-top: 1px solid rgb(15 23 42 / .14);
        border-left: 0;
    }

    body.b2sme-nav--top .mod_navigation .b2sme-nav-contact__link {
        padding: 0;
        color: inherit;
        font-size: 1rem;
        font-weight: 700;
    }

    body.b2sme-nav--top .mod_navigation .b2sme-nav-contact__link:hover,
    body.b2sme-nav--top .mod_navigation .b2sme-nav-contact__link:focus-visible {
        color: var(--b2sme-primary);
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.b2sme-nav--top::after,
    body.b2sme-nav--top .b2sme-nav-toggle,
    body.b2sme-nav--top nav.mod_navigation,
    body.b2sme-nav--top .mod_navigation,
    body.b2sme-nav--top .mod_navigation li {
        transition: none !important;
    }
}