/* Change footer background color | 14093992-hc bc */
.site-footer {
    background: #201751;
    color: #717f8f;
}

/* Homepage Gallery - mobile / 17526899-HC (MI) */
@media only screen and (max-width: 599px) {
    .home .wp-block-gallery.columns-7 .blocks-gallery-item {
        width: 10%;
        margin: 2px;
    }
}

/* Increase size of homepage table - mobile / 2694310-zen (MI) */
@media only screen and (max-width: 767px) {
    .home .wp-block-table {
        margin-left: 0;
        margin-right: 0;
    }
    .home wp-block-table td {
        padding: 0;
    }
}

/* Ocultar titulos nativos / entry-title */
.entry-title { 
    display: none;
}

/*Replace How did you hear about us? is required title | MA 28920305 hc*/ 
.form-error-message {
    visibility: hidden;
}
.form-error-message:before {
    visibility: visible;
    content: 'Marque el encasillado para continuar';
}

/* --- OPTIMIZACIÓN GLOBAL DE ESPACIOS Y TÍTULOS --- */

/* Eliminar el espacio superior del contenido en todas las páginas */
.site-content, 
.site-main, 
#content, 
#main,
#primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ocultar el contenedor del título de la página globalmente */
header.entry-header, 
.page-header {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cambiar el fondo del website a blanco */
body, 
.site, 
.site-content, 
#page {
    background-color: #ffffff !important;
}

/* Mantener el área del logo y menú superior de color blanco */
.site-header, 
#masthead {
    background-color: #ffffff !important;
}

/* =========================================
   VITRINA WELCH'S: ALINEACIÓN MILITAR
   ========================================= */

/* 1. El Row (contenedor padre) */
.vitrina-welchs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important; /* IMPORTANTE: Estira las columnas para que todas midan lo mismo */
    gap: 20px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 2. Las Tarjetas (Pilas/Grupos) */
.vitrina-welchs > .wp-block-group,
.vitrina-welchs > .wp-block-stack {
    display: flex !important;
    flex-direction: column !important; /* Organiza imagen > texto > botón */
    flex: 0 0 18% !important; /* 18% ancho para que quepan 5 */
    max-width: 18% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. El truco para los botones (margin-top: auto) */
.vitrina-welchs .wp-block-buttons {
    margin-top: auto !important; /* Empuja el botón al fondo de su tarjeta */
    padding-top: 15px !important;
    width: 100% !important;
    justify-content: center !important;
}

/* 4. Asegurar que las imágenes no se deformen y sigan el ancho de la columna */
.vitrina-welchs img {
    width: 100% !important; 
    height: auto !important;
    max-width: 100px !important; /* Updated to 100px */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}


/* 5. MÓVIL: Grid de 2x2 */
@media (max-width: 768px) {
    .vitrina-welchs > .wp-block-group,
    .vitrina-welchs > .wp-block-stack {
        flex: 0 0 46% !important; /* 46% para 2 columnas */
        max-width: 46% !important;
    }
}

/* Animación suave al hacer hover */
.animacion-botella {
    transition: transform 0.3s ease-out !important; /* La velocidad de la animación */
    cursor: pointer;
}

.animacion-botella:hover {
    transform: scale(1.1) rotate(2deg) !important; /* Crece un 10% y rota un poquito */
}

/* Center the main content columns in the Creative theme */
.row .site-primary {
    margin: 0 auto !important;
    float: none !important;
}

/* Ensure the entry content follows the centering */
.entry-content {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Final centering of the bottles within that space */
.vitrina-welchs {
    justify-content: center !important;
    width: 100% !important;
}

/* --- 1. THE BACKGROUND (Edge-to-Edge) --- */
.wp-block-group.has-background {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 2. THE CONTENT (Centered 900px) --- */
.wp-block-group.has-background > .wp-block-group__inner-container {
    max-width: 900px !important; /* Widened slightly for better image display */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100% !important;
    display: block !important;
}

/* --- 3. FIX: STOP TINY IMAGES --- */
/* This forces images and their containers to fill the centered 900px area */
.wp-block-group.has-background img,
.wp-block-group.has-background .wp-block-image,
.wp-block-group.has-background figure {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* --- 4. THE IMAGE BREAKOUT (Designated 100% Width) --- */
.full-width-image {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.full-width-image img {
    width: 100% !important;
    height: auto !important;
}

/* --- 5. PREVENT HORIZONTAL SCROLL --- */
body {
    overflow-x: hidden;
}

/* --- 6. MEDIA & TEXT GAP FIX --- */
/* This controls the space between the image and the text */
.wp-block-media-text {
    column-gap: 20px !important; /* Change this number to your liking */
    gap: 20px !important;
}

/* Optional: Ensure the text doesn't have extra padding on the side facing the image */
.wp-block-media-text__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- 7. MEDIA & TEXT INTERNAL SPACING --- */
/* This reduces the gap between the title/quote and the paragraph */
.wp-block-media-text__content p:first-child {
    margin-bottom: 10px !important; /* Adjust this to change the gap */
}

/* Optional: If you have a real Blockquote, use this too */
.wp-block-media-text__content blockquote {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}

/* --- 8. MOBILE OPTIMIZATIONS (Phone & Tablet) --- */
@media (max-width: 767px) {
     /* Make images inside colored sections smaller on mobile */
    .wp-block-group.has-background img {
        width: 50% !important; /* Scale down to 70% of the screen */
        max-width: 250px !important; /* Cap the size */
        margin-left: auto !important;
        margin-right: auto !important;
    }
   /* 1. STANDALONE IMAGES: Breakout 110% width and stay centered */
@media (max-width: 767px) {
    .entry-content > .wp-block-image img,
    .entry-content > figure.wp-block-image img {
        width: 110vw !important;      /* Makes the image 1.5x the screen width */
        max-width: 110vw !important;
        position: relative !important;
        left: 50% !important;          /* Move to the middle of the screen */
        transform: translateX(-50%) !important; /* Pull back by half its own width to center */
        display: block !important;
    }

    /* CRITICAL: This stops the page from shaking or scrolling sideways */
    html, body {
        overflow-x: hidden !important;
    }
}

    /* 2. MEDIA & TEXT IMAGES: Change the width here */
    .wp-block-media-text__media img {
        /* PARAMETER: Change this % to make the image wider or smaller */
        width: 65% !important; 
        
        /* PARAMETER: This prevents the image from getting too large on tablets */
        max-width: 280px !important; 
        
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Centers the media container */
    .wp-block-media-text__media {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
    }

    /* 3. TEXT SAFE ZONE: Padding for borders */
    .entry-content p, 
    .entry-content h1, 
    .entry-content h2, 
    .entry-content h3,
    .wp-block-group__inner-container,
    .wp-block-media-text__content {
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }

    /* 4. BACKGROUND SECTIONS: Centering and Spacing */
    .wp-block-group.has-background,
    .wp-block-group.has-background p,
    .wp-block-group.has-background h1,
    .wp-block-group.has-background h2 {
        text-align: center !important;
    }

    .wp-block-group.has-background img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 80% !important;
    }

    .wp-block-group.has-background {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}