/**
 * Layouts del Header
 * Variavista Business Theme
 * 
 * @package Variavista
 * @version 2.7.0
 */

/* ========================================
   LOGO Y ELEMENTOS BÁSICOS
   ======================================== */

/* Logo - Las reglas responsive están en main.css */
.logo-main-img,
.logo-animated-img {
    display: inline-block !important;
    transition: opacity 0.3s ease;
}

/* FORZAR IMÁGENES DEL MEGAMENÚ - MOSTRAR COMPLETAS */
.mega-menu-dropdown img,
.mega-menu-card img,
nav .mega-menu-dropdown img,
header nav img:not(.header-logo):not(.custom-logo) {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Alpine.js - Ocultar elementos hasta que Alpine esté listo */
[x-cloak] {
    display: none !important;
}

/* ========================================
   BOTÓN MENÚ MÓVIL - SIEMPRE VISIBLE EN MÓVIL
   ======================================== */
/* El botón del menú móvil NUNCA debe ocultarse en pantallas pequeñas */
@media (max-width: 1023px) {
    .header-mobile-toggle {
        display: flex !important;
    }
    /* Asegurar que el contenedor del botón también sea visible */
    [class*="header-layout-"] > div:last-child {
        display: flex !important;
    }
}

/* ========================================
   LAYOUTS DEL HEADER
   Estructura: .site-logo (div) | nav | .header-actions (div)
   ======================================== */

/* 🏢 CLÁSICO: Logo Izq | Menú Centro | CTA Der */
.header-layout-default {
    justify-content: space-between;
}
.header-layout-default > .site-logo { order: 1; } /* Logo */
.header-layout-default > nav { order: 2; flex: 1; justify-content: center; } /* Menú */
.header-layout-default > .header-actions { order: 3; } /* CTA + Botones */

/* 🎯 LOGO CENTRO: Menú dividido Izq/Der */
.header-layout-logo_center {
    justify-content: center;
}
.header-layout-logo_center > .site-logo { order: 2; margin: 0 2rem; } /* Logo centro */
.header-layout-logo_center > nav { order: 1; flex: 1; justify-content: flex-start; } /* Menú izq */
.header-layout-logo_center > .header-actions { order: 3; flex: 1; justify-content: flex-end; } /* CTA der */

/* ━ MINIMALISTA: Logo Izq | Menú Der (sin CTA) */
.header-layout-minimal {
    justify-content: space-between;
}
.header-layout-minimal > .site-logo { order: 1; } /* Logo */
.header-layout-minimal > nav { order: 2; } /* Menú */
.header-layout-minimal > .header-actions { order: 3; } /* Contenedor CTA + Mobile */
/* Solo ocultar el CTA desktop en layout minimal */
.header-layout-minimal .header-cta-container { display: none !important; }

/* 📍 CENTRADO TOTAL: Todo centrado verticalmente */
.header-layout-all_center {
    justify-content: center;
    flex-direction: column;
    padding: 1.5rem 0;
    height: auto !important;
}
.header-layout-all_center > .site-logo { order: 1; margin-bottom: 1rem; } /* Logo */
.header-layout-all_center > nav { order: 2; margin-bottom: 0.5rem; } /* Menú */
.header-layout-all_center > .header-actions { order: 3; } /* CTA */

/* ⚡ SPLIT: Logo/Menú Izq | CTA Der */
.header-layout-split {
    justify-content: space-between;
}
.header-layout-split > .site-logo { order: 1; margin-right: 2rem; } /* Logo */
.header-layout-split > nav { order: 2; flex: 1; } /* Menú */
.header-layout-split > .header-actions { order: 3; } /* CTA */

/* 📚 APILADO: Logo arriba | Menú + CTA abajo en línea */
.header-layout-stacked {
    flex-direction: column;
    padding: 1rem 0;
    height: auto !important;
}
.header-layout-stacked > .site-logo { order: 1; margin-bottom: 1rem; } /* Logo arriba */
.header-layout-stacked > nav { order: 2; } /* Menú */
.header-layout-stacked > .header-actions { order: 3; } /* CTA */
/* Fila inferior: menú y CTA en línea */
@media (min-width: 1024px) {
    .header-layout-stacked {
        flex-wrap: wrap;
    }
    .header-layout-stacked > .site-logo {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    .header-layout-stacked > nav {
        flex: 1;
    }
}

/* 📏 COMPACTO: Todo en línea pegado */
.header-layout-compact {
    justify-content: flex-start;
    gap: 1rem !important;
}
.header-layout-compact > .site-logo { order: 1; } /* Logo */
.header-layout-compact > nav { order: 2; } /* Menú */
.header-layout-compact > .header-actions { order: 3; margin-left: auto; } /* CTA */

/* 📑 SIDEBAR STYLE: Logo arriba | Todo vertical */
.header-layout-sidebar {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 0;
    height: auto !important;
}
.header-layout-sidebar > .site-logo { order: 1; margin-bottom: 1.5rem; } /* Logo */
.header-layout-sidebar > nav { order: 2; margin-bottom: 1rem; } /* Menú */
.header-layout-sidebar > .header-actions { order: 3; } /* CTA */

/* 🔄 INVERTIDO: CTA Izq | Menú Centro | Logo Der */
.header-layout-reversed {
    justify-content: space-between;
}
.header-layout-reversed > .site-logo { order: 3; } /* Logo a la derecha */
.header-layout-reversed > nav { order: 2; flex: 1; justify-content: center; } /* Menú centro */
.header-layout-reversed > .header-actions { order: 1; } /* CTA a la izquierda */