/*
Theme Name: MobilityAmo
Theme URI: https://www.mobilityamo.it
Author: MobilityAmo ASD
Description: Tema a blocchi per MobilityAmo ASD, attività motoria per bambini dai 3 ai 7 anni a Petacciato.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobilityamo
*/

/* ---------- Base ---------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem; /* le ancore non finiscono sotto l'header fisso */
}

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--corallo);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--notte);
}

/* Etichetta sopra i titoli di sezione */
.ma-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--acqua-scuro);
	margin-bottom: 0;
}

.ma-eyebrow + * {
	margin-block-start: 0.35rem;
}

/* Sezioni su fondo scuro: titoli e link chiari */
.ma-scuro :is(h1, h2, h3, h4) {
	color: inherit;
}

.ma-scuro .ma-eyebrow {
	color: var(--wp--preset--color--giallo);
}

.ma-scuro a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ---------- Header ---------- */

.ma-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Niente backdrop-filter: intrappolerebbe il menu mobile a schermo intero dentro l'header */
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.admin-bar .ma-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.ma-brand {
	gap: 0.6rem;
	flex-wrap: nowrap !important;
}

.ma-brand .wp-block-image {
	margin: 0;
}

.ma-brand__simbolo img {
	width: 46px;
	height: auto;
}

.ma-brand__scritta img {
	width: 150px;
	height: auto;
}

@media (max-width: 380px) {
	.ma-brand__scritta img {
		width: 124px;
	}
}

.ma-header .wp-block-navigation {
	font-weight: 600;
}

.ma-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acqua-scuro);
}

/* Menu mobile a schermo intero */
.ma-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--notte);
}

.ma-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.5rem;
}

.ma-header .is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 0.25rem;
	width: 100%;
}

.ma-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.ma-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.7rem 0 !important;
	font-family: var(--wp--preset--font-family--titoli);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

.ma-header .ma-header__cta {
	display: none;
}

@media (min-width: 900px) {
	.ma-header .ma-header__cta {
		display: flex;
	}
}

/* ---------- Strisce colorate (stile del separatore) ---------- */

/* La striscia è larga 160px ma allineata a sinistra: l'hr occupa tutta la riga
   (il layout "constrained" lo centrerebbe) e il colore sta solo nei primi 160px. */
.wp-block-separator.is-style-colori {
	border: none;
	height: 8px;
	opacity: 1;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--rosso) 0 25%,
		var(--wp--preset--color--giallo) 25% 50%,
		var(--wp--preset--color--verde) 50% 75%,
		var(--wp--preset--color--blu) 75% 100%
	) left center / 160px 100% no-repeat;
}

.wp-block-separator.is-style-colori.alignfull,
.wp-block-separator.is-style-colori.alignwide {
	height: 6px;
	background-size: 100% 100%;
}

/* ---------- Pagine di testo (privacy, notizie…) ---------- */

.wp-block-post-content > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-post-content > h3 {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Hero ---------- */

.ma-hero {
	position: relative;
	overflow: hidden;
}

.ma-pill {
	display: inline-block;
	width: fit-content;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--giallo);
	color: var(--wp--preset--color--notte);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
}

.ma-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--corallo-scuro);
}

.ma-hero__simbolo img {
	width: min(100%, 420px);
	height: auto;
	margin-inline: auto;
	display: block;
}

/* Su smartphone il logo è già nell'intestazione: il simbolo grande si nasconde */
@media (max-width: 781px) {
	.ma-hero .ma-hero__simbolo {
		display: none;
	}
}

/* ---------- Schede attività ---------- */

.ma-card {
	height: 100%;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--linea);
	border-top: 6px solid var(--ma-card-colore, var(--wp--preset--color--acqua));
}

.ma-card.ma-rosso  { --ma-card-colore: var(--wp--preset--color--rosso); }
.ma-card.ma-giallo { --ma-card-colore: var(--wp--preset--color--giallo); }
.ma-card.ma-verde  { --ma-card-colore: var(--wp--preset--color--verde); }
.ma-card.ma-blu    { --ma-card-colore: var(--wp--preset--color--blu); }

.ma-card h3 {
	margin-top: 0;
}

/* ---------- Passi della lezione ---------- */

.ma-passi {
	counter-reset: passo;
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.ma-passi > li {
	counter-increment: passo;
	position: relative;
	padding-left: 3.5rem;
	min-height: 2.6rem;
}

.ma-passi > li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--acqua-scuro);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--titoli);
	font-weight: 700;
	font-size: 1.15rem;
}

.ma-passi > li:nth-child(4n + 2)::before { background: var(--wp--preset--color--corallo-scuro); }
.ma-passi > li:nth-child(4n + 3)::before { background: var(--wp--preset--color--blu); }
.ma-passi > li:nth-child(4n + 4)::before { background: var(--wp--preset--color--verde-scuro); }

/* ---------- Stagione ---------- */

.ma-dettagli {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: 0;
}

.ma-dettagli > li {
	padding: 0.9rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.ma-dettagli > li:last-child {
	border-bottom: none;
}

.ma-dettagli strong {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--giallo);
	margin-bottom: 0.15rem;
}

.ma-riquadro {
	border-radius: 24px;
}

/* ---------- Articoli ---------- */

.ma-notizia {
	border-radius: 20px;
	border: 1px solid var(--wp--preset--color--linea);
	height: 100%;
}

.ma-notizia .wp-block-post-featured-image img {
	border-radius: 14px;
}

/* ---------- Footer ---------- */

.ma-footer a {
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.ma-footer__scritta img {
	width: 200px;
	height: auto;
}

/* ---------- Movimento ---------- */

.wp-element-button,
.wp-block-button__link,
.ma-card {
	transition: transform 160ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}

.wp-block-button__link:active {
	transform: scale(0.97);
}

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