/*
 * Ajustes visuales del megamenú del sitio (frontend, header style_5).
 *
 * No se toca style3.css (el CSS del theme): este archivo sólo
 * sobreescribe algunas reglas para que se note la jerarquía entre el
 * título de cada columna (categoría) y sus enlaces hijos (subcategorías),
 * y para que las columnas más cortas no queden con un hueco vacío
 * enorme debajo. Se carga DESPUÉS de style3.css en
 * resources/views/layouts/front.blade.php.
 */

/* Antes las columnas del megamenú se estiraban todas a la altura de la
   más alta (por ejemplo la columna de imágenes promocionales), dejando
   un hueco vacío debajo de columnas con poco contenido (ej. "NEW
   COLLECTION", que no tiene subcategorías). Con flex-start cada columna
   ocupa sólo el alto de su propio contenido. */
.header__mega--menu {
    align-items: flex-start;
}

/* Un poco de aire entre cada grupo (categoría + sus subcategorías)
   dentro de una columna, para que no se vean como una lista plana. */
.header__mega--menu__li {
    margin-bottom: 6px;
}

/* Título de cada columna (la categoría, ej. "LEGGINS Y CALZA"): antes
   tenía casi el mismo tamaño y peso que sus enlaces hijos (1.6rem vs
   1.5rem), por eso costaba distinguir qué era categoría y qué era
   subcategoría. Ahora se ve como encabezado por mayúsculas + peso, sin
   líneas ni subrayados (se probó con una línea de acento debajo y
   quedaba recargado). */
.header__mega--subtitle {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 6px;
}

.header__mega--sub__menu {
    margin-top: 2px;
    /* Indenta a los hijos para que se vean "adentro" de su categoría
       padre, solo con espacio (sin línea vertical). */
    padding-left: 10px;
}

.header__mega--sub__menu_li {
    margin: 2px 0;
}

/* Enlaces hijos (subcategorías): más claros y sin negrita, para que se
   note que dependen del título de arriba, con una pequeña animación al
   pasar el mouse para que se sientan clickeables. */
.header__mega--sub__menu--title {
    display: inline-block;
    color: var(--text-gray-color);
    font-weight: 400;
    transition: color .15s ease, transform .15s ease;
}

.header__mega--sub__menu--title:hover {
    color: var(--secondary-color);
    transform: translateX(3px);
}