/**
 * GRAFCAN - CSS ESPECÍFICO PARA TEMA DE BLOQUES
 * Twenty Twenty-Five Child Theme
 * 
 * Este CSS está diseñado específicamente para temas de bloques (FSE)
 * que usan clases de WordPress como wp-block-group, alignfull, etc.
 */

/* ========================================
   RESETEAR SISTEMA DE BLOQUES DE WORDPRESS
   ======================================== */

/* Forzar que TODOS los bloques con alignfull ocupen 100% */
.wp-block-group.alignfull,
.wp-site-blocks > .alignfull,
body > .wp-site-blocks > * > .alignfull {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Eliminar el layout constrained de WordPress */
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignfull.has-background {
    max-width: none !important;
}

/* ========================================
   HEADER ESPECÍFICO
   ======================================== */

/* El header completo */
.site-header.wp-block-group,
.header-with-watermark {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Los grupos internos del header también deben ser ancho completo */
.site-header .wp-block-group.alignfull {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Pero el contenido interno (logo, menú) sí tiene padding */
.site-header .wp-block-group.alignfull > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
}

/* ========================================
   SUBMENÚ (secondary-navigation-container)
   ======================================== */

.secondary-navigation-container.wp-block-group {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background-color: var(--wp--preset--color--accent-2) !important;
}

/* Contenido del submenú alineado */
.secondary-navigation-container .wp-block-navigation {
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   BÚSQUEDA - AJUSTAR TAMAÑO
   ======================================== */

/* Contenedor de búsqueda en header */
.header-search-compact {
    height: 40px !important;
}

/* Input de búsqueda */
.header-search-compact .wp-block-search__input,
.header-search-compact input[type="search"] {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    line-height: normal !important;
}

/* Botón de búsqueda */
.header-search-compact .wp-block-search__button,
.header-search-compact button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SVG de la lupa */
.header-search-compact svg {
    width: 20px !important;
    height: 20px !important;
}

/* ========================================
   FOOTER ESPECÍFICO
   ======================================== */

/* El footer completo - ancho 100% */
.site-footer.wp-block-group {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Eliminar el contentSize del layout constrained */
.site-footer.wp-block-group[style*="contentSize"] {
    max-width: none !important;
}

/* El contenido interno del footer sí tiene max-width */
.site-footer > .wp-block-columns,
.site-footer > .wp-block-group {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================
   CERTIFICADOS - GRID MÁS COMPACTO
   ======================================== */

.certificados-grid {
    gap: 10px !important;
}

.certificados-grid .wp-block-image {
    margin: 0 !important;
}

/* Todas las imágenes de certificados al mismo alto */
.certificados-grid figure,
.certificados-grid .wp-block-image {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.certificados-grid img {
    height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* ========================================
   SLIDER / HERO - ANCHO COMPLETO
   ======================================== */

/* Cualquier slider o cover block después del header */
.site-header + .wp-block-cover,
.site-header + .wp-block-group.has-background,
[class*="hero"],
[class*="slider"] {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================
   SOLUCIÓN PARA ESPACIOS LATERALES
   ======================================== */

/* El contenedor principal de bloques */
.wp-site-blocks {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Eliminar padding del body */
body {
    margin: 0 !important;
    padding: 0 !important;
}

/* No scroll horizontal */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media screen and (max-width: 1024px) {
    .site-header .wp-block-group.alignfull > * {
        padding-left: var(--wp--preset--spacing--40);
        padding-right: var(--wp--preset--spacing--40);
    }
    
    .site-footer > .wp-block-columns {
        padding-left: var(--wp--preset--spacing--40);
        padding-right: var(--wp--preset--spacing--40);
    }
}

@media screen and (max-width: 768px) {
    /* Certificados más pequeños en móvil */
    .certificados-grid figure,
    .certificados-grid .wp-block-image,
    .certificados-grid img {
        height: 60px !important;
    }
    
    /* Búsqueda más pequeña en móvil */
    .header-search-compact,
    .header-search-compact .wp-block-search__input,
    .header-search-compact .wp-block-search__button {
        height: 35px !important;
    }
}

@media screen and (max-width: 480px) {
    .certificados-grid figure,
    .certificados-grid .wp-block-image,
    .certificados-grid img {
        height: 50px !important;
    }
    
    .site-header .wp-block-group.alignfull > *,
    .site-footer > .wp-block-columns {
        padding-left: var(--wp--preset--spacing--30);
        padding-right: var(--wp--preset--spacing--30);
    }
}

/* ========================================
   AJUSTES FINALES PARA ELEMENTOS INLINE
   ======================================== */

/* Sobrescribir estilos inline que limitan el ancho */
.wp-block-group[style*="max-width"].alignfull {
    max-width: none !important;
}

/* Sobrescribir padding inline en elementos de ancho completo */
.alignfull[style*="padding-left"],
.alignfull[style*="padding-right"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Pero mantener el padding en el contenido interno */
.alignfull > *:not(.alignfull) {
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
}

/* ========================================
   DEBUG: Para identificar problemas
   ======================================== */

/* Descomenta estas líneas para ver qué elementos están causando el problema */
/*
.wp-block-group {
    outline: 2px solid red !important;
}

.alignfull {
    outline: 2px solid blue !important;
}

.site-header {
    outline: 3px solid green !important;
}

.site-footer {
    outline: 3px solid orange !important;
}
*/