/*
Theme Name: Tennis Gonzaga
Theme URI: https://asdtennisgonzaga.it
Author: ASD Tennis Gonzaga
Description: Tema a blocchi (Full Site Editing) per il sito dell'ASD Tennis Gonzaga.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tennis-gonzaga
Tags: full-site-editing, block-patterns, sport
*/

:root {
	--tg-cut: clamp(40px, 8vw, 130px);
	--tg-stripe: clamp(6px, 0.9vw, 12px);
	--tg-next: var(--wp--preset--color--base);
	--tg-line: #D5DDE8;
}

html {
	scroll-padding-top: 6rem;
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

strong, b {
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Taglio diagonale: lo swoosh del logo, usato come bordo di sezione.
 * Una fascia giallo pallina corre parallela al taglio.
 * ------------------------------------------------------------------ */
.is-style-tg-taglio {
	position: relative;
	isolation: isolate;
	padding-bottom: calc(var(--tg-cut) + var(--wp--preset--spacing--40)) !important;
}

.is-style-tg-taglio::before,
.is-style-tg-taglio::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	pointer-events: none;
}

.is-style-tg-taglio::before {
	height: calc(var(--tg-cut) + var(--tg-stripe) + 1px);
	background: var(--wp--preset--color--accent);
	clip-path: polygon(0 0, 100% calc(100% - var(--tg-stripe)), 100% 100%, 0 100%);
}

.is-style-tg-taglio::after {
	height: calc(var(--tg-cut) + 1px);
	background: var(--tg-next);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.is-style-tg-taglio.tg-next-surface {
	--tg-next: var(--wp--preset--color--surface);
}

.is-style-tg-taglio.tg-next-primary {
	--tg-next: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
/* Il template part <header> è il contenitore: è lui a restare in cima. */
header.wp-block-template-part:has(> .tg-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar header.wp-block-template-part:has(> .tg-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part:has(> .tg-header) {
		top: 0;
	}
}

.tg-header {
	border-bottom: 1px solid var(--tg-line);
}

.tg-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.tg-brand img {
	width: 52px;
	height: 52px;
	display: block;
}

.tg-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: 1.45rem;
	line-height: 0.85;
	text-transform: uppercase;
}

.tg-brand__name small {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* Voci del menu: al passaggio una barra giallo pallina si allarga da
 * sinistra (e si ritira verso destra); sulla pagina corrente resta piena. */
.tg-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 0.35rem 0.1rem;
	transition: color 0.2s ease;
}

.tg-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tg-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.tg-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

.tg-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.tg-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

.tg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.tg-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.tg-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.tg-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1.1;
}

/* Menu mobile: le voci entrano a cascata e una pallina cade sulla linea di
 * fondo (il bordo della fascia blu dei contatti), rimbalza smorzandosi e
 * resta ferma in basso a sinistra. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open {
	--tg-fondo: 4.5rem;
	overflow-x: hidden;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open::before,
.tg-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--40);
	width: 64px;
	pointer-events: none;
	/* Dietro le voci: il contenitore fa già da contesto di sovrapposizione. */
	z-index: -1;
	animation-duration: 1.7s;
	animation-timing-function: linear;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

/* Ombra */
.tg-header .wp-block-navigation__responsive-container.is-menu-open::before {
	bottom: calc(var(--tg-fondo) - 5px);
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(14, 30, 51, 0.28), transparent);
	animation-name: tg-ombra;
}

/* Pallina */
.tg-header .wp-block-navigation__responsive-container.is-menu-open::after {
	bottom: var(--tg-fondo);
	height: 64px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.75'%3E%3Cstop offset='0' stop-color='%23E4EE5A'/%3E%3Cstop offset='.6' stop-color='%23CCDA1C'/%3E%3Cstop offset='1' stop-color='%23A3AF12'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='48' fill='url(%23g)'/%3E%3Cpath d='M17 15c22 18 22 52 0 70M83 15c-22 18-22 52 0 70' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	animation-name: tg-palla-rimbalzo;
}

/* Caduta e rimbalzi con tempi da moto reale (ogni rimbalzo dura come la
 * radice della sua altezza), così il finale si smorza senza scatti. */
@keyframes tg-palla-rimbalzo {
	0%    { transform: translateY(-85vh) rotate(0deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	34.5% { transform: translateY(0) rotate(-200deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	52%   { transform: translateY(-22vh) rotate(-260deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	69.7% { transform: translateY(0) rotate(-310deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	79.6% { transform: translateY(-7vh) rotate(-330deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	89.5% { transform: translateY(0) rotate(-350deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	94.8% { transform: translateY(-2vh) rotate(-356deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	100%  { transform: translateY(0) rotate(-360deg); }
}

/* L'ombra si stringe e sbiadisce quando la pallina è in alto. */
@keyframes tg-ombra {
	0%    { opacity: 0; transform: scaleX(0.3); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	34.5% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	52%   { opacity: 0.45; transform: scaleX(0.65); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	69.7% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	79.6% { opacity: 0.75; transform: scaleX(0.85); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	89.5% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	94.8% { opacity: 0.9; transform: scaleX(0.95); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	100%  { opacity: 1; transform: scaleX(1); }
}

/* Le altre animazioni: il JS del menu mette a caso data-tg-anim sul
 * contenitore. Senza attributo (o senza JS) resta il rimbalzo qui sopra. */

/* Rotola: arriva da destra lungo la linea e rallenta per attrito fino a fermarsi. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="rotola"]::before,
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="rotola"]::after {
	animation-name: tg-rotola-x;
	animation-duration: 1.6s;
	animation-delay: 0.15s;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="rotola"]::after {
	animation-name: tg-rotola-x, tg-rotola-giro;
}

@keyframes tg-rotola-x {
	from { translate: 100vw 0; animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	to   { translate: 0 0; }
}

/* Rotazione pari alla strada fatta (raggio 32px), verso sinistra, con lo stesso rallentamento. */
@keyframes tg-rotola-giro {
	from { rotate: 680deg; animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	to   { rotate: 0deg; }
}

/* Pallonetto: arco alto da destra; all'atterraggio due rimbalzini la frenano
 * e gli ultimi centimetri li fa rotolando. Tempi dei rimbalzi da moto reale. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pallonetto"]::before,
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pallonetto"]::after {
	animation-duration: 1.9s;
	animation-delay: 0.15s;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pallonetto"]::before {
	animation-name: tg-pallonetto-x, tg-pallonetto-ombra;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pallonetto"]::after {
	animation-name: tg-pallonetto-x, tg-pallonetto-y;
}

@keyframes tg-pallonetto-x {
	0%    { translate: 85vw 0; }
	50.1% { translate: 70px 0; }
	70.6% { translate: 30px 0; }
	82%   { translate: 10px 0; animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	100%  { translate: 0 0; }
}

@keyframes tg-pallonetto-y {
	0%    { transform: translateY(-40vh) rotate(0deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	19.8% { transform: translateY(-70vh) rotate(-150deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	50.1% { transform: translateY(0) rotate(-380deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	60.3% { transform: translateY(-8vh) rotate(-415deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	70.6% { transform: translateY(0) rotate(-450deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	76.3% { transform: translateY(-2.5vh) rotate(-466deg); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	82%   { transform: translateY(0) rotate(-482deg); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	100%  { transform: translateY(0) rotate(-500deg); }
}

@keyframes tg-pallonetto-ombra {
	0%, 25% { opacity: 0; transform: scaleX(0.4); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	50.1%   { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	60.3%   { opacity: 0.7; transform: scaleX(0.85); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	70.6%   { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
	76.3%   { opacity: 0.9; transform: scaleX(0.95); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
	82%, 100% { opacity: 1; transform: scaleX(1); }
}

/* Pop: spunta sulla linea con un effetto elastico e un'onda gialla. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pop"]::before {
	bottom: var(--tg-fondo);
	height: 64px;
	box-sizing: border-box;
	background: none;
	border: 3px solid var(--wp--preset--color--accent);
	opacity: 0;
	animation-name: tg-pop-onda;
	animation-duration: 1s;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="pop"]::after {
	animation-name: tg-pop;
	animation-duration: 0.9s;
}

@keyframes tg-pop {
	0%   { transform: scale(0) rotate(-200deg); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
	45%  { transform: scale(1.18) rotate(20deg); animation-timing-function: ease-in-out; }
	65%  { transform: scale(0.93) rotate(-6deg); animation-timing-function: ease-in-out; }
	82%  { transform: scale(1.03) rotate(2deg); animation-timing-function: ease-in-out; }
	100% { transform: scale(1) rotate(0deg); }
}

@keyframes tg-pop-onda {
	0%, 30% { opacity: 0; transform: scale(0.6); }
	31%     { opacity: 1; transform: scale(0.6); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
	100%    { opacity: 0; transform: scale(2.4); }
}

/* Ace: arriva dal fondo del campo, piccola e lontana, cresce venendo verso
 * lo schermo, tocca la linea e scivola fino a fermarsi. Niente rimbalzi. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="ace"]::before,
.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="ace"]::after {
	animation-duration: 1.2s;
	animation-delay: 0.15s;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="ace"]::before {
	animation-name: tg-ace-ombra;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open[data-tg-anim="ace"]::after {
	animation-name: tg-ace;
}

@keyframes tg-ace {
	0%   { opacity: 0; translate: 45vw -55vh; scale: 0.08; rotate: 0deg; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
	10%  { opacity: 1; }
	68%  { opacity: 1; translate: 18px 0; scale: 1.06; rotate: -540deg; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
	100% { opacity: 1; translate: 0 0; scale: 1; rotate: -600deg; }
}

@keyframes tg-ace-ombra {
	0%, 45% { opacity: 0; translate: 10vw 0; scale: 0.4 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
	68%     { opacity: 1; translate: 18px 0; scale: 1.06 1; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
	100%    { opacity: 1; translate: 0 0; scale: 1 1; }
}

/* Overlay personalizzato (template part "menu-mobile"): i colori e gli spazi
 * li decide il tema, WordPress non applica quelli dell'overlay standard. */
.tg-header .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay {
	padding: 0 var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open.disable-default-overlay .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}

.tg-menu-mobile {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

/* Sullo sfondo del menu "GONZAGA" in verticale, solo contorno, lungo il
 * lato sinistro (riempie il vuoto lasciato dalle voci allineate a destra). */
.tg-menu-mobile {
	position: relative;
}

.tg-menu-mobile::before {
	content: "GONZAGA";
	position: absolute;
	z-index: -1;
	left: -0.6rem;
	top: 50%;
	translate: 0 -50%;
	writing-mode: vertical-rl;
	rotate: 180deg;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	/* Su telefoni bassi si accorcia, così sta tra il logo e la pallina. */
	font-size: min(9.5rem, 18dvh);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px #DCE3EC;
	pointer-events: none;
	animation: tg-sfondo 0.6s ease-out both;
}

@keyframes tg-sfondo {
	from { opacity: 0; }
}

/* Stessa altezza e posizione del logo nell'header chiuso. */
.tg-menu-mobile__top {
	padding-block: 0.6rem;
}

.tg-menu-mobile .wp-block-navigation-overlay-close {
	color: var(--wp--preset--color--primary);
}

.tg-menu-mobile__voci {
	margin-top: var(--wp--preset--spacing--30);
}

.tg-menu-mobile__cta {
	margin-top: var(--wp--preset--spacing--40);
}

/* Sotto la linea di fondo: fascia blu a tutta larghezza, alta esattamente
 * --tg-fondo così il bordo coincide con la linea su cui si ferma la pallina.
 * I colori sono quelli del blocco, modificabili dall'editor. */
.tg-menu-mobile__contatti {
	margin-top: auto;
	margin-inline: calc(-1 * var(--wp--preset--spacing--40));
	padding-inline: var(--wp--preset--spacing--40);
	/* Bordo in diagonale come i tagli delle sezioni: la pallina si ferma
	 * sul punto più alto, a sinistra. */
	padding-top: 12px;
	clip-path: polygon(0 0, 100% 18px, 100% 100%, 0 100%);
	height: var(--tg-fondo);
	box-sizing: border-box;
	align-items: center;
}

.tg-menu-mobile__contatti p {
	margin: 0;
}

.tg-menu-mobile__contatti a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.tg-menu-mobile__contatti a[href^="tel:"]::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tg-menu-mobile__contatti .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: inherit;
}

/* Telefoni bassi: voci più compatte, così tutto sta sopra la linea. */
@media (max-height: 720px) {
	.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.9rem;
	}

	/* Il gap lo mette il layout del blocco sull'elenco stesso. */
	.tg-menu-mobile .tg-menu-mobile__voci,
	.tg-menu-mobile .tg-menu-mobile__voci .wp-block-navigation__container {
		gap: 0.3rem;
	}

	.tg-menu-mobile__voci {
		margin-top: 0;
	}

	.tg-menu-mobile__cta {
		margin-top: var(--wp--preset--spacing--30);
	}
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: tg-voce 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; }
.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; }
.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.2s; }
.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.25s; }
.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+7) { animation-delay: 0.3s; }

@keyframes tg-voce {
	from { opacity: 0; transform: translateX(2.5rem) skewX(-8deg); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tg-header .wp-block-navigation__responsive-container.is-menu-open::before,
	.tg-header .wp-block-navigation__responsive-container.is-menu-open::after,
	.tg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: none;
	}
}

@media (max-width: 781px) {
	.tg-header__cta {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * Bottoni
 * ------------------------------------------------------------------ */
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-tg-pallina .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-tg-pallina .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	padding: calc(0.8em - 2px) calc(1.5em - 2px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * Hero home
 * ------------------------------------------------------------------ */
.tg-hero {
	margin-top: 0 !important;
}

.tg-hero.wp-block-cover {
	min-height: clamp(520px, 82vh, 860px) !important;
	padding-top: var(--wp--preset--spacing--60);
}

.tg-hero .wp-block-cover__background {
	background: linear-gradient(100deg, rgba(0, 31, 61, 0.92) 0%, rgba(0, 55, 107, 0.78) 38%, rgba(0, 55, 107, 0.15) 75%) !important;
	opacity: 1 !important;
}

/* Allinea il testo al bordo "wide" come l'header (il core imposta margin:0 e width:auto). */
.wp-block-cover.tg-hero.tg-hero.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.tg-hero h1 {
	text-wrap: balance;
}

@media (max-width: 781px) {
	.tg-hero .wp-block-cover__background {
		background: rgba(0, 40, 80, 0.72) !important;
	}
}

/* ------------------------------------------------------------------ *
 * Servizi
 * ------------------------------------------------------------------ */
.tg-servizi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tg-servizi > * {
	margin: 0 !important;
}

.tg-servizio .wp-block-image {
	margin: 0 0 1rem;
}

.tg-servizio .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tg-servizio--logo .wp-block-image img {
	object-fit: contain;
	background: var(--wp--preset--color--base);
	padding: 1.25rem;
	/* Il padding sta dentro il 100% di larghezza, sennò il logo esce dalla colonna. */
	box-sizing: border-box;
}

.tg-servizio h3 {
	margin-bottom: 0.4rem;
}

.tg-servizio p {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Campi e listino prezzi
 * ------------------------------------------------------------------ */
.tg-campo + .tg-campo {
	border-top: 1px solid var(--tg-line);
}

.tg-campo .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tg-campo__note {
	color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------------ *
 * Come prenotare
 * ------------------------------------------------------------------ */
.tg-passi {
	list-style: none;
	counter-reset: tg-passo;
	padding-left: 0;
}

.tg-passi li {
	counter-increment: tg-passo;
	position: relative;
	padding: 0.9rem 0 0.9rem 3.4rem;
}

.tg-passi li + li {
	border-top: 1px solid var(--tg-line);
}

.tg-passi li::before {
	content: counter(tg-passo);
	position: absolute;
	left: 0;
	top: 0.9rem;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	display: grid;
	place-items: center;
}

.tg-prenota__app {
	margin-top: var(--wp--preset--spacing--30);
}

/* Il bottone dell'app serve solo su telefono e tablet. */
@media (hover: hover) and (pointer: fine) {
	.tg-solo-touch {
		display: none !important;
	}
}

.wp-block-table.is-style-tg-prezzi table {
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
}

.wp-block-table.is-style-tg-prezzi thead {
	border: 0;
}

.wp-block-table.is-style-tg-prezzi th,
.wp-block-table.is-style-tg-prezzi td {
	border: 0;
	border-bottom: 1px solid var(--tg-line);
	padding: 0.75rem 0.9rem;
	text-align: left;
}

.wp-block-table.is-style-tg-prezzi th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.wp-block-table.is-style-tg-prezzi th:not(:first-child),
.wp-block-table.is-style-tg-prezzi td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
}

.wp-block-table.is-style-tg-prezzi td:not(:first-child) {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-tg-prezzi figcaption {
	text-align: left;
	margin-top: 0.6rem;
}

/* ------------------------------------------------------------------ *
 * Pagine interne
 * ------------------------------------------------------------------ */
/* Paragrafo d'apertura delle pagine (tg-storia__intro: nome usato prima, salvato nel DB). */
.tg-intro,
.tg-storia__intro {
	font-weight: 300;
	line-height: 1.45;
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * Corsi
 * ------------------------------------------------------------------ */
.tg-corso + .tg-corso {
	border-top: 1px solid var(--tg-line);
}

.tg-corso__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tg-corso__foto--logo img {
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40);
	/* Il padding sta dentro il 100% di larghezza, sennò il logo esce dalla colonna. */
	box-sizing: border-box;
}

.tg-corso__info {
	list-style: none;
	padding: 0;
	border-top: 2px solid var(--wp--preset--color--primary);
}

.tg-corso__info li {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--tg-line);
}

.tg-corso__info strong {
	color: var(--wp--preset--color--primary);
}

.tg-corsi__contatti {
	padding: var(--wp--preset--spacing--40);
	border-left: 6px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	gap: var(--wp--preset--spacing--30);
}

.tg-corsi__contatti h3,
.tg-corsi__contatti p {
	margin: 0;
}

.tg-corsi__contatti p {
	margin-top: 0.4rem;
}

/* Su mobile la foto va sempre sopra il testo. */
@media (max-width: 781px) {
	.tg-corso .wp-block-column:has(.tg-corso__foto) {
		order: -1;
	}
}

@media (max-width: 600px) {
	.tg-corso__info li {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Storia
 * ------------------------------------------------------------------ */

/* Tappe: anno a sinistra, una linea gialla collega i punti. */
.tg-tappe {
	position: relative;
}

.tg-tappa {
	position: relative;
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0.25rem 3rem;
	padding: 0 0 var(--wp--preset--spacing--40);
	margin: 0 !important;
}

.tg-tappa::before {
	content: "";
	position: absolute;
	left: calc(11rem + 1.5rem - 1.5px);
	top: 0.6rem;
	bottom: -0.6rem;
	width: 3px;
	background: var(--wp--preset--color--accent);
}

.tg-tappa:last-child::before {
	display: none;
}

.tg-tappa::after {
	content: "";
	position: absolute;
	left: calc(11rem + 1.5rem - 0.5rem);
	top: 0.35rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
}

.tg-tappa > * {
	margin: 0 !important;
	grid-column: 2;
}

.tg-tappa__anno {
	grid-column: 1;
	grid-row: 1 / span 2;
	text-align: right;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--action);
}

.tg-tappa h3 {
	font-size: 1.6rem;
}

.tg-tappa p:not(.tg-tappa__anno) {
	max-width: 44rem;
}

@media (max-width: 600px) {
	.tg-tappa {
		grid-template-columns: 1fr;
		padding-left: 2rem;
	}

	.tg-tappa > *,
	.tg-tappa__anno {
		grid-column: 1;
		grid-row: auto;
		text-align: left;
	}

	.tg-tappa::before {
		left: calc(0.5rem - 1.5px);
	}

	.tg-tappa::after {
		left: 0;
	}
}

/* Numeri su fondo blu */
.tg-numeri {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tg-numero {
	margin: 0 !important;
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	padding-top: 0.75rem;
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.4;
}

.tg-numero strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

/* Impianto: le voci hanno una pallina gialla come segno. */
.tg-impianto {
	list-style: none;
	padding: 0;
}

.tg-impianto li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	border-bottom: 1px solid var(--tg-line);
}

.tg-impianto li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.95rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1.5px rgba(0, 55, 107, 0.25);
}

.tg-storia__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tg-attivita,
.tg-obiettivi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tg-attivita > *,
.tg-obiettivi > * {
	margin: 0 !important;
}

.tg-attivita h3,
.tg-obiettivo h3 {
	margin-bottom: 0.4rem;
}

.tg-attivita p,
.tg-obiettivo p {
	margin-top: 0;
}

.tg-attivita > * {
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: 1rem;
}

.tg-obiettivo {
	padding: var(--wp--preset--spacing--40);
	border-top: 4px solid var(--wp--preset--color--accent);
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * News
 * ------------------------------------------------------------------ */
.tg-news .wp-block-post-template {
	border-top: 2px solid var(--wp--preset--color--primary);
}

.tg-news .wp-block-post {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.25rem 2rem;
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--tg-line);
	margin: 0 !important;
}

.tg-news .wp-block-post > * {
	margin: 0 !important;
	grid-column: 2;
}

.tg-news .wp-block-post-date {
	grid-column: 1;
	grid-row: 1 / span 3;
	padding-top: 0.3rem;
}

.tg-news .wp-block-post-title {
	font-size: 1.6rem;
}

.tg-news .wp-block-post-title a:hover {
	color: var(--wp--preset--color--action);
}

.tg-news .wp-block-post-excerpt__excerpt {
	margin: 0;
}

@media (max-width: 600px) {
	.tg-news .wp-block-post {
		grid-template-columns: 1fr;
	}

	.tg-news .wp-block-post > *,
	.tg-news .wp-block-post-date {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Griglia articoli (archivi) */
.tg-griglia .wp-block-post-title {
	font-size: 1.6rem;
	margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ *
 * Banner titolo pagina
 * ------------------------------------------------------------------ */
.tg-banner h1 {
	color: var(--wp--preset--color--base);
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.tg-footer a {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 0.2em;
}

.tg-footer a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration-color: currentColor;
}

.tg-footer h2 {
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.tg-contatti {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tg-contatti li {
	padding: 0.15rem 0;
}

.tg-contatti span {
	display: inline-block;
	min-width: 9.5rem;
	color: rgba(255, 255, 255, 0.65);
}

.tg-mappa {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.tg-mappa iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
	filter: saturate(0.85);
}

.tg-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base);
}

.tg-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.tg-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.65);
}

/* ------------------------------------------------------------------ *
 * Varie
 * ------------------------------------------------------------------ */
.wp-block-search__input {
	border: 1px solid var(--tg-line);
	border-radius: 4px;
	padding: 0.7rem 0.9rem;
	font: inherit;
}

.wp-block-post-navigation-link {
	font-weight: 500;
}

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

	html {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ *
 * Tornei (plugin "Tornei Tennis Gonzaga")
 * ------------------------------------------------------------------ */
.tg-tornei {
	--tg-t-line: var(--tg-line);
	--tg-t-giorni: var(--wp--preset--color--primary);
	--tg-t-sub: var(--wp--preset--color--muted);
}

.tg-tornei .wp-block-post-template {
	border-top: 2px solid var(--wp--preset--color--primary);
}

.tg-tornei .wp-block-post {
	margin: 0 !important;
	border-bottom: 1px solid var(--tg-t-line);
}

.tg-torneo {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0.25rem 2rem;
	padding: 1.4rem 0;
}

.tg-torneo > *,
.tg-torneo__data > *,
.tg-torneo__info > * {
	margin: 0 !important;
}

.tg-torneo__info {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.tg-torneo__giorni {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1;
	white-space: nowrap;
	color: var(--tg-t-giorni);
}

.tg-torneo__mese,
.tg-torneo__categorie {
	color: var(--tg-t-sub);
	font-size: var(--wp--preset--font-size--small);
}

.tg-torneo__titolo {
	font-size: 1.6rem;
}

.tg-torneo__titolo a:hover {
	color: var(--wp--preset--color--action);
}

.tg-torneo__etichette {
	gap: 0.4rem !important;
}

.tg-torneo__etichette > * {
	margin: 0 !important;
}

/* Etichetta del tipo: il colore distingue federale, TPRA e sociale. */
.tg-tipo,
.tg-stato {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.15rem 0.55rem;
	border-radius: 3px;
}

.tg-tipo--fitp {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.tg-tipo--tpra {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

.tg-tipo--sociale {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.tg-stato {
	box-shadow: inset 0 0 0 1.5px currentColor;
	color: var(--wp--preset--color--action);
}

/* Stato delle iscrizioni: verde aperte, rosso chiuse */
.tg-stato--aperte {
	color: #0a7a2f;
}

.tg-stato--chiuse {
	color: #b42318;
}

.tg-stato--concluso {
	color: var(--wp--preset--color--muted);
}

.tg-tornei--passati {
	--tg-t-giorni: var(--wp--preset--color--muted);
}

.tg-tornei--passati .tg-stato {
	display: none;
}

.tg-tornei__vuoto {
	padding: 1.4rem 0;
	color: var(--tg-t-sub);
}

/* Su sfondo blu (home e banner della scheda) */
.tg-tornei--scuro {
	--tg-t-line: rgba(255, 255, 255, 0.18);
	--tg-t-giorni: var(--wp--preset--color--accent);
	--tg-t-sub: rgba(255, 255, 255, 0.72);
}

.tg-tornei--scuro .wp-block-post-template {
	border-top-color: var(--wp--preset--color--accent);
}

.tg-tornei--scuro .tg-torneo__titolo,
.tg-tornei--scuro .tg-torneo__titolo a {
	color: var(--wp--preset--color--base);
}

.tg-tornei--scuro .tg-torneo__titolo a:hover {
	color: var(--wp--preset--color--accent);
}

.tg-home-tornei a {
	color: var(--wp--preset--color--base);
}

.tg-home-tornei a:hover {
	color: var(--wp--preset--color--accent);
}

.tg-tornei--scuro .tg-tipo--fitp,
.tg-banner .tg-tipo--fitp {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.tg-tornei--scuro .tg-stato,
.tg-banner .tg-stato {
	color: var(--wp--preset--color--accent);
}

.tg-tornei--scuro .tg-stato--chiuse,
.tg-banner .tg-stato--chiuse,
.tg-tornei--scuro .tg-stato--concluso,
.tg-banner .tg-stato--concluso {
	color: rgba(255, 255, 255, 0.72);
}

.tg-banner .tg-torneo__etichette {
	margin-bottom: 0.75rem;
}

/* Scheda del torneo */
.tg-dettagli {
	display: grid;
	gap: 0.5rem;
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: 1rem;
}

.tg-dettaglio {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 1rem;
}

.tg-dettaglio > * {
	margin: 0 !important;
}

.tg-dettaglio__label {
	color: var(--wp--preset--color--muted);
}

.tg-dettaglio__valore {
	font-weight: 500;
}

@media (max-width: 600px) {
	.tg-torneo {
		grid-template-columns: 1fr;
	}

	.tg-torneo__data {
		display: flex;
		align-items: baseline;
		gap: 0.5rem;
	}

	.tg-dettaglio {
		grid-template-columns: 1fr;
		gap: 0;
	}
}