/*
 Theme Name: inspiro Child
 Theme URI: http://trsolutionssas.local/
 Description: Inspiro Child Theme
 Author: TR Solutions SAS
 Template: inspiro
 Version: 1.0.0
 Text Domain: inspiro-child
 */

:root {
    --inspiro-primary-color: #e9772a !important;
    --wp--preset--color--secondary: #e9772a !important;
}

/* === Estilos Generales del Cuerpo === */
body {
    font-family: 'Open Sans', sans-serif;
    color: #333;
}

/* === Estilos de Botones con Estilo 'Outline' (Aplicado a TODOS los botones de este tipo) === */

/* Estilos base aplicados al ENLACE (<a>) dentro de CUALQUIER contenedor .wp-block-button.is-style-outline */
/* Esto asegura que todos los botones de bloque con el estilo "Outline" tengan tu apariencia base. */
.wp-block-button.is-style-outline .wp-block-button__link {
    backdrop-filter: blur(10px) !important;
    /* Añadido !important */
    -webkit-backdrop-filter: blur(10px) !important;
    /* Añadido !important */
    background: rgba(255, 94, 0, 0.329) !important;
    /* Añadido !important */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px !important;
    /* Añadido !important para sobrescribir el estilo inline */
    padding: 12px 32px;
    color: rgb(29, 29, 29) !important;
    /* Mantenemos !important para el color del texto */
    font-weight: 600;
    transition: all 0.3s ease;
    /* Transición para efectos de hover/focus */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: inline-block;
}

/* Estilos para el HOVER y FOCUS de los botones 'outline'
   (Sobrescribe estilos del tema Inspiro con alta especificidad) */
/* Esta regla es crucial para el efecto interactivo al pasar el mouse. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-white-color:hover,
.wp-block-buttons .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color):hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgb(39, 39, 39) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* === Estilos para Botones "Read More" de Blog === */
/* Aplica el mismo estilo glassmorphism a los botones de blog */
.wp-block-read-more {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: rgba(255, 94, 0, 0.329) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px 32px !important;
    color: rgb(29, 29, 29) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-transform: uppercase !important;
}

.wp-block-read-more:hover,
.wp-block-read-more:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: rgb(39, 39, 39) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* === Estilos para Botón de Búsqueda en Footer === */
/* Estilo para el campo de entrada de búsqueda */
.search-form .search-field {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
}

.search-form .search-field:focus {
    border-color: rgba(233, 119, 42, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(233, 119, 42, 0.1) !important;
}

.search-form .search-field::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Aplica el mismo estilo glassmorphism al botón de búsqueda */
.search-submit {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
}

.search-submit:hover,
.search-submit:focus {
    background: rgba(233, 119, 42, 0.5) !important;
    border-color: rgba(233, 119, 42, 0.6) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(233, 119, 42, 0.3) !important;
}

/* Estilo para el icono SVG dentro del botón de búsqueda */
.search-submit .svg-icon {
    fill: currentColor !important;
    transition: all 0.3s ease !important;
}


/* === Estilos del Encabezado === */
.site-header {
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
}

/* === Responsividad (Media Queries) === */
@media (max-width: 768px) {

    /* Ajustes de padding para el enlace del botón en pantallas pequeñas */
    .wp-block-button.is-style-outline .wp-block-button__link {
        padding: 10px 20px;
    }
}

/* === Estilos del Contenedor de Iconos SVG === */
/* Asegura que los iconos SVG se escalen y centren correctamente. */
.icon-container svg {
    display: block;
    /* Esencial para que margin: auto funcione */
    width: 100%;
    /* Ocupa el 100% del ancho de su contenedor (.icon-container) */
    height: auto;
    /* Mantiene la proporción */
    max-width: 200px;
    /* Tamaño máximo deseado para computadoras */
    margin: 0 auto;
    /* Centra el SVG horizontalmente */
}

/* Media query para ajustar el tamaño y centrado de iconos en pantallas más pequeñas (móviles) */
@media (max-width: 768px) {
    .icon-container svg {
        max-width: 120px;
        /* Tamaño más pequeño para móviles (ej. 120px) */
        margin: 0 auto;
        /* Asegura el centrado horizontal en móviles */
    }
}

/* Media query para tablets (si lo necesitas, ajusta los valores) */
@media (min-width: 769px) and (max-width: 1024px) {
    .icon-container svg {
        max-width: 150px;
        /* Tamaño para tablets, por ejemplo */
        margin: 0 auto;
        /* Centra horizontalmente también en tablets */
    }
}

/* Opcional: Centrar el contenido de la columna si el icono no está centrando por defecto */
/* Esto puede ser útil si los .wp-block-column tienen padding o están haciendo algo inusual. */
@media (max-width: 768px) {
    .wp-block-column .wp-block-outermost-icon-block {
        display: flex;
        /* Convierte el bloque en un contenedor flex */
        justify-content: center;
        /* Centra sus elementos hijos (el .icon-container) */
        align-items: center;
        /* Alinea verticalmente (si es necesario) */
        width: 100%;
        /* Asegura que ocupe todo el ancho de la columna */
    }

    .wp-block-column .wp-block-outermost-icon-block .icon-container {
        width: auto;
        /* O se ancha al 100% para que el contenedor se estire */
    }
}