/* Widget "nav_menu" — también lo usa "menu_cart" en modo "Panel desplegable"
   (wrapper/drawer/overlay genéricos), ver Karnak_Widget_Assets. */

/* ── Submenús (WP menu con hijos) ──────────────────────────
   Base = comportamiento horizontal: dropdown flotante en hover (o con la
   clase .karnak-submenu-open, para touch/teclado — ver initNavSubmenus() en
   el JS de este módulo). Aplica tal cual al modo "Inline" puro y a la copia
   .karnak-nav-inline que se muestra arriba del breakpoint en drawer/overlay.
   El acordeón de drawer/overlay (abajo del breakpoint) lo pisa más abajo. */
.karnak-nav-menu { display: block; }
.karnak-nav-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.karnak-nav-menu-list li { display: block; }
.karnak-nav-menu-list a {
    display: inline-block;
    padding: 6px 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s;
}
.karnak-nav-menu-list a:hover { opacity: .7; }

.karnak-nav-menu-list .menu-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.karnak-menu-caret {
    display: inline-flex;
    width: 9px;
    height: 9px;
    margin-left: 5px;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.karnak-nav-menu-list .menu-item:not(.menu-item-has-children) > .karnak-menu-caret { display: none; }

.karnak-nav-menu-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    color: #111;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    border-radius: 6px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Nivel 2+: despliega hacia la derecha (flyout), no debajo */
.karnak-nav-menu-list .sub-menu .sub-menu { top: 0; left: 100%; }
.karnak-nav-menu-list .sub-menu .karnak-menu-caret { transform: rotate(-90deg); }

.karnak-nav-menu-list .menu-item:hover > .sub-menu,
.karnak-nav-menu-list .menu-item.karnak-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
.karnak-nav-menu-list .sub-menu .menu-item { flex-wrap: nowrap; }
.karnak-nav-menu-list .sub-menu .menu-item > a {
    padding: 8px 20px;
    white-space: nowrap;
    color: inherit;
    display: flex;
    width: 100%;
}

/* Animación de apertura configurable (widget: Estilos → Submenú) — "slide"
   (translateY de arriba, ya definido en la regla base) es el default. */
.karnak-widget-nav_menu[data-submenu-anim="fade"] .sub-menu { transform: none; }
.karnak-widget-nav_menu[data-submenu-anim="zoom"] .sub-menu { transform: scale(.94); transform-origin: top left; }
.karnak-widget-nav_menu[data-submenu-anim="zoom"] .sub-menu .sub-menu { transform-origin: top left; }
.karnak-widget-nav_menu[data-submenu-anim="zoom"] .menu-item:hover > .sub-menu,
.karnak-widget-nav_menu[data-submenu-anim="zoom"] .menu-item.karnak-submenu-open > .sub-menu { transform: none; }

/* Efecto hover del item de nivel superior (widget: Estilos → Submenú) —
   "none" (default) deja el opacity:.7 de arriba como único feedback. */
.karnak-widget-nav_menu[data-hover-effect] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a,
.karnak-widget-nav_menu[data-hover-effect] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a {
    position: relative;
}
.karnak-widget-nav_menu[data-hover-effect="underline"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a::after,
.karnak-widget-nav_menu[data-hover-effect="underline"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    background: var(--karnak-nav-hover-color, currentColor);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="left"]   .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a::after,
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="left"]   .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a::after { transform-origin: left; }
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="right"]  .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a::after,
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="right"]  .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a::after { transform-origin: right; }
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="center"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a::after,
.karnak-widget-nav_menu[data-hover-effect="underline"][data-hover-dir="center"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a::after { transform-origin: center; }
.karnak-widget-nav_menu[data-hover-effect="underline"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item:hover > a::after,
.karnak-widget-nav_menu[data-hover-effect="underline"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item:hover > a::after { transform: scaleX(1); }

.karnak-widget-nav_menu[data-hover-effect="background"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item > a,
.karnak-widget-nav_menu[data-hover-effect="background"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item > a {
    border-radius: 4px;
    transition: background-color .2s ease, opacity .15s ease;
}
.karnak-widget-nav_menu[data-hover-effect="background"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item:hover > a,
.karnak-widget-nav_menu[data-hover-effect="background"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item:hover > a {
    background: var(--karnak-nav-hover-color, rgba(0,0,0,.06));
}
.karnak-widget-nav_menu[data-hover-effect="color"] .karnak-nav-menu > .karnak-nav-menu-list > .menu-item:hover > a,
.karnak-widget-nav_menu[data-hover-effect="color"] .karnak-nav-inline > .karnak-nav-menu-list > .menu-item:hover > a {
    color: var(--karnak-nav-hover-color, currentColor);
}

/* ── Nav wrap (drawer / overlay) ──────────────────────────── */
/* .karnak-nav-wrap es inline-flex, así que por default se alinea a
   "baseline" dentro de la línea fantasma que arma el line-height heredado
   de su contenedor (el propio .karnak-widget-nav_menu, que a su vez lo
   hereda del body/tema — Astra trae ~1.65) — corre el ícono hamburguesa
   hacia abajo del centro visual del widget. El line-height:0 del botón
   (.karnak-nav-trigger, más abajo) resuelve el suyo propio, pero no el del
   CONTENEDOR que lo aloja, que es la causa real de este corrimiento
   (confirmado 2026-08-24 en karnakwp.com con Astra). */
.karnak-widget-nav_menu {
    line-height: 0;
}
.karnak-nav-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.karnak-nav-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    /* line-height:1 (heredable a font-size grande) seguía dejando una caja de
       línea más alta que el ícono, corriendo el centrado vertical del
       hamburger dentro del botón — 0 saca esa caja fantasma (pedido
       2026-08-23). .karnak-trigger-label restaura su propio line-height
       normal abajo, para no heredar el 0 y aplastar el texto del botón.
       !important: el tema activo (confirmado con Astra) trae su propia regla
       genérica de line-height para CUALQUIER <button> del sitio (con una
       custom property propia, tipo --ast-body-line-height) — sin esto la
       del tema le sigue ganando por cascada a este botón, que es 100% propio
       de Karnak e independiente del header del tema. */
    line-height: 0 !important;
}
.karnak-trigger-label { line-height: 1.2; }

.karnak-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
    flex-shrink: 0;
}
.karnak-hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}
.karnak-nav-wrap.karnak-nav-open .karnak-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.karnak-nav-wrap.karnak-nav-open .karnak-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.karnak-nav-wrap.karnak-nav-open .karnak-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Visibilidad por dispositivo — 3 clases independientes (Desktop/Tablet/
   Mobile), una por tramo, ya resueltas del lado de PHP con su herencia
   (Karnak_Renderer::render_widget(), caso nav_menu) — acá solo pintan, sin
   ninguna lógica de "si no está seteado, heredá": eso ya vino resuelto.
   Reemplaza las 3 combinaciones fijas de .karnak-nav-bp-{always,tablet,mobile}
   por control independiente por ícono de dispositivo en el editor (pedido
   2026-08-23) — Desktop puede ser hamburguesa (antes solo existía via
   "Siempre", ahora es un tramo más). */
.karnak-nav-wrap .karnak-nav-inline  { display: block; }
.karnak-nav-wrap .karnak-nav-trigger { display: none; }
.karnak-nav-wrap.karnak-nav-d-hb .karnak-nav-inline  { display: none !important; }
.karnak-nav-wrap.karnak-nav-d-hb .karnak-nav-trigger { display: flex; }

@media (max-width: 1024px) {
    .karnak-nav-wrap.karnak-nav-t-hb     .karnak-nav-inline  { display: none !important; }
    .karnak-nav-wrap.karnak-nav-t-hb     .karnak-nav-trigger { display: flex !important; }
    .karnak-nav-wrap.karnak-nav-t-inline .karnak-nav-inline  { display: block !important; }
    .karnak-nav-wrap.karnak-nav-t-inline .karnak-nav-trigger { display: none !important; }
}
@media (max-width: 767px) {
    .karnak-nav-wrap.karnak-nav-m-hb     .karnak-nav-inline  { display: none !important; }
    .karnak-nav-wrap.karnak-nav-m-hb     .karnak-nav-trigger { display: flex !important; }
    .karnak-nav-wrap.karnak-nav-m-inline .karnak-nav-inline  { display: block !important; }
    .karnak-nav-wrap.karnak-nav-m-inline .karnak-nav-trigger { display: none !important; }
}

/* Fondo oscuro (compartido por drawer y overlay) */
.karnak-nav-overlay-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    /* Tiene que ganarle al header sticky (.karnak-header--sticky, z-index:9999
       — Karnak_Theme_Builder::header_fx_css()) para no quedar tapado por el
       logo/header cuando el menú vive ahí adentro — moverlo a <body>
       (initNavMenus(), módulo nav-menu.js) solo escapa del contexto de
       apilamiento del header, no alcanza si el z-index sigue perdiendo la
       comparación (bug encontrado 2026-08-23). */
    z-index: 99990;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.karnak-nav-wrap.karnak-nav-open .karnak-nav-overlay-bg,
.karnak-nav-overlay-bg.karnak-nav-open {
    opacity: 1;
    pointer-events: all;
}

/* ── Drawer ──────────────────────────────────────────────── */
.karnak-drawer-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: min(320px, 85vw);
    background: #fff;
    color: #111;
    z-index: 99991; /* > header sticky (9999) y > .karnak-nav-overlay-bg — ver ahí */
    overflow-y: auto;
    padding: 20px 24px;
    box-shadow: 4px 0 32px rgba(0,0,0,.18);
    transform: translateX(-110%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.karnak-drawer-panel[data-side="right"] {
    left: auto;
    right: 0;
    transform: translateX(110%);
    box-shadow: -4px 0 32px rgba(0,0,0,.18);
}
.karnak-drawer-panel.karnak-nav-open,
.karnak-nav-wrap.karnak-nav-open .karnak-drawer-panel { transform: translateX(0) !important; }

/* Fila de arriba: logo opcional a la izquierda + ✕ siempre pegado a la
   derecha (margin-left:auto en el botón, no justify-content — así funciona
   estén o no el logo presente, sin necesitar dos variantes de layout). */
.karnak-drawer-panel-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    min-height: 28px;
}
.karnak-drawer-logo-link { display: block; line-height: 0; }
.karnak-drawer-logo { display: block; max-height: 32px; width: auto; }
.karnak-drawer-close {
    /* Antes: display:flex + width:100% (para poder alinearlo a la derecha con
       justify-content) — pero eso hace clickeable TODO el ancho del panel, no
       solo la ✕ (bug encontrado 2026-08-23). Ahora vive en .karnak-drawer-
       panel-head, empujado a la derecha con margin-left:auto. */
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0;
    color: inherit;
    line-height: 1;
    opacity: .6;
    transition: opacity .15s;
}
.karnak-drawer-close:hover { opacity: 1; }
.karnak-drawer-panel .karnak-nav-menu-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
/* Grid de 2 columnas: texto (auto) + resto de la fila (1fr) para el caret —
   clickear la palabra pega en el link, clickear cualquier otro punto de la
   fila pega en el caret y abre el submenú. El <ul class="sub-menu"> pasa a
   ocupar su PROPIA fila del grid completa (grid-column:1/-1), separada de la
   fila del link/caret — así, a diferencia de un position:absolute contra
   .menu-item entero, el caret nunca se estira sobre el submenú ya abierto
   (que crece hacia abajo en su propia fila) y nunca le come clicks a los
   links de adentro (PC, Armá tu pc). Se probaron dos variantes con flexbox
   y una con position:absolute antes de esta (2026-08-23) — crecer el link
   llenaba el espacio libre y se comía el click; crecer el caret con flex:1
   dependía de que sobrara espacio en la línea flex, poco confiable; absolute
   contra todo el <li> se hubiera comido los clicks del submenú abierto. */
.karnak-drawer-panel .karnak-nav-menu-list .menu-item {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.karnak-drawer-panel .karnak-nav-menu-list a {
    padding: 12px 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
}
/* .menu-item-has-children en el selector (no alcanza con > .karnak-menu-caret
   solo) — esta regla y ".menu-item:not(.menu-item-has-children) >
   .karnak-menu-caret{display:none}" (arriba en el archivo) tienen la MISMA
   especificidad; sin filtrar acá también por has-children, esta gana por
   venir después en el archivo y le mostraba flechita a items SIN hijos
   (PC, Armá tu pc) que no la debían tener (bug encontrado 2026-08-23). */
.karnak-drawer-panel .karnak-nav-menu-list .menu-item.menu-item-has-children > .karnak-menu-caret {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Sin width:100% el caret no se estira para llenar su columna del grid
       (1fr) — queda del ancho de su propio contenido (el ícono chico). Sin
       align-self:stretch pasa lo mismo pero en alto — queda centrado y
       finito (9px) en vez de ocupar toda la fila. Ambos confirmados
       midiendo con Chrome headless (bug encontrado 2026-08-23). */
    width: 100%;
    height: 100%;
    align-self: stretch;
    padding: 0 6px;
    margin: 0;
    cursor: pointer;
}
.karnak-drawer-panel .karnak-nav-menu-list .menu-item > .sub-menu {
    grid-column: 1 / -1;
}

/* ── Overlay ─────────────────────────────────────────────── */
.karnak-overlay-panel {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,.93);
    color: #fff;
    z-index: 99991; /* > header sticky (9999) — ver .karnak-nav-overlay-bg arriba */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    overflow-y: auto;
}
.karnak-overlay-panel.karnak-nav-open,
.karnak-nav-wrap.karnak-nav-open .karnak-overlay-panel {
    opacity: 1;
    pointer-events: all;
}
.karnak-overlay-close {
    position: absolute;
    top: 24px;
    right: 28px;
    background: none;
    border: none;
    /* inherit, no #fff fijo — así respeta un panelColor custom (ver
       Otros → color del panel, pedido 2026-08-23) en vez de siempre blanco. */
    color: inherit;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: .6;
    transition: opacity .15s;
}
.karnak-overlay-close:hover { opacity: 1; }
/* Logo opcional — misma fila que la ✕ (ambos absolute, mismo top), a la
   izquierda en vez de centrado con el resto (que ya está centrado por el
   propio .karnak-overlay-panel). */
.karnak-overlay-panel .karnak-drawer-logo-link {
    position: absolute;
    top: 24px;
    left: 28px;
}
.karnak-overlay-panel .karnak-nav-menu-list {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.karnak-overlay-panel .karnak-nav-menu-list a {
    font-size: 2rem;
    color: inherit;
    font-weight: 600;
    padding: 8px 24px;
    letter-spacing: -.01em;
    opacity: 1;
}
.karnak-overlay-panel .karnak-nav-menu-list a:hover { opacity: .6; }

/* ── Submenús en acordeón (drawer / overlay, listado vertical) ────────────
   Pisa el dropdown flotante de arriba: acá el sub-menu es parte del flujo
   normal (no absolute), colapsado con max-height y desplegado por JS al
   tocar la flecha (initNavSubmenus(), módulo nav-menu.js) — no en :hover,
   un panel táctil no tiene hover real. */
.karnak-drawer-panel .karnak-nav-menu-list .menu-item,
.karnak-overlay-panel .karnak-nav-menu-list .menu-item { flex-wrap: wrap; }
.karnak-drawer-panel .karnak-nav-menu-list .sub-menu,
.karnak-overlay-panel .karnak-nav-menu-list .sub-menu {
    position: static;
    flex-basis: 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    background: none;
    color: inherit;
    margin: 0;
    padding: 0 0 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.karnak-drawer-panel .karnak-nav-menu-list .sub-menu .menu-item > a,
.karnak-overlay-panel .karnak-nav-menu-list .sub-menu .menu-item > a {
    padding: 10px 0;
    font-size: .9em;
}
.karnak-drawer-panel .karnak-menu-caret,
.karnak-overlay-panel .karnak-menu-caret {
    cursor: pointer;
    padding: 10px;
    margin: -10px -10px -10px 0;
}
/* Rotar el <svg> (chico, 10x6) y no el .karnak-menu-caret entero — en Drawer
   ese contenedor ahora es grande (ocupa el resto de la fila, ver arriba), y
   rotarlo A ÉL giraba la flechita (alineada a la derecha adentro) alrededor
   del CENTRO de esa caja grande, haciéndola "saltar" de un lado al otro al
   abrir/cerrar (bug encontrado 2026-08-23). */
.karnak-drawer-panel .menu-item.karnak-submenu-open > .karnak-menu-caret svg,
.karnak-overlay-panel .menu-item.karnak-submenu-open > .karnak-menu-caret svg { transform: rotate(180deg); }

/* ── Overlay de fondo opcional (Drawer) ──────────────────────
   Apagado: se mantiene el div (sigue sirviendo para cerrar con click afuera,
   ver el JS de este módulo) pero sin oscurecer — el resto de la pantalla
   queda visible tal cual. */
.karnak-nav-wrap.karnak-nav-no-overlay-bg .karnak-nav-overlay-bg { background: transparent; }

/* ── Contenido extra (Drawer/Overlay) ─────────────────────────
   Bloque opcional debajo del menú: texto libre + contacto + redes. Sin
   colores propios — hereda color del panel (currentColor), así sigue el
   texto/color que ya tenga el widget (ver [[feedback_widget_conventions]]). */
.karnak-nav-extra-sep {
    height: 1px;
    background: currentColor;
    opacity: .15;
    margin: 20px 0;
}
.karnak-nav-extra-content { font-size: .9em; line-height: 1.5; }
.karnak-nav-extra-text { margin: 0 0 10px; opacity: .85; }
.karnak-nav-extra-contact { margin: 0 0 14px; }
.karnak-nav-extra-contact a,
.karnak-nav-extra-social a { color: inherit; }
.karnak-nav-extra-contact a:hover,
.karnak-nav-extra-social a:hover { opacity: .7; }
.karnak-nav-extra-social {
    display: flex;
    gap: 14px;
    align-items: center;
}
.karnak-overlay-panel .karnak-nav-extra-social { justify-content: center; }
.karnak-nav-extra-social a svg { width: 18px; height: 18px; display: block; }