/*
Theme Name: Ananda Marga Theme
Template:   twentytwentyfive
Author: J. J. S. Fuentes
Description: Ananda Marga Theme es un diseño hecho a medida para la organización Ananda Marga Chile. Cuenta con una serie de personalizaciones para ilustrar de forma sencilla y simpatica la ideología y filosofía margi.
Version: 2.4
 */

/* ===========================================================================
   Identidad visual «Nuevo amanecer» — v2.0
   La paleta y la tipografía viven en theme.json (así el equipo las tiene
   disponibles al editar en WordPress). Aquí solo van los componentes que los
   bloques no cubren solos.

   Colores institucionales medidos del logo oficial: #FF6500 y #008037.
   Tonos de amanecer derivados de la fotografía de Litueche del Mood Board.
   Ver docs/IDENTIDAD_VISUAL.md.
   =========================================================================== */

/* ── Etiqueta en versalitas: recurso literal del Mood Board ─────────────────── */
.am-etiqueta {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tierra-suave);
}

/* ── Portada con fotografía a contraluz ────────────────────────────────────── */
.am-portada {
	position: relative;
	min-height: 88vh;
	display: grid;
	place-items: center;
	text-align: center;
	overflow: hidden;
}
.am-portada__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
/* El velo es obligatorio sobre foto: sin él el texto claro falla al sol. */
.am-portada__velo { position: absolute; inset: 0; background: var(--wp--preset--gradient--velo); }
.am-portada__contenido { position: relative; z-index: 2; max-width: 760px; padding: 2rem 1.5rem; }
.am-portada h1 { color: #fff !important; text-shadow: 0 3px 26px rgba(42, 33, 24, .55); }
.am-portada p  { color: #FFF6E4; text-shadow: 0 2px 16px rgba(42, 33, 24, .65); }

/* La portada es una panorámica de 2,5:1. En un teléfono el contenedor es vertical,
   así que a igual alto el recorte se comería casi todo el paisaje: se baja el alto en
   pantallas angostas para que se siga viendo el amanecer completo. */
@media (max-width: 781px) {
	.wp-block-cover.alignfull { min-height: 58vh !important; }
}

/* ── Bloque destacado: la unión de práctica y servicio ──────────────────────── */
.am-unidad {
	background: var(--wp--preset--gradient--amanecer);
	color: #fff;
	border-radius: 14px;
	padding: clamp(2.2rem, 6vw, 4rem);
	text-align: center;
	box-shadow: 0 8px 30px rgba(42, 33, 24, .10);
}
.am-unidad h2 { color: #fff !important; }
.am-unidad p  { color: #FFF6E4; }
.am-unidad blockquote {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.5rem;
	line-height: 1.4;
	max-width: 34ch;
	margin: 3rem auto 0;
	border: 0;
	padding: 0;
}
.am-unidad blockquote cite {
	display: block;
	font-family: var(--wp--preset--font-family--texto);
	font-size: .85rem;
	font-style: normal;
	opacity: .85;
	margin-top: .9rem;
	letter-spacing: .05em;
}

/* ── Tarjetas ──────────────────────────────────────────────────────────────── */
.am-tarjeta {
	background: #fff;
	border-radius: 14px;
	padding: 2rem;
	box-shadow: 0 6px 22px rgba(42, 33, 24, .09);
	transition: transform .25s ease, box-shadow .25s ease;
	height: 100%;
}
.am-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(42, 33, 24, .14); }
.am-tarjeta__icono {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #FFE1B8, #FFC98A);
	color: var(--wp--preset--color--naranja);
	font-size: 1.35rem;
	margin-bottom: 1.1rem;
}

/* ══ MENÚ DEL TELÉFONO ═════════════════════════════════════════════════════════
   Se rehace entero: el menú por defecto de WordPress queda apretado contra el borde
   y sin jerarquía. Aquí es una pantalla completa, centrada y simétrica, con el logo
   arriba, la página actual marcada y los submenús cerrados hasta que se pulsan. */
@media (max-width: 781px) {

	.wp-block-navigation__responsive-container.is-menu-open {
		background: linear-gradient(180deg, #FFF3DC 0%, #FDF7EC 42%) !important;
		padding: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 5.5rem 1.5rem 3rem !important;
		gap: 0 !important;
	}

	/* El logo encabeza el menú: recuerda dónde estás parado. */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content::before {
		content: "";
		display: block;
		width: 92px; height: 92px;
		margin: 0 auto 2rem;
		background: url("assets/img/logo-ananda-marga-chile.png") center/contain no-repeat;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
		gap: 0 !important;
	}

	/* Cada entrada ocupa toda la fila, centrada y con su separador. Simetría. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: center;
		border-bottom: 1px solid rgba(42, 33, 24, .09);
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child { border-bottom: 0; }

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--titulo);
		font-size: 1.5rem !important;
		font-weight: 600;
		color: var(--wp--preset--color--verde) !important;
		padding: .95rem .5rem !important;
		text-align: center;
		width: 100%;
	}

	/* Dónde estás: la página actual en naranja, con un punto que la señala. */
	.wp-block-navigation__responsive-container.is-menu-open
	.am-actual > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--naranja) !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.am-actual > .wp-block-navigation-item__content::after {
		content: "";
		display: block;
		width: 7px; height: 7px;
		border-radius: 50%;
		background: var(--wp--preset--color--naranja);
		margin: .5rem auto 0;
	}

	/* Submenús: cerrados hasta que se pulsa, y en un tono más liviano al abrirse. */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container { display: none; }

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])
	> .wp-block-navigation__submenu-container {
		display: block !important;
		position: static !important;
		width: 100% !important;
		border: 0 !important;
		background: rgba(247, 231, 198, .5) !important;
		border-radius: 12px;
		padding: .4rem 0 .8rem !important;
		margin-bottom: .6rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--texto) !important;
		font-size: 1.02rem !important;
		font-weight: 600;
		color: var(--wp--preset--color--tierra-suave) !important;
		padding: .6rem .5rem !important;
	}

	/* El botón que abre el submenú, cómodo para el dedo y bien alineado. */
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle {
		min-width: 44px; min-height: 44px;
		padding: .5rem !important;
		color: var(--wp--preset--color--verde);
	}
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu { justify-content: center; width: 100%; }

	/* La X de cerrar, separada del borde y fácil de acertar. */
	.wp-block-navigation__responsive-container-close {
		top: 1.2rem !important; right: 1.2rem !important;
		width: 44px; height: 44px;
		color: var(--wp--preset--color--tierra) !important;
	}
}

/* ── El mantra ─────────────────────────────────────────────────────────────────
   Bábá Nám Kevalam merece detener la página, no ser una línea más. Se le da el
   tratamiento del Mood Board: degradado del amanecer, resplandor de sol detrás,
   la serif contemplativa en grande y mucho aire alrededor. El destello ✦ es el
   mismo recurso que aparece en la portada del Mood Board. */
.am-mantra {
	position: relative;
	overflow: hidden;
	text-align: center;
	border-radius: 14px;
	padding: clamp(3rem, 9vw, 5.5rem) clamp(1.2rem, 5vw, 3rem);
	background: linear-gradient(135deg, #FFE9B8 0%, #FDD9A0 50%, #FBC48A 100%);
	box-shadow: 0 8px 30px rgba(42, 33, 24, .10);
}
/* El sol detrás del mantra: el mismo gesto de la fotografía de Litueche. */
.am-mantra::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: min(78%, 620px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255,255,255,.85) 0%,
	            rgba(255,241,203,.55) 34%, rgba(251,196,138,0) 70%);
	pointer-events: none;
}
.am-mantra > * { position: relative; z-index: 1; }

.am-mantra__destello {
	display: block;
	font-size: 1.5rem;
	color: var(--wp--preset--color--naranja);
	opacity: .75;
	margin-bottom: 1.2rem;
	line-height: 1;
}
.am-mantra__etiqueta {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brasa);
	margin: 0 0 1.4rem;
}
.am-mantra__texto {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(2.4rem, 8vw, 4.6rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .02em;
	color: var(--wp--preset--color--verde);
	margin: 0;
}
.am-mantra__significado {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(1.05rem, 2.6vw, 1.35rem);
	font-style: italic;
	color: var(--wp--preset--color--tierra);
	opacity: .85;
	max-width: 30ch;
	margin: 1.6rem auto 0;
}
.am-mantra__nota {
	font-size: .92rem;
	color: var(--wp--preset--color--tierra-suave);
	max-width: 46ch;
	margin: 1.8rem auto 0;
}

/* ── Calendario de actividades ─────────────────────────────────────────────── */
/* La fecha va a la izquierda, grande y en un solo golpe de vista: al recorrer la
   lista el ojo busca «cuándo», no «qué». */
.am-actividad {
	border-bottom: 1px solid #EADFC8;
	align-items: flex-start !important;
	gap: clamp(1rem, 3vw, 1.8rem) !important;
	flex-wrap: nowrap !important;
}
.am-actividad:last-child { border-bottom: 0; }
.am-actividad > .wp-block-group:last-child { flex: 1 1 auto; min-width: 0; }

.am-fecha {
	flex: 0 0 auto;
	width: 72px;
	text-align: center;
	background: var(--wp--preset--gradient--amanecer-suave);
	border-radius: 12px;
	padding: .6rem .3rem .5rem;
	line-height: 1;
}
.am-fecha__dia {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 2rem;
	font-weight: 600;
	color: var(--wp--preset--color--tierra);
	margin: 0 0 .15rem;
	line-height: 1;
}
.am-fecha__mes {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brasa);
	margin: 0;
}
.am-actividad h3 { margin: 0 0 .35rem; }
.am-actividad__cuando {
	color: var(--wp--preset--color--verde);
	font-weight: 700;
	margin: 0 0 .5rem;
}

@media (max-width: 600px) {
	.am-fecha { width: 60px; }
	.am-fecha__dia { font-size: 1.6rem; }
}

/* ── WhatsApp flotante ─────────────────────────────────────────────────────── */
/* En el verde institucional, no en el de WhatsApp: se reconoce igual y no rompe
   la paleta. */
/* El botón viaja sobre fondos de todo tipo —crema, arena, fotografía, degradado— y
   tiene que separarse de TODOS. Por eso lleva tres defensas y no una: el círculo verde
   sólido, un anillo blanco que lo recorta contra fondos oscuros, y una sombra que lo
   despega de los claros. Con cualquiera de las tres se pierde; con las tres, nunca. */
/* Colores LITERALES, no variables del tema: el botón va con `position: fixed`, fuera
   del contenedor donde WordPress define sus variables. Si la variable no llegaba, el
   círculo se quedaba sin fondo y el ícono blanco desaparecía. Con el color escrito
   nunca depende de nadie. (Son los mismos valores del logo: #008037 y #FF6500.) */
.am-wasap {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 60;
	width: 58px; height: 58px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: #008037;                 /* verde institucional */
	color: #FFFFFF;
	border: 3px solid #FDF7EC;           /* crema, para recortarlo del fondo */
	box-shadow: 0 4px 10px rgba(42, 33, 24, .30), 0 10px 28px rgba(0, 128, 55, .34);
	transition: background .35s ease, border-color .35s ease, color .35s ease,
	            transform .2s ease, box-shadow .2s ease;
}

/* Sobre fondos OSCUROS (la portada, el degradado del amanecer, el pie) se invierte:
   círculo crema con el ícono verde. Siempre dos colores de nuestra paleta, y siempre
   con contraste suficiente. La clase la pone el propio botón al hacer scroll. */
.am-wasap.am-wasap--sobre-oscuro {
	background: #FDF7EC;
	color: #008037;
	border-color: rgba(255, 255, 255, .55);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .22);
}

.am-wasap:hover {
	transform: scale(1.07);
	box-shadow: 0 6px 14px rgba(42, 33, 24, .34), 0 14px 34px rgba(0, 128, 55, .48);
}
.am-wasap svg {
	width: 30px; height: 30px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* ── Legibilidad y accesibilidad ───────────────────────────────────────────── */
/* Nunca líneas larguísimas: por encima de ~68 caracteres el ojo pierde el renglón.
   El `margin-inline: auto` es imprescindible — sin él la caja estrecha se queda
   pegada a la izquierda y el texto centrado DENTRO de ella parece descentrado
   respecto del título. Era justo lo que se veía mal en la bajada de la portada. */
.wp-block-post-content p { max-width: 68ch; }
.wp-block-post-content p.has-text-align-center,
.wp-block-cover__inner-container p.has-text-align-center,
.am-unidad p.has-text-align-center { margin-inline: auto; }

/* La bajada de la portada respira mejor algo más angosta que el titular. */
.wp-block-cover__inner-container p.has-text-align-center { max-width: 44ch; }

:focus-visible {
	outline: 3px solid var(--wp--preset--color--verde);
	outline-offset: 3px;
}

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

/* La capa del mood board «Nuevo amanecer» se sirve INLINE con data-no-optimize
   desde functions.php (ananda_marga_estilos_amanecer): LiteSpeed borra de este
   archivo las reglas ::after/siluetas al «optimizar». */