/**
 * inloff — Enhance del megamenú Flatsome
 *
 * NO sobrescribe la lógica de Flatsome (que sigue manejando posicionamiento
 * + responsive). Solo capa de branding + spacing editorial sobre los selectores
 * que Flatsome genera para nav-dropdown y nav-megamenu.
 *
 * Selectores Flatsome relevantes:
 *   .nav-dropdown                      → dropdown estándar
 *   .nav-dropdown.nav-dropdown-default → look default
 *   .nav-dropdown.nav-dropdown-bold    → look bold (opción del menu admin)
 *   .nav-megamenu (li > .nav-dropdown) → megamenu full-width
 *   .header-nav-main li > a            → link top nivel
 */

/* ============================================================
   Top-level nav: typography + spacing inloff
   ============================================================ */

.header-nav-main > li > a,
.nav-vertical .header-nav-main > li > a {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1B2B4B;
    transition: color .15s ease;
    padding: 10px 14px;
}

.header-nav-main > li > a:hover,
.header-nav-main > li.current-menu-item > a,
.header-nav-main > li.current-menu-parent > a,
.header-nav-main > li.current-menu-ancestor > a {
    color: #C9A86A;
}

/* Active underline animado (decoración editorial sutil) */
.header-nav-main > li > a {
    position: relative;
}
.header-nav-main > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1.5px;
    background: #C9A86A;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.header-nav-main > li:hover > a::after,
.header-nav-main > li.current-menu-item > a::after,
.header-nav-main > li.current-menu-parent > a::after {
    transform: scaleX(1);
}

/* Header sobre fondo dark/navy (transparency) */
.header-bg-color-dark .header-nav-main > li > a,
.dark .header-nav-main > li > a {
    color: #FFFFFF;
}
.header-bg-color-dark .header-nav-main > li > a:hover,
.dark .header-nav-main > li > a:hover {
    color: #C9A86A;
}

/* ============================================================
   Dropdown panel — Basel-style (TODOS los dropdowns)
   ------------------------------------------------------------
   Aplicamos el patrón Basel uniformemente a single-col y multi-col.
   Sin card-radius/borde, sombra hairline, links 14px gris medio,
   hover gold + slide-right. Variante megamenu añade padding extra +
   layout columnar (sección siguiente).
   ============================================================ */

.nav-dropdown,
.nav-dropdown.nav-dropdown-default {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-clip: border-box !important;
    border: none !important;
    border-top: 1px solid rgba(27, 43, 75, 0.04) !important;
    border-radius: 0 !important;
    box-shadow:
        0 12px 28px rgba(27, 43, 75, 0.08),
        0 1px 0 rgba(27, 43, 75, 0.03) !important;
    padding: 24px 28px !important;
    margin-top: 0 !important;
    min-width: 240px;
    /* Flatsome aplica z-index:9 pero hero text-overlays tienen z-index:10
       y aparecen ENCIMA del dropdown. Subimos a 1002 (1 más que el header
       sticky 1001) para que el dropdown siempre esté sobre cualquier
       contenido de página, incluyendo overlays del hero. */
    z-index: 1002 !important;
    /* Forzar isolation para crear stacking context propio en el dropdown.
       Defensa contra parents sin z-index que dejan bleed-through visual. */
    isolation: isolate !important;
}

/* Pseudo-elemento bulletproof: layer blanco sólido que pinta SIEMPRE por
   debajo del contenido del dropdown. Si por alguna razón el bg-color del
   contenedor no se renderiza opaco (transition stuck, flatsome quirk, etc),
   este ::before garantiza un fondo blanco bajo todos los items y title cols.
   Usamos width/height 100% y dimensions explícitas en lugar de inset top/right/
   bottom/left para evitar que el ::before quede colapsado en altura por algún
   bug de Flatsome con flex+absolute. */
.nav-dropdown.inloff-megamenu-multi::before,
.nav-dropdown.nav-dropdown-default::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #FFFFFF !important;
    z-index: 0;
    pointer-events: none;
}

/* Para que el ::before quede DETRÁS de los items pero SOBRE el fondo del
   page/hero, TODOS los items children dentro del dropdown necesitan
   z-index relativo (no solo megamenu). Si no, el ::before tapa los items
   en single-col dropdowns (texto invisible blanco sobre blanco). */
.nav-dropdown.inloff-megamenu-multi > *,
.nav-dropdown.nav-dropdown-default > * {
    position: relative;
    z-index: 1;
}

/* Links de dropdown (single-col + items internos de megamenu).
   Usamos :not(.nav-dropdown-col) para excluir títulos de columna,
   que se estilan aparte en la sección megamenu.
   Especificidad máxima: cubrimos .nav-dark y .header-bottom-nav que
   Flatsome usa para forzar color blanco en dropdowns dentro de headers
   dark — sin esto, el texto de single-col dropdowns sale blanco sobre
   blanco e invisible. */
.nav-dark .nav-dropdown li:not(.nav-dropdown-col) > a,
.header-bottom-nav .nav-dropdown li:not(.nav-dropdown-col) > a,
.nav-dropdown.nav-dropdown-default li:not(.nav-dropdown-col) > a,
.nav-dropdown li:not(.nav-dropdown-col) > a {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    color: #4a5878 !important;
    padding: 8px 4px !important;
    border-bottom: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition:
        color .15s ease,
        padding-left .2s cubic-bezier(.22, .61, .36, 1) !important;
}

.nav-dark .nav-dropdown li:not(.nav-dropdown-col) > a:hover,
.header-bottom-nav .nav-dropdown li:not(.nav-dropdown-col) > a:hover,
.nav-dropdown.nav-dropdown-default li:not(.nav-dropdown-col) > a:hover,
.nav-dropdown.nav-dropdown-default li:not(.nav-dropdown-col).current-menu-item > a,
.nav-dropdown li:not(.nav-dropdown-col) > a:hover,
.nav-dropdown li:not(.nav-dropdown-col).current-menu-item > a {
    color: #C9A86A !important;
    background: transparent !important;
    padding-left: 14px !important;
}

/* Chevron flotante en items con submenú anidado */
.nav-dropdown.nav-dropdown-default li.menu-item-has-children:not(.nav-dropdown-col) > a::after,
.nav-dropdown li.menu-item-has-children:not(.nav-dropdown-col) > a::after {
    content: "→";
    margin-left: auto;
    color: #C9A86A;
    font-size: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.nav-dropdown.nav-dropdown-default li.menu-item-has-children:not(.nav-dropdown-col) > a:hover::after,
.nav-dropdown li.menu-item-has-children:not(.nav-dropdown-col) > a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ------------------------------------------------------------
   Quitar la flecha pointer (triangle ::before/::after) que
   Flatsome añade a items con dropdown vía .nav-dropdown-has-arrow.
   El usuario la encuentra fea; preferimos conexión limpia
   menu-link → panel sin tooltip arrow.
   ------------------------------------------------------------ */
.nav-dropdown-has-arrow li.has-dropdown::before,
.nav-dropdown-has-arrow li.has-dropdown::after,
.header-bottom-nav li.has-dropdown::before,
.header-bottom-nav li.has-dropdown::after,
.header-nav li.has-dropdown::before,
.header-nav li.has-dropdown::after {
    display: none !important;
    border: none !important;
    content: none !important;
}

/* ------------------------------------------------------------
   Multi-item single-column dropdown (>10 items)
   Cuando Flatsome usa flex-wrap natural por muchos items,
   damos breathing room generoso al estilo Basel.
   ------------------------------------------------------------ */
.nav-dropdown.nav-dropdown-default:not(.inloff-megamenu-multi) {
    padding: 32px 36px !important;
    min-width: 280px;
}

/* ------------------------------------------------------------
   Megamenú PRODUCTOS (#menu-item-1400) — 2 columnas
   ------------------------------------------------------------
   La estructura (width 540 + flex 50%) vive en el Customizer
   ("Apariencia → Personalizar → CSS adicional", sección 6).
   Aquí aplicamos el styling Basel con specificity de ID para
   que gane sin tocar la regla del Customizer.
   ------------------------------------------------------------ */

#menu-item-1400 > .sub-menu,
#menu-item-1400 > .nav-dropdown,
#menu-item-1400 > ul.sub-menu.nav-dropdown {
    padding: 32px 36px !important;
    background: #FFFFFF !important;
    border: none !important;
    border-top: 1px solid rgba(27, 43, 75, 0.04) !important;
    border-radius: 0 !important;
    box-shadow:
        0 12px 28px rgba(27, 43, 75, 0.08),
        0 1px 0 rgba(27, 43, 75, 0.03) !important;
}

#menu-item-1400 > .sub-menu li > a,
#menu-item-1400 > .nav-dropdown li > a,
#menu-item-1400 > ul.sub-menu.nav-dropdown li > a {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    color: #4a5878 !important;
    padding: 8px 4px !important;
    border-bottom: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    transition:
        color .15s ease,
        padding-left .2s cubic-bezier(.22, .61, .36, 1) !important;
}

#menu-item-1400 > .sub-menu li > a:hover,
#menu-item-1400 > .nav-dropdown li > a:hover,
#menu-item-1400 > ul.sub-menu.nav-dropdown li > a:hover,
#menu-item-1400 > .sub-menu li.current-menu-item > a,
#menu-item-1400 > .nav-dropdown li.current-menu-item > a {
    color: #C9A86A !important;
    background: transparent !important;
    padding-left: 14px !important;
}

/* ============================================================
   Megamenú multi-columna — Basel-style editorial
   ------------------------------------------------------------
   Flatsome no añade .nav-megamenu al DOM: usa el mismo
   .nav-dropdown.nav-dropdown-default tanto para dropdowns simples
   como multi-columna. Distinguimos vía :has(> li.nav-dropdown-col)
   (Flatsome añade .nav-dropdown-col SOLO a columnas de megamenu).
   Técnica adaptada del demo Basel (xtemos.com/basel/):
   - panel plano sin radius/borde, sombra hairline
   - títulos columna grandes navy uppercase (sin border-bottom)
   - links gris claro 14px sin dividers, slide-right hover
   - respiración generosa (36px padding, 8px por item)
   ============================================================ */

.nav-dropdown.inloff-megamenu-multi {
    background: #FFFFFF !important;
    border: none !important;
    border-top: 1px solid rgba(27, 43, 75, 0.04) !important;
    border-radius: 0 !important;
    box-shadow:
        0 12px 28px rgba(27, 43, 75, 0.08),
        0 1px 0 rgba(27, 43, 75, 0.03) !important;
    padding: 36px 36px 0 !important;
    margin-top: 0 !important;
    /* Layout block tradicional con inline-block cols. Evita conflictos
       cross-browser de flex/grid con display:table-cell que Flatsome
       aplica a .nav-dropdown-col. Old-school pero bulletproof. */
    display: block !important;
    width: 1190px !important;
    font-size: 0 !important; /* elimina whitespace entre inline-blocks */
}

/* Clearfix para que el dropdown contenga sus floats/inline-block cols */
.nav-dropdown.inloff-megamenu-multi::after {
    content: "";
    display: table;
    clear: both;
}

/* Posición consistente entre megamenus: hacer los LIs que contienen megamenu
   con position:static para que el dropdown se posicione relativo al UL
   .header-bottom-nav (contenedor común) y no a su propio LI. Sin esto,
   BODAS sale en una x distinta a OTRAS CELEBRACIONES porque cada LI ocupa
   posiciones diferentes en el nav. Solo aplica a LIs con megamenu real. */
.header-bottom-nav > li.menu-item-has-children:has(> .inloff-megamenu-multi) {
    position: static !important;
}

/* Estado activo: forzar left:0 + bottom:auto + height:auto.
   CAUSA RAIZ del bug "dropdown colapsado a 37px con cols transparentes":
   Flatsome JS añade INLINE `inset: <Npx> 0px 0px` al dropdown activo
   (= top:N right:0 bottom:0 left:0). Con position:absolute + top + bottom
   ambos seteados, la altura se calcula PARA RELLENAR el contenedor
   posicionado más cercano (height:auto se IGNORA por la spec). Como ese
   contenedor solo mide ~78px (UL header-bottom-nav), el box pinta 37px
   de blanco arriba y los cols + service strip renderizan vía
   overflow:visible FUERA del panel pintado → fondo transparente sobre
   el hero al terminar la carga.
   Fix: forzar bottom:auto !important para liberar el ancla inferior, así
   height:auto se computa desde el contenido. left:0/right:0 mantienen
   el span horizontal full-width.
   max-height:none cubre el caso histórico donde Flatsome ponía
   max-height:inherit (resolvía al parent LI → 36px). */
li.current-dropdown > .nav-dropdown.inloff-megamenu-multi,
li.has-dropdown:hover > .nav-dropdown.inloff-megamenu-multi {
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    max-height: none !important;
    height: auto !important;
}

/* También en single-col dropdowns: garantizar opacity 1 + bottom:auto +
   max-height auto. bottom:auto evita el mismo bug del top+bottom anchor. */
li.current-dropdown > .nav-dropdown,
li.has-dropdown:hover > .nav-dropdown {
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    height: auto !important;
}

.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col {
    padding: 0 24px !important;
    /* Cols como inline-block side-by-side. Sin float (que rompe el flow).
       width 25% para distribución equitativa. Vertical-align: top.
       font-size restablecido (el parent tiene font-size:0 para eliminar
       whitespace entre inline-blocks). */
    display: inline-block !important;
    vertical-align: top !important;
    width: 25% !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Título de columna (es un <a> dentro del <li.nav-dropdown-col>) */
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col > a {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: #1B2B4B !important;
    padding: 0 0 16px !important;
    margin: 0 0 6px !important;
    border-bottom: none !important;
    background: transparent !important;
    pointer-events: none !important;
    line-height: 1.4 !important;
}

/* Submenu interno: reset card-style (no card dentro de card) +
   forzar display:block visible (Flatsome aplica display:none a los
   submenus anidados de las cols del megamenu hasta hover, lo que
   colapsaba la altura del panel a 37px). */
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col > ul.nav-column {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
}

/* Links internos: gris medio, lowercase, sin dividers, breathing room */
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col > ul.nav-column > li > a {
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    color: #4a5878 !important;
    padding: 8px 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition:
        color .15s ease,
        padding-left .2s cubic-bezier(.22, .61, .36, 1) !important;
}

.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col > ul.nav-column > li > a:hover,
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col > ul.nav-column > li.current-menu-item > a {
    color: #C9A86A !important;
    padding-left: 6px !important;
    background: transparent !important;
}

/* Imagen destacada dentro de columna (Flatsome la añade vía "Image"
   en el item del menú admin — col puede ser de imagen en lugar de links) */
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col img {
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(27, 43, 75, 0.08) !important;
    margin-bottom: 10px !important;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.nav-dropdown.inloff-megamenu-multi > li.nav-dropdown-col a:hover img {
    transform: scale(1.02);
}

/* Legacy .nav-megamenu (por si Flatsome lo añade en algún caso edge) */
.nav-dropdown.nav-megamenu,
.nav-megamenu .nav-dropdown {
    padding: 36px 36px 28px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow:
        0 12px 28px rgba(27, 43, 75, 0.08),
        0 1px 0 rgba(27, 43, 75, 0.03) !important;
}

/* ============================================================
   Service strip al pie del megamenu — inyectado por JS
   ------------------------------------------------------------
   inloff-megamenu.js añade un <li class="inloff-megamenu-services">
   al final de cada megamenu (≥3 cols). Estilo Basel: 4 servicios
   horizontales con icono SVG + título + subtítulo, separados por
   line-top sutil. Span full-width del megamenu (rompe el flex
   columnar del ul).
   ============================================================ */

.nav-dropdown li.inloff-megamenu-services {
    /* Con grid layout en parent: ocupar las 4 columnas via grid-column:
       1 / -1 (de la primera a la última línea). Ocupa el ancho completo. */
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% + 72px) !important;
    max-width: none !important;
    margin: 28px -36px 0 !important;
    padding: 22px 36px !important;
    border-top: 1px solid rgba(27, 43, 75, 0.08) !important;
    background: #F8F4ED !important;
    background-color: #F8F4ED !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    position: relative;
    z-index: 2;
    box-sizing: border-box !important;
}

.nav-dropdown li.nav-dropdown-col {
    order: 1;
}

.inloff-megamenu-services .inloff-service {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inloff-megamenu-services .inloff-service__icon {
    flex: 0 0 auto;
    color: #C9A86A;
    line-height: 0;
}

.inloff-megamenu-services .inloff-service__icon svg {
    display: block;
}

.inloff-megamenu-services .inloff-service__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.inloff-megamenu-services .inloff-service__text strong {
    font-size: 13px;
    font-weight: 600;
    color: #1B2B4B;
    letter-spacing: 0.2px;
}

.inloff-megamenu-services .inloff-service__text span {
    font-size: 12px;
    color: #4a5878;
    margin-top: 2px;
}

/* ============================================================
   Badges inline NEW / SALE / HOT en items de menu
   ------------------------------------------------------------
   Aplicar como class CSS al menu item desde WP Admin →
   Apariencia → Menús → "Clases CSS adicionales (opcional)":
     has-badge-new   → pill teal "NEW"
     has-badge-sale  → pill rojo "SALE"
     has-badge-hot   → pill naranja "HOT"
   ============================================================ */

.nav-dropdown li.has-badge-new > a::after,
.nav-dropdown li.has-badge-sale > a::after,
.nav-dropdown li.has-badge-hot > a::after {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1;
    color: #FFFFFF;
    border-radius: 2px;
    text-transform: uppercase;
    /* Sobreescribe el chevron flotante de menu-item-has-children */
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    margin-right: 0 !important;
}

.nav-dropdown li.has-badge-new > a::after { content: "NEW"; background: #179A94; }
.nav-dropdown li.has-badge-sale > a::after { content: "SALE"; background: #C44D4D; }
.nav-dropdown li.has-badge-hot > a::after { content: "HOT"; background: #D77A2A; }

/* No empujar el badge al hacer hover slide-right */
.nav-dropdown li.has-badge-new > a:hover::after,
.nav-dropdown li.has-badge-sale > a:hover::after,
.nav-dropdown li.has-badge-hot > a:hover::after {
    transform: none !important;
}

/* ============================================================
   Mobile: panel side de Flatsome — branding inloff
   ============================================================ */

.mfp-bg.off-canvas {
    background: rgba(27, 43, 75, 0.65) !important;
}

#main-menu .sidebar-menu,
#main-menu.mfp-content {
    background: #FFFFFF;
}

#main-menu .nav-sidebar > li > a {
    color: #1B2B4B !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 14px 18px !important;
    border-bottom: 1px solid #F0EBE0;
    text-transform: none;
}
#main-menu .nav-sidebar > li > a:hover,
#main-menu .nav-sidebar > li.current-menu-item > a {
    background: #F8F4ED;
    color: #C9A86A !important;
}

#main-menu .nav-sidebar .nav-sidebar-ul > li > a {
    color: #4a5878 !important;
    font-size: 13px;
    padding: 10px 18px 10px 36px !important;
}
#main-menu .nav-sidebar .nav-sidebar-ul > li > a:hover {
    color: #1B2B4B !important;
    background: #F8F4ED;
}