/*
 * Asse `position` del modello Header — regole minime emesse dal core.
 *
 * Le classi sono modificatori applicati all'elemento `<header class="bricks-header ...">`
 * dai template del core (vedi src/Layout/headers/*.php). Il valore di
 * `--bricks-header-h` è iniettato inline dal modulo Layout\Assets quando la
 * scheda attiva richiede compensazione altezza (sticky/fixed). Il fallback
 * (64px) tutela i casi in cui l'override del tema cliente azzeri la var.
 *
 * Convenzione: questo file emette SOLO comportamento di posizionamento.
 * Background, padding, tipografia e ombre restano sotto controllo del tema
 * cliente o delle utility Tailwind del template.
 */

:root {
	--bricks-header-h: 64px;
}

/*
 * `static` — comportamento di default; nessuna regola, l'header sta nel flusso
 * normale. Tenuta come selettore vuoto per documentazione.
 */
.bricks-header.bricks-header--pos-static {
	/* nessuna regola di posizionamento. */
}

.bricks-header.bricks-header--pos-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}

/*
 * Fix WordPress 6.4+: WP aggiunge `overflow: clip` su `.wp-site-blocks` e
 * `.wp-block-template-part`, che spezza `position: sticky` su qualsiasi figlio.
 * Sovrascriviamo solo il template-part dell'header (molto specifico grazie a
 * `:has()`). Tradeoff: il template-part non clippa l'overflow orizzontale, ma
 * il template-part dell'header non ha contenuto che straripa, quindi è safe.
 * Se un tema cliente ne avesse bisogno, può aggiungere `overflow-x: clip` sul
 * `.bricks-header` stesso.
 */
.wp-block-template-part:has(.bricks-header--pos-sticky) {
	overflow: visible;
}

.bricks-header.bricks-header--pos-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
}

/*
 * Compensazione altezza per le ancore: gli `<a href="#id">` devono atterrare
 * sotto l'header sticky, non nascosti dietro di esso. Solo quando la
 * scheda attiva non è `static` (la regola è applicata via :has(), con
 * fallback solo se il browser supporta :has() — fallback negli altri browser
 * è che lo scroll-anchor finisce sotto l'header, ma il contenuto resta
 * accessibile).
 */
:root:has(.bricks-header--pos-sticky) {
	scroll-padding-top: var(--bricks-header-h);
}

/*
 * Modello `pill` — regole strutturali emesse dal core.
 *
 * La pill è un `<header>` invisibile (wrapper trasparente, pointer-events
 * none) che ospita una pill flottante interna (`.bricks-header__inner--pill`,
 * pointer-events auto). Layout coerente col modello `split`: 3 colonne
 * (menu_left | logo_center | menu_right) sopra il breakpoint md, impilato
 * sotto (TODO mobile in pill.php). I valori geometrici sono token
 * sovrascrivibili dal tema cliente (vedi tailwind/preset.css):
 *   --bricks-header-pill-offset-top  distanza dal top del viewport
 *   --bricks-header-pill-radius      raggio della pill
 *   --bricks-header-pill-padding-x   padding orizzontale interno
 *   --bricks-header-pill-height      altezza minima della pill
 *   --color-glass                    fondo "vetro" della pill
 *
 * Le regole NON dipendono dall'asse `position`: la pill è marcata anche
 * `bricks-header--pos-fixed` dal renderer (default della scheda), quindi
 * eredita anche le regole sopra di `.bricks-header--pos-fixed`. L'override
 * `top` qui sotto vince per ordine di scrittura (stessa specificità: una
 * classe vs. una classe).
 */
.bricks-header.bricks-header--pill {
	/*
	 * Override locale del token logo-size. Il template usa
	 * `max-h-(--bricks-header-logo-size)` come gli altri header; ridefiniamo
	 * la var nello scope della pill così il logo è proporzionato alla
	 * compattezza della pill (24px vs. 40px di default). Il tema cliente
	 * può alzare o abbassare il valore con una regola CSS nello stesso scope
	 * (`.bricks-header--pill { --bricks-header-logo-size: 2rem; }`).
	 */
	--bricks-header-logo-size: 1.5rem;
	background-color: transparent;
	border: 0;
	pointer-events: none;
	top: var(--bricks-header-pill-offset-top);
}

.bricks-header--pill .bricks-header__inner--pill {
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	background-color: var(--color-glass);
	border-radius: var(--bricks-header-pill-radius);
	min-height: var(--bricks-header-pill-height);
	padding-inline: var(--bricks-header-pill-padding-x);
	pointer-events: auto;
	width: max-content;
}

/*
 * Compensazione `padding-top` sul `<body>`: per gli header `fixed` "a barra
 * piena" (simple/centered/split + fixed) il core la applica via la regola
 * più sopra in questo file. La pill flottante NON occupa una barra piena
 * (è centrata, larga `max-content`), quindi vogliamo che il contenuto della
 * pagina passi sotto di lei. Annulliamo qui la compensazione SOLO per la
 * combinazione `pill + fixed`. Specificità 0,2,1 batte 0,1,1 della regola
 * generale del core senza !important. Richiede `:has()` (supportato da
 * tutti i browser evergreen 2023+).
 */
body:has(.bricks-header--pill.bricks-header--pos-fixed) {
	padding-top: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Layout inner — modello `simple` con CTA button.
 *
 * Quando il CTA è configurato, `.bricks-header__inner--has-cta` usa un grid
 * a 3 colonne `1fr auto 1fr` per centrare matematicamente il nav tra logo e
 * CTA, indipendentemente dalla larghezza dei due elementi laterali.
 *
 * Senza CTA il template emette un flex con `justify-between` (logo sx,
 * nav dx): nessuna regola aggiuntiva necessaria.
 * ────────────────────────────────────────────────────────────────────── */

.bricks-header__inner--has-cta {
	grid-template-columns: 1fr auto 1fr;
	gap: 1.5rem; /* corrisponde a gap-md del preset */
}

.bricks-header__inner--has-cta .bricks-header__cta {
	justify-self: end;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Submenu dropdown — desktop.
 *
 * Il walker (`NavWalker`) emette `.bricks-menu__submenu` come `<ul>` fratello
 * del `<a>` genitore dentro il `<li class="bricks-menu__item menu-item-has-children">`.
 * Il CSS gestisce il show/hide; il JS (`header-menu.js`) sincronizza solo
 * `aria-expanded` per screen reader (non duplica la logica visiva).
 *
 * Stati di apertura (priorità decrescente):
 * 1. `aria-expanded="true"` sul trigger — impostato da JS su hover/focus
 * 2. `:focus-within` sul `<li>` — naviga con Tab fino al submenu
 * 3. `:hover` sul `<li>` — solo dispositivi con vero puntatore hover
 *
 * Transizione wrappata in `prefers-reduced-motion: no-preference` per WCAG 2.3.3.
 * ────────────────────────────────────────────────────────────────────── */

.bricks-menu__item {
	position: relative;
}

.bricks-menu__submenu {
	background-color: var(--color-surface, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.5rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	left: 0;
	list-style: none;
	margin: 0;
	min-width: 12rem;
	opacity: 0;
	padding: 0.375rem 0;
	position: absolute;
	top: calc(100% + 0.25rem);
	transform: translateY(-4px);
	visibility: hidden;
	z-index: 60;
}

@media (prefers-reduced-motion: no-preference) {
	.bricks-menu__submenu {
		transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
	}
}

/* Submenu link di secondo livello */
.bricks-menu__submenu .bricks-menu__link {
	display: block;
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

/* Apertura: aria-expanded (JS) */
.bricks-menu__link[aria-expanded="true"] ~ .bricks-menu__submenu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* Apertura: focus-within (Tab da tastiera) */
.bricks-menu__item:focus-within > .bricks-menu__submenu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

/* Apertura: hover (mouse/trackpad) */
@media (hover: hover) {
	.bricks-menu__item:hover > .bricks-menu__submenu {
		opacity: 1;
		transform: translateY(0);
		visibility: visible;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Hamburger button — icona CSS pura.
 *
 * Tre linee orizzontali generate via `<span>` vuoti dentro
 * `.bricks-header__burger`. Quando l'header ha classe `bricks-header--nav-open`
 * le linee si trasformano in una × animata.
 *
 * `.bricks-header__burger` è nascosto su breakpoint ≥ md (768px): il CSS di
 * responsive lo mostra solo su mobile.
 * ────────────────────────────────────────────────────────────────────── */

.bricks-header__burger {
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 2.5rem;
	justify-content: center;
	padding: 0.375rem;
	width: 2.5rem;
}

.bricks-header__burger-line {
	background-color: currentColor;
	border-radius: 2px;
	display: block;
	height: 2px;
	transform-origin: center;
	width: 22px;
}

@media (prefers-reduced-motion: no-preference) {
	.bricks-header__burger-line {
		transition: transform 0.2s ease, opacity 0.15s ease;
	}
}

/* × quando drawer aperto */
.bricks-header--nav-open .bricks-header__burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bricks-header--nav-open .bricks-header__burger-line:nth-child(2) {
	opacity: 0;
}

.bricks-header--nav-open .bricks-header__burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Animazione entrata drawer mobile (definizione usata più avanti nel CSS).
 * ────────────────────────────────────────────────────────────────────── */

@keyframes bricks-drawer-open {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Mobile: drawer fullscreen.
 *
 * Il `<nav class="bricks-header__nav">` è l'unico elemento nav della pagina
 * (nessuna duplicazione DOM). Su mobile è nascosto; quando `.bricks-header--nav-open`
 * è presente sull'`<header>`, il nav diventa un overlay fullscreen (`position:
 * fixed; inset: 0`) con layout a colonna, scroll interno e body-scroll bloccato
 * via JS (`document.body.style.overflow = 'hidden'`).
 *
 * Breakpoint: 767px (sotto md). Usiamo `max-width` invece di Tailwind
 * perché questa regola gestisce layout strutturale che non deve dipendere
 * dalla build Tailwind del tema cliente.
 * ────────────────────────────────────────────────────────────────────── */

/*
 * Chevron via CSS ::after — nessun SVG nel markup PHP (evita filtri kses).
 * Visibile solo nel drawer mobile aperto; nascosto su desktop via specificity
 * (il selettore di apertura richiede .bricks-header--nav-open).
 */

@media (max-width: 767px) {
	.bricks-header__nav {
		display: none;
	}

	/*
	 * Drawer fullscreen centrato: `justify-content: center` e `align-items: center`
	 * posizionano menu + CTA al centro del viewport sia verticalmente sia
	 * orizzontalmente. Il pulsante × è estratto dal flusso con `position: absolute`.
	 */
	.bricks-header--nav-open .bricks-header__nav {
		align-items: center;
		background-color: var(--color-surface, #fff);
		display: flex;
		flex-direction: column;
		inset: 0;
		justify-content: center;
		overflow-y: auto;
		padding: 5rem 1.5rem 2rem;
		position: fixed;
		z-index: 99;
	}

	/* Menu verticale nel drawer — centrato */
	.bricks-header--nav-open .bricks-menu {
		align-items: center;
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	/*
	 * <li>: relativo per posizionare il chevron in absolute.
	 * Lasciato come block (non flex) così il submenu va sotto in flusso normale.
	 */
	.bricks-header--nav-open .bricks-menu__item {
		position: relative;
		width: 100%;
	}

	/*
	 * Specificità 0,3,0: sovrascrive `display: inline-block` e `overflow: hidden`
	 * degli effetti hover (slide-up, underline) che hanno specificità 0,2,0.
	 */
	.bricks-header--nav-open .bricks-header__nav .bricks-menu__link {
		align-items: center;
		display: flex;
		font-size: 1.125rem;
		justify-content: center;
		overflow: visible;
		padding: 0.75rem 1.5rem;
		position: relative;
	}

	/* Hamburger/X sempre visibile sopra l'overlay del drawer.
	 * Il nav ha z-index: 99; alzare l'inner a 100 lo porta in primo piano. */
	.bricks-header--nav-open .bricks-header__inner {
		position: relative;
		z-index: 100;
	}

	/*
	 * Blocca tutte le aperture CSS-automatiche dei submenu nel drawer
	 * (aria-expanded, :focus-within, :hover). Queste regole desktop non hanno
	 * media query e si applicano anche a 767px; qui le sovrascriviamo per
	 * posizione nella cascade (stessa specificità 0,3,0, ma più in basso nel file).
	 * Solo la classe `.is-open` (togolata da JS) apre il submenu.
	 */
	.bricks-header--nav-open .bricks-menu__item > .bricks-menu__submenu {
		border: none;
		border-radius: 0;
		box-shadow: none;
		max-height: 0;
		min-width: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		position: static;
		transform: none;
		visibility: hidden;
		width: 100%;
	}

	/* Accordion submenu mobile: `.is-open` togolato via JS */
	.bricks-header--nav-open .bricks-menu__item.is-open > .bricks-menu__submenu {
		max-height: 600px;
		opacity: 1;
		padding-left: 1rem;
		visibility: visible;
	}

	/* Separatore visivo per i submenu al primo livello */
	.bricks-header--nav-open .bricks-menu__submenu .bricks-menu__link {
		font-size: 1rem;
		opacity: 0.8;
		padding: 0.5rem 0;
	}

	/* CTA desktop nascosta su mobile: l'equivalente compare nel drawer come
	 * `.bricks-header__nav-cta-mobile`. Con CTA il layout inner è grid 3 colonne;
	 * su mobile torniamo a flex per avere logo sx / burger dx. */
	.bricks-header__cta {
		display: none;
	}

	.bricks-header__inner--has-cta {
		display: flex;
		justify-content: space-between;
	}

	/* Pulsante close — estratto dal flusso del drawer per non influenzare
	 * il centraggio verticale del menu. Posizionato in alto a destra. */
	.bricks-header__nav-close {
		background: none;
		border: none;
		cursor: pointer;
		font-size: 1.5rem;
		line-height: 1;
		padding: 0.5rem;
		position: absolute;
		right: 1.5rem;
		top: 1.5rem;
	}

	/* CTA vicino al menu — rimossa da fondo drawer */
	.bricks-header__nav-cta-mobile {
		margin-top: 2rem;
		width: 100%;
	}

	.bricks-header__nav-cta-mobile a {
		display: block;
		text-align: center;
	}

	/* ── Chevron via CSS mask — accanto al testo, inline nel flex del link ── */

	/*
	 * Reset COMPLETO dell'::after degli effetti hover nel drawer.
	 * Specificità 0,3,1 > effetti hover (0,2,1). Si resettano anche position,
	 * transform e left/right/top/bottom per evitare il posizionamento assoluto
	 * ereditato da slide-up e underline.
	 */
	.bricks-header--nav-open .bricks-header__nav .bricks-menu__link::after {
		bottom: auto;
		content: none;
		left: auto;
		position: static;
		right: auto;
		top: auto;
		transform: none;
		transform-origin: center;
	}

	/*
	 * Chevron SVG via mask — specificità 0,4,1 sovrascrive il reset.
	 * `background-color: currentColor` + mask ritaglia la forma del chevron.
	 * `position: static` → il pseudo-elemento è un flex item, non absolute.
	 * Shorthand `mask` / `-webkit-mask` elimina la ripetizione dei sub-valori.
	 */
	.bricks-header--nav-open .bricks-header__nav .bricks-menu__link[aria-expanded]::after {
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		background-color: currentColor;
		content: '';
		display: block;
		flex-shrink: 0;
		height: 14px;
		mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		position: static;
		transform: none;
		transform-origin: center;
		width: 14px;
	}

	/* Rotazione 180° quando il submenu è aperto */
	.bricks-header--nav-open .bricks-menu__item.is-open > .bricks-menu__link[aria-expanded]::after {
		transform: rotate(180deg);
	}
}

@media (min-width: 768px) {
	/* Su desktop: hamburger, close e CTA mobile sono nascosti */
	.bricks-header__burger,
	.bricks-header__nav-close,
	.bricks-header__nav-cta-mobile {
		display: none;
	}
}

/*
 * Animazione entrata drawer + transizioni accordion e chevron.
 * Separata in una media query combinata perché `@keyframes` è
 * inutile su dispositivi con motion ridotto.
 */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.bricks-header--nav-open .bricks-header__nav {
		animation: bricks-drawer-open 0.2s ease;
	}

	/* Accordion: transizione max-height per il push-down degli elementi */
	.bricks-header--nav-open .bricks-menu__item > .bricks-menu__submenu {
		transition: max-height 0.3s ease, opacity 0.2s ease;
	}

	/* Chevron: transizione di rotazione */
	.bricks-header--nav-open .bricks-header__nav .bricks-menu__link[aria-expanded]::after {
		transition: transform 0.2s ease;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Hover effects sui link dei menu — asse `supports.hover` (CSS puro).
 *
 * Il template emette `bricks-menu--hover-{slug}` sull'`<ul>` del menu. Le
 * regole qui sotto agganciano l'effetto al figlio `.bricks-menu__link`.
 *
 * Accessibility: tutti gli effetti animati scattano anche su
 * `:focus-visible` (tastiera). Sono wrappati in
 * `@media (prefers-reduced-motion: no-preference) and (hover: hover)`:
 *   - `prefers-reduced-motion: no-preference` → utente non ha chiesto di
 *     ridurre le animazioni (WCAG 2.3.3);
 *   - `(hover: hover)` → puntatore con vero hover (mouse, trackpad), per
 *     evitare hover "appiccicati" su touch.
 *
 * Per `:focus-visible` aggiungiamo una regola separata fuori dal media
 * query così l'effetto resta disponibile da tastiera anche su touch.
 *
 * `none` (default) — nessuna regola, link visivamente inerte.
 *
 * `split-words` — nessuna regola CSS: l'effetto è solo JS via GSAP, vedi
 * hover-split-words.js (caricato dal core solo quando il valore è attivo).
 * ────────────────────────────────────────────────────────────────────── */

/*
 * Effetto `underline`: l'underline cresce da sinistra a destra usando uno
 * pseudo-elemento posizionato in basso. `transform: scaleX()` evita layout
 * shift: il link non si "muove" e non spinge i fratelli. `transform-origin:
 * left` per la direzione di crescita.
 */
.bricks-menu--hover-underline .bricks-menu__link {
	position: relative;
	text-decoration: none;
}

.bricks-menu--hover-underline .bricks-menu__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
	.bricks-menu--hover-underline .bricks-menu__link::after {
		transition: transform 0.2s ease;
	}
}

@media (hover: hover) {
	.bricks-menu--hover-underline .bricks-menu__link:hover::after {
		transform: scaleX(1);
	}
}

.bricks-menu--hover-underline .bricks-menu__link:focus-visible::after {
	transform: scaleX(1);
}

/*
 * Effetto `opacity`: il link sfuma a opacità ridotta. Mantiene il contrasto
 * del colore originale: assumiamo che il contrasto AA passi a 0.6 di alpha
 * sui token di default del core (testo scuro su sfondo chiaro). Il tema
 * cliente che ha brand con contrasto basso può alzare il valore a 0.7 o 0.8
 * sovrascrivendo questa regola.
 */
.bricks-menu--hover-opacity .bricks-menu__link {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.bricks-menu--hover-opacity .bricks-menu__link {
		transition: opacity 0.15s ease;
	}
}

@media (hover: hover) {
	.bricks-menu--hover-opacity .bricks-menu__link:hover {
		opacity: 0.6;
	}
}

.bricks-menu--hover-opacity .bricks-menu__link:focus-visible {
	opacity: 0.6;
}

/*
 * Effetto `slide-up`: il testo del link sale via translateY, una copia
 * identica del testo entra dal basso. Implementazione CSS puro:
 *   - il link diventa un contenitore con `overflow: hidden`;
 *   - il testo originale dentro l'`<a>` resta accessibile a screen reader
 *     ma è reso invisibile visivamente con un wrapper inline-block;
 *   - uno pseudo `::after` con `content: attr(data-text)` posizionato sotto
 *     il link traduce verso l'alto al hover/focus.
 * Il walker (NavWalker::start_el) emette sempre `data-text="..."` sui link
 * `.bricks-menu__link`, quindi questa regola funziona senza JS.
 *
 * Nota a11y: il testo del link rimane semanticamente nell'`<a>` (non viene
 * spostato in CSS-only-content), quindi screen reader e SEO leggono il
 * titolo una sola volta. Lo pseudo non aggiunge testo letto perché
 * `content: attr()` in pseudo-elementi NON è esposto agli screen reader
 * moderni.
 */
.bricks-menu--hover-slide-up .bricks-menu__link {
	display: inline-block;
	overflow: hidden;
	padding-block: 0.5em;
	position: relative;
	text-decoration: none;
	vertical-align: middle;
}

.bricks-menu--hover-slide-up .bricks-menu__link::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.bricks-menu--hover-slide-up .bricks-menu__link,
	.bricks-menu--hover-slide-up .bricks-menu__link::after {
		transition: transform 0.25s ease;
	}
}

.bricks-menu--hover-slide-up .bricks-menu__link {
	/*
	 * `display: inline-block` + `transform` rende il box transformable, ma
	 * applichiamo il transform a uno pseudo separato per evitare layout
	 * shift sui fratelli. Usiamo un wrapper interno simulato con
	 * `transform-origin` chirurgico.
	 */
	transform: translateY(0);
}

@media (hover: hover) {
	.bricks-menu--hover-slide-up .bricks-menu__link:hover,
	.bricks-menu--hover-slide-up .bricks-menu__link:hover::after {
		transform: translateY(-100%);
	}
}

.bricks-menu--hover-slide-up .bricks-menu__link:focus-visible,
.bricks-menu--hover-slide-up .bricks-menu__link:focus-visible::after {
	transform: translateY(-100%);
}

/*
 * Effetto `split-words`: l'animazione è JS-driven (vedi
 * hover-split-words.js). Qui definiamo SOLO il layout visivo del link
 * (display/overflow/padding/text-decoration); le proprietà di
 * *infrastruttura* del clone (position absolute, top, ecc.) vivono nel JS
 * perché il clone è creato a runtime e va posizionato prima che SplitText
 * lo elabori — non possiamo dipendere dall'ordine di caricamento del CSS.
 *
 * `padding-block` serve allo stesso scopo di slide-up: compensa l'altezza
 * del box ridotta da `overflow: hidden` e tutela i descender (g/p/q/y) dal
 * clipping. Tema cliente può sovrascriverlo se serve.
 */
.bricks-menu--hover-split-words .bricks-menu__link {
	display: inline-block;
	overflow: hidden;
	padding-block: 0.5em;
	text-decoration: none;
	vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Desktop: spaziatura nav e chevron sui link con submenu.
 *
 * POSIZIONE INTENZIONALE — questo blocco deve restare DOPO gli effetti hover:
 * i selettori del chevron hanno specificità 0,2,1 uguale a quella degli
 * effetti hover (slide-up, underline), ma essendo più in basso nel file
 * vincono per ordine di cascata.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	/*
	 * Spaziatura tra le voci: override del gap Tailwind (spec. 0,1,0).
	 * Token personalizzabile dal tema cliente.
	 */
	.bricks-header__nav .bricks-menu {
		gap: var(--bricks-nav-gap, 2.5rem);
	}

	/*
	 * Chevron inline sui link con submenu — visibile su hover/focus.
	 * `position: static` annulla position:absolute di slide-up/underline.
	 * `transform-origin: center` annulla transform-origin:left di underline.
	 * La rotazione segue `aria-expanded="true"` impostato da JS su mouseenter.
	 */
	.bricks-menu .bricks-menu__link[aria-expanded]::after {
		-webkit-mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		background-color: currentColor;
		content: '';
		display: inline-block;
		height: 14px;
		margin-left: 0.25rem;
		mask: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		position: static;
		transform: none;
		transform-origin: center;
		vertical-align: middle;
		width: 14px;
	}

	/* Rotazione ▲ quando il dropdown è aperto */
	.bricks-menu .bricks-menu__link[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.bricks-menu .bricks-menu__link[aria-expanded]::after {
		transition: transform 0.2s ease;
	}
}