/* ============================================================
   TH Nav Menu v1.1.0
   ============================================================ */

/* ── Wrapper ── */
.thnm-nav-wrap {
    display: flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════
   MENÚ DESKTOP
   ════════════════════════════════════════════════════════════ */
.thnm-desktop-nav {
    align-items: center;
    justify-content: var(--thnm-desktop-align, flex-start);
    width: 100%;
}

.thnm-desktop-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 32px;
}

/* Items nivel 1 */
.thnm-desktop-menu > li {
    position: relative;
}

.thnm-desktop-menu > li > a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Flecha indicadora de submenú (desktop) */
.thnm-desktop-menu > li.menu-item-has-children > a .thnm-dd-arrow {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    transition: transform 0.25s ease;
}

.thnm-desktop-menu > li.menu-item-has-children > a .thnm-dd-arrow svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.thnm-desktop-menu > li.thnm-dd-open > a .thnm-dd-arrow svg,
.thnm-desktop-menu > li:hover > a .thnm-dd-arrow svg {
    transform: rotate(180deg);
}

/* ── Dropdowns ── */
.thnm-desktop-menu .sub-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: var(--thnm-dropdown-bg, #ffffff);
    min-width: var(--thnm-dropdown-width, 200px);
    border-radius: var(--thnm-dropdown-radius, 4px);
    pointer-events: none;
    /* Animaciones - sobreescritas por data-dd-anim */
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity   0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0.22s;
    visibility: hidden;
}

/* Submenú de nivel 3 → hacia la derecha */
.thnm-desktop-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 4px;
}

/* Estado visible */
.thnm-desktop-menu li.thnm-dd-open > .sub-menu,
.thnm-desktop-nav[data-dd-trigger="hover"] .thnm-desktop-menu li:hover > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity   0.22s ease,
        transform 0.22s ease,
        visibility 0s linear 0s;
}

/* Sin animación */
.thnm-desktop-nav[data-dd-anim="none"] .thnm-desktop-menu .sub-menu {
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
    transform: none;
}

/* Solo fade */
.thnm-desktop-nav[data-dd-anim="fade"] .thnm-desktop-menu .sub-menu {
    transform: none;
}

/* Items del dropdown */
.thnm-desktop-menu .sub-menu a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* ════════════════════════════════════════════════════════════
   HAMBURGUESA
   ════════════════════════════════════════════════════════════ */
.thnm-toggle-wrap {
    align-items: center;
}

.thnm-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.thnm-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.38s cubic-bezier(0.4, 0, 0.2, 1),
        width     0.38s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.thnm-toggle.is-active .thnm-bar:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.thnm-toggle.is-active .thnm-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.thnm-toggle.is-active .thnm-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ════════════════════════════════════════════════════════════
   OVERLAY MOBILE — BASE
   ════════════════════════════════════════════════════════════ */
.thnm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    visibility: hidden;
}

.thnm-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
}

.thnm-backdrop {
    position: absolute;
    inset: 0;
    background: var(--thnm-backdrop, rgba(0,0,0,0.55));
    opacity: 0;
    transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.thnm-overlay.is-open .thnm-backdrop { opacity: 1; }

.thnm-panel {
    position: absolute;
    background: var(--thnm-bg, #1a1a1a);
    color: var(--thnm-text, #ffffff);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--thnm-panel-pt, 64px) var(--thnm-panel-pr, 32px)
             var(--thnm-panel-pb, 32px) var(--thnm-panel-pl, 32px);
}

/* Botón cerrar */
.thnm-close {
    position: absolute;
    top:   var(--thnm-close-top,   18px);
    right: var(--thnm-close-right, 18px);
    width:  var(--thnm-close-size, 40px);
    height: var(--thnm-close-size, 40px);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
    z-index: 1;
}

.thnm-close-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--thnm-close-color, #ffffff);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.thnm-close-bar:nth-child(1) { transform: translateY(1px)  rotate(45deg); }
.thnm-close-bar:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }
.thnm-close:hover .thnm-close-bar { background: var(--thnm-close-hover, #C91C1C); }

/* Menú mobile */
.thnm-nav { height: 100%; }

.thnm-menu,
.thnm-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thnm-menu a {
    display: block;
    color: var(--thnm-text, #ffffff);
    text-decoration: none;
    transition: color 0.2s ease;
}

.thnm-menu a:hover,
.thnm-menu .current-menu-item > a,
.thnm-menu .current-menu-ancestor > a { color: var(--thnm-accent, #C91C1C); }

.thnm-menu > li > a {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 0;
    border-bottom: 1px solid var(--thnm-item-sep, rgba(255,255,255,0.08));
}

/* Flecha submenú mobile */
.thnm-arrow {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: var(--thnm-text, #ffffff);
    transition: color 0.2s ease;
}

.thnm-arrow svg {
    width: 14px; height: 14px;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

li.thnm-sub-open > a .thnm-arrow svg { transform: rotate(180deg); }
li.thnm-sub-open > a .thnm-arrow     { color: var(--thnm-accent, #C91C1C); }

.thnm-menu .sub-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--thnm-submenu-bg, rgba(255,255,255,0.04));
}

.thnm-menu li.thnm-sub-open > .sub-menu { max-height: 800px; }

.thnm-menu .sub-menu a {
    font-size: 0.95rem;
    padding: 10px 0 10px 20px;
    border-bottom: 1px solid var(--thnm-item-sep, rgba(255,255,255,0.08));
}

.thnm-menu .sub-menu .sub-menu a {
    padding-left: 36px;
    font-size: 0.88rem;
    opacity: 0.8;
}

/* ════════════════════════════════════════════════════════════
   EFECTOS DEL OVERLAY
   ════════════════════════════════════════════════════════════ */

/* Drawer derecho */
[data-effect="drawer-right"] .thnm-panel {
    top: 0; right: 0; bottom: 0;
    width: min(var(--thnm-drawer-width, 320px), 90vw);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-effect="drawer-right"].is-open .thnm-panel { transform: translateX(0); }

/* Drawer izquierdo */
[data-effect="drawer-left"] .thnm-panel {
    top: 0; left: 0; bottom: 0;
    width: min(var(--thnm-drawer-width, 320px), 90vw);
    transform: translateX(-100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-effect="drawer-left"].is-open .thnm-panel { transform: translateX(0); }

/* Fullscreen con stagger */
[data-effect="fullscreen"] .thnm-panel {
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-effect="fullscreen"].is-open .thnm-panel { opacity: 1; }
[data-effect="fullscreen"] .thnm-backdrop      { display: none; }
[data-effect="fullscreen"] .thnm-menu > li > a { font-size: 1.6rem; }

[data-effect="fullscreen"] .thnm-menu > li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.34,1.3,0.64,1),
                transform 0.4s cubic-bezier(0.34,1.3,0.64,1);
}
[data-effect="fullscreen"].is-open .thnm-menu > li { opacity: 1; transform: none; }

[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(1)   { transition-delay: 0.06s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(2)   { transition-delay: 0.12s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(3)   { transition-delay: 0.18s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(4)   { transition-delay: 0.24s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(5)   { transition-delay: 0.30s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(6)   { transition-delay: 0.36s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(7)   { transition-delay: 0.42s; }
[data-effect="fullscreen"].is-open .thnm-menu > li:nth-child(n+8) { transition-delay: 0.48s; }
[data-effect="fullscreen"]:not(.is-open) .thnm-menu > li          { transition-delay: 0s !important; }

/* Slide desde arriba */
[data-effect="slide-down"] .thnm-panel {
    top: 0; left: 0; right: 0;
    max-height: 85vh;
    transform: translateY(-100%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-effect="slide-down"].is-open .thnm-panel { transform: translateY(0); }

[data-effect="slide-down"] .thnm-menu > li {
    opacity: 0;
    transition: opacity 0.3s ease;
}
[data-effect="slide-down"].is-open .thnm-menu > li { opacity: 1; }
[data-effect="slide-down"].is-open .thnm-menu > li:nth-child(1) { transition-delay: 0.15s; }
[data-effect="slide-down"].is-open .thnm-menu > li:nth-child(2) { transition-delay: 0.22s; }
[data-effect="slide-down"].is-open .thnm-menu > li:nth-child(3) { transition-delay: 0.29s; }
[data-effect="slide-down"].is-open .thnm-menu > li:nth-child(4) { transition-delay: 0.36s; }
[data-effect="slide-down"].is-open .thnm-menu > li:nth-child(n+5){ transition-delay: 0.40s; }
[data-effect="slide-down"]:not(.is-open) .thnm-menu > li         { transition-delay: 0s !important; }

/* Fade + escala */
[data-effect="fade"] .thnm-panel {
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
[data-effect="fade"].is-open .thnm-panel { opacity: 1; transform: scale(1); }
[data-effect="fade"] .thnm-backdrop      { display: none; }

/* ── Blur de fondo ── */
body.thnm-blur-active > *:not(.thnm-overlay):not(.thnm-toggle-wrap) {
    filter: blur(4px);
    transition: filter 0.35s ease;
}

/* ── Scroll lock ── */
body.thnm-open { overflow: hidden; }
