/* ════════════════════════════════════════════════════
   MEGA MENU — Frontend
   Ruta: mega-menu/assets/css/mega-menu.css
════════════════════════════════════════════════════ */

/* ── Panel de escritorio: ancho completo, bajo el ítem ── */
.hb-mm-panel {
    display: none;
    position: fixed;
    left: 0;
    width: 100vw;
    z-index: 9000;
    /* Color de fondo de TODO el panel — Ajustes → Mega Menu →
       "Fondo del menú desplegable". No es por card: la card en sí no
       tiene fondo propio (ver .hb-mm-card más abajo). */
    background: var(--hb-mm-panel-bg, #fff);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    border-top: 1px solid #eee;
}

.hb-mm-panel.is-open { display: block; }

.hb-mm-panel-inner {
    /* --theme-container-width / --theme-normal-container-max-width son
       las variables reales que usa Blocksy para su propio contenedor
       (.ct-container) — así el panel se adapta solo si el admin
       cambia el ancho del sitio en Personalizar, sin tener que
       sincronizar un valor a mano acá. En un tema sin esas variables
       (este plugin no depende de ningún theme en particular) caen al
       fallback de 100%/1200px. */
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-inline: auto;
    padding: 44px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    box-sizing: border-box;
}


.hb-mm-col { flex: 1 1 180px; min-width: 160px; }

.hb-mm-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hb-mm-links a {
    /* inline-flex (no flex): el enlace ocupa solo el ancho de su
       propio contenido —texto + ícono, si tiene— en vez de estirarse
       a todo el ancho de la lista como si fuera un botón/fila. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    color: var(--hb-mm-links-color, #1a1a2e);
    text-decoration: none;
    font-size: var(--hb-mm-links-font-size, 15px);
    font-weight: var(--hb-mm-links-font-weight, 400);
    letter-spacing: var(--hb-mm-links-letter-spacing, 0);
    font-family: var(--hb-mm-links-font-family, inherit);
    text-transform: var(--hb-mm-links-text-transform, none);
    transition: color .15s;
}

/* Uno u otro (Ajustes → Mega Menu → Enlaces → Hover): cambio de color
   o subrayado — nunca fondo. Con "Subrayado", --hb-mm-links-hover-color
   queda igual al color de reposo (sin cambio visible de color). */
.hb-mm-links a:hover {
    color: var(--hb-mm-links-hover-color, #666);
    text-decoration: var(--hb-mm-links-hover-decoration, none);
}

/* Varios grupos de enlaces dentro de una misma columna 'links', uno al
   lado del otro (ver hbmm_render_link_groups() en mega-menu.php). Con
   un solo grupo sin título, PHP ni siquiera imprime este wrapper — se
   ve igual que una lista simple. */
.hb-mm-links-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.hb-mm-links-group { flex: 1 1 140px; min-width: 140px; }

.hb-mm-links-group-title {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a8a8a;
}

.hb-mm-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

/* ── Cards: imagen + título + un enlace debajo, en grilla.
   flex más ancho que una columna de enlaces simple porque suele
   llevar varias cards una al lado de la otra. ── */
.hb-mm-col--cards { flex: 2 1 320px; }

/* ── "contenido-dropdown-card": bloque opcional a la izquierda de
   cualquier tipo de columna de escritorio (cards, enlaces, HTML
   personalizado) — imagen/título/descripción/botón, cada uno
   independiente, ver hbmm_render_left_content() en mega-menu.php —,
   con el contenido normal de la columna ocupando el resto del ancho a
   la derecha. ── */
.hb-mm-cards-split {
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* Sin línea divisoria: gap simple de 40px entre las dos partes. */
    gap: 40px;
}

/* Con línea divisoria: nada de "gap" en el contenedor — el espacio
   real (25px a cada lado de la línea = 50px en total) lo dan los
   paddings de .hb-mm-cards-left/.hb-mm-cards-right, con la línea de
   1px en el medio. */
.hb-mm-cards-split--divided { gap: 0; }
.hb-mm-cards-split--divided .hb-mm-cards-left { padding-right: 25px; }
.hb-mm-cards-split--divided .hb-mm-cards-right { padding-left: 25px; }

.hb-mm-cards-divider {
    flex: 0 0 var(--hb-mm-lc-divider-width, 1px);
    align-self: stretch;
    background: var(--hb-mm-lc-divider-color, #e5e5e5);
}

.hb-mm-cards-left {
    /* 35% del ancho disponible, con un tope de 320px. */
    flex: 0 0 min(35%, 320px);
    width: min(35%, 320px);
    box-sizing: border-box;
}

.hb-mm-cards-right {
    flex: 1 1 0%;
    min-width: 0; /* para que la grilla de adentro pueda encogerse bien en flex */
}

.hb-mm-cards-left picture {
    display: block;
}

.hb-mm-cards-left-image {
    display: block;
    width: calc(100% - 20px);
    margin: 0 auto 14px;
    border-radius: 6px;
}

.hb-mm-cards-left-title {
    margin: 0 0 8px;
    font-size: var(--hb-mm-lc-title-font-size, 22px);
    font-weight: var(--hb-mm-lc-title-font-weight, 700);
    letter-spacing: var(--hb-mm-lc-title-letter-spacing, 0);
    color: var(--hb-mm-lc-title-color, #1a1a2e);
    font-family: var(--hb-mm-lc-title-font-family, inherit);
}

.hb-mm-cards-left-desc {
    margin: 0 0 14px;
    font-size: var(--hb-mm-lc-desc-font-size, 14px);
    font-weight: var(--hb-mm-lc-desc-font-weight, 400);
    letter-spacing: var(--hb-mm-lc-desc-letter-spacing, 0);
    line-height: 1.6;
    color: var(--hb-mm-lc-desc-color, #666);
    font-family: var(--hb-mm-lc-desc-font-family, inherit);
}

/* Dos estilos disponibles (elegidos por bloque en el builder — ver
   hbmm_render_left_content() en mega-menu.php): sólido y solo-borde,
   compartiendo los mismos 2 colores de Ajustes → Mega Menu (fondo/
   borde y texto) — solo cambia cuál va de fondo y cuál de texto. */
.hb-mm-cards-left-button {
    display: inline-block;
    padding: 10px 22px;
    text-decoration: none;
    font-size: var(--hb-mm-lc-button-font-size, 12px);
    font-weight: var(--hb-mm-lc-button-font-weight, 700);
    font-family: var(--hb-mm-lc-button-font-family, inherit);
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid var(--hb-mm-lc-button-bg, #1a1a2e);
    border-radius: 3px;
    box-sizing: border-box;
    transition: background .15s, color .15s;
}

.hb-mm-cards-left-button--solid {
    background: var(--hb-mm-lc-button-bg, #1a1a2e);
    color: var(--hb-mm-lc-button-text, #fff);
}
.hb-mm-cards-left-button--solid:hover { opacity: .85; }

.hb-mm-cards-left-button--outline {
    background: transparent;
    color: var(--hb-mm-lc-button-bg, #1a1a2e);
}
.hb-mm-cards-left-button--outline:hover {
    background: var(--hb-mm-lc-button-bg, #1a1a2e);
    color: var(--hb-mm-lc-button-text, #fff);
}

/* Enlace independiente del botón — texto simple subrayado, sin fondo
   ni borde (ver hbmm_render_left_content() en mega-menu.php). */
.hb-mm-cards-left-link {
    display: inline-block;
    align-self: var(--hb-mm-lc-link-align, flex-start);
    margin-top: 10px;
    color: var(--hb-mm-lc-link-color, #1a1a2e);
    font-size: var(--hb-mm-lc-link-font-size, 13px);
    font-weight: var(--hb-mm-lc-link-font-weight, 600);
    letter-spacing: var(--hb-mm-lc-link-letter-spacing, 0);
    font-family: var(--hb-mm-lc-link-font-family, inherit);
    text-decoration: underline;
}
.hb-mm-cards-left-link:hover { opacity: .75; }

/* ── Columna tipo 'tabs': un botón por grupo, la grilla de cards de
   abajo cambia según cuál esté activo (ver hbmm_render_tabs() en
   mega-menu.php y el toggle en mega-menu.js). Reutiliza el mismo color
   configurable de "Contenido lateral → Botón" (Ajustes → Mega Menu)
   para el estado activo, en vez de un color propio fijo, así se
   mantiene coherente con el resto de botones del plugin. ── */
.hb-mm-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hb-mm-tabs-btn {
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--hb-mm-lc-button-bg, #1a1a2e);
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.hb-mm-tabs-btn:hover { opacity: .85; }

.hb-mm-tabs-btn.is-active {
    background: var(--hb-mm-lc-button-bg, #1a1a2e);
    color: var(--hb-mm-lc-button-text, #fff);
}

.hb-mm-tabs-panel { display: none; }
.hb-mm-tabs-panel.is-active { display: block; }

/* Cantidad fija de cards por fila (elegida en el builder — ver
   "Cards por fila" en Apariencia → Menús): ocupan el 100% del ancho
   repartido en partes iguales, y si hay más cards que columnas,
   saltan a la fila de abajo. Flexbox en vez de CSS grid a propósito:
   con grid, una fila incompleta (ej. 8 cards con 6 por fila = una
   segunda fila de solo 2) queda pegada a la izquierda porque los
   tracks de columna existen igual estén ocupados o no; con flexbox +
   justify-content:center, las cards sobrantes de la última fila se
   centran solas, sin necesitar JS ni contar cuántas cards sobran. */
.hb-mm-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Con "contenido-dropdown-card" activo, las cards ya no se centran en
   el espacio sobrante — quedan tirando a la izquierda (ver
   hbmm_render_columns() en mega-menu.php, que agrega esta clase solo
   cuando el bloque lateral está activo y tiene contenido visible). */
.hb-mm-cards--left { justify-content: flex-start; }

/* flex-basis = 100% menos los gaps entre columnas, repartido en N —
   flex-grow:0/flex-shrink:0 (el "0 0" de flex) para que ese ancho sea
   fijo y no se estire ni encoja, ni siquiera en una fila incompleta. */
.hb-mm-cards--cols-2 .hb-mm-card { flex: 0 0 calc((100% - 20px * 1) / 2); }
.hb-mm-cards--cols-3 .hb-mm-card { flex: 0 0 calc((100% - 20px * 2) / 3); }
.hb-mm-cards--cols-4 .hb-mm-card { flex: 0 0 calc((100% - 20px * 3) / 4); }
.hb-mm-cards--cols-5 .hb-mm-card { flex: 0 0 calc((100% - 20px * 4) / 5); }
.hb-mm-cards--cols-6 .hb-mm-card { flex: 0 0 calc((100% - 20px * 5) / 6); }
.hb-mm-cards--cols-7 .hb-mm-card { flex: 0 0 calc((100% - 20px * 6) / 7); }
.hb-mm-cards--cols-8 .hb-mm-card { flex: 0 0 calc((100% - 20px * 7) / 8); }

.hb-mm-card {
    display: flex;
    flex-direction: column;
    gap: var(--hb-mm-card-inner-gap, 8px);
    box-sizing: border-box;
    /* .hb-mm-card puede ser <a> (si la card tiene link_url) o <div>
       (si no) — ver hbmm_render_card() en mega-menu.php. Este reset
       cubre el caso <a>; no afecta en nada al <div>. */
    text-decoration: none;
    color: inherit;
}

/* El wrapper recorta el zoom del hover (ver hbmm_render_card() en
   mega-menu.php) — sin esto, escalar la imagen la desbordaría fuera
   de sus propios bordes redondeados. */
.hb-mm-card-image-wrap {
    display: block;
    overflow: hidden;
    border-radius: 4px;
}

/* <picture> no tiene estilo propio por defecto (equivale a inline) —
   se fuerza a block para que se comporte igual que el <img> suelto de
   antes, sin dejar huecos raros por line-height. */
.hb-mm-card-image-wrap picture {
    display: block;
    width: 100%;
}

.hb-mm-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

/* Hover — imagen con zoom leve y subrayado en título/enlace, pero
   SOLO cuando la card tiene link (es un <a>; si no tiene link_url,
   hbmm_render_card() la imprime como <div> y este selector no aplica
   — no debería insinuar que se puede hacer clic si no hay adónde ir). */
a.hb-mm-card:hover .hb-mm-card-image { transform: scale(1.06); }
a.hb-mm-card:hover .hb-mm-card-title,
a.hb-mm-card:hover .hb-mm-card-link { text-decoration: underline; }

.hb-mm-card-title {
    margin: 0;
    font-weight: var(--hb-mm-card-title-font-weight, 700);
    font-size: var(--hb-mm-card-title-font-size, .95rem);
    letter-spacing: var(--hb-mm-card-title-letter-spacing, 0);
    color: var(--hb-mm-card-title-color, #1a1a2e);
    font-family: var(--hb-mm-card-title-font-family, inherit);
    text-align: var(--hb-mm-card-title-align, left);
    text-transform: var(--hb-mm-card-title-text-transform, none);
}

/* Ya no es un <a> propio — es un <span> puramente visual (etiqueta
   tipo botón) dentro de la card, que ahora es toda ella el enlace
   clickeable (ver hbmm_render_card()). El "hover" de botón se
   dispara al pasar el mouse por CUALQUIER parte de la card, no solo
   por este span — ver la regla .hb-mm-card:hover de abajo. */
.hb-mm-card-link {
    display: inline-block;
    /* align-self (no text-align): el enlace es un item flex dentro
       de .hb-mm-card (flex-direction:column), así que lo que decide
       si queda a la izquierda/centro/derecha del ancho de la card es
       su propia posición en el eje transversal, no la alineación de
       su texto interno. */
    align-self: var(--hb-mm-card-link-align, flex-start);
    /* Con .hb-mm-card estirada a la altura de la fila (ver arriba),
       esto empuja el enlace al fondo de la card — así dos cards con
       título de distinto largo en la misma fila quedan con el enlace
       a la misma altura, en vez de cada uno pegado a su propio título. */
    margin-top: auto;
    padding: 8px 16px;
    border: 1px solid var(--hb-mm-card-link-color, #1a1a2e);
    color: var(--hb-mm-card-link-color, #1a1a2e);
    font-size: var(--hb-mm-card-link-font-size, .78rem);
    font-weight: var(--hb-mm-card-link-font-weight, 700);
    text-transform: uppercase;
    letter-spacing: var(--hb-mm-card-link-letter-spacing, .04em);
    font-family: var(--hb-mm-card-link-font-family, inherit);
    transition: background .15s, color .15s;
}

a.hb-mm-card:hover .hb-mm-card-link {
    background: var(--hb-mm-card-link-color, #1a1a2e);
    color: #fff;
}

/* ── HTML personalizado — sin estilos propios a propósito, hereda lo
   que traiga el HTML guardado; solo se evita que una imagen suelta
   se desborde del ancho de la columna. ── */
.hb-mm-html img { max-width: 100%; height: auto; }

/* ── Indicador visual de que el ítem tiene mega menu — un SVG real
   (ver hbmm_append_chevron_icon en mega-menu.php), no un ::after de
   CSS, para no depender de que el theme no recorte/oculte pseudo-
   elementos en el link. Gira 180° mientras el panel está abierto
   (misma clase .hb-mm-active que ya alterna mega-menu.js). ── */
.hb-mm-chevron {
    display: inline-flex;
    margin-left: 6px;
    vertical-align: -2px;
    transition: transform .15s;
}

.hb-mm-item.hb-mm-active .hb-mm-chevron { transform: rotate(180deg); }

@media (max-width: 768px) {
    /* Este plugin es solo para escritorio — en mobile el tema arma el
       menú a partir de su propia estructura nativa (ver mega-menu.php),
       así que el chevron de hover de escritorio no tiene sentido acá. */
    .hb-mm-chevron { display: none; }
}