/* ==========================================================================
   JTWIA — header di navigazione (tema figlio)
   Markup: template-parts/header-jtwia.php. Comportamento: assets/js/jtwia-navigation.js.

   - Classi proprie (jtwia-hdr, jtwia-nav): nessuna regola tocca le vecchie
     classi jtwia-header* né i widget di Elementor.
   - Tutto parte da .jtwia-hdr; token definiti qui, nessuno stile globale.
   - Mobile first: la regola di base è il layout «compatto» (pulsante Menu e
     pannello). Da 75rem il layout completo, se le voci ci stanno: altrimenti
     il JavaScript aggiunge .jtwia-hdr--compact e si resta in compatto.
   - Hello Elementor e il kit di Elementor stilano button e a: per questo i
     selettori di button e link hanno specificità 0-2-1 e gli stati :hover e
     :focus dei pulsanti sono dichiarati esplicitamente.
   ========================================================================== */

.jtwia-hdr {
	--jtwia-magenta: #e02d7f;
	--jtwia-magenta-deep: #c41f69;
	--jtwia-plum: #2a0e24;
	--jtwia-blush: #fce8f1;
	--jtwia-line: rgba(42, 14, 36, 0.12);
	--jtwia-gutter: clamp(1rem, 4vw, 2.5rem);
	--jtwia-hdr-h: 4.25rem;
	--jtwia-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jtwia-font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;

	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--jtwia-line);
	font-family: var(--jtwia-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--jtwia-plum);
	-webkit-text-size-adjust: 100%;
}
.jtwia-hdr *,
.jtwia-hdr *::before,
.jtwia-hdr *::after { box-sizing: border-box; }
.jtwia-hdr ul { margin: 0; padding: 0; list-style: none; }
.jtwia-hdr li { margin: 0; padding: 0; }

.jtwia-hdr .jtwia-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Barra ------------------------------------------------------------------ */
/* La barra NON è posizionata: il pannello mobile si ancora al .jtwia-hdr
   e occupa tutta la larghezza, non solo quella del contenuto. */
.jtwia-hdr .jtwia-hdr__bar {
	width: min(100% - 2 * var(--jtwia-gutter), 76rem);
	min-height: var(--jtwia-hdr-h);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* --- Logo ------------------------------------------------------------------- */
/* Il file del logo ha un margine trasparente a sinistra: lo compensa lo
   spostamento negativo, come nella bozza approvata. */
.jtwia-hdr a.jtwia-hdr__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	color: var(--jtwia-plum);
	text-decoration: none;
}
.jtwia-hdr .jtwia-hdr__logo-img {
	display: block;
	width: 10.5rem;
	max-width: none;
	height: auto;
	margin-left: -1.2rem;
}
.jtwia-hdr .jtwia-hdr__sitename {
	font: 800 1.75rem/1 var(--jtwia-font-display);
	text-transform: uppercase;
}

/* --- Pulsante Menu (compatto) ------------------------------------------------ */
.jtwia-hdr button.jtwia-hdr__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 0.25rem 0 0.75rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--jtwia-plum);
	font: 700 1rem/1.2 var(--jtwia-font-body);
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}
.jtwia-hdr button.jtwia-hdr__toggle:focus,
.jtwia-hdr button.jtwia-hdr__toggle:active {
	background: none;
	color: var(--jtwia-plum);
}
.jtwia-hdr button.jtwia-hdr__toggle:hover {
	background: none;
	color: var(--jtwia-magenta-deep);
}
.jtwia-hdr .jtwia-hdr__toggle-icon,
.jtwia-hdr .jtwia-hdr__toggle-icon::before,
.jtwia-hdr .jtwia-hdr__toggle-icon::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s, background-color 0.2s;
}
.jtwia-hdr .jtwia-hdr__toggle-icon { position: relative; }
.jtwia-hdr .jtwia-hdr__toggle-icon::before,
.jtwia-hdr .jtwia-hdr__toggle-icon::after { content: ""; position: absolute; left: 0; }
.jtwia-hdr .jtwia-hdr__toggle-icon::before { top: -7px; }
.jtwia-hdr .jtwia-hdr__toggle-icon::after { top: 7px; }
.jtwia-hdr button.jtwia-hdr__toggle[aria-expanded="true"] .jtwia-hdr__toggle-icon { background: transparent; }
.jtwia-hdr button.jtwia-hdr__toggle[aria-expanded="true"] .jtwia-hdr__toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.jtwia-hdr button.jtwia-hdr__toggle[aria-expanded="true"] .jtwia-hdr__toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Pannello (compatto): a tutta larghezza sotto la barra, scorrevole ------- */
.jtwia-hdr .jtwia-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem;
	padding: 1rem var(--jtwia-gutter) 1.75rem;
	background: #fff;
	border-top: 1px solid var(--jtwia-line);
	border-bottom: 1px solid var(--jtwia-line);
	max-height: calc(100vh - 5.5rem);
	max-height: var(--jtwia-panel-max, calc(100dvh - 5.5rem));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.jtwia-hdr.jtwia-hdr--open .jtwia-nav { display: flex; }

.jtwia-hdr .jtwia-nav__notice { margin: 0; font-size: 0.9375rem; }

/* Voci (compatto) */
.jtwia-hdr .jtwia-nav__list { display: block; width: 100%; }
.jtwia-hdr .jtwia-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.jtwia-hdr a.jtwia-nav__link {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.6rem 0;
	color: var(--jtwia-plum);
	font: 800 1.75rem/1 var(--jtwia-font-display);
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-decoration: none;
}
.jtwia-hdr a.jtwia-nav__link:hover,
.jtwia-hdr a.jtwia-nav__link:focus { color: var(--jtwia-magenta-deep); text-decoration: none; }
.jtwia-hdr .jtwia-nav__item.is-current > a.jtwia-nav__link,
.jtwia-hdr .jtwia-nav__item.is-ancestor > a.jtwia-nav__link { color: var(--jtwia-magenta-deep); }

/* Pulsante del sottomenu */
.jtwia-hdr button.jtwia-nav__subtoggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0.25rem;
	box-shadow: none;
	color: var(--jtwia-plum);
	cursor: pointer;
}
.jtwia-hdr button.jtwia-nav__subtoggle:focus,
.jtwia-hdr button.jtwia-nav__subtoggle:active {
	background: none;
	color: var(--jtwia-plum);
}
.jtwia-hdr button.jtwia-nav__subtoggle:hover {
	background: none;
	color: var(--jtwia-magenta-deep);
}
.jtwia-hdr .jtwia-nav__caret {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15rem) rotate(45deg);
	transition: transform 0.15s;
}
.jtwia-hdr button.jtwia-nav__subtoggle[aria-expanded="true"] .jtwia-nav__caret {
	transform: translateY(0.15rem) rotate(-135deg);
}

/* Sottomenu (compatto): fisarmonica dentro il pannello */
.jtwia-hdr .jtwia-nav__sub {
	display: none;
	flex: 1 0 100%;
	margin: 0 0 0.5rem;
	padding: 0 0 0 1rem;
	border-left: 3px solid var(--jtwia-blush);
}
.jtwia-hdr .jtwia-nav__item.is-open > .jtwia-nav__sub { display: block; }
.jtwia-hdr .jtwia-nav__sub .jtwia-nav__item { display: flex; }
.jtwia-hdr .jtwia-nav__sub a.jtwia-nav__link {
	padding: 0.65rem 0;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	font: 600 1.0625rem/1.3 var(--jtwia-font-body);
	letter-spacing: normal;
	text-transform: none;
}

/* --- Pulsante «Dona ora» ----------------------------------------------------- */
.jtwia-hdr a.jtwia-hdr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0.55rem 1.4rem;
	background: var(--jtwia-magenta-deep);
	border: 2px solid transparent;
	border-radius: 999px;
	color: #fff;
	font: 700 1rem/1.2 var(--jtwia-font-body);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}
.jtwia-hdr a.jtwia-hdr__cta:hover,
.jtwia-hdr a.jtwia-hdr__cta:focus {
	background: var(--jtwia-plum);
	color: #fff;
	text-decoration: none;
}

/* --- Focus ------------------------------------------------------------------- */
.jtwia-hdr a:focus-visible,
.jtwia-hdr button:focus-visible {
	outline: 3px solid var(--jtwia-magenta-deep);
	outline-offset: 3px;
}
/* Nel pannello scorrevole un contorno esterno verrebbe tagliato: lo si tiene dentro. */
.jtwia-hdr .jtwia-nav a.jtwia-nav__link:focus-visible,
.jtwia-hdr .jtwia-nav button.jtwia-nav__subtoggle:focus-visible { outline-offset: -3px; }
.jtwia-hdr .jtwia-nav a.jtwia-hdr__cta:focus-visible { outline-offset: 2px; }

/* Da 62rem il logo cresce, come nella bozza */
@media (min-width: 62rem) {
	.jtwia-hdr .jtwia-hdr__logo-img { width: 12rem; margin-left: -1.4rem; }
}

/* ==========================================================================
   Layout completo (≥ 75rem) — solo se il JavaScript non ha chiesto il compatto
   ========================================================================== */
@media (min-width: 75rem) {
	.jtwia-hdr:not(.jtwia-hdr--compact) button.jtwia-hdr__toggle { display: none; }

	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-hdr__bar > * { flex-shrink: 0; }

	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav {
		display: flex;
		position: static;
		flex-direction: row;
		align-items: stretch;
		align-self: stretch;
		gap: 1.5rem;
		padding: 0;
		background: none;
		border: 0;
		max-height: none;
		overflow: visible;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__list {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		width: auto;
		gap: 1.25rem;
	}
	/* Le voci occupano tutta l'altezza della barra: il sottomenu si apre
	   esattamente sotto la barra, senza vuoti dove il mouse perderebbe il passaggio. */
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0 {
		position: relative;
		flex-wrap: nowrap;
		align-items: center;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0 > a.jtwia-nav__link {
		flex: 0 0 auto;
		padding: 0.4rem 0;
		font: 600 1rem/1.4 var(--jtwia-font-body);
		letter-spacing: normal;
		text-transform: none;
		white-space: nowrap;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0.is-current > a.jtwia-nav__link {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0 > button.jtwia-nav__subtoggle {
		width: 1.75rem;
		height: 2.25rem;
		margin-left: 0.1rem;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav .jtwia-nav__caret { width: 0.5rem; height: 0.5rem; }

	/* Sottomenu: tendina sotto la voce */
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0 > .jtwia-nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		flex: none;
		min-width: 15rem;
		max-width: 22rem;
		margin: 0;
		padding: 0.5rem 0;
		background: #fff;
		border: 1px solid var(--jtwia-line);
		border-radius: 0.25rem;
		box-shadow: 0 0.75rem 2rem rgba(42, 14, 36, 0.12);
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__item--depth-0 > .jtwia-nav__sub.jtwia-nav__sub--end {
		left: auto;
		right: 0;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub .jtwia-nav__item { display: block; }
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub a.jtwia-nav__link {
		display: block;
		min-height: 0;
		padding: 0.6rem 1rem;
		font: 600 0.9375rem/1.35 var(--jtwia-font-body);
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub a.jtwia-nav__link:hover,
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub a.jtwia-nav__link:focus {
		background: var(--jtwia-blush);
		color: var(--jtwia-magenta-deep);
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav .jtwia-nav__sub a.jtwia-nav__link:focus-visible { outline-offset: -3px; }

	/* Terzo livello: nella tendina resta sempre aperto, rientrato */
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub .jtwia-nav__sub {
		display: block;
		position: static;
		padding: 0 0 0 1rem;
		border: 0;
	}
	.jtwia-hdr:not(.jtwia-hdr--compact) .jtwia-nav__sub button.jtwia-nav__subtoggle { display: none; }

	.jtwia-hdr:not(.jtwia-hdr--compact) a.jtwia-hdr__cta { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	.jtwia-hdr *,
	.jtwia-hdr *::before,
	.jtwia-hdr *::after { transition: none; }
}