/*
Theme Name: ACDS Cruz del Eje
Description: Tema institucional de la Asociación Civil Deportiva y Social Cruz del Eje. Paleta y tipografía del manual de identidad.
Version: 1.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: acds
License: GPL-2.0-or-later
*/

/* Onda decorativa de la identidad */
.acds-onda svg { display: block; width: 100%; height: auto; }

/* Íconos de los pilares */
.acds-icono { display: flex; justify-content: center; color: var(--wp--preset--color--verde); }
.acds-icono svg { width: 56px; height: 56px; }

/* Línea ocre bajo los títulos de sección */
.acds-titulo::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 0.6rem;
	border-radius: 2px;
	background: var(--wp--preset--color--ocre);
}
.acds-titulo.has-text-align-center::after { margin-left: auto; margin-right: auto; }

/* Lema manuscrito */
.acds-lema { font-family: "Dancing Script", cursive; }

/* Tarjetas */
.acds-tarjeta { height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.acds-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--wp--preset--color--verde-oscuro) 12%, transparent); }

/* Cabecera fija */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.acds-cabecera { box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--texto) 8%, transparent); }
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.wp-block-template-part { top: 46px; } }

/*
 * Altura real de la cabecera fija (logo 150 px de ancho = 91 px de alto + 2 × 0,6rem de relleno).
 * Se usa para que los anclajes (#quienes-somos, etc.) no queden tapados por la cabecera.
 */
:root { --acds-cabecera-alto: 112px; }
@media (max-width: 600px) { :root { --acds-cabecera-alto: 90px; } }
@media (max-width: 420px) { :root { --acds-cabecera-alto: 80px; } } /* logo de 100 px = 61 px de alto + relleno */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--acds-cabecera-alto) + 0.5rem); }

/* Secciones pegadas: sin separación entre cabecera, contenido y pie */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Isotipo dentro de un círculo beige (portada) */
.wp-block-image.acds-circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	max-width: 460px;
	margin-inline: auto;
	padding: 14%;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--wp--preset--color--beige);
}
.wp-block-image.acds-circulo img { width: 100%; height: auto; }

/* Redes sociales: al pasar o enfocar, el fondo cambia a un tono con contraste suficiente (≥ 3:1) */
.acds-redes .wp-social-link { transition: transform .15s ease, background-color .15s ease; }
.acds-redes .wp-social-link:hover,
.acds-redes .wp-social-link:focus-within { transform: translateY(-2px); }
.acds-cabecera .acds-redes .wp-social-link:hover,
.acds-cabecera .acds-redes .wp-social-link:focus-within { background-color: var(--wp--preset--color--verde-oscuro) !important; }
.acds-pie .acds-redes .wp-social-link:hover,
.acds-pie .acds-redes .wp-social-link:focus-within { background-color: var(--wp--preset--color--blanco) !important; }

/* Separador del pie: línea fina blanca translúcida sobre el verde oscuro (verde si no hay color-mix) */
.wp-block-separator.acds-separador {
	color: var(--wp--preset--color--verde);
	border-bottom-width: 1px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.wp-block-separator.acds-separador { color: color-mix(in srgb, var(--wp--preset--color--blanco) 20%, transparent); }
}

/* Enlaces del pie: al pasar el mouse, blanco (el ocre global no contrasta sobre verde oscuro) */
.acds-pie a:where(:not(.wp-element-button)):hover,
.acds-pie a:where(:not(.wp-element-button)):focus { color: var(--wp--preset--color--blanco); }

@media (max-width: 600px) {
	.acds-cabecera .wp-block-image img { width: 115px !important; }
	.acds-cabecera .wp-block-group { gap: 0.75rem; }
}
@media (max-width: 420px) {
	.acds-cabecera .wp-block-image img { width: 100px !important; }
}

/*
 * Menú de la cabecera.
 * El bloque Navegación con overlayMenu "mobile" muestra el botón de menú solo por debajo de 600 px (corte fijo de core).
 * Con 6 ítems + logo + 3 redes, la fila no entra en una línea hasta ~1100 px, así que entre 600 y 1099 px
 * se fuerza el mismo comportamiento de celular: se oculta la lista y se muestra el botón (el menú desplegable
 * lo sigue manejando el script de core). Si core cambiara estas clases, el resultado sería el menú en línea de siempre.
 */
@media (min-width: 600px) and (max-width: 1099.98px) {
	.acds-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.acds-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Botones de abrir y cerrar el menú: área táctil de 44 × 44 px */
.acds-cabecera .wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}
.acds-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Menú desplegado: ítems más grandes y separados para tocarlos con el dedo */
.acds-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}

/* Redes de la cabecera: círculo de 44 × 44 px (ícono de 16 px + 14 px de relleno por lado) */
.acds-cabecera .acds-redes .wp-social-link a { padding: 14px; }

/*
 * Celulares muy angostos (< 380 px): con 44 px por ícono, logo + botón de menú + 3 redes no entran en una fila
 * (a 320 px el contenido mide 288 px). Se achica el círculo a 28 × 28 px (ícono de 16 + 6 px por lado; WCAG 2.2
 * pide ≥ 24 × 24) y la separación entre íconos: 100 + 12 + 44 + 12 + 3 × 28 + 2 × 4 ≈ 260 px.
 * La altura de la cabecera no cambia (la define el logo), así que --acds-cabecera-alto sigue valiendo.
 */
@media (max-width: 380px) {
	.acds-cabecera .acds-redes { gap: 0.25rem; }
	.acds-cabecera .acds-redes .wp-social-link a { padding: 6px; }
}

/*
 * Botones con contorno (is-style-outline): el hover global (fondo verde oscuro) no se ve o deja el texto
 * verde sobre verde, porque las clases de color de texto de core llevan !important. Se define el estado
 * al pasar y al enfocar con teclado según el color del contorno:
 * - verde (sobre fondos claros): se rellena de verde con texto blanco (contraste 5,95:1);
 * - blanco (sobre fondos verdes, p. ej. el hero): se rellena de blanco con texto verde oscuro.
 */
.wp-block-button.is-style-outline > .wp-block-button__link.has-verde-color:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.has-verde-color:focus-visible {
	background-color: var(--wp--preset--color--verde);
	border-color: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link.has-blanco-color:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.has-blanco-color:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--verde-oscuro) !important;
}

/* Contenido de páginas y entradas: correos y URLs largos se cortan en lugar de desbordar a 320 px */
.wp-block-post-content {
	overflow-wrap: break-word; /* navegadores sin soporte de "anywhere" */
	overflow-wrap: anywhere;
}

/* Páginas internas: listas de datos sin viñetas (datos de la entidad, detalles de cada actividad) */
.wp-block-list.acds-datos { list-style: none; padding-left: 0; }
.wp-block-list.acds-datos > li + li { margin-top: 0.4rem; }

/* Páginas internas: pasos numerados en círculos verdes (Asociate) */
.wp-block-list.acds-pasos { list-style: none; padding-left: 0; counter-reset: acds-paso; }
.wp-block-list.acds-pasos > li {
	counter-increment: acds-paso;
	position: relative;
	min-height: 2.25rem;
	padding: 0.3rem 0 0 3.25rem;
}
.wp-block-list.acds-pasos > li + li { margin-top: var(--wp--preset--spacing--30); }
.wp-block-list.acds-pasos > li::before {
	content: counter(acds-paso);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--verde);
	color: var(--wp--preset--color--blanco);
	font-weight: 800;
}

/* Movimiento reducido: sin desplazamiento suave, transiciones ni desplazamientos al pasar el cursor */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.acds-tarjeta,
	.acds-redes .wp-social-link { transition: none; }
	.acds-tarjeta:hover,
	.acds-redes .wp-social-link:hover,
	.acds-redes .wp-social-link:focus-within { transform: none; }
}