/**
 * Iniciativa y Acción — estilos complementarios.
 *
 * theme.json define colores, tipografías, espaciado y estilos de bloque.
 * Acá viven solo los detalles que theme.json no puede expresar:
 * la marca, los estados hover, la grilla responsive y los remates visuales.
 */

/* ------------------------------------------------------------------ *
 * 0. Ritmo vertical de las secciones
 * ------------------------------------------------------------------ */

/*
 * Cada sección del tema define su propio padding vertical, así que los
 * huecos automáticos entre bloques de nivel raíz sobran: dejarían franjas
 * del color de fondo entre bandas que deben ir pegadas.
 */
.wp-site-blocks > * + *,
main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ *
 * 1. Marca
 * ------------------------------------------------------------------ */

.iya-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.iya-marca:hover,
.iya-marca:focus {
	text-decoration: none;
	color: inherit;
}

.iya-marca__mark {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

/*
 * El archivo es de 256 px para que se vea nítido en pantallas de alta
 * densidad; acá se muestra más chico y el navegador lo reduce. 56px en
 * escritorio -antes 44, se pedía más presencia-, 44px por debajo de 600px
 * -mismo corte que ya usa el menú para pasar a hamburguesa- para que no
 * compita con el resto del encabezado en una pantalla angosta.
 */
.iya-marca__mark img {
	display: block;
	width: 56px;
	height: 56px;
}

@media (max-width: 600px) {
	.iya-marca__mark img {
		width: 44px;
		height: 44px;
	}
}

.iya-marca__texto {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.iya-marca__nombre {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--base);
}

.iya-marca__acento {
	color: var(--wp--preset--color--accent);
}

.iya-marca__bajada {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------------ *
 * 2. Encabezado y navegación
 * ------------------------------------------------------------------ */

.iya-header__inner {
	gap: clamp(1rem, 4vw, 2.5rem);
}

/*
 * Con la marca, el menú, las redes y el botón compitiendo por la misma fila,
 * los 2rem que traían estos grupos hacían que el menú se partiera en dos
 * líneas por debajo de 1200px. Estas separaciones entran holgadas y se leen
 * igual de bien.
 */
.iya-header__acciones {
	gap: 1.5rem;
}

.iya-nav.wp-block-navigation {
	gap: 1.4rem;
}

.iya-header .wp-block-navigation a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s ease;
}

.iya-header .wp-block-navigation a:hover,
.iya-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Página actual: más peso, sin subrayado. */
.iya-header .wp-block-navigation .current-menu-item > a,
.iya-header .wp-block-navigation .current_page_item > a {
	font-weight: 700;
}

/*
 * Submenú de «Directorio».
 *
 * El contenedor de submenú del bloque de navegación hereda fondo y color del
 * padre, y la barra no lleva fondo propio (el azul lo pone el <header>): sin
 * esto el desplegable saldría transparente, con el texto blanco flotando sobre
 * el contenido de la página. Se le repite el azul noche del encabezado.
 */
.iya-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 15rem;
	padding-block: .4rem;
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
}

.iya-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: .5rem 1rem;
}

/*
 * Dentro del desplegable móvil el submenú ya cae sobre el fondo del overlay, así
 * que el recuadro sobra: ahí se muestra como una lista indentada y no como una
 * tarjeta flotando sobre otra del mismo color.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-block: 0;
	background-color: transparent;
	border: 0;
}

/* El menú desplegable en móvil hereda el azul noche. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: clamp(2rem, 8vw, 4rem);
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--base);
}

/*
 * El bloque de navegación pasa a hamburguesa recién a los 600px, pero el
 * encabezado necesita el desplegable antes: entre 600 y 781px el botón
 * «Sumate» ya no está, así que el menú lleva cinco ítems y no entran en una
 * fila (se partía en dos y estiraba la barra). Se extiende el modo desplegable
 * hasta 782px, justo donde reaparece el botón.
 */
@media (min-width: 600px) and (max-width: 781px) {
	.iya-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.iya-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/*
 * «Sumate» vive en el botón amarillo mientras haya lugar. Por debajo de 782px
 * ese botón desaparece, así que el mismo destino se repite como ítem del menú
 * —que en ese rango siempre es el desplegable, por la regla de arriba—.
 */
.iya-nav .iya-solo-movil {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .iya-solo-movil {
	display: block;
}

/*
 * Botón(es) de alta. El bloque de temas sólo encola el CSS de wp:buttons
 * cuando ese bloque aparece de verdad en la plantilla; como acá lo genera un
 * shortcode (para poder mostrar uno o dos según haya sesión), esa hoja nunca
 * se carga y sin esto los botones caían en columna, uno debajo del otro.
 */
.iya-header__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * Enlace de acceso/cuenta. Vive fuera del bloque de navegación -el shortcode
 * que lo genera no es un hijo permitido de wp:navigation-, así que repite a
 * mano el mismo color y hover que usan los ítems del menú.
 */
.iya-header__login {
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.iya-header__login a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s ease;
}

.iya-header__login a:hover,
.iya-header__login a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * 2b. Redes sociales del encabezado
 * ------------------------------------------------------------------ */

/*
 * Una línea sutil las separa del menú: sin ella los iconos se leen como un
 * ítem más de navegación.
 */
.iya-redes-header.wp-block-social-links {
	gap: 0.5rem;
	padding-left: 1.1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	margin: 0;
}

/*
 * Los iconos son lo menos crítico de la barra: por debajo de 1024px el menú y
 * el botón «Sumate» se quedan con el espacio. Ocultarlos evita que el menú se
 * parta en dos filas y deforme el encabezado. Las redes siguen accesibles en
 * el pie, en la sección «Sumate» de la portada y en la página de Contacto.
 */
@media (max-width: 1023px) {
	.iya-redes-header.wp-block-social-links {
		display: none;
	}
}

/*
 * Con sesión iniciada el encabezado tiene un ítem más (el enlace de cuenta) y
 * dos botones de alta en vez de uno («Publicar mi negocio» y «Publicar mi
 * perfil profesional», ver iya_shortcode_alta_cta() en functions.php): ya no
 * entran los cinco grupos en una fila y los botones terminaban angostándose
 * hasta apilarse uno arriba del otro. Las redes son lo primero que se puede
 * sacrificar -misma razón que en la regla de arriba-, y WordPress ya marca el
 * body como logged-in, así que no hace falta ninguna clase propia.
 */
body.logged-in .iya-header .iya-redes-header.wp-block-social-links {
	display: none;
}

.iya-redes-header.wp-block-social-links .wp-social-link {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.82;
	transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.iya-redes-header.wp-block-social-links .wp-social-link svg {
	width: 20px;
	height: 20px;
}

.iya-redes-header.wp-block-social-links .wp-social-link:hover,
.iya-redes-header.wp-block-social-links .wp-social-link:focus-within {
	opacity: 1;
	transform: translateY(-2px);
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * 3. Antetítulos y metadatos
 * ------------------------------------------------------------------ */

.iya-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0;
}

.iya-meta,
.iya-meta a,
.iya-meta time {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
}

.iya-meta {
	align-items: baseline;
}

.iya-meta a:hover {
	text-decoration: underline;
}

.iya-meta .wp-block-post-terms__separator {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 4. Hero
 * ------------------------------------------------------------------ */

/* El banner de portada queda a pantalla completa con el contenido centrado
   verticalmente en vez de pegado arriba. Se resuelve con flex en vez de
   min-height en el propio wp:group porque el título tiene alto variable
   (dos o tres líneas según el viewport). */
.iya-hero--alto {
	display: flex;
	align-items: center;
	min-height: min(44rem, 78vh);
}

.iya-hero__titulo {
	max-width: 14ch;
}

.iya-hero--centrado .iya-hero__titulo {
	max-width: none;
}

.iya-hero__bajada {
	max-width: 52ch;
	color: rgba(255, 255, 255, 0.82);
}

.iya-hero--centrado .iya-hero__bajada {
	margin-inline: auto;
}

/* Insignia de marca: el isologo "disco" ya trae su propia placa blanca, así
   que sólo se la recorta a círculo perfecto (por si el archivo trae esquinas
   blancas en vez de transparentes) y se la limita de tamaño. Reemplaza a la
   foto de portada mientras no hay una foto real cargada. */
.iya-hero__insignia {
	aspect-ratio: 1 / 1;
	max-width: 22rem;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
}

.iya-hero__insignia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Botón secundario sobre fondos oscuros. */
.iya-boton-claro .wp-block-button__link {
	background-color: transparent;
	border: 2px solid rgba(255, 255, 255, 0.85);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iya-boton-claro .wp-block-button__link:hover,
.iya-boton-claro .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------ *
 * 5. Tarjetas
 * ------------------------------------------------------------------ */

.iya-card {
	height: 100%;
	overflow: hidden;
}

.iya-card--pilar .iya-icono,
.iya-card--forma .iya-icono {
	display: block;
	line-height: 0;
	margin-bottom: 0.35rem;
}

.iya-card--forma,
.iya-card--noticia,
.iya-testimonio {
	box-shadow: var(--wp--preset--shadow--card);
}

.iya-card--noticia {
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.iya-card--noticia:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.iya-card--noticia .iya-card__cuerpo {
	flex: 1 1 auto;
}

.iya-card--noticia .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.iya-card--noticia .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.iya-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------ *
 * 6. Imágenes
 * ------------------------------------------------------------------ */

.iya-foto img {
	border-radius: 6px;
	width: 100%;
	height: auto;
	display: block;
}

.iya-foto--retrato img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.iya-foto--hero img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.iya-galeria__grilla .wp-block-image img {
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.iya-avatar img {
	border-radius: 50%;
}

/* ------------------------------------------------------------------ *
 * 7. Testimonios
 * ------------------------------------------------------------------ */

.iya-testimonio__cita {
	font-style: italic;
	line-height: 1.6;
	margin: 0;
}

.iya-testimonio__nombre {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin: 0;
}

.iya-testimonio__autor .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * 8. Valores de marca
 * ------------------------------------------------------------------ */

.iya-esencia__titulo {
	margin-bottom: 0.6rem;
}

.iya-esencia__texto {
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Datos de contacto
 * ------------------------------------------------------------------ */

.iya-dato {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.65rem;
}

.iya-dato strong {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--primary);
	min-width: 5.5rem;
}

.iya-dato a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.iya-dato a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 10. Redes sociales
 * ------------------------------------------------------------------ */

.iya-redes.wp-block-social-links .wp-social-link {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.iya-redes.wp-block-social-links .wp-social-link:hover {
	transform: translateY(-2px);
	background-color: var(--wp--preset--color--primary) !important;
}

/* ------------------------------------------------------------------ *
 * 11. Enlaces «ver más» y paginación
 * ------------------------------------------------------------------ */

.iya-link-mas {
	margin: 0;
}

.iya-link-mas a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.iya-link-mas a:hover {
	text-decoration: underline;
}

.iya-paginacion {
	gap: 0.5rem;
}

.iya-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.iya-paginacion a,
.iya-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.6rem;
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--card);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iya-paginacion a:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.iya-paginacion .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ *
 * 12. Contenido de entradas
 * ------------------------------------------------------------------ */

.iya-single__cuerpo .wp-block-post-content > * {
	margin-block: 1.25rem;
}

.iya-single__cuerpo .wp-block-post-content h2,
.iya-single__cuerpo .wp-block-post-content h3 {
	margin-top: 2.5rem;
}

.wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

/* Si la página no tiene contenido propio, el contenedor no debe dejar hueco. */
.iya-pagina__contenido:not(:has(.wp-block-post-content > *)) {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 13. Pie de página
 * ------------------------------------------------------------------ */

.iya-footer__lema {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0;
}

.iya-footer__copy {
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
}

.iya-footer__mark {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.iya-footer__mark img {
	display: block;
	width: 30px;
	height: 30px;
}

/* El pie ya no usa un grupo de bloques: la marca se arma en su propio patrón. */
.iya-footer__marca {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

/* ------------------------------------------------------------------ *
 * 14. Ajustes responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.iya-grilla.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.iya-galeria__grilla.wp-block-gallery.columns-4 .wp-block-image {
		width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
	}
}

@media (max-width: 781px) {
	.iya-grilla.wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.iya-marca__bajada {
		display: none;
	}

	.iya-hero__titulo {
		max-width: none;
	}

	/*
	 * Se necesita la clase de bloque además de la propia: el CSS de la
	 * biblioteca de bloques declara .wp-block-buttons{display:flex} con la
	 * misma especificidad y se carga después de esta hoja.
	 */
	.iya-header__cta.wp-block-buttons {
		display: none;
	}

	.iya-footer__inner {
		justify-content: flex-start;
	}
}

/* En pantallas muy chicas el wordmark completo no entra. */
@media (max-width: 400px) {
	.iya-marca__nombre {
		font-size: 0.8125rem;
	}
}

/* ------------------------------------------------------------------ *
 * 15. Accesibilidad
 * ------------------------------------------------------------------ */

:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}