/*
Theme Name: CAREFIT Campus (accesible)
Template: twentytwentyfive
Description: Tema hijo accesible del campus CAREFIT (WCAG 2.2, publico cuidador senior ~65-77 anios). Identidad navy + teal, tipografias auto-alojadas (sin CDN externo, por el Anexo II del contrato).
Version: 0.2.0
Author: iAcademia (Sapiencia Health)
Text Domain: carefit-child
*/

/*
 * Paleta CAREFIT (dossier de marca, direccion B: navy + teal).
 * Regla de marca: el texto va SIEMPRE en tinta sobre claro (contraste AAA).
 * El acento teal es DECORATIVO: nunca texto pequeno.
 */
:root {
	--carefit-navy: #00205b;
	--carefit-teal: #12a2a0;
	--carefit-tinta: #0e1b33;
	--carefit-papel: #fbf8f3;
	--carefit-tinte: #dce6f2;
}

/* ---------------------------------------------------------------
   Legibilidad senior
   W3C WAI (older users) + WCAG 1.4.4: el texto debe poder ampliarse
   al 200% sin romperse, asi que todo va en unidades relativas.
   --------------------------------------------------------------- */
body {
	font-size: 1.25rem; /* 20px */
	line-height: 1.6;
}

/* WCAG 1.4.8: nada de texto justificado ni bloques centrados */
p,
li {
	text-align: left;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Reflow (WCAG 1.4.10) + texto al 200% (WCAG 1.4.4)
   Detectado probando en un iPhone SE real (320 px, motor WebKit) con el
   texto al doble: palabras como "bienestar" o "psicoemocional" no caben
   en una linea y provocaban desplazamiento horizontal. La solucion NO es
   achicar la letra (eso incumpliria 1.4.4), sino dejar que las palabras
   se partan. El lang="es" del documento hace que se partan bien.
   Es el caso real de nuestra usuaria: movil pequeno y letra grande.
   --------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
a,
.wp-block-button__link,
.wp-element-button {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* En pantallas muy estrechas, los rellenos en rem se duplican con el zoom y
   se comen el ancho util. Se acotan para que quede sitio al texto. */
@media (max-width: 400px) {
	.wp-block-group.has-border-color,
	.wp-block-column {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* ---------------------------------------------------------------
   Foco muy visible (WCAG 2.4.7 / 2.4.11)
   Usa el acento teal: es decoracion, no texto.
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--carefit-teal);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   Enlaces: subrayados siempre (WCAG 1.4.1, no depender del color)
   --------------------------------------------------------------- */
a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------
   Areas tactiles >= 44px (dossier de marca; WCAG 2.5.8)
   Publico con destreza en declive.
   --------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"] {
	min-height: 48px;
}

input,
select,
textarea {
	font-size: 1.125rem;
	min-height: 48px;
	border: 2px solid var(--carefit-navy);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
}

/* Etiquetas de formulario claras (WCAG 3.3.2) */
label {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Detalles de marca (teal solo decorativo)
   --------------------------------------------------------------- */
hr,
.wp-block-separator {
	border: 0;
	border-top: 3px solid var(--carefit-teal);
	opacity: 1;
}

/* Preferencia del sistema: mas contraste */
@media (prefers-contrast: more) {
	body {
		color: #000;
		background: #fff;
	}
}

/* Respeta a quien pide menos movimiento (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ===============================================================
   IDENTIDAD: el abrazo
   Dossier de marca, direccion B. El simbolo es navy + hoja teal.
   =============================================================== */
.wp-block-site-logo img {
	max-height: 64px;
	width: auto;
}

/* En movil el lockup completo no cabe junto al menu: se achica, nunca se parte. */
@media (max-width: 600px) {
	.wp-block-site-logo img {
		max-height: 48px;
	}
}

/* ===============================================================
   PORTADA: que te toca hoy
   Es lo primero que ve al entrar. Tiene que responder "que hago yo
   ahora" sin leer nada mas.
   =============================================================== */
.carefit-hoy {
	background: #fff;
	border: 3px solid var(--carefit-tinte);
	border-radius: 16px;
	padding: 1.75rem;
	margin-block: 1.5rem;
}

.carefit-hoy__titulo {
	margin-top: 0;
}

.carefit-hoy__entradilla {
	margin-bottom: 1.25rem;
}

.carefit-hoy__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Toda la fila es el area tactil, no solo el texto (WCAG 2.5.8).
   El publico tiene destreza en declive: un enlace de una palabra falla. */
.carefit-hoy__enlace {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 48px;
	padding: 1rem 1.25rem;
	border: 2px solid var(--carefit-navy);
	border-radius: 12px;
	background: var(--carefit-papel);
	text-decoration: none;
	color: var(--carefit-tinta);
}

.carefit-hoy__enlace:hover,
.carefit-hoy__enlace:focus-visible {
	background: var(--carefit-tinte);
}

.carefit-hoy__nombre {
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: underline; /* WCAG 1.4.1: que se vea que es un enlace */
	text-underline-offset: 0.15em;
}

.carefit-hoy__seccion {
	font-size: 1rem;
	opacity: 0.85;
}

.carefit-hoy__descanso {
	font-weight: 600;
}

/* Cuando ya no le queda nada por hacer: el abrazo. Decorativo, por eso va en
   background y no en <img> (no debe anunciarlo el lector de pantalla).
   Solo al terminar: un abrazo en todas las pantallas deja de significar nada. */
.carefit-hoy--al-dia .carefit-hoy__titulo::before,
.carefit-hoy--fin .carefit-hoy__titulo::before {
	content: "";
	display: block;
	width: 72px;
	height: 64px;
	margin-bottom: 0.75rem;
	background: url("assets/abrazo.png") no-repeat center / contain;
}

/* Al terminar las ocho semanas, mas grande. Es el unico momento del programa
   en el que toca celebrar de verdad.
   NO se centra el texto: la regla de legibilidad de arriba (alineado a la
   izquierda siempre) manda tambien aqui. Lo que celebra es el simbolo, no la
   maquetacion. */
.carefit-hoy--fin {
	border-color: var(--carefit-teal);
}

.carefit-hoy--fin .carefit-hoy__titulo::before {
	width: 128px;
	height: 114px;
}

/* ===============================================================
   Cuanto dura
   Solo aparece si UAX ha entregado la duracion real de la sesion.
   =============================================================== */
.carefit-duracion {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	background: var(--carefit-tinte);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

.carefit-duracion__cifra {
	font-size: 1.5rem;
	font-weight: 700;
}

/* ===============================================================
   Telefono del equipo
   =============================================================== */
.carefit-telefono {
	border: 3px solid var(--carefit-teal);
	border-radius: 16px;
	padding: 1.5rem;
	margin-block: 1.5rem;
	background: #fff;
}

.carefit-telefono__rotulo {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.carefit-telefono__numero {
	margin: 0 0 0.35rem;
	font-size: 1.75rem;
	font-weight: 700;
}

/* Numero grande y marcable: en movil se toca, no se copia. */
.carefit-telefono__numero a {
	display: inline-block;
	min-height: 48px;
	padding: 0.25rem 0;
	color: var(--carefit-navy);
}

.carefit-telefono__nota {
	margin: 0;
	font-size: 1rem;
}

/* ===============================================================
   Resumen y cuestionarios
   =============================================================== */
.carefit-resumen dl {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1rem 0;
}

.carefit-resumen dl > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 2px solid var(--carefit-tinte);
	padding-bottom: 0.6rem;
}

.carefit-resumen dt {
	font-weight: 600;
}

.carefit-resumen dd {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--carefit-navy);
}

.carefit-animo {
	font-weight: 600;
}

.carefit-cuestionario {
	border: 3px solid var(--carefit-navy);
	border-radius: 16px;
	padding: 1.5rem;
	margin-block: 1.5rem;
	background: #fff;
}

.carefit-min {
	font-weight: 600;
}

/* El aviso de que sale del campus. No es decoracion: el publico son mujeres a
   las que se advierte de fraudes por internet constantemente, y un cambio de
   dominio sin avisar es motivo de abandono. */
.carefit-fuera {
	background: var(--carefit-tinte);
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	font-size: 1.05rem;
	margin-bottom: 0;
}

/* Avisos que solo ve el administrador (datos que faltan de UAX/FUAX) */
.carefit-aviso-admin {
	border: 2px dashed #8a6d3b;
	background: #fcf8e3;
	color: #6b5426;
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	font-size: 1rem;
	margin-block: 1rem;
}

/* ===============================================================
   LearnDash: el goteo se comunica con una fecha, no con un candado
   El protocolo fija la secuenciacion; no dice como se cuenta.
   "Se abre el lunes 21" informa. Un candado regana.
   =============================================================== */
.ld-status-waiting {
	background: var(--carefit-tinte) !important;
	color: var(--carefit-tinta) !important;
	font-weight: 600;
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
}

/* ===============================================================
   Menu principal: areas tactiles
   Detectado el 17/07 midiendo el DOM real: los enlaces del menu median
   25px de alto. Cumplen el minimo de WCAG 2.5.8 (24px) por los pelos,
   pero NO los 44px que exige el dossier de marca, y son la navegacion
   principal de una persona de 65-77 anios con destreza en declive.
   Se agranda el area pulsable sin tocar el tamano de la letra.
   =============================================================== */
.wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: 0.35rem;
}

/* El menu desplegado en movil: mas aire entre opciones, para no pulsar
   la de al lado sin querer. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 48px;
}

/* El nombre del sitio tambien es un enlace (va a la portada): mismo minimo. */
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ===============================================================
   Entrar y salir
   Sin esto no habia forma de iniciar sesion mas que teclear
   /wp-login.php a mano, ni de salir una vez dentro.
   =============================================================== */
.carefit-acceso {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.carefit-acceso .wp-element-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1.25rem;
	background: var(--carefit-navy);
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
}

.carefit-acceso__hola {
	font-weight: 600;
}

.carefit-acceso--dentro a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--carefit-navy);
}