/*
Theme Name:        Red Altruista
Theme URI:         https://redaltruista.org
Author:            Diego Lozano
Description:       Tema de bloques ligero para la Red de Asociaciones Altruistas de Puerto Vallarta y Bahía de Banderas. Reemplaza a Avada.
Version:           1.0.0
Requires at least: 6.6
Tested up to:      7.1
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       redaltruista
*/

/* Casi todo el diseño vive en theme.json. Aquí solo va lo que theme.json no cubre. */

/* ---------- Header ---------- */
.ra-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.admin-bar .ra-header { top: var(--wp-admin--admin-bar--height, 32px); }

.ra-header .wp-block-navigation a:hover,
.ra-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primario);
}

/* Botón del menú móvil al doble del tamaño de WordPress (24px). */
.ra-header .wp-block-navigation__responsive-container-open svg {
	width: 48px;
	height: 48px;
}

/* Menú móvil también en tablets: WordPress lo cambia a 600px; aquí hasta 1024px. */
@media (min-width: 600px) and (max-width: 1024px) {
	.ra-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ra-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Los botones del encabezado siempre en una sola fila; en pantallas chicas se compactan. */
.ra-header .wp-block-buttons { flex-wrap: nowrap; }
.ra-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 599px) {
	.ra-header .wp-block-button__link {
		padding: 0.75em 1em;
		font-size: clamp(0.65rem, 3vw, 0.8rem) !important; /* !important: el bloque trae font-size en línea */
		letter-spacing: 1px;
	}
}

/* ---------- Tarjetas de asociación ---------- */
.ra-card {
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ra-card:hover {
	box-shadow: 0 10px 30px rgba(38, 46, 68, 0.12);
	transform: translateY(-2px);
}
.ra-card .wp-block-post-featured-image img {
	object-fit: contain;
	background: #fff;
}
.ra-card .wp-block-post-title a { text-decoration: none; }
.ra-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primario-claro); }
/* El bloque de enlaces queda pegado al fondo de la tarjeta. */
.ra-card > .ra-enlaces { margin-top: auto; }
/* En la tarjeta: botón «Ir a la web» chico e íconos de redes al doble (core: 16px). */
.ra-card .ra-web .wp-block-button__link {
	padding: 0.6em 1.1em;
	font-size: 0.75rem;
	letter-spacing: 1px;
}
.ra-card .ra-redes.has-small-icon-size { font-size: 32px; }

/* Móvil: tarjeta horizontal. Logo de 145px a la izquierda con título y áreas; texto y enlaces debajo. */
@media (max-width: 599px) {
	.ra-card.is-layout-flex {
		display: grid;
		grid-template-columns: 145px 1fr;
		grid-template-areas:
			"logo titulo"
			"logo areas"
			"texto texto"
			"enlaces enlaces";
		column-gap: 1rem;
		row-gap: 0.4rem;
	}
	.ra-card > .wp-block-post-featured-image {
		grid-area: logo;
		align-self: center;
		width: 145px;
	}
	.ra-card > .wp-block-post-featured-image img {
		width: 145px;
		height: auto !important; /* !important: el bloque trae height en línea */
	}
	.ra-card > .wp-block-post-title { grid-area: titulo; align-self: end; }
	.ra-card > .wp-block-post-terms { grid-area: areas; align-self: start; }
	.ra-card > .wp-block-post-content { grid-area: texto; margin-top: 0.6rem; }
	.ra-card > .ra-enlaces { grid-area: enlaces; margin-top: 0.6rem; }
}

/* ---------- Bloque ra/asociacion-enlaces ---------- */
.ra-enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.ra-enlaces .wp-block-buttons { margin: 0; }
.ra-enlaces .wp-block-social-links { margin: 0; gap: 0.5rem; }
.ra-enlaces .wp-social-link { color: var(--wp--preset--color--primario); }
.ra-enlaces .wp-social-link:hover { color: var(--wp--preset--color--acento); }
.ra-enlaces .ra-contacto { flex-basis: 100%; margin: 0; font-size: var(--wp--preset--font-size--small); }

/* ---------- Bloque ra/filtro-areas ---------- */
.ra-filtro__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ra-filtro__item {
	display: inline-block;
	padding: 0.4em 1em;
	border: 1px solid var(--wp--preset--color--menta);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 0.95rem;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--primario);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ra-filtro__item:hover { background: var(--wp--preset--color--menta); color: var(--wp--preset--color--oscuro); }
.ra-filtro__item.is-active { background: var(--wp--preset--color--primario); border-color: var(--wp--preset--color--primario); color: #fff; }
.ra-filtro__count { opacity: 0.7; font-size: 0.85em; }

/* ---------- Cifras ---------- */
.ra-cifra .ra-cifra__numero {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	line-height: 1;
}

/* ---------- Tarjeta de persona (patrón redaltruista/persona) ---------- */
.ra-persona { height: 100%; }
.ra-persona__foto img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
}
.ra-persona .ra-persona__cargo {
	margin-top: 0.25rem;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ra-persona .wp-block-details summary {
	text-align: center;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	color: var(--wp--preset--color--primario);
}
.ra-persona .wp-block-details[open] summary { margin-bottom: 1rem; }

/* ---------- Páginas de eventos (inc/eventos.php) ---------- */
.ra-evento-datos { list-style: none; padding: 0; }
.ra-evento-datos li { margin-bottom: 0.35rem; }
.ra-programa table { border-collapse: collapse; background: var(--wp--preset--color--blanco); }
.ra-programa th,
.ra-programa td {
	padding: 0.75rem 1rem;
	border: 1px solid #dfe9e9;
	vertical-align: top;
	text-align: left;
}
.ra-programa th {
	background: var(--wp--preset--color--primario);
	color: #fff;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ra-programa td:first-child {
	white-space: nowrap;
	color: var(--wp--preset--color--primario);
	font-weight: 600;
}
.ra-persona .ra-persona__org { margin-top: 0.25rem; }

/* ---------- Página Sobre nosotros ---------- */
.ra-historia__anio { line-height: 1; font-weight: 600; }
.ra-lista-simple {
	list-style: none;
	padding: 0;
	text-align: center;
}

/* ---------- Línea de tiempo (Transparencia) ---------- */
.ra-linea {
	border-left: 3px solid var(--wp--preset--color--menta);
	padding-left: var(--wp--preset--spacing--60);
}
.ra-hito { position: relative; }
.ra-hito::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: calc(-1 * var(--wp--preset--spacing--60) - 11px);
	width: 19px;
	height: 19px;
	border: 4px solid var(--wp--preset--color--blanco);
	border-radius: 50%;
	background: var(--wp--preset--color--primario);
	box-shadow: 0 0 0 2px var(--wp--preset--color--menta);
}
.ra-hito .ra-historia__anio { margin: 0; }
.ra-hito h3 { margin-top: 0.25rem; }

/* ---------- Caminos (Inicio) ---------- */
.ra-camino { overflow: hidden; border-radius: 6px; }
.ra-camino > .wp-block-image { margin: 0; }
.ra-camino > .wp-block-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---------- Página Contribuye ---------- */
/* Tarjetas con el botón pegado abajo, aunque los textos tengan distinto largo. */
.ra-accion { display: flex; flex-direction: column; }
.ra-accion > .wp-block-buttons { margin-top: auto; padding-top: var(--wp--preset--spacing--30); }

/* ---------- Bloque ra/necesidades ---------- */
.ra-nec-filtro { justify-content: center; margin-bottom: var(--wp--preset--spacing--40); }
.ra-nec-filtro[hidden] { display: none; }
.ra-nec-filtro .ra-filtro__item { background: #fff; cursor: pointer; }
.ra-nec-filtro .ra-filtro__item[aria-pressed="true"] { background: var(--wp--preset--color--primario); border-color: var(--wp--preset--color--primario); color: #fff; }
.ra-nec-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}
.ra-nec {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid #e8eeee;
	border-radius: 6px;
	background: #fff;
	font-size: 0.95rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}
.ra-nec[hidden] { display: none; }
.ra-nec p { margin: 0; }
.ra-nec__cabeza { display: flex; align-items: center; gap: 1rem; }
.ra-nec__logo { flex: 0 0 90px; }
.ra-nec__logo img { display: block; width: 90px; height: 68px; object-fit: contain; }
.ra-nec__encabezado { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
.ra-nec__tipo {
	padding: 0.15em 0.7em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 0.75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--oscuro);
}
.ra-nec__tipo--especie { background: var(--wp--preset--color--menta); }
.ra-nec__tipo--economico { background: var(--wp--preset--color--amarillo); }
.ra-nec__tipo--voluntariado { background: var(--wp--preset--color--coral); color: #fff; }
.ra-nec__titulo { margin: 0; font-size: 1.15rem; letter-spacing: 0; }
.ra-nec__asociacion {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	text-decoration: none;
}
.ra-nec__contacto {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e8eeee;
}
.ra-nec__persona { flex-basis: 100%; font-weight: 600; color: var(--wp--preset--color--oscuro); }
.ra-nec__fecha { font-size: var(--wp--preset--font-size--small); opacity: 0.75; }
.ra-necesidades__vacio { text-align: center; }

/* ---------- Página Eventos ---------- */
.ra-evento { overflow: hidden; }
.ra-evento .wp-block-post-featured-image img { border-radius: 0; }
.ra-evento .wp-block-read-more {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 0.9rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primario);
}
.ra-evento .wp-block-read-more:hover { color: var(--wp--preset--color--acento); }

/* ---------- Formularios (Contact Form 7) ---------- */
.wpcf7 label {
	display: block;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--oscuro);
}
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--menta);
	border-radius: 4px;
	background: var(--wp--preset--color--blanco);
	font: inherit;
	font-family: var(--wp--preset--font-family--raleway);
	color: var(--wp--preset--color--texto);
}
.wpcf7 textarea { min-height: 10rem; resize: vertical; }
.wpcf7 :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 0;
	border-color: transparent;
}
.wpcf7 input[type="submit"] {
	padding: 0.9rem 2rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--primario);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--roboto-condensed);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--acento); }
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--coral); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--wp--preset--color--coral); font-size: var(--wp--preset--font-size--small); }
.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--blanco);
}

/* ---------- Accesibilidad ---------- */
:where(a, button, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 2px;
}

/* ---------- Ajustes de flujo ---------- */
/* Las anclas (#programas, #necesidades) no quedan debajo del encabezado fijo. */
html { scroll-padding-top: 6rem; }
/* Sin hueco entre el contenido y el pie (el blockGap raíz lo añadía). */
.wp-site-blocks > footer,
.wp-site-blocks > main + * { margin-block-start: 0; }
/* Secciones a ancho completo seguidas (patrones del inicio) van pegadas. */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
/* Si la página termina en una sección a ancho completo, va pegada al pie (page.html deja padding abajo). */
.wp-block-post-content:has(> .alignfull:last-child) { padding-bottom: 0 !important; }