/* =========================================================
   Hoshira Child Jr — Menú móvil / tablet moderno
   - Botón hamburguesa rediseñado
   - Menú lateral (drawer) con bordes redondeados
   - Animaciones al abrir, cerrar y al tocar opciones
   Usa las variables de color del theme, así respeta el modo claro/oscuro.
   ========================================================= */

:root {
    --hs-ease: cubic-bezier(.22, 1, .36, 1);
    --hs-drawer-w: min(86vw, 22rem);
}

/* ---------- Botón hamburguesa ---------- */
.hder-menu .hs-burger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid color-mix(in oklab, var(--color-primary) 35%, var(--color-light));
    border-radius: .95rem;
    background: linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 14%, var(--color-wrapper)), var(--color-wrapper));
    color: var(--color-text);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, #fff 35%, transparent),
        0 8px 18px -10px color-mix(in oklab, var(--color-primary) 60%, transparent);
    transition: transform .3s var(--hs-ease), box-shadow .3s ease, border-color .3s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.hs-burger__bars {
    display: grid;
    gap: 5px;
    width: 1.25rem;
    justify-items: start;
}

.hs-burger__bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width .35s var(--hs-ease), background-color .3s ease;
}

.hs-burger__bars span:nth-child(1) { width: 100%; }
.hs-burger__bars span:nth-child(2) { width: 70%; }
.hs-burger__bars span:nth-child(3) { width: 45%; }

.hder-menu .hs-burger:active { transform: scale(.9); }
.hder-menu .hs-burger:active .hs-burger__bars span { width: 100%; }
.hder-menu .hs-burger.is-open .hs-burger__bars span { width: 100%; background: var(--color-primary); }

.hder-menu .hs-burger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (hover: hover) {
    .hder-menu .hs-burger:hover {
        transform: translateY(-1px);
        border-color: var(--color-primary);
        background: linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 22%, var(--color-wrapper)), var(--color-wrapper));
    }
    .hder-menu .hs-burger:hover .hs-burger__bars span { width: 100%; }
}

/* ---------- Elementos del drawer ocultos en escritorio ---------- */
.hs-drawer-overlay,
.hs-drawer__head {
    display: none;
}

/* =========================================================
   Menú lateral: solo móvil y tablet (menos de 1024px)
   ========================================================= */
@media (max-width: 1023.98px) {

    /* Bloquea el scroll del fondo con el menú abierto */
    html.hs-menu-open { overflow: hidden; }

    /* ----- Fondo oscuro con desenfoque ----- */
    .hs-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgb(2 6 23 / .55);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s ease, visibility 0s linear .4s;
    }
    .hs-drawer-overlay.is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity .4s ease, visibility 0s;
    }

    /* ----- Panel lateral ----- */
    .hder-menu .menu-wrapper,
    .hder-menu .menu-wrapper.is-visible {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        z-index: 100000;
        width: var(--hs-drawer-w);
        max-width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--color-wrapper);
        border-radius: 0 1.75rem 1.75rem 0;
        border-right: 1px solid color-mix(in oklab, var(--color-light) 70%, transparent);
        box-shadow: 30px 0 80px -20px rgb(0 0 0 / .55);
        opacity: 1;
        scale: none;
        overscroll-behavior: contain;
    }

    .hder-menu .menu-wrapper {
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(-105%, 0, 0);
        transition: transform .5s var(--hs-ease), visibility 0s linear .5s;
    }

    .hder-menu .menu-wrapper.is-visible {
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: transform .5s var(--hs-ease), visibility 0s;
    }

    /* Deja libre la barra de administración de WordPress (usuarios logueados) */
    body.admin-bar .hder-menu .menu-wrapper { top: 32px; }
    @media (max-width: 782px) { body.admin-bar .hder-menu .menu-wrapper { top: 46px; } }
    @media (max-width: 600px) { body.admin-bar .hder-menu .menu-wrapper { top: 0; } }

    /* ----- Cabecera del panel ----- */
    .hs-drawer__head {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.25rem 1rem;
        border-bottom: 1px solid color-mix(in oklab, var(--color-light) 70%, transparent);
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .35s ease, transform .5s var(--hs-ease);
    }
    .menu-wrapper.is-visible .hs-drawer__head {
        opacity: 1;
        transform: none;
        transition-delay: .08s;
    }

    .hs-drawer__logo img { max-height: 2rem; width: auto; }

    .hder-menu .hs-drawer__close {
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        border: 0;
        border-radius: .9rem;
        background: color-mix(in oklab, var(--color-light) 45%, transparent);
        color: var(--color-text);
        transition: transform .3s var(--hs-ease), background-color .3s ease, color .3s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .hder-menu .hs-drawer__close i { transition: transform .4s var(--hs-ease); }
    .hder-menu .hs-drawer__close:active { transform: scale(.9); }
    .hder-menu .hs-drawer__close:active i { transform: rotate(90deg); }
    @media (hover: hover) {
        .hder-menu .hs-drawer__close:hover {
            background: color-mix(in oklab, var(--color-primary) 20%, transparent);
            color: var(--color-primary);
        }
        .hder-menu .hs-drawer__close:hover i { transform: rotate(90deg); }
    }

    /* ----- Lista de opciones ----- */
    .hder-menu .menu-wrapper .menu {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* Entrada escalonada: cada opción aparece una tras otra */
    .hder-menu .menu > li {
        opacity: 0;
        transform: translateX(-18px);
        transition: opacity .3s ease, transform .4s var(--hs-ease);
    }
    .hder-menu .menu-wrapper.is-visible .menu > li {
        opacity: 1;
        transform: none;
        transition: opacity .45s ease, transform .6s var(--hs-ease);
    }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(1)  { transition-delay: .12s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(2)  { transition-delay: .17s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(3)  { transition-delay: .22s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(4)  { transition-delay: .27s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(5)  { transition-delay: .32s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(6)  { transition-delay: .37s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(7)  { transition-delay: .42s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(8)  { transition-delay: .47s; }
    .hder-menu .menu-wrapper.is-visible .menu > li:nth-child(n+9) { transition-delay: .5s; }

    /* ----- Cada opción ----- */
    .hder-menu .menu li a {
        height: auto;
        min-height: 3rem;
        padding: .5rem .75rem;
        gap: .85rem;
        border-radius: 1rem;
        font-size: .95rem;
        white-space: normal;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .25s ease, color .25s ease, transform .25s var(--hs-ease);
    }

    /* Opción con submenú: deja sitio a la flecha */
    .hder-menu .menu li a:has(.has-child-ico) { padding-right: 3rem; }

    /* Efecto al tocar */
    .hder-menu .menu > li > a:active {
        transform: scale(.97);
        background: color-mix(in oklab, var(--color-primary) 18%, transparent);
    }

    @media (hover: hover) {
        .hder-menu .menu > li > a:hover {
            transform: translateX(4px);
            background: color-mix(in oklab, var(--color-primary) 9%, transparent);
        }
    }

    /* Opción de la página actual */
    .hder-menu .menu > li.current-menu-item > a,
    .hder-menu .menu > li.current-menu-ancestor > a,
    .hder-menu .menu > li.current_page_item > a {
        background: linear-gradient(90deg, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent);
    }
    .hder-menu .menu > li.current-menu-item > a::before,
    .hder-menu .menu > li.current-menu-ancestor > a::before,
    .hder-menu .menu > li.current_page_item > a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 22%;
        bottom: 22%;
        width: 3px;
        border-radius: 3px;
        background: var(--color-primary);
    }

    /* ----- Iconos de las opciones (campo "Icon" del menú) ----- */
    .hder-menu .menu > li > a > i,
    .hder-menu .menu > li > a > svg {
        flex: none;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: .8rem;
        font-size: .95rem;
        color: var(--color-primary);
        fill: currentColor;
        opacity: 1;
        background: color-mix(in oklab, var(--color-primary) 13%, transparent);
        transition: transform .35s var(--hs-ease), background-color .25s ease, color .25s ease;
    }
    .hder-menu .menu > li > a > svg { padding: .5rem; }

    @media (hover: hover) {
        .hder-menu .menu > li > a:hover > i,
        .hder-menu .menu > li > a:hover > svg { transform: scale(1.08) rotate(-4deg); }
    }
    .hder-menu .menu > li > a:active > i,
    .hder-menu .menu > li > a:active > svg {
        background: var(--color-primary);
        color: #fff;
        transform: scale(.92);
    }

    /* ----- Flecha de submenú ----- */
    .hder-menu .menu li a .has-child-ico {
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: .6rem;
        background: color-mix(in oklab, var(--color-light) 40%, transparent);
    }
    .hder-menu .menu li a .has-child-ico i {
        opacity: .8;
        transition: transform .35s var(--hs-ease);
    }
    .hder-menu .menu li:has(> .sub-menu.is-visible) > a .has-child-ico i { transform: rotate(180deg); }

    /* ----- Submenú ----- */
    .hder-menu .menu .sub-menu {
        margin: .25rem 0 .5rem 1.6rem;
        padding: .25rem 0 .25rem .5rem;
        border-left: 2px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
        background: transparent;
        pointer-events: auto;
        scale: none;
    }
    .hder-menu .menu .sub-menu.is-visible { animation: hs-sub-in .4s var(--hs-ease) both; }

    .hder-menu .menu .sub-menu li a {
        min-height: 2.5rem;
        padding: .4rem .75rem;
        border-radius: .8rem;
        font-size: .875rem;
        font-weight: 600;
    }
}

@keyframes hs-sub-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Accesibilidad: si el sistema pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .hder-menu .menu-wrapper,
    .hs-drawer-overlay,
    .hs-drawer__head,
    .hder-menu .menu > li,
    .hder-menu .menu li a,
    .hder-menu .hs-burger,
    .hs-burger__bars span {
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .hder-menu .menu .sub-menu.is-visible { animation: none; }
}