/*
Theme Name: AyudasYaUSA
Theme URI: https://ayudasyausa.com/
Author: AyudasYaUSA
Author URI: https://ayudasyausa.com/
Description: Tema propio de AyudasYaUSA, portal informativo en español sobre ayudas y programas de asistencia pública de Estados Unidos, organizados por Estado y por tipo de ayuda. Mobile-first, sin fuentes ni servicios de terceros, con mapa interactivo real de los 50 estados.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ayudasyausa
Tags: informativo, accesible, responsive, custom-menu, translation-ready
*/

/* -------------------------------------------------------------------------
   Tokens de diseño
   Paleta heredada de AyudasYa (proyecto hermano de España), sin rediseñar.
   El verde de los botones es #1E8449 y no #2ECC71 porque sobre texto blanco
   el primero da ~4,7:1 de contraste (cumple WCAG AA) y el segundo ~2,1:1.
   ------------------------------------------------------------------------- */
:root {
	--color-azul: #1B4F72;
	--color-azul-oscuro: #143B56;
	--color-azul-claro: #2E6E9E;
	--color-verde: #1E8449;
	--color-verde-oscuro: #176638;
	--color-verde-claro: #2ECC71;
	--color-blanco: #FFFFFF;
	--color-gris-fondo: #F4F6F8;
	--color-gris-borde: #DDE3E9;
	--color-texto: #222831;
	--color-texto-suave: #55606D;
	--color-aviso-fondo: #FFF8E6;
	--color-aviso-borde: #E0A800;

	--fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ancho-maximo: 1180px;
	--ancho-lectura: 760px;
	--radio: 8px;
	--sombra: 0 1px 3px rgba(34, 40, 49, .08), 0 4px 12px rgba(34, 40, 49, .06);
	--espacio: 1rem;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-texto);
	background: var(--color-blanco);
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--color-azul); }
a:hover, a:focus { color: var(--color-verde-oscuro); }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 2rem 0 .75rem; font-weight: 700; color: var(--color-azul); }
h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); margin-top: 0; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.3rem); }
h4 { font-size: 1.05rem; }

p, ul, ol, table { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .4rem; }

/* Accesibilidad: foco siempre visible y skip-link real. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--color-verde);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--color-azul);
	color: var(--color-blanco);
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--radio) 0;
}
.saltar-al-contenido:focus {
	left: 0;
	color: var(--color-blanco);
}

.contenedor {
	width: 100%;
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 1rem;
}