/*
Theme Name: astra tema hijo
Theme URI: https://edu360global.org
Description: tema hijo para el tema Astra.
Author: Daniel Alfonsi
Author URI: 
Template: astra 
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-hijo
*/

/* Añade tus estilos CSS personalizados debajo de esta línea. */
/* ======================================================= */
/* 1. VARIABLES CSS (PALETA DE COLORES) */
/* ======================================================= */

:root {
    /* Branding Primario */
    --edu360-azul-claro: #007bff;
    --edu360-naranja-vibrante: #ff6f00;
    
    /* Branding Secundario */
    --edu360-blanco: #ffffff;
    --edu360-dorado: #d4af37;
    
    /* Colores de texto y fondo */
    --edu360-texto-principal: #333333;
    --edu360-fondo-claro: #f4f7fa; /* Gris muy suave para secciones */
    
    /* Tipografía */
    --edu360-fuente-principal: 'Montserrat', sans-serif;
    --edu360-fuente-secundaria: 'Open Sans', 'Roboto', sans-serif;
}


/* ======================================================= */
/* 2. ESTILOS GLOBALES Y TIPOGRAFÍA */
/* ======================================================= */

/* Asegúrate de que las fuentes estén cargadas (via WP enqueue o plugin) */

/* Estilo para el Body (Fondo y fuente base) */
body {
    background-color: var(--edu360-fondo-claro) !important;
    color: var(--edu360-texto-principal);
    font-family: var(--edu360-fuente-secundaria);
    line-height: 1.7; /* Mejor legibilidad */
    font-size: 16px;
}

/* Encabezados (H1, H2, H3) - Fuente moderna y negrita */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--edu360-fuente-principal);
    color: var(--edu360-texto-principal);
    font-weight: 700; /* Negrita */
    line-height: 1.2;
}

h1 { font-size: 2.5em; color: var(--edu360-azul-claro); }
h2 { font-size: 2em; border-bottom: 2px solid var(--edu360-naranja-vibrante); padding-bottom: 5px; }

/* Componentes de texto y párrafos */
p {
    margin-bottom: 1.5em;
}

/* Estilo para enlaces (links) */
a {
    color: var(--edu360-naranja-vibrante);
    text-decoration: none; /* Sin subrayado por defecto */
    transition: color 0.3s ease;
}
a:hover {
    color: var(--edu360-azul-claro);
    text-decoration: underline; /* Subrayado al pasar el ratón */
}


/* ======================================================= */
/* 3. BOTONES MODERNOS Y ELEGANTES (WP Block Button / Astra Button) */
/* ======================================================= */

/* Selector genérico para botones (ajusta si usas clases de Astra o Elementor) */
.wp-block-button__link,
.ast-custom-button,
button[type="submit"] {
    /* Propiedades de Fondo y Borde (Base) */
    background-color: var(--edu360-azul-claro) !important;
    color: var(--edu360-blanco) !important;
    border: 2px solid var(--edu360-azul-claro) !important;
    
    /* Forma elegante */
    border-radius: 8px !important; /* Esquinas suaves */
    padding: 10px 25px !important;
    font-family: var(--edu360-fuente-principal) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Efecto Hover (Naranja Vibrante) */
.wp-block-button__link:hover,
.ast-custom-button:hover,
button[type="submit"]:hover {
    background-color: var(--edu360-naranja-vibrante) !important;
    border-color: var(--edu360-naranja-vibrante) !important;
    color: var(--edu360-blanco) !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Sombra más fuerte al pasar el ratón */
    transform: translateY(-1px); /* Ligero levantamiento */
}

/* Botón Secundario (Estilo Contorno o "Ghost") */
/* Útil para acciones menos importantes, usando la clase 'is-style-outline' si usas Gutenberg */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: var(--edu360-azul-claro) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--edu360-azul-claro) !important;
    color: var(--edu360-blanco) !important;
}


/* ======================================================= */
/* 4. FORMULARIOS (Inputs y Campos) */
/* ======================================================= */

/* Estilo para todos los campos de entrada, áreas de texto y selectores */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 5px; /* Bordes suaves */
    font-family: var(--edu360-fuente-secundaria);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Foco en el campo (resaltar con Azul Claro) */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--edu360-azul-claro);
    outline: none; /* Eliminar el contorno feo del navegador */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* ======================================================= */
/* 5. IMÁGENES Y DIVs (Contenedores) */
/* ======================================================= */

/* Estilo para las imágenes */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Borde suave */
    /* Animación al pasar el ratón para dar un toque moderno */
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.02);
}

/* Estilo para DIVs contenedores (Bloques Gutenberg, Columnas) */
/* Añade un sutil borde redondeado para un look moderno */
.wp-block-group, 
.wp-block-columns,
.ast-container {
    border-radius: 10px;
}

/* Efecto de "tarjeta" para DIVs con fondo blanco (si lo aplicas manualmente) */
/* Útil para resaltar contenido clave */
.card-edu360 {
    background-color: var(--edu360-blanco);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

h1, h2, h3, h4, h5, h6, .entry-content :where(h1,h2,h3,h4,h5,h6), .entry-content :where(h1,h2,h3,h4,h5,h6) a, .site-title, .site-title a {
    text-transform: none;
    text-decoration: none;
}

/* --- Media Query para Dispositivos Móviles (hasta 767px de ancho) --- */
@media screen and (max-width: 767px) {
    
    /* Ejemplo: Hacer que las columnas se apilen automáticamente y tengan espacio */
    .wp-block-columns {
        flex-direction: column !important; /* Fuerza que las columnas se apilen */
    }

    .wp-block-column {
        width: 100% !important; /* Cada columna ocupa el 100% del ancho */
        margin-bottom: 20px; /* Añade espacio entre columnas apiladas */
    }

    /* Ejemplo: Reducir el tamaño de fuente de un H1 en móvil */
    h1 {
        font-size: 2em !important; /* Reduce el tamaño del H1 */
    }

    /* Ejemplo: Ocultar un elemento específico en móvil */
    .ocultar-en-movil {
        display: none !important;
    }

    /* Ejemplo: Alinear texto al centro en móvil */
    .texto-centrado-movil {
        text-align: center !important;
    }

}

/* --- Media Query para Tablets (entre 768px y 1024px) --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Aquí podrías poner estilos específicos para tablets */
    /* Por ejemplo, ajustar márgenes o tamaños de fuente menos drásticamente */
    h1 {
        font-size: 2.2em !important;
    }
}