/**
 * Correcciones de Accesibilidad y Contraste
 * 
 * Este archivo soluciona los problemas detectados por Lighthouse:
 * - Contraste de colores insuficiente
 * - Elementos focusables
 * - Estados de hover/focus
 * 
 * @package Canovas_Real_Estate
 * @since 2.1.0
 */

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - DESTINOS
--------------------------------------------------------------*/

/* Títulos sobre imágenes - necesitan más contraste */
.destination-content {
    /* Fondo más oscuro para mejor contraste */
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.3) 80%,
        transparent 100%
    );
}

.destination-title {
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 700;
}

.destination-location,
.destination-description {
    color: #F5F5F5; /* Más claro para mejor contraste */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.destination-link {
    color: #FFFFFF;
    font-weight: 600;
}

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - ABOUT SECTION
--------------------------------------------------------------*/

/* Subtítulo necesita más contraste */
.about-subtitle {
    color: #1E4E6C; /* Usar color primario en lugar de gris */
    font-weight: 600;
}

/* Stats - números y etiquetas */
.stat-number {
    color: #1E4E6C; /* Color primario para mejor contraste */
    font-weight: 700;
}

.stat-label {
    color: #374151; /* Gris más oscuro - ratio 7:1 */
}

/* Botón "Conoce más" - mejorar contraste */
.about-cta .btn-primary {
    background-color: #D85A47; /* Coral más oscuro */
    color: #FFFFFF;
    font-weight: 600;
}

.about-cta .btn-primary:hover,
.about-cta .btn-primary:focus {
    background-color: #1E4E6C;
    color: #FFFFFF;
}

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - ICNEA SEARCH
--------------------------------------------------------------*/

/* Botón de búsqueda */
.icnea-search-section .search-btn {
    background-color: #D85A47; /* Coral más oscuro para contraste */
    color: #FFFFFF;
    font-weight: 600;
}

.icnea-search-section .search-btn:hover,
.icnea-search-section .search-btn:focus {
    background-color: #C04A37;
}

.icnea-search-section .search-btn span {
    color: #FFFFFF;
}

/* Labels del formulario */
.icnea-search-section .search-group label {
    color: #374151; /* Gris oscuro para contraste */
    font-weight: 600;
}

/* Tabs de categorías */
.icnea-search-section .cat-link span {
    color: #374151; /* Más oscuro */
}

.icnea-search-section .cat-link.active span,
.icnea-search-section .cat-link:hover span,
.icnea-search-section .cat-link:focus span {
    color: #1E4E6C;
}

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - BLOG CARDS
--------------------------------------------------------------*/

/* Link "Leer más" */
.blog-card-link {
    color: #1E4E6C; /* Más oscuro que coral */
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: all 0.2s ease;
}

.blog-card-link:hover,
.blog-card-link:focus {
    color: #D85A47;
    text-decoration-color: currentColor;
}

/* Meta info */
.blog-card-meta {
    color: #4B5563; /* Gris más oscuro */
}

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - FOOTER
--------------------------------------------------------------*/

/* Contact labels */
.footer-contact .contact-label {
    color: #D1D5DB; /* Gris claro pero con suficiente contraste sobre azul */
    font-weight: 500;
}

/* Footer credits y links - MEJORADO */
.footer-credits {
    color: #D1D5DB; /* Más claro para mejor contraste */
}

.footer-credits a {
    color: #FFFFFF; /* Blanco para máximo contraste */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-credits a:hover,
.footer-credits a:focus {
    color: #E9DCC4;
}

/* Footer bottom text - MEJORADO */
.footer-bottom {
    color: #E5E7EB; /* Más claro */
}

.footer-copyright {
    color: #E5E7EB; /* Más claro */
}

/* Todos los textos en footer sobre fondo oscuro */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer a {
    color: #E5E7EB;
}

.site-footer a:hover,
.site-footer a:focus {
    color: #FFFFFF;
}

/* Footer titles */
.footer-title {
    color: #FFFFFF;
}

/*--------------------------------------------------------------
# CORRECCIONES - BOTÓN CONOCE MÁS (GLOBAL)
--------------------------------------------------------------*/

/* Todos los btn-primary deben tener buen contraste */
.btn-primary {
    background-color: #C9503D !important; /* Coral más oscuro - ratio 4.5:1 con blanco */
    color: #FFFFFF !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1E4E6C !important;
    color: #FFFFFF !important;
}

/*--------------------------------------------------------------
# CORRECCIONES - ICNEA SEARCH BUTTON
--------------------------------------------------------------*/

/* Botón buscar con mejor contraste */
.search-btn,
.icnea-search-section .search-btn {
    background-color: #C9503D !important;
    color: #FFFFFF !important;
}

.search-btn span,
.icnea-search-section .search-btn span {
    color: #FFFFFF !important;
}

.search-btn:hover,
.search-btn:focus,
.icnea-search-section .search-btn:hover,
.icnea-search-section .search-btn:focus {
    background-color: #A8412F !important;
}

/*--------------------------------------------------------------
# CORRECCIONES - BANNER WPML DESARROLLO
--------------------------------------------------------------*/

/* El banner de WPML "sitio de desarrollo" */
.otgs-development-site-front-end {
    background-color: #1E4E6C !important;
    color: #FFFFFF !important;
}

.otgs-development-site-front-end a {
    color: #E9DCC4 !important;
    text-decoration: underline !important;
}

.otgs-development-site-front-end a:hover {
    color: #FFFFFF !important;
}

/*--------------------------------------------------------------
# ACCESIBILIDAD - FOCUS STATES
--------------------------------------------------------------*/

/* Focus visible para todos los elementos interactivos */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #F2725E;
    outline-offset: 2px;
}

/* Skip link mejorado */
.skip-link:focus {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999999;
    padding: 15px 25px;
    background-color: #1E4E6C;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# ACCESIBILIDAD - LINKS DISTINGUIBLES
--------------------------------------------------------------*/

/* Links en texto deben tener más que solo color */
.site-content a:not(.btn):not(.blog-card-link):not([class*="button"]) {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

.site-content a:not(.btn):not(.blog-card-link):not([class*="button"]):hover {
    text-decoration-thickness: 2px;
}

/*--------------------------------------------------------------
# CORRECCIONES DE CONTRASTE - CTA SECTION
--------------------------------------------------------------*/

.cta-section .btn-primary {
    background-color: #FFFFFF;
    color: #1E4E6C;
    font-weight: 600;
}

.cta-section .btn-primary:hover,
.cta-section .btn-primary:focus {
    background-color: #E9DCC4;
    color: #1E4E6C;
}

/*--------------------------------------------------------------
# ANIMACIÓN REDUCIDA (prefers-reduced-motion)
--------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Deshabilitar animaciones AOS */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/*--------------------------------------------------------------
# MEJORAS PARA LECTORES DE PANTALLA
--------------------------------------------------------------*/

/* Texto solo para lectores de pantalla */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible al enfocar */
.sr-only-focusable:focus,
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: inherit;
}

/*--------------------------------------------------------------
# CORRECCIÓN ANIMACIÓN TOP BAR (evitar CLS)
--------------------------------------------------------------*/

.top-bar-item {
    /* Eliminar animación problemática de box-shadow */
    animation: none !important;
}

/* Si se necesita destacar, usar transform en su lugar */
.top-bar-item:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

/*--------------------------------------------------------------
# IMÁGENES - DIMENSIONES EXPLÍCITAS
--------------------------------------------------------------*/

/* Prevenir CLS con aspect-ratio */
.about-image img {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.destination-image img {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-image img {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*--------------------------------------------------------------
# HERO - OPTIMIZACIÓN LCP
--------------------------------------------------------------*/

/* Precargar imagen del hero */
.hero-section {
    /* Asegurar que la imagen de fondo se cargue rápido */
    background-color: #1E4E6C; /* Color de respaldo mientras carga */
}

/* Contenido del hero visible inmediatamente */
.hero-content {
    opacity: 1;
    visibility: visible;
}