/**
 * Drasanvi Menu Categorías
 * Estilos para:
 *   - [drasanvi_menu_categorias]          → nav simple (columnas)
 *   - [drasanvi_header_menu_shortcode]    → botón + mega-dropdown full-width blanco
 */

/* ═══════════════════════════════════════════════════════════════
   1. SHORTCODE SIMPLE: .dsv-menu-cats
   ═══════════════════════════════════════════════════════════════ */
.dsv-menu-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dsv-menu-cats__group { min-width: 140px; }
.dsv-menu-cats__parent {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    margin-bottom: 10px;
    color: inherit;
}
.dsv-menu-cats__parent:hover { text-decoration: underline; }
.dsv-menu-cats__list { list-style: none; margin: 0; padding: 0; }
.dsv-menu-cats__list li { margin-bottom: 5px; line-height: 1.3; }
.dsv-menu-cats__list a {
    text-decoration: none;
    font-size: .875rem;
    color: inherit;
    opacity: .85;
    transition: opacity .15s;
}
.dsv-menu-cats__list a:hover { opacity: 1; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   2. HEADER MEGA-MENU: .dsv-hdr-menu
   ═══════════════════════════════════════════════════════════════ */

/*
  Estructura HTML:
  div.dsv-hdr-menu
    div.dsv-hdr-menu__head               ← área clicable (texto + caret)
      span.e-n-menu-title-text.dsv-hdr-menu__label
      button.dsv-hdr-menu__toggle
        span.dsv-caret.dsv-caret--close  ← caret-down (cerrado)
        span.dsv-caret.dsv-caret--open   ← caret-up   (abierto)
    div.dsv-hdr-menu__panel
*/

/*
  Wrapper: display:flex (no inline-flex) para comportarse igual que
  li.e-n-menu-item dentro del flex container ul.e-n-menu-heading.
  align-self:center alinea verticalmente en ese flex container
  (vertical-align no funciona en hijos de flex).
*/
.dsv-hdr-menu {
    display: flex;
    align-items: center;
    align-self: center;
    position: relative;
}

/* Cabecera clicable: fila con texto + caret */
.dsv-hdr-menu__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

/* Label: mayúsculas + peso explícito (Elementor Pro fija 600 en e-n-menu-title-text) */
.dsv-hdr-menu .e-n-menu-title-text {
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 14px;
}

/* Reset del <button> caret — sin ninguna clase de Elementor */
.dsv-hdr-menu .dsv-hdr-menu__toggle {
    background: none;
    border: none;
    padding: 0 0 0 4px;
    margin: 0;
    cursor: pointer;
    color: inherit;
    outline: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.dsv-hdr-menu .dsv-hdr-menu__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* SVG: tamaño explícito + color vía currentColor */
.dsv-hdr-menu .e-font-icon-svg {
    width: 10px;
    height: 10px;
    display: block;
    fill: currentColor;
}

/*
  Carets con clases 100% propias: ninguna regla de Elementor puede interferir.
  Por defecto los dos spans tienen display:inline-flex (!important como red de seguridad).
  Luego ocultamos el que no corresponde según aria-expanded.
*/
.dsv-caret { display: inline-flex !important; }
.dsv-hdr-menu__toggle[aria-expanded="false"] .dsv-caret--open  { display: none !important; }
.dsv-hdr-menu__toggle[aria-expanded="true"]  .dsv-caret--close { display: none !important; }

/* ── Color según estado del sticky header (mismo patrón que drasanvi-lang__name) ────── */
/* Transición suave al cambiar de transparente a opaco (igual que Elementor) */
.dsv-hdr-menu__head {
    transition: color .3s ease;
}
/* Header transparente (por defecto) → texto blanco */
#menuca .dsv-hdr-menu {
    color: #fff;
}
/* Header scrolleado → color heredado del nav (oscuro) */
#menuca.dsv-scrolled .dsv-hdr-menu {
    color: inherit;
}

/* ── Panel mega-dropdown ─────────────────────────────────────────────── */
/* position:fixed + top calculado por JS desde el bottom de dsv-hdr-menu__head */
.dsv-hdr-menu__panel {
    position: fixed;
    left: 0;
    width: 100vw;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .13);
    z-index: 9999;
    padding: 32px 0;
    box-sizing: border-box;
}
.dsv-hdr-menu__panel[hidden] { display: none !important; }

/* Interior centrado */
.dsv-hdr-menu__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
}

/* Columna */
.dsv-hdr-menu__col {
    min-width: 130px;
    flex: 1 1 130px;
    max-width: 220px;
}

/* Título de columna (categoría padre) */
.dsv-hdr-menu__col-title {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--e-global-color-primary);
    text-decoration: none;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsv-hdr-menu__col-title:hover { text-decoration: underline; }

/* Subcategorías */
.dsv-hdr-menu__col ul { list-style: none; margin: 0; padding: 0; }
.dsv-hdr-menu__col ul li { margin-bottom: 7px; line-height: 1.3; }
.dsv-hdr-menu__col ul li a {
    text-decoration: none;
    font-size: .875rem;
    color: var(--e-global-color-text);
    transition: color .15s;
}
.dsv-hdr-menu__col ul li a:hover { color: var(--e-global-color-primary); }

@media (max-width: 767px) {
    .dsv-hdr-menu__panel { padding: 20px 0; overflow-y: auto; max-height: 70vh; }
    .dsv-hdr-menu__col {
        min-width: 100%; max-width: 100%; flex-basis: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .1); padding-bottom: 12px;
    }
    .dsv-hdr-menu__footer { padding: 12px 16px; }
}

/* ── Footer del panel: CTA «ver catálogo completo» (abajo a la derecha) ─────── */
.dsv-hdr-menu__footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: right;
}

/* .dsv-hdr-menu__cta: estilos del kit copiados con vars propias
   (el selector del kit exige .elementor-widget-button como ancestro, que no tenemos) */
.dsv-hdr-menu__cta {
    font-family: var(--dsv-font-body, inherit);
    font-weight: 500;
    font-size: var(--dsv-text-sm, .875rem);
    letter-spacing: .04em;
    border-radius: var(--dsv-radius-full, 999px);
    padding: .75rem 2rem;
    background-color: var(--dsv-primary, var(--e-global-color-primary, #00a850));
    color: var(--dsv-white, #fff);
    border: 2px solid transparent;
    text-decoration: none;
    display: inline-block;
    transition: background var(--dsv-ease-fast, .15s), box-shadow var(--dsv-ease-fast, .15s);
}
.dsv-hdr-menu__cta:hover,
.dsv-hdr-menu__cta:focus {
    background-color: var(--dsv-primary-dark, #007a3d);
    color: var(--dsv-white, #fff);
    box-shadow: 0 4px 14px rgba(0,105,90,.3);
    text-decoration: none;
}

/* Panel con foco programático (tabindex="-1"): sin outline visible */
.dsv-hdr-menu__panel:focus { outline: none; }

/* Columna standalone: en layout cols (no flow), el título va sin línea y sin margen inferior
   porque no hay lista debajo. En flow conserva el mismo aspecto que cualquier otra cabecera. */
.dsv-hdr-menu__inner:not(.dsv-hdr-menu__inner--flow) .dsv-hdr-menu__col--standalone .dsv-hdr-menu__col-title {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ── Layout flow: CSS Grid 4 columnas ───────────────────────────────────────── */
.dsv-hdr-menu__inner--flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
}
.dsv-hdr-menu__inner--flow > .dsv-hdr-menu__col {
    min-width: 0;
    max-width: none;
    flex: none;
}
/* Grupo multi-col: grid-column: span N aplicado inline desde PHP.
   El .dsv-hdr-menu__col-title actúa como cabecera compartida de todos los chunks. */
.dsv-hdr-menu__col-group {
    min-width: 0;
}
/* Sublistas en dos (o más) columnas dentro del grupo */
.dsv-hdr-menu__col-group__body {
    display: flex;
    gap: 40px;   /* misma medida que column-gap del grid: subcolumnas del mismo ancho */
}
.dsv-hdr-menu__col-group__body .dsv-hdr-menu__col {
    flex: 1;
    min-width: 0;
    max-width: none;
}
/* Subcats dentro del grupo: espaciado vertical más compacto */
.dsv-hdr-menu__col-group__body .dsv-hdr-menu__col ul li { margin-bottom: 4px; }
/* CTA en flow: auto-posicionado en la última celda disponible */
.dsv-hdr-menu__inner--flow .dsv-hdr-menu__col--cta,
.dsv-hdr-menu__flow-singles .dsv-hdr-menu__col--cta {
    align-self: end;
    padding-bottom: 4px;
}
/* Sección izquierda del two-section flow: contiene los col-group */
.dsv-hdr-menu__flow-groups {
    /* grid-column: span N aplicado inline desde PHP */
}
/* Sección derecha del two-section flow: CSS columns para que los items fluyan
   verticalmente sin forzar row-heights uniformes (evita huecos en columnas cortas) */
.dsv-hdr-menu__flow-singles {
    /* grid-column: span M e --dsv-inner-cols aplicados inline desde PHP */
    column-count: var(--dsv-inner-cols, 2);
    column-gap: 40px;
}
.dsv-hdr-menu__flow-singles .dsv-hdr-menu__col {
    break-inside: avoid;
    display: block;
    margin-top: 16px;  /* espacio entre elementos de primer nivel en la sección singles */
}
.dsv-hdr-menu__flow-singles .dsv-hdr-menu__col:first-child { margin-top: 0; }

/* ── Mobile hardening del dropdown Productos ───────────────────────────── */
@media (max-width: 767px) {
    .dsv-hdr-menu__panel {
        padding: 16px 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dsv-hdr-menu__inner,
    .dsv-hdr-menu__inner--flow {
        display: block;
        padding: 0 16px;
    }

    .dsv-hdr-menu__col,
    .dsv-hdr-menu__inner--flow > .dsv-hdr-menu__col {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        padding-bottom: 12px;
        margin-top: 0;
    }

    .dsv-hdr-menu__col-title {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 8px;
    }

    .dsv-hdr-menu__col-group__body {
        display: block;
        gap: 0;
    }

    /* En móvil, los chunks internos de un mismo grupo no deben llevar separadores */
    .dsv-hdr-menu__col-group__body .dsv-hdr-menu__col {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 8px;
    }

    .dsv-hdr-menu__col-group__body .dsv-hdr-menu__col:last-child {
        margin-bottom: 0;
    }

    .dsv-hdr-menu__flow-singles {
        column-count: 1;
        column-gap: 0;
    }

    .dsv-hdr-menu__flow-singles .dsv-hdr-menu__col {
        break-inside: auto;
        margin-top: 0;
    }
}