/*
=========================================================
NAVEGACIÓN MÓVIL
---------------------------------------------------------
Todos los selectores cuelgan de .mobile-menu.

Antes no era así y las reglas usaban `.menu-item`, `.menu-level`,
`.menu-link`, `.back-btn` y `.close-menu-btn` sueltas. `.menu-item` es
precisamente la clase que WordPress pone en cada <li> de un menú, así que en
cuanto la navegación pasó a salir del menú nativo la barra de escritorio
heredó `display:block`, `width:100%` y la `opacity:0` de la animación de
entrada: los enlaces existían pero no se veían.
=========================================================
*/

.mobile-menu {
    position: fixed;
    inset: 0;

    z-index: var(--z-drawer);
    width: 90%;
    opacity: 0;
    visibility: hidden;

    transition: .3s ease;
    transform: translateX(-100vw);
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .75);

    opacity: 0;
    visibility: hidden;

    transition: .3s ease;

    z-index: var(--z-overlay);
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-panel {
    position: fixed;

    top: 0;
    left: 0;

    width: 90%;

    /*
     * Mismo motivo que en el cajón del carrito: en iOS `vh` mide la ventana
     * con las barras del navegador retraídas, no el hueco visible, y el fondo
     * del panel se iba por debajo de la barra de navegación. `dvh` mide lo que
     * de verdad se ve; `vh` queda de respaldo.
     */
    height: 100vh;
    height: 100dvh;

    background: var(--bazinga-dark);

    overflow: hidden;
}

/* HEADER */

.mobile-menu .mobile-menu-header {
    height: 72px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;

    border-bottom: 1px solid var(--bazinga-border-color);

    background: var(--bazinga-dark);

    position: relative;
    z-index: var(--z-raised);
}

.mobile-menu .back-btn,
.mobile-menu .close-menu-btn {
    background: none;
    border: 0;

    color: var(--bazinga-light);

    font-family: var(--header-font);
    font-size: 18px;

    cursor: pointer;
}

.mobile-menu .back-btn {
    opacity: 0;
    pointer-events: none;

    transition: .25s ease;
}

.mobile-menu .back-btn.show {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu .close-menu-btn {
    font-size: 28px;
    line-height: 1;
}

/* LEVELS */

.mobile-menu .menu-level {
    position: absolute;

    top: 72px;
    left: 0;

    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);

    overflow-y: auto;

    padding: 24px;

    background: var(--bazinga-dark);

    transform: translateX(100%);
    opacity: 0;

    pointer-events: none;

    /*
     * visibility saca el nivel del orden de tabulación y del árbol de
     * accesibilidad, que es lo que hay que impedir: sin esto el tabulador
     * recorre los enlaces de todos los niveles ocultos. Se prefiere a
     * `display: none` porque sigue animando la entrada y la salida.
     */
    visibility: hidden;

    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        opacity .35s ease,
        visibility .35s ease;
}

.mobile-menu .menu-level.active {
    transform: translateX(0);
    opacity: 1;

    visibility: visible;
    pointer-events: auto;
}

.mobile-menu .menu-level.previous {
    transform: translateX(-30%);
    opacity: 0;
}

/* TITULOS */

.mobile-menu .menu-level .menu-level__title {
    margin: 32px 0 16px;

    color: var(--bazinga-gold);

    font-family: var(--header-font);
    font-size: 14px;

    text-transform: uppercase;
    letter-spacing: .12em;
}

.mobile-menu .menu-level .menu-level__title:first-child {
    margin-top: 0;
}

.mobile-menu .menu-level .menu-level__title a {
    color: inherit;
}

/* LINKS */

.mobile-menu .menu-link,
.mobile-menu .menu-item {
    display: block;

    width: 100%;

    padding: 11px 0;

    background: none;
    border: 0;

    text-align: left;

    color: var(--bazinga-light);

    text-decoration: none;

    font-family: var(--header-font);
    font-size: 18px;

    border-bottom: 1px solid var(--bazinga-border-color);

    transition:
        color .2s ease,
        transform .2s ease;
}

.mobile-menu .menu-link::after {
    content: "";

    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    float: right;

    color: var(--bazinga-electric-purple);
}

.mobile-menu .menu-item:hover {
    color: var(--bazinga-gold);
    transform: translateX(6px);
}

/* STAGGER ANIMATION */

.mobile-menu .menu-item,
.mobile-menu .menu-level .menu-level__title {
    opacity: 0;
    transform: translateY(0);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

.mobile-menu .menu-level.active .menu-item,
.mobile-menu .menu-level.active .menu-level__title {
    opacity: 1;
    transform: translateY(0);
}

/* BANNERS */

/*
   Los banners del mega menu que no estén marcados como «ocultar en móvil»
   se reutilizan aquí en una tarjeta apaisada, más corta que la de escritorio
   para no alargar el recorrido del panel.
*/
.mobile-menu .mobile-menu-banner {
    position: relative;
    display: block;
    margin: var(--space-5) 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--bazinga-border-color);
}

.mobile-menu .mobile-menu-banner img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.mobile-menu .mobile-menu-banner__text {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-4);
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}

.mobile-menu .mobile-menu-banner__text small {
    display: block;
    color: var(--bazinga-gold);
    font-family: var(--header-font);
    font-size: 12px;
    text-transform: uppercase;
}

.mobile-menu .mobile-menu-banner__text strong {
    display: block;
    color: var(--bazinga-light);
    font-family: var(--header-font);
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
}

.mobile-menu .menu-item.is-highlighted {
    color: var(--bazinga-gold);
}

/* SCROLLBAR */

.mobile-menu .menu-level::-webkit-scrollbar {
    width: 4px;
}

.mobile-menu .menu-level::-webkit-scrollbar-thumb {
    background: var(--bazinga-electric-purple);
}