/*
 Theme Name:   GeneratePress Child (Proyecto Rick)
 Description:  Tema hijo Responsive con Roboto Variable local, Header custom y Slider.
 Author:       Rick
 Template:     generatepress
 Version:      1.0.2
 Text Domain:  tenagua-childtheme
*/

/* ==========================================================================
   1. REGISTRO DE FUENTES LOCALES (VARIABLE FONTS)
   ========================================================================== */

/* Roboto Flex (Soporta múltiples ejes: Peso, Ancho, Inclinación, etc.) */
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Rango de pesos soportado */
    font-stretch: 25% 151%; /* Rango de ancho soportado */
    font-style: normal;
    font-display: swap; /* Importante para LCP (carga rápida) */
}

/* Roboto Standard Variable (Fallback o uso específico si Flex falla) */
@font-face {
    font-family: 'Roboto-Std';
    src: url('./fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Roboto Italic Variable */
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. VARIABLES CSS (CUSTOM PROPERTIES)
   ========================================================================== */
:root {
    /* -- Tipografía -- */
    --font-primary: 'Roboto', system-ui, -apple-system, sans-serif;
    
    /* -- Paleta de Colores (Unificada) -- */
    --color-primary: #1e73be;      /* Color principal (botones, enlaces) */
    --color-secondary: #2c3e50;    /* Encabezados, footer oscuro (Azul Marino) */
    --color-accent: #e74c3c;       /* Ofertas, alertas */
    --color-text-main: #333333;    /* Texto general */
    --color-text-light: #7f8c8d;   /* Subtítulos, meta info */
    --color-bg-light: #f9f9f9;     /* Fondos alternativos (Header Top Bar) */
    --color-white: #ffffff;
	--color-black: #000000;
    
    /* -- Layout & Header -- */
    --header-height-desktop: 100px;
    --header-height-mobile: 70px;
    --slider-height-desktop: 600px;
    --slider-height-mobile: 85vh; /* Ocupa casi toda la pantalla en móvil */
    --container-width: 1200px; /* Ancho máximo del contenido */
}

/* ==========================================================================
   3. ESTILOS GLOBALES & RESPONSIVE BASE
   ========================================================================== */

body {
    font-family: var(--font-primary);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden; /* Evita scroll horizontal en móviles */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-secondary);
    font-weight: 700; /* Aprovechando la variable font */
}

/* Helper para hacer imágenes responsive por defecto */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   4. ESTRUCTURA RESPONSIVE (MEDIA QUERIES BASE)
   ========================================================================== */

/* Móvil (hasta 767px) */
@media (max-width: 767px) {
    :root {
        --header-height-desktop: 70px; /* Ajuste dinámico de variable */
    }
}

/* Tablet (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ajustes específicos tablet si se requieren */
}

/* Desktop (más de 1024px) */
@media (min-width: 1025px) {
    /* Ajustes específicos desktop */
}

/* ==========================================================================
   5. ESTILOS DEL HEADER PERSONALIZADO (#rick-top-header) - MODIFICADO
   ========================================================================== */

.site-header {
    background-color: var(--color-bg-light); /* Fondo Gris Claro */	
}


/* Contenedor FULL WIDTH para el fondo de la barra superior */
.rick-top-bar-full-width-bg {
    background-color: var(--color-bg-light); /* Fondo Gris Claro */
    border-bottom: 1px solid #eee;
    width: 100%; /* Cubre todo el ancho de la ventana */
}

#rick-top-header {
    /* Mantenemos el grid y el gap */
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 20px;
    max-width: var(--container-width);
    
    /* CAMBIOS LIMPIOS: Cero margen y usa 'auto' para centrar */
    margin: 0 auto; 
    
    align-items: center;
    /* Mantenemos el padding vertical a 0, solo horizontal */
    padding: 0px 20px;
    
    background-color: transparent;
    border-bottom: none;
}

/* 1. Logo - Columna 1 */
.rick-header-logo {
    grid-column: 1 / 2;
}


/* 2. Fila de Contacto (Teléfono y Email) - Columna 3 (Centrado) */
.rick-contact-row {
    grid-column: 3 / 4; /* Centrado en la rejilla */
    justify-self: center; /* Asegura el centrado si hay ancho extra */
    
    margin-bottom: 0; /* Ya no hay un contenedor debajo */
    display: flex;
    flex-direction: column; /* APLICA: Email debajo de Teléfono */
    gap: 5px; 
    font-size: 0.85em;
    /*color: var(--color-text-light);*/
	color: #000000;
}


/* 3. Redes Sociales y Búsqueda - Columna 5 */
.rick-social-search-row {
    grid-column: 5 / 6;
    justify-self: flex-end; /* Alineado a la derecha */
    
    display: flex;
    align-items: center;
    gap: 15px; 
    flex-direction: row-reverse; /* Mantiene: Búsqueda (izquierda), Redes (derecha) */
}

/* Estilo de Iconos Sociales (Sin cambios) */
.social-icons-wrapper a {
    /*color: var(--color-text-light);*/
	color: #000000;
    margin-left: 8px;
    transition: color 0.3s;
}
.social-icons-wrapper a:hover {
    color: var(--color-primary);
}

/* Estilo Básico de la Caja de Búsqueda (Sin cambios) */
.header-search-wrapper .search-form {
    display: flex;
    align-items: center;
}
.header-search-wrapper input[type="search"] {
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    font-family: var(--font-primary);
}
.header-search-wrapper .search-submit {
    display: none; 
}


/* ==========================================================================
   5.1. ESTILOS DEL MENÚ PRINCIPAL GP (Primary Navigation)
   ========================================================================== */
   
/* Contenedor de la Navegación Principal: Fondo FULL-WIDTH */
.main-navigation:not(.toggled) {
    background-color: var(--color-secondary); /* APLICA: Fondo Azul Marino */
}

/* Contenedor del Menú (para centrar y contener a 1200px) */
.main-navigation .main-nav {
    max-width: var(--container-width);
    margin: 0 auto;
    /* Necesario para alinear los elementos de menú a la izquierda dentro del contenedor */
    justify-content: flex-start;
}
.main-navigation .main-nav ul {
    justify-content: flex-start;
}

/* Estilos de los Enlaces del Menú Principal (Top-level) */
.main-navigation ul li a {
    color: var(--color-white) !important; /* APLICA: Letras Blancas */
    font-weight: 700; /* APLICA: Negrita */
    text-transform: uppercase; /* APLICA: Mayúsculas */
    padding: 0px 20px; 
}
.main-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1); 
}

/* Estilos de los Enlaces del SUBMENÚ (Dropdown) */
.main-navigation .sub-menu {
    background-color: #f9f9f9 !important; 
    border-top: 2px solid var(--color-primary);
}
.main-navigation .sub-menu li a {
    /*color: var(--color-text-main); /* APLICA: Letras Negras */
	color: var(--color-black) !important;
    font-weight: 400; /* Vuelve a peso normal para el submenú */
    text-transform: none; /* APLICA: Sin Mayúsculas (deja el texto como está escrito) */
}
.main-navigation .sub-menu li a:hover {
    background-color: var(--color-bg-light) !important;
	color: #2c3e50 !important;
	font-weight: 700 !important; /* APLICA: Negrita */
}

/* style.css - Sección 5.1 */
/* ... (continúa el código) ... */

/* ---------------------------------------------------------------------- */
/* 5.2. SOLUCIÓN FORZADA: ANULAR ALTURA DEL HEADER ORIGINAL DE GENERATEPRESS */
/* ---------------------------------------------------------------------- */

/* 1. Ocultar el logo original y anular su espacio de forma TOTAL */
.site-header .header-content-title,
.site-header .site-logo,
.site-header .site-logo img {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Anular cualquier altura mínima y padding en los contenedores principales de GP */
/* style.css - Sección 5.2. SOLUCIÓN FORZADA: ANULAR ALTURA DEL HEADER ORIGINAL DE GENERATEPRESS */

.site-header .inside-header,
header.site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important; /* Esta es la propiedad CLAVE */
    height: auto !important; 
}
/* ---------------------------------------------------------------------- */

/* Ocultar el logo/título por defecto de GeneratePress (reglas originales) */
.site-header .header-content-title {
	display: none !important;
}
.site-header .site-logo {
	display: none !important;
}

/* ---------------------------------------------------------------------- */


/* --- NUEVA REGLA PARA ELEMENTOS ACTIVOS DENTRO DE SUBMENÚS --- */

/* Resalta el elemento de menú activo y sus ancestros en el SUBMENÚ */
.main-navigation .sub-menu li[class*="current-menu-"] > a,
.main-navigation .sub-menu li[class*="current-page-ancestor"] > a {
    /* Usaremos el color primario para destacarlo dentro del submenú blanco */
    color: var(--color-primary) !important; 
    font-weight: 700 !important; /* Lo ponemos en negrita para darle énfasis */
    /* Opcional: Puedes cambiar el color de fondo para que destaque aún más */
    /* background-color: rgba(30, 115, 190, 0.05) !important; */
}
.main-navigation .sub-menu li a:hover {
    background-color: var(--color-bg-light); /* Fondo Gris Claro */
}

/* ==========================================================================
   6. MEDIA QUERIES (RESPONSIVE) - MODIFICADO
   ========================================================================== */

/* Teléfonos (max 767px) */
@media (max-width: 767px) {
    
    /* DESACTIVAR GRID para apilar */
    #rick-top-header {
        display: flex;
        flex-direction: column; 
        align-items: center; /* Centra todo en el eje X */
        gap: 10px;
        padding: 10px;
    }
    
    /* Apilamiento Vertical de los elementos */
    .rick-header-logo, .rick-contact-row, .rick-social-search-row {
        width: 100%;
        text-align: center;
        /* Limpiamos las propiedades de grid que no necesitamos */
        grid-column: unset; 
        justify-self: unset; 
    }

    /* Asegurar que el contacto se centre (ya es vertical) */
    .rick-contact-row {
        margin-bottom: 5px; 
    }
    .rick-contact-row span {
        text-align: center;
    }
    
    /* APILAMIENTO DE BÚSQUEDA Y SOCIALES */
    .rick-social-search-row {
        /* Fuerza el apilamiento de la Búsqueda y los iconos */
        flex-direction: column-reverse; /* Pone Sociales abajo y Búsqueda arriba */
        align-items: center;
        gap: 10px;
        padding: 5px 0;
    }
    
    /* Forzar que el icono social esté centrado */
    .social-icons-wrapper {
        display: flex;
        justify-content: center;
        margin: 0;
    }

    /* Asegurar que la búsqueda se vea bien */
    .header-search-wrapper {
        width: 100%; /* Ocupa todo el ancho */
        max-width: 300px; /* Limita un poco el ancho del input para que no sea ridículo */
    }
    .header-search-wrapper .search-form {
        justify-content: center;
    }

    /* Centrar el Menú Hamburguesa de GeneratePress */
    .main-navigation {
        display: flex; 
        justify-content: center;
        padding: 10px 0; 
        background-color: var(--color-secondary); 
    }
    
    .main-navigation.toggled {
        background-color: var(--color-secondary);
    }
    .main-navigation.toggled ul li a {
        color: var(--color-white);
    }
}


/* ==========================================================================
   7. ESTILOS DEL SLIDER FULL-WIDTH (SWIPER)
   ========================================================================== */

#rick-full-width-slider {
    /* Ocupa el 100% del ancho del viewport, ignorando el contenedor GP */
    width: 100vw; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Definición de altura del contenedor Swiper (usa variables definidas en :root) */
#rick-full-width-slider .swiper {
    height: var(--slider-height-desktop); /* Por defecto: 600px */
}

.swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    color: var(--color-white); 
}

/* Placeholders de Imágenes de Fondo (DEBES CREARLAS) */
.slide-1 { background-image: url('/files/tenagua-inspeccion-tv-tuberias.jpg'); } 
.slide-2 { background-image: url('/files/tenagua-reparacion-tuberia-con-manga-sin-obras.jpg'); } 
/* NOTA: Crea una carpeta 'images' en tu tema hijo y coloca las imágenes de fondo. */

/* Estilos de Contenido Interno */
.slide-content {
    max-width: 900px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.45); /* Fondo semi-transparente oscuro */
    border-radius: 8px;
}
.slide-content h1 {
    color: var(--color-white);
    font-size: 3.5em;
    margin-bottom: 15px;
}
.slide-content p {
    font-size: 1.2em;
    margin-bottom: 25px;
}

/* Responsive (Móvil) */
@media (max-width: 767px) {
    #rick-full-width-slider .swiper {
        height: var(--slider-height-mobile); /* Por defecto: 85vh */
    }
    .slide-content h1 {
        font-size: 2em;
    }
}

/* ==========================================================================
   8. ESTILOS DEL FOOTER PERSONALIZADO (#rick-custom-footer)
   ========================================================================== */

.copyright-bar{
	display: none !important;
}

#rick-custom-footer {
    background-color: var(--color-secondary); /* Fondo oscuro */
    color: var(--color-white); /* Texto blanco */
    padding: 40px 0 0; /* Padding superior, 0 abajo (la barra legal tendrá su propio padding) */
}

/* Área Superior (Tipo Widgets) */
.footer-widgets-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas iguales */
    gap: 30px;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px 30px;
}

.footer-title {
    color: var(--color-white);
    font-size: 1.2em;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

/* Estilos de Enlaces y Párrafos */
.footer-column p,
.footer-links li a {
    /*color: var(--color-text-light); /* Gris claro */
	color: var(--color-white);
    text-decoration: none;
    line-height: 1.8;
}
.footer-column a:hover {
    color: var(--color-primary);
}

/* Estilos de Iconos Sociales en Footer */
.footer-column.column-social .social-icons-wrapper a {
    color: var(--color-white);
    font-size: 1.5em;
    margin-right: 15px;
}
.footer-column.column-social .social-icons-wrapper a:hover {
    color: var(--color-accent);
}

/* --- Barra Legal Inferior --- */

.footer-legal-bar {
    background-color: #1a242f; 
    padding: 15px 20px;
    display: flex;
    /* CAMBIO CLAVE: Usamos 'center' para centrar el nuevo contenedor intermedio */
    justify-content: center; 
    align-items: center;
    font-size: 0.85em;
    color: var(--color-text-light);
}

/* NUEVO: Estilos para el contenedor intermedio que centra el copyright + menú */
.footer-content-center {
    display: flex; /* Convierte el contenido interno en flex */
    align-items: center; /* Alinea verticalmente Copyright y Menú */
    gap: 20px; /* Espacio entre el Copyright y el Menú */
    max-width: var(--container-width); /* Mantiene el contenido dentro de los límites del sitio */
}

/* * CENTRADO DEL TEXTO DENTRO DEL COPYRIGHT 
 * Esto ayuda a centrarlo si el menú legal no está presente o en móvil
 */
.footer-legal-bar .footer-copyright {
    text-align: center;
    /* ¡CAMBIO CRUCIAL! Esto hace que el div se estire entre el menú y el borde. */
    flex-grow: 1; 
	color: var(--color-white);
}

/* Ajuste del Menú Legal para que no tenga márgenes innecesarios */
.footer-legal-menu .legal-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px; /* Espacio entre los enlaces del menú */
}

/* Eliminamos la regla anterior que ya no es necesaria */
.footer-legal-menu .legal-menu-items li a {
    /*color: var(--color-text-light);*/
	color: var(--color-white);
    margin-left: 0; /* Aseguramos que no haya margen izquierdo */
    text-decoration: none;
}

.footer-legal-menu .legal-menu-items li a:hover {
    color: var(--color-primary);
}

/* Responsive Footer */
@media (max-width: 767px) {
    .footer-widgets-area {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        padding-bottom: 20px;
    }
    .footer-column {
        margin-bottom: 20px;
    }
    .footer-legal-bar {
		/* Fuerza a que los items se apilen y se centren en el eje transversal */
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }
	.footer-legal-bar .footer-copyright {
			/* Asegura que el copyright tenga un margen después de apilarse */
			margin-bottom: 10px;
		}	
    .footer-legal-menu .legal-menu-items {
        flex-direction: column;
        gap: 5px;
    }
    .footer-legal-menu .legal-menu-items li a {
        margin-left: 0;
    }
}