/*
Theme Name: UNIQUE
Theme URI: https://www.uniquestore.it
Author: UNIQUE
Description: Tema a blocchi di UNIQUE, boutique multimarca a Savona. Nessuna dipendenza da temi
  o addon di terze parti: colori, caratteri e spazi sono il ricalco di src/design/token.css,
  dichiarati una volta sola in theme.json.
Version: 1.12.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unique-boutique
Tags: full-site-editing, block-theme, e-commerce
*/

/* --------------------------------------------------------------------------
   IL CARATTERE DELL'INSEGNA — l'unica deroga al «niente webfont».

   Bernardo Moda Contrast è il carattere del logotipo UNIQUE. Serve ai soli
   titoli-insegna degli hero (decisione utente 21/08/2026, scelta sul mockup
   de «Il negozio»): un file woff2 da 24 KB, sottoinsieme latino del TTF
   originale (144 KB, in Marketing/Logo Unique su iCloud). `font-display:
   swap` più lo stack serif di riserva: se il file tarda, il titolo c'è
   comunque. MAI nel testo corrente, mai nei pulsanti: è un'insegna, non
   una voce. La regola per esteso sta in docs/DESIGN.md §3.1.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Bernardo Moda Contrast';
	src: url('assets/bernardo-moda-contrast.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   IL PONTE — i nomi italiani dei token, disponibili su tutto il sito.

   L'app li usa da src/design/token.css; qui li ricaviamo dai preset che
   WordPress genera da theme.json. Così il plugin unique-lookbook non scrive
   esadecimali a mano e usa lo stesso vocabolario dell'app: var(--inchiostro),
   var(--oro), var(--corpo). Un solo linguaggio in tre mondi.
   I nomi sono quelli di docs/DESIGN.md (revisione 12/08/2026): carta è
   l'avorio, foglio il bianco, filo il filetto. Niente alias dei nomi vecchi.
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	--carta: var(--wp--preset--color--carta);
	--velo: var(--wp--preset--color--velo);
	--foglio: var(--wp--preset--color--foglio);
	--inchiostro: var(--wp--preset--color--inchiostro);
	--accento: var(--wp--preset--color--inchiostro);

	--filo: var(--wp--preset--color--filo);
	--filo-forte: var(--wp--preset--color--filo-forte);
	--attenuato: var(--wp--preset--color--attenuato);
	--attenuato-inverso: var(--wp--preset--color--attenuato-inverso);

	--oro-scuro: var(--wp--preset--color--oro-scuro);
	--oro: var(--wp--preset--color--oro);
	--oro-chiaro: var(--wp--preset--color--oro-chiaro);
	--banda-oro: var(--wp--preset--gradient--banda-oro);

	--errore-sfondo: var(--wp--custom--stato--errore-sfondo);
	--errore-testo: var(--wp--custom--stato--errore-testo);
	--ok-sfondo: var(--wp--custom--stato--ok-sfondo);
	--ok-testo: var(--wp--custom--stato--ok-testo);

	--promo-sconto: var(--wp--custom--promo--sconto);
	--promo-evento: var(--wp--custom--promo--evento);
	--promo-anteprima: var(--wp--custom--promo--anteprima);

	--serif: var(--wp--preset--font-family--serif);
	--sistema: var(--wp--preset--font-family--sistema);
	/* il carattere del logo, coi serif di riserva: solo titoli-insegna */
	--insegna: 'Bernardo Moda Contrast', var(--wp--preset--font-family--serif);

	--occhiello: var(--wp--preset--font-size--occhiello);
	--piccolo: var(--wp--preset--font-size--piccolo);
	--corpo: var(--wp--preset--font-size--corpo);
	--forte: var(--wp--preset--font-size--forte);
	--titolo: var(--wp--preset--font-size--titolo);
	--display: var(--wp--preset--font-size--display);

	--tracking-occhiello: var(--wp--custom--tracking--occhiello);
	--tracking-etichetta: var(--wp--custom--tracking--etichetta);

	--spazio-1: var(--wp--preset--spacing--10);
	--spazio-2: var(--wp--preset--spacing--20);
	--spazio-3: var(--wp--preset--spacing--30);
	--spazio-4: var(--wp--preset--spacing--40);
	--spazio-5: var(--wp--preset--spacing--50);
	--spazio-6: var(--wp--preset--spacing--60);
	--spazio-7: var(--wp--preset--spacing--70);

	--raggio: var(--wp--custom--raggio);
	--raggio-controllo: var(--wp--custom--raggio-controllo);
	--raggio-pulsante: var(--wp--custom--raggio-pulsante);
	--ombra-scheda: var(--wp--custom--ombra-scheda);
	--tocco-minimo: var(--wp--custom--tocco-minimo);

	--scrim: var(--wp--custom--scrim);
	--scrim-leggero: var(--wp--custom--scrim-leggero);
	--ombra-volante: var(--wp--custom--ombra-volante);
}

/* --------------------------------------------------------------------------
   Qui sotto va SOLO quello che theme.json non sa esprimere.
   Nessun !important: se serve, vuol dire che il token è nel posto sbagliato.
   -------------------------------------------------------------------------- */

/* L'occhiello in maiuscoletto: il gesto che si ripete più di ogni altro. */
.uq-occhiello {
	font-family: var(--sistema);
	font-size: var(--occhiello);
	font-weight: 600;
	letter-spacing: var(--tracking-occhiello);
	text-transform: uppercase;
	color: var(--attenuato);
	margin-bottom: var(--spazio-2);
}

/* Misura corta: i paragrafi lunghi non superano i 46 caratteri di riga. */
.uq-misura { max-width: var(--wp--custom--misura); }
.uq-claim  { max-width: var(--wp--custom--misura-claim); }

/* Filetti al posto di riquadri e ombre. */
.uq-filetto { border-top: 1px solid var(--filo); }

/* --------------------------------------------------------------------------
   La navigazione del sito: una barra fissa in basso, su ogni pagina.
   Decisione utente 14/08: più moderna, e col telefono le voci stanno sotto
   il pollice. L'intestazione resta col solo logo — e sulla home sparisce
   del tutto: lì il marchio ce l'ha il video.
   -------------------------------------------------------------------------- */
.home .uq-testata { display: none; }

/* La pillola: bianca, come un foglietto che vola sopra la pagina
   (decisione utente 14/08, scelta sul mockup contro la versione scura).
   Bianco PIENO, mai trasparente: il bianco al 92% sopra una foto o un reel
   vira sul grigio sporco. Sulle pagine chiare la tengono su il filetto
   e l'ombra volante; la voce dove sei è l'ovale d'inchiostro pieno. */
.uq-nav-basso {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(14px + env(safe-area-inset-bottom));
	z-index: 80;
	max-width: calc(100vw - 24px);
	background: var(--foglio);
	border: 1px solid var(--filo-forte);
	border-radius: var(--raggio-pulsante);
	padding: 0.25rem 0.6rem;
	box-shadow: var(--ombra-volante);
}
.uq-nav-basso .wp-block-navigation,
.uq-nav-basso .wp-block-navigation__container {
	flex-wrap: nowrap; /* sei voci corte: o stanno su una riga, o si accorciano */
}
.uq-nav-basso .wp-block-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tocco-minimo);
	padding: 0 0.75rem;
	border-radius: var(--raggio-pulsante);
	color: var(--attenuato);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.uq-nav-basso .wp-block-navigation a:hover,
.uq-nav-basso .wp-block-navigation a:active {
	background: var(--velo);
	color: var(--inchiostro);
}
.uq-nav-basso .wp-block-navigation a:focus-visible {
	outline: 2px solid var(--inchiostro);
	outline-offset: 2px;
}
.uq-nav-basso .current-menu-item > a,
.uq-nav-basso .wp-block-navigation-item.current-menu-item a {
	background: var(--inchiostro); /* dove sei: l'ovale nero pieno, il segnale più forte del sistema */
	color: var(--carta);
}
@media (max-width: 559px) {
	.uq-nav-basso { padding: 0.2rem 0.4rem; }
	.uq-nav-basso .wp-block-navigation { gap: 0.1rem; }
	/* sul telefono le lettere rinunciano alla spaziatura extra (il sistema
	   ammette 0): sei voci respirano e la pillola resta staccata dai bordi */
	.uq-nav-basso .wp-block-navigation a { padding: 0 0.45rem; letter-spacing: 0; }
}
@media print {
	.uq-nav-basso { display: none; }
}
/* Il contenuto non finisce mai sotto la pillola. */
body {
	padding-bottom: calc(4.8rem + env(safe-area-inset-bottom));
}

/* Il logo come h1 della home: azzera gli stili del titolo senza cambiare un pixel. */
h1.uq-h1 {
	font: inherit;
	letter-spacing: inherit;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

/* Campi dei moduli: spigolosi, filetto da un pixel, mai ombra. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	font: inherit;
	color: inherit;
	background: var(--foglio);
	border: 1px solid var(--filo-forte);
	border-radius: var(--raggio-controllo);
	box-shadow: none;
	padding: 0.75rem 0.9rem;
	-webkit-appearance: none;
	appearance: none;
}

/* La tendina: `appearance:none` toglie anche la freccia del sistema, e senza
   la freccia una select sembra un campo di testo. Due triangolini
   d'inchiostro disegnati col gradiente (niente icone, niente immagini). */
select {
	padding-right: 2.4rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%),
		linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
	background-size: 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--inchiostro);
	outline-offset: 2px;
}

/* Immagini: mai più larghe del contenitore. */
img { max-width: 100%; height: auto; }

/* Chi ha chiesto meno movimento, meno movimento riceve. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}