/* ================================
   MOBILE NAVIGATION
   Depends on: components.css
================================ */

.bt-mobile-nav {
    display: none;
}

.bt-mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    background: rgba(15, 15, 20, 0.18);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 220ms ease;
}

.bt-mobile-nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

body.bt-mobile-menu-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .bt-site-header {
        position: fixed;
        top: 24px;
        padding-top: 0;
        margin-bottom: 0;
        pointer-events: none;
    }

    .admin-bar .bt-site-header {
        top: 70px;
    }

    .bt-nav {
        display: none;
    }

    .bt-mobile-nav-overlay {
        display: block;
    }

    .bt-mobile-nav {
        --bt-mobile-nav-closed-height: 58px;
        --bt-mobile-nav-easing: cubic-bezier(0.22, 1, 0.36, 1);
        --bt-mobile-nav-width: min(
            calc(100vw - (var(--bt-nav-page-gutter) * 2)),
            var(--bt-container-max)
        );

        position: relative;
        z-index: 10000;
        display: block;
        width: var(--bt-mobile-nav-width);
        max-width: var(--bt-mobile-nav-width);
        max-height: var(--bt-mobile-nav-closed-height);
        margin-inline: auto;
        overflow: hidden;
        color: var(--bt-color-text-main);
        background: var(--bt-color-white-smoke);
        border-radius: var(--bt-radius-md);
        box-shadow: var(--bt-shadow-card);
        isolation: isolate;
        pointer-events: auto;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition:
            max-height 420ms var(--bt-mobile-nav-easing),
            border-radius 260ms ease;
    }

    .bt-mobile-nav.is-open,
    .bt-mobile-nav.is-closing {
        max-height: calc(100vh - 32px);
        border-radius: var(--bt-radius-lg);
    }

    .admin-bar .bt-mobile-nav.is-open,
    .admin-bar .bt-mobile-nav.is-closing {
        max-height: calc(100vh - 78px);
    }

    .bt-mobile-nav.is-collapsing {
        max-height: var(--bt-mobile-nav-closed-height);
        transition-duration: 140ms, 140ms;
        transition-delay: 0ms, 0ms;
    }

    .bt-mobile-nav__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--bt-mobile-nav-closed-height);
        padding: var(--bt-space-2) var(--bt-space-3) var(--bt-space-2)
            var(--bt-space-5);
    }

    .bt-mobile-nav__brand {
        display: inline-flex;
        min-width: 0;
        align-items: baseline;
        gap: var(--bt-space-2);
        color: var(--bt-color-text-main);
        text-decoration: none;
    }

    .bt-mobile-nav__logo {
        display: block;
        width: auto;
        max-width: 156px;
        height: 34px;
    }

    .bt-mobile-nav__logo-text {
        color: var(--bt-color-text-main);
        font-family: var(--bt-font-family-base);
        font-size: var(--bt-font-size-xl);
        font-weight: var(--bt-font-weight-black);
        line-height: 1;
    }

    .bt-mobile-nav__logo-subtext {
        color: rgba(31, 34, 45, 0.72);
        font-size: var(--bt-font-size-xs);
        font-weight: var(--bt-font-weight-semibold);
        line-height: 1;
    }

    .bt-mobile-nav__toggle {
        display: inline-flex;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: var(--bt-button-radius);
        color: var(--bt-color-text-main);
        background: transparent;
        cursor: pointer;
        transition:
            color var(--bt-transition-fast),
            background-color var(--bt-transition-fast);
    }

    .bt-mobile-nav__toggle:focus-visible,
    .bt-mobile-nav__link:focus-visible,
    .bt-mobile-nav__sublink:focus-visible,
    .bt-mobile-nav__cta:focus-visible {
        outline: 3px solid rgba(33, 36, 146, 0.28);
        outline-offset: 3px;
    }

    .bt-mobile-nav__toggle:focus:not(:focus-visible),
    .bt-mobile-nav__link:focus:not(:focus-visible),
    .bt-mobile-nav__sublink:focus:not(:focus-visible),
    .bt-mobile-nav__cta:focus:not(:focus-visible) {
        outline: none;
    }

    .bt-mobile-nav__toggle .material-symbols-rounded {
        font-size: 26px;
        line-height: 1;
    }

    .bt-mobile-nav__panel {
        max-height: calc(100vh - 90px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: var(--bt-space-10);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .admin-bar .bt-mobile-nav__panel {
        max-height: calc(100vh - 136px);
    }

    .bt-mobile-nav__list,
    .bt-mobile-nav__sublist {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bt-mobile-nav__list {
        display: flex;
        flex-direction: column;
        gap: var(--bt-space-2);
    }

    .bt-mobile-nav__item {
        --bt-mobile-item-index: 0;

        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity 220ms ease,
            transform 220ms var(--bt-mobile-nav-easing);
        transition-delay: 0ms;
    }

    .bt-mobile-nav__item:nth-child(2) {
        --bt-mobile-item-index: 1;
    }

    .bt-mobile-nav__item:nth-child(3) {
        --bt-mobile-item-index: 2;
    }

    .bt-mobile-nav__item:nth-child(4) {
        --bt-mobile-item-index: 3;
    }

    .bt-mobile-nav__item:nth-child(5) {
        --bt-mobile-item-index: 4;
    }

    .bt-mobile-nav__item:nth-child(6) {
        --bt-mobile-item-index: 5;
    }

    .bt-mobile-nav.is-open .bt-mobile-nav__item {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(110ms + (var(--bt-mobile-item-index) * 45ms));
    }

    .bt-mobile-nav.is-closing .bt-mobile-nav__item {
        opacity: 0;
        transform: translateY(4px);
        transition-duration: 140ms;
        transition-delay: 0ms;
    }

    .bt-mobile-nav__link,
    .bt-mobile-nav__sublink,
    .bt-mobile-nav__cta {
        display: flex;
        width: 100%;
        min-width: 0;
        align-items: center;
        min-height: 52px;
        border: 0;
        border-radius: var(--bt-button-radius);
        font-family: var(--bt-font-family-base);
        font-size: var(--bt-font-size-md);
        font-weight: var(--bt-font-weight-bold);
        line-height: 1.2;
        text-decoration: none;
    }

    .bt-mobile-nav__link {
        justify-content: space-between;
        padding: 0 var(--bt-space-4);
        color: var(--bt-color-text-main);
        background: transparent;
        cursor: pointer;
        transition:
            color var(--bt-transition-fast),
            background-color var(--bt-transition-fast);
    }

    .bt-mobile-nav__accordion-toggle .material-symbols-rounded {
        flex: 0 0 auto;
        font-size: 24px;
        line-height: 1;
        transform: rotate(0deg);
        transition: transform 220ms var(--bt-mobile-nav-easing);
    }

    .bt-mobile-nav__accordion-toggle[aria-expanded='true']
        .bt-mobile-nav__accordion-icon {
        transform: rotate(180deg);
    }

    .bt-mobile-nav__accordion-toggle--language
        .bt-mobile-nav__language-symbol {
        transform: none;
    }

    .bt-mobile-nav__accordion-panel {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition:
            max-height 280ms var(--bt-mobile-nav-easing),
            opacity 180ms ease,
            transform 220ms var(--bt-mobile-nav-easing);
    }

    .bt-mobile-nav__accordion-panel.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    .bt-mobile-nav__sublist {
        display: flex;
        flex-direction: column;
        gap: var(--bt-space-2);
        padding: var(--bt-space-2) 0 var(--bt-space-3) var(--bt-space-3);
    }

    .bt-mobile-nav__sublink {
        justify-content: flex-start;
        min-height: 44px;
        padding: 0 var(--bt-space-4);
        color: var(--bt-color-azul-bluetab);
        font-size: var(--bt-font-size-sm);
        background: transparent;
        transition:
            color var(--bt-transition-fast),
            background-color var(--bt-transition-fast);
    }

    .bt-mobile-nav__sublink.is-active,
    .bt-mobile-nav__sublink[aria-current='page'] {
        color: var(--bt-color-bg-dark);
        font-weight: var(--bt-font-weight-bold);
    }

    .bt-mobile-nav__cta {
        justify-content: center;
        min-height: var(--bt-button-height);
        padding: 0 var(--bt-space-6);
        color: var(--bt-color-white-smoke);
        background: var(--bt-color-azul-bluetab);
        box-shadow: var(--bt-shadow-soft);
        transition:
            color var(--bt-transition-fast),
            background-color var(--bt-transition-fast),
            transform var(--bt-transition-fast);
    }

    @media (hover: hover) and (pointer: fine) {
        .bt-mobile-nav__toggle:hover {
            color: var(--bt-color-white-smoke);
            background: var(--bt-color-menu-hover-dark);
        }

        .bt-mobile-nav__link:hover {
            color: var(--bt-color-white-smoke);
            background: var(--bt-color-menu-hover-dark);
        }

        .bt-mobile-nav__sublink:hover {
            color: var(--bt-color-white-smoke);
            background: var(--bt-color-submenu-button-hover);
        }

        .bt-mobile-nav__cta:hover {
            color: var(--bt-color-white-smoke);
            background: var(--bt-color-button-primary-hover-dark);
            transform: translateY(-1px);
        }
    }
}

@media (max-width: 360px) {
    .bt-mobile-nav__logo {
        max-width: 138px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bt-mobile-nav,
    .bt-mobile-nav-overlay,
    .bt-mobile-nav__item,
    .bt-mobile-nav__toggle,
    .bt-mobile-nav__link,
    .bt-mobile-nav__sublink,
    .bt-mobile-nav__cta,
    .bt-mobile-nav__accordion-panel,
    .bt-mobile-nav__accordion-toggle .material-symbols-rounded {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}