/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* === LCP HERO MOBILE OPTIMIZATION === */

/* Fuerza la imagen hero mobile antes de que el JS de Salient active viewport-desktop.
   Sin esto, el div.viewport-desktop es visible en móvil con la imagen de 2240px. */
@media (max-width: 768px) {
	.row-bg.viewport-desktop.using-image {
		background-image: url('/wp-content/uploads/Gopegui-img-para-web-8-2-mobile.jpg') !important;
	}
}

/* === FIN LCP HERO MOBILE === */

/* === WCAG 2.1 AA CONTRASTE DE COLOR ===
   #59a9b7 en blanco = 2.70:1 (falla AA).
   #3e757f es la misma tonalidad pero cumple 5.18:1 en blanco.
   Solo aplicado a propiedades `color:` (texto), no a fondos ni bordes. */
[style*="color: #59a9b7"],
[style*="color:#59a9b7"] {
	color: #3e757f !important;
}
/* Override del custom property --nectar-text-color cuando apunta al brand color */
[style*="--nectar-text-color: #59a9b7"] {
	--nectar-text-color: #3e757f;
}
/* === FIN WCAG CONTRASTE === */

/* === WCAG 1.3.1 COMPENSACIÓN VISUAL — HEADING HIERARCHY ===
   Los siguientes elementos tienen su tag HTML cambiado por output buffer (functions.php)
   para corregir la jerarquía semántica. Estas reglas preservan exactamente el tamaño
   y peso tipográfico original de Salient (valores obtenidos de salient_redux en BD):
     H2 original: Roboto 100, 35px, line-height 45px
     H4 original: Roboto 300, 24px, line-height 35px
     H5 original: Roboto 400, 16px, line-height 26px (= body)
   ================================================================ */

/* Doctor names: eran H5 (16px/400), ahora son H3 semánticamente.
   Sin este override H3 aplicaría 30px/100 del tema → cambio visual. */
h3.doctor-name {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

/* Doctor specialties: eran H2 (35px/100), ahora son P semánticamente.
   Sin este override P aplicaría 16px/300 → cambio visual drástico. */
p.doctor-specialty {
	font-family: 'Roboto', Helvetica, sans-serif;
	font-size: 35px;
	font-weight: 100;
	line-height: 45px;
}

/* Tech items: eran H4 (24px/300), ahora son H3 semánticamente.
   Sin este override H3 aplicaría 30px/100 del tema → cambio visual. */
h3.tech-item {
	font-size: 24px;
	font-weight: 300;
	line-height: 35px;
}

/* Clase de utilidad sr-only — texto visible solo a lectores de pantalla.
   Alias de .screen-reader-text de WordPress/Salient para uso en child theme. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* === FIN HEADING HIERARCHY === */

/* === FOOTER WIDGET TITLES: H4 → H3 COMPENSACIÓN VISUAL ===
   El CSS de Salient para footer H4 en widget area es:
     color: #59a9b7 !important  (footer-secondary-font-color)
     font-size: 14px
     font-weight: 600
     margin-bottom: 20px
   Los H3 del footer heredan color (#CCCCCC) y usan el tamaño global de H3 (30px/100).
   Este bloque restaura exactamente el aspecto original sobre la nueva etiqueta H3. */
#footer-outer #footer-widgets .widget h3.footer-widget-title {
	color: #59a9b7 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 20px;
	font-family: 'Roboto', Helvetica, sans-serif;
}
/* === FIN FOOTER WIDGET TITLES === */