/*
Theme Name: Acro Agenda
Theme URI: https://acro-agenda.es
Description: Child theme of Twenty Twenty-Five for acro-agenda.es
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: acro-agenda
*/

/* Hum push button — press physics (design.md · Shape & CTA voice).
   Rest state (sol fill, ink text, pill radius, 4px sol-deep edge + cast
   shadow) comes from theme.json; only the motion lives here. */
.wp-element-button,
.wp-block-button__link {
	transition:
		transform 160ms var(--wp--custom--ease--press),
		box-shadow 160ms var(--wp--custom--ease--press);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow:
		0 6px 0 0 var(--wp--preset--color--sol-deep),
		var(--wp--custom--shadow--btn-cast);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--sol-deep);
}

/* No horizontal scroll, ever — clip (not hidden) so sticky/fixed chrome
   keeps the viewport as its containing block on mobile */
html,
body {
	overflow-x: clip;
}

/* Hallmark · component: header · genre: playful · theme: Hum (locked, design.md)
   nav: N1b three-section · knobs: links=3, dropdowns=none, scroll=always-solid
   character moment: wordmark sol dot, 4s pulse (design.md · Motion) */

.aa-wordmark {
	white-space: nowrap;
}

.aa-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* The wordmark's character dot — sol yellow, gentle 4s pulse at rest */
.aa-wordmark a::after {
	content: "";
	display: inline-block;
	width: 0.32em;
	height: 0.32em;
	margin-inline-start: 0.18em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--sol);
	animation: aa-dot-pulse 4s ease-in-out infinite;
}

@keyframes aa-dot-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

/* Region links — cielo owns hover tints (design.md · three-rule) */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--pill);
	transition:
		background-color 160ms var(--wp--custom--ease--press),
		color 160ms var(--wp--custom--ease--press);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	background-color: color-mix(in oklch, var(--wp--preset--color--cielo) 10%, transparent);
}

.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--cielo-deep);
}

/* Overlay menu links: ≥44px touch targets (selector mirrors core's
   zero-padding rule to win specificity) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

/* Header CTA never wraps; keeps the ≥44px hit target */
.aa-header-cta .wp-block-button__link {
	white-space: nowrap;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

/* Narrow phones: everything steps down one size so the row fits 320px.
   !important needed to beat the block's inline padding / generated gap. */
@media (max-width: 30em) {
	.aa-header {
		padding-inline: var(--wp--preset--spacing--sm) !important;
		gap: var(--wp--preset--spacing--xs) !important;
	}

	.aa-wordmark {
		font-size: var(--wp--preset--font-size--base) !important;
	}

	.aa-header-cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--sm);
		padding-inline: var(--wp--preset--spacing--md);
	}
}

/* Hallmark · component: footer · genre: playful · theme: Hum (locked, design.md)
   footer: Ft5 Statement · knobs: sentence≤28ch · wordmark=none · rule=none (band is the boundary)
   pre-emit critique: P4 H4 E4 S4 R5 V4 */

.aa-footer-line {
	max-width: 28ch;
}

/* Meta links — same pill vocabulary as the header nav (cielo owns hover).
   Negative start margin realigns the first pill's text with the statement's
   left edge; block padding keeps the ≥44px hit target. */
.aa-footer-nav {
	margin-inline-start: calc(-1 * var(--wp--preset--spacing--sm));
}

.aa-footer-link a {
	display: inline-block;
	padding: var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms var(--wp--custom--ease--press);
}

.aa-footer-link a:hover {
	background-color: color-mix(in oklch, var(--wp--preset--color--cielo) 10%, transparent);
}

/* Credit line — ink at reduced strength, never a new grey */
.aa-footer-copy {
	color: color-mix(in oklch, var(--wp--preset--color--contrast) 72%, transparent);
}

/* Narrow phones: tighten the band's inline padding to match the header.
   !important needed to beat the block's inline padding. */
@media (max-width: 30em) {
	.aa-footer {
		padding-inline: var(--wp--preset--spacing--sm) !important;
	}
}

/* Focus ring — --wp--custom--color--focus, shown instantly (never animated) */
:focus-visible {
	outline: 2px solid var(--wp--custom--color--focus);
	outline-offset: 2px;
}

/* Reduced motion: transforms collapse to a color transition (design.md) */
@media (prefers-reduced-motion: reduce) {
	.aa-wordmark a::after {
		animation: none;
	}

	.wp-element-button,
	.wp-block-button__link {
		transition: background-color 150ms linear;
	}

	.wp-element-button:hover,
	.wp-element-button:active,
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
		background-color: var(--wp--preset--color--sol-deep);
		box-shadow:
			0 4px 0 0 var(--wp--preset--color--sol-deep),
			var(--wp--custom--shadow--btn-cast);
	}
}