/* ==========================================================================
   Palette alternative, per la scelta del colore (prova).
   La palette di theme.json ("teal") resta quella di base; le altre si attivano con
   l'attributo data-palette sull'elemento html, messo dal selettore nell'header.
   Quando la scelta è fatta, i colori scelti vanno in theme.json e questo file sparisce.
   ========================================================================== */

/* Amber: il bagliore delle valvole di un ampli e il sunburst; secondario blu ardesia (acciaio delle corde) */
:root[data-palette="amber"] {
	--wp--preset--color--base: #0e0c0a;
	--wp--preset--color--surface: #17140f;
	--wp--preset--color--raised: #211c16;
	--wp--preset--color--ink: #f4eee5;
	--wp--preset--color--text: #cdc4b8;
	--wp--preset--color--muted: #8e857a;
	--wp--preset--color--line: #2b2620;
	--wp--preset--color--primary: #e4a548;
	--wp--preset--color--primary-deep: #c98d33;
	--wp--preset--color--wood: #8ea6b4;
	--wp--preset--color--wood-deep: #718b99;
}

/* Glacier: azzurro ghiaccio, freddo ed elettrico; secondario ottone (ponte e meccaniche) */
:root[data-palette="glacier"] {
	--wp--preset--color--base: #090c11;
	--wp--preset--color--surface: #10151d;
	--wp--preset--color--raised: #182029;
	--wp--preset--color--ink: #eef2f7;
	--wp--preset--color--text: #c2cad4;
	--wp--preset--color--muted: #7e8996;
	--wp--preset--color--line: #1f2934;
	--wp--preset--color--primary: #74bbf5;
	--wp--preset--color--primary-deep: #4fa1e3;
	--wp--preset--color--wood: #d4b27d;
	--wp--preset--color--wood-deep: #b8955d;
}

/* Ivory: monocromo avorio su nero, come plini.co; unico accento il rosso dei LED dei pedali */
:root[data-palette="ivory"] {
	--wp--preset--color--base: #0a0a0a;
	--wp--preset--color--surface: #151515;
	--wp--preset--color--raised: #1d1d1d;
	--wp--preset--color--ink: #f5f2ed;
	--wp--preset--color--text: #c8c5c0;
	--wp--preset--color--muted: #838180;
	--wp--preset--color--line: #272727;
	--wp--preset--color--primary: #ece8e1;
	--wp--preset--color--primary-deep: #d5d0c8;
	--wp--preset--color--wood: #ea5a4f;
	--wp--preset--color--wood-deep: #cf4438;
}
/* In monocromo la parola evidenziata e i LED usano il rosso, altrimenti sparirebbero nel bianco. */
:root[data-palette="ivory"] h1 em,
:root[data-palette="ivory"] h2 em,
:root[data-palette="ivory"] h3 em,
:root[data-palette="ivory"] .site-nav .wp-block-navigation-item__content:hover,
:root[data-palette="ivory"] .footer-nav .wp-block-navigation-item__content:hover,
:root[data-palette="ivory"] .site-brand a:hover { color: var(--wp--preset--color--wood); }
:root[data-palette="ivory"] .site-nav .current-menu-item > .wp-block-navigation-item__content::before,
:root[data-palette="ivory"] .filters .is-active::before,
:root[data-palette="ivory"] .site-nav .wp-block-navigation-item__content::after,
:root[data-palette="ivory"] .footer-nav .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--wood);
	box-shadow: 0 0 8px var(--wp--preset--color--wood);
}
:root[data-palette="ivory"] .site-nav .wp-block-navigation-item__content::after,
:root[data-palette="ivory"] .footer-nav .wp-block-navigation-item__content::after { box-shadow: none; }
:root[data-palette="ivory"] .strings .string.is-plucked { stroke: var(--wp--preset--color--wood); }
:root[data-palette="ivory"] body::before {
	background:
		radial-gradient(40% 35% at 15% 20%, rgb(255 255 255 / 0.05), transparent 70%),
		radial-gradient(35% 30% at 85% 75%, color-mix(in srgb, var(--wp--preset--color--wood) 10%, transparent), transparent 70%);
}

/* --- Selettore nell'header ------------------------------------------- */

.site-header .wp-block-group > .palette-switch { margin-left: clamp(0.5rem, 1.5vw, 1.5rem); }
.palette-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.8rem 0.35rem 0.45rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	color: var(--wp--preset--color--text);
	font: 600 0.7rem/1 var(--wp--preset--font-family--sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.palette-switch:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--ink); }
.palette-switch__dots { display: inline-flex; }
.palette-switch__dots i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--base);
	box-sizing: border-box;
	transition: background-color 0.4s ease;
}
.palette-switch__dots i + i { margin-left: -5px; }
.palette-switch__dots i:nth-child(1) { background: var(--wp--preset--color--primary); }
.palette-switch__dots i:nth-child(2) { background: var(--wp--preset--color--wood); }
.palette-switch__dots i:nth-child(3) { background: var(--wp--preset--color--ink); }
.site-header:has(.is-menu-open) .palette-switch { display: none; }
@media (max-width: 781px) {
	.palette-switch { padding: 0.35rem 0.45rem; }
	.palette-switch__name { display: none; }
}

/* Le copertine sono immagini: il JS le sostituisce con la versione in tinta; nel passaggio non deve lampeggiare. */
.cover-tile img { transition: opacity 0.3s ease; }
.cover-tile img.is-swapping { opacity: 0; }

/* Tablet stretti: con il pulsante in più il menu andrebbe a capo, quindi si stringono gli spazi. */
@media (min-width: 600px) and (max-width: 720px) {
	.site-header .wp-block-group { gap: 0.75rem; }
	.site-header .site-nav .wp-block-navigation__container { gap: 0.85rem; }
	.site-header .wp-block-group > .palette-switch { margin-left: 0; }
	.site-header .site-brand { letter-spacing: 0.2em; }
}

/* ==========================================================================
   Prova del layout mobile (sotto i 600 px), scelta con il pulsante nell'header:
   - full     com'è oggi: foto a tutto schermo e hamburger
   - menu     niente hamburger: le voci stanno in una riga sotto il nome, foto più bassa
   - buttons  niente hamburger: foto ancora più bassa e, nella home, le voci come pulsanti sotto la foto
   A scelta fatta, il layout scelto entra nel tema e questa parte sparisce.
   ========================================================================== */

.layout-switch, .home-nav { display: none; }
/* Il sipario arrotonda la sezione dopo la foto: .home-nav è nascosta e non deve rubarle il posto. */
.home .hero + .home-nav + * { border-radius: 28px 28px 0 0; box-shadow: 0 -40px 80px -30px rgb(0 0 0 / 0.85); }
@media (max-width: 781px) {
	.home .hero + .home-nav + * { border-radius: 20px 20px 0 0; }
}

@media (max-width: 599px) {
	.layout-switch {
		display: inline-flex;
		align-items: center;
		padding: 0.5rem 0.7rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 999px;
		background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
		color: var(--wp--preset--color--ink);
		font: 700 0.625rem/1 var(--wp--preset--font-family--sans);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.site-header:has(.is-menu-open) .layout-switch { display: none; }
	.site-header .wp-block-group > .palette-switch { margin-left: 0; }
	/* con i due pulsanti di prova il nome andrebbe a capo */
	.site-header .wp-block-group { gap: 0.6rem; }
	.site-header .site-brand { letter-spacing: 0.18em; white-space: nowrap; }

	/* menu e buttons: le voci sempre visibili, in una riga sotto il nome */
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-header .wp-block-group { flex-wrap: wrap; row-gap: 0.85rem; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-header .site-brand { margin-right: auto; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-header .wp-block-group > .site-nav { order: 9; flex: 0 0 100%; margin-left: 0; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-nav .wp-block-navigation__responsive-container-open,
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-nav .wp-block-navigation__responsive-container-close { display: none; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-nav .wp-block-navigation__responsive-container {
		display: block;
		position: static;
		width: 100%;
		padding: 0;
		background: transparent !important;
		animation: none;
	}
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-nav .wp-block-navigation__container {
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
	}
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .site-nav .wp-block-navigation-item__content { font-size: 0.75rem; letter-spacing: 0.06em; padding-block: 0.45rem; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem); }

	/* L'header non galleggia più sulla foto: è pieno e la foto comincia sotto, così le voci si leggono. */
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .home .wp-site-blocks > header.wp-block-template-part { position: sticky; }
	:root:is([data-mobile="menu"], [data-mobile="buttons"]) .home .site-header {
		background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(16px);
		backdrop-filter: saturate(1.4) blur(16px);
	}

	:root[data-mobile="menu"] .hero.wp-block-cover { min-height: 58svh !important; }

	:root[data-mobile="buttons"] .hero.wp-block-cover { min-height: 40svh !important; }
	:root[data-mobile="buttons"] .home .site-header .wp-block-group > .site-nav { display: none; }
	:root[data-mobile="buttons"] .home .hero + .home-nav { border-radius: 20px 20px 0 0; box-shadow: 0 -40px 80px -30px rgb(0 0 0 / 0.85); }
	:root[data-mobile="buttons"] .home .hero + .home-nav + * { border-radius: 0; box-shadow: none; }
	:root[data-mobile="buttons"] .home-nav {
		display: grid;
		gap: 0.5rem;
		margin-block: 0;
		padding: 1.5rem var(--wp--preset--spacing--50) 0.5rem;
	}
	.home-nav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.95rem 1.15rem;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 12px;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-decoration: none;
		text-transform: uppercase;
	}
	.home-nav a::after { content: "→"; color: var(--wp--preset--color--primary); font-weight: 400; letter-spacing: 0; }
	.home-nav a:active { border-color: var(--wp--preset--color--primary); }
}