/* ==========================================================================
   Vimala Shop — base.css
   Reset leggeri, utility, pulsanti, link, form, accessibilità.
   Token: var(--wp--preset--*) definiti in theme.json (brand kit 2027 «Mani su Radici»).
   Regola di contrasto: testo bianco solo su blu notte, bordeaux o inchiostro;
   zafferano mai come colore del testo su fondo chiaro.
   ========================================================================== */

/* ---------- Reset leggeri ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* L'attributo hidden vince sempre: le regole «img { display: block }» del tema lo annullerebbero
   (es. il carrello laterale di WooCommerce ha una seconda immagine nascosta per ogni prodotto). */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
svg,
video,
picture {
	max-width: 100%;
}

img,
video {
	height: auto;
}

img {
	display: block;
}

:where(p, li) img {
	display: inline-block;
}

::selection {
	background: var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--bianco);
}

/* ---------- Accessibilità ---------- */
/* Lo skip link del core è ".skip-link.screen-reader-text": resta nascosto con le regole del core
   e qui viene solo restilizzato quando riceve il focus. */
.vimala-skip-link {
	position: absolute;
	top: -100px;
	left: var(--wp--preset--spacing--30);
	z-index: 100000;
	padding: 12px 20px;
	background: var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--bianco);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.vimala-skip-link:focus,
.vimala-skip-link:focus-visible {
	top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--bianco);
}

body .skip-link.screen-reader-text:focus {
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--30);
	padding: 12px 20px;
	background-color: var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--bianco);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Il contorno si toglie solo per il clic del mouse, mai per la tastiera. */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--bordeaux);
	outline-offset: 2px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--bordeaux);
	outline-offset: 2px;
}

/* Su fondi scuri (blu notte, bordeaux, inchiostro) il contorno bordeaux non si vede: zafferano. */
:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--zafferano);
}

/* ".screen-reader-text" è già definita dal core e da WooCommerce (e va visibile al focus): non la si ridefinisce. */
.vimala-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Utility ---------- */

/* Occhiello (manuale 2027, come nella newsletter): Inter Bold, maiuscolo spaziato 0.16em, bordeaux.
   Su fondo blu notte, bordeaux o inchiostro diventa bianco (regola di contrasto). */
.vimala-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bordeaux);
}

:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .vimala-eyebrow {
	color: var(--wp--preset--color--bianco);
}

/* Nota a mano (Caveat 600, come «nuovo nello shop!» nel post ufficiale).
   Solo frasi brevi (max 8 parole), una o due per pagina, mai su nomi di prodotto o prezzi.
   Bordeaux su fondi chiari; variante .vimala-nota--blu in blu notte;
   dentro un fondo blu notte diventa zafferano (unico testo zafferano ammesso). */
.vimala-nota {
	font-family: var(--wp--preset--font-family--mano);
	font-size: 1.75em;
	font-style: normal;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--bordeaux);
}

.vimala-nota--blu {
	color: var(--wp--preset--color--blu-notte);
}

.has-blu-notte-background-color .vimala-nota,
.vimala-nota.has-blu-notte-background-color {
	color: var(--wp--preset--color--zafferano);
}

/* ---------- Link ---------- */
a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ---------- Pulsanti ---------- */
.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

/* Variante «Link sottolineato» (register_block_style core/button → is-style-vimala-link) */
.wp-block-button.is-style-vimala-link .wp-block-button__link,
.wp-block-button.is-style-vimala-link .wp-element-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.wp-block-button.is-style-vimala-link .wp-block-button__link:hover,
.wp-block-button.is-style-vimala-link .wp-block-button__link:focus-visible,
.wp-block-button.is-style-vimala-link .wp-element-button:hover {
	background: transparent;
	color: var(--wp--preset--color--bordeaux);
}

/* Su fondi scuri il link sottolineato resta bianco: al passaggio cambia solo la sottolineatura (zafferano). */
:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .wp-block-button.is-style-vimala-link :is(.wp-block-button__link, .wp-element-button):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--bianco);
	text-decoration-color: var(--wp--preset--color--zafferano);
	text-decoration-thickness: 2px;
}

/* Variante contorno (newsletter 2027): bordo e testo blu notte; al passaggio pieno blu notte. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--blu-notte);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--blu-notte);
	border-color: var(--wp--preset--color--blu-notte);
	color: var(--wp--preset--color--bianco);
}

/* Contorno su fondo scuro: bianco. */
:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--bianco);
}

:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--bianco);
	border-color: var(--wp--preset--color--bianco);
	color: var(--wp--preset--color--blu-notte);
}

/* ---------- Form sobri ----------
   Specificità zero (:where) così i campi dei blocchi WooCommerce (checkout, quantità, ricerca)
   mantengono le loro dimensioni e le loro etichette flottanti. */
:where(
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="number"],
	input[type="date"],
	select,
	textarea
) {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	background: var(--wp--preset--color--bianco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 2px;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 16px; /* evita lo zoom automatico su iOS */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

:where(select) {
	padding-right: 36px;
	/* Freccia disegnata con due gradienti: nessun colore fisso nel CSS. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink) 50%),
		linear-gradient(135deg, var(--wp--preset--color--ink) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-position: right 19px center, right 14px center;
	background-size: 5px 5px, 5px 5px;
}

:where(input[type="number"]) {
	-moz-appearance: textfield;
}

:where(input, select, textarea):hover {
	border-color: var(--wp--preset--color--muted);
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--blu-notte);
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--blu-notte);
}

:where(label) {
	font-size: var(--wp--preset--font-size--small);
}

::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* ---------- Tabelle e separatori ---------- */
:where(table) {
	width: 100%;
	border-collapse: collapse;
}

:where(th, td) {
	padding: 12px 8px;
	border-bottom: 1px solid var(--wp--preset--color--linea);
	text-align: left;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--linea);
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Dettagli d'ispirazione indiana – 2
   Ornamenti originali in assets/images/ornamenti/ (colori 2027).
   Solo CSS: si tolgono cancellando questa sezione.
   ========================================================================== */

/* Separatore (core/separator) nei contenuti: divisore ornamentale bordeaux
   (filetti, diamante con cuore zafferano, paisley speculari) al posto della linea.
   Esclusi lo stile a puntini e i separatori con un colore scelto nell'editor. */
.wp-block-separator:not(.is-style-dots):not(.has-background):not(.has-text-color) {
	width: min(240px, 100%);
	max-width: none;
	height: 24px;
	margin-inline: auto;
	border: 0;
	opacity: 1;
	background: url("../images/ornamenti/divisore-ornamentale-bordeaux.svg") center / 240px 24px no-repeat;
}

/* Variante larga: il divisore al centro, prolungato da due filetti color linea. */
.wp-block-separator.is-style-wide:not(.has-background):not(.has-text-color) {
	width: 100%;
	background:
		url("../images/ornamenti/divisore-ornamentale-bordeaux.svg") center / 240px 24px no-repeat,
		linear-gradient(var(--wp--preset--color--linea), var(--wp--preset--color--linea)) left center / calc(50% - 128px) 1px no-repeat,
		linear-gradient(var(--wp--preset--color--linea), var(--wp--preset--color--linea)) right center / calc(50% - 128px) 1px no-repeat;
}

/* Su fondo blu notte o bordeaux il divisore bordeaux non si vede: versione bianca e zafferano. */
:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .wp-block-separator:not(.is-style-dots):not(.has-background):not(.has-text-color) {
	background: url("../images/ornamenti/divisore-ornamentale-bianco.svg") center / 240px 24px no-repeat;
}

/* Link sottolineato (is-style-vimala-link): piccolo diamante dopo l'etichetta,
   come i rombi delle cornici block print. Segue il colore del testo, gira al passaggio. */
.wp-block-button.is-style-vimala-link .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	margin-left: 12px;
	background-color: currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	pointer-events: none;
}

.wp-block-button.is-style-vimala-link .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: rotate(135deg) scale(1.3);
}

/* Su fondo scuro il diamante diventa zafferano (accento, non testo). */
:is(.has-blu-notte-background-color, .has-bordeaux-background-color, .has-ink-background-color) .wp-block-button.is-style-vimala-link .wp-block-button__link::after {
	background-color: var(--wp--preset--color--zafferano);
}