/**
 * GOYN — base
 *
 * Fonte: src/styles.css:17-83 del progetto React originale.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * REGOLA DI ISOLAMENTO — leggere prima di aggiungere righe a questo file
 * ═══════════════════════════════════════════════════════════════════════
 *
 * L'originale usava selettori globali (`a`, `button`, `img`, `input`, `*`) che in
 * Elementor colpirebbero anche i widget di terze parti e l'interfaccia
 * dell'editor. Qui quelle regole sono state RACCHIUSE in due wrapper:
 *
 *   .goyn-widget   ← ogni widget del plugin custom-elementor-widgets
 *   .goyn-chrome   ← gli elementi di cornice del tema (grana, cursore, barra…)
 *
 * A livello di `body` restano SOLO le proprietà che sono compito legittimo di un
 * tema: fondo, colore del testo, famiglia di base, antialiasing, selezione.
 *
 * ❌ Non aggiungere qui `h1 {}`, `p {}`, `button {}`, `img {}` non prefissati.
 * ✅ Aggiungi dentro `.goyn-widget` / `.goyn-chrome`, o in un foglio di widget.
 */

/* ============================================================
   1. Livello body — compito del tema, non tocca i widget
   ============================================================ */

body.goyn-site {
	background-color: var(--goyn-cream);
	color: var(--goyn-ink);
	font-family: var(--goyn-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Le decorazioni fuori quadro (filigrane "GOYN", foto in parallasse) non
	   devono generare scroll orizzontale. `clip` e non `hidden`: `hidden` su
	   body creerebbe un contenitore di scroll e romperebbe `position: sticky`
	   dei figli. Neutralizzato nell'editor da editor.css. */
	overflow-x: clip;
	max-width: 100%;
}

body.goyn-site ::selection {
	background-color: var(--goyn-peach);
	color: var(--goyn-petrol-deep);
}

/* Focus visibile — ASSENTE nell'originale, aggiunto qui.
   Il cursore custom nasconde quello di sistema: senza un anello di focus la
   navigazione da tastiera diventa impossibile da seguire. `:focus-visible` non
   disturba chi usa il mouse. */
body.goyn-site :focus-visible {
	outline: 2px solid var(--goyn-rust);
	outline-offset: 3px;
}

/* ============================================================
   2. Reset racchiuso — vale solo dentro i widget GOYN
   ============================================================ */

.goyn-widget,
.goyn-widget *,
.goyn-widget *::before,
.goyn-widget *::after {
	box-sizing: border-box;
}

.goyn-widget a {
	color: inherit;
	text-decoration: none;
}

.goyn-widget button {
	font: inherit;
	color: inherit;
}

.goyn-widget input,
.goyn-widget textarea,
.goyn-widget select {
	font: inherit;
	min-width: 0;
	max-width: 100%;
}

.goyn-widget img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   3. Tipografia — classi di utilità prefissate
   ------------------------------------------------------------
   Corrispondenza con l'originale:
     .anton    → .goyn-display
     .oswald   → .goyn-label
     .playfair → .goyn-accent
     .eyebrow  → .goyn-eyebrow
   La rinomina evita collisioni con altri temi/plugin che usino nomi di font
   come nomi di classe. Tabella completa in docs/ASSET-MAP.md.
   ============================================================ */

.goyn-display {
	font-family: var(--goyn-font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.goyn-label {
	font-family: var(--goyn-font-label);
	text-transform: uppercase;
	letter-spacing: 2px;
}

.goyn-accent {
	font-family: var(--goyn-font-accent);
	font-style: italic;
}

.goyn-eyebrow {
	display: inline-block;
	font-family: var(--goyn-font-label);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 5px;
	text-transform: uppercase;
}

/* Titolo "cavo": testo trasparente con solo il contorno.
   `-webkit-text-stroke` non ha equivalente standard, ma è supportato da
   Chrome, Safari, Firefox ed Edge. Il fallback (nessun contorno su testo
   trasparente = testo invisibile) sarebbe grave, quindi `color` resta
   impostato e viene sovrascritto solo se il contorno è disponibile. */
.goyn-outline {
	color: transparent;
	-webkit-text-stroke: 1.6px currentColor;
}

@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
	.goyn-outline {
		color: inherit;
		opacity: 0.55;
	}
}

/* ============================================================
   4. Split text — titoli che entrano riga per riga
   ------------------------------------------------------------
   Il padding-top con margin-top negativo è necessario: senza, la maschera
   `overflow: hidden` taglia gli accenti delle maiuscole (È, À) quando la
   line-height è compressa sotto 1. Non rimuovere.
   ============================================================ */

.goyn-line {
	display: block;
	overflow: hidden;
	padding-top: 0.14em;
	margin-top: -0.14em;
}

.goyn-line > span {
	display: block;
	will-change: transform;
}

/* Stato di partenza: fuori dalla maschera. Lo script del widget lo rimuove
   quando la riga entra in viewport. Senza `.goyn-anim-ready` sul body — cioè
   se il JavaScript non parte — il testo resta visibile: nessun contenuto
   invisibile in caso di errore. */
body.goyn-anim-ready .goyn-line > span[data-goyn-reveal] {
	transform: translateY(110%) rotate(2deg);
}

.goyn-word {
	display: inline-block;
	white-space: pre;
}

/* ============================================================
   5. Contenitore di larghezza
   ============================================================ */

.goyn-wrap {
	width: 100%;
	max-width: var(--goyn-wrap);
	margin-inline: auto;
}

.goyn-wrap--narrow {
	max-width: var(--goyn-wrap-narrow);
}

/*
 * Testo per chi non vede lo schermo: presente nel documento e nell'albero di
 * accessibilità, invisibile a occhio.
 *
 * ⚠️ NON si usa `display: none` né `visibility: hidden`: entrambi lo togliono
 *    anche ai lettori di schermo, che è l'opposto dello scopo. Serve un
 *    rettangolo di un pixel, ritagliato.
 *
 * Il caso reale sono le stelle delle valutazioni: cinque tracciati SVG non
 * dicono "4,8 su 5" a nessuno, e il valore va scritto a parole.
 */
.goyn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   6. prefers-reduced-motion
   ------------------------------------------------------------
   L'originale usava `* { animation-duration: .01ms !important }`: con `*` e
   `!important` avrebbe congelato anche l'interfaccia dell'editor Elementor.
   Qui l'effetto è identico per il sito, ma confinato ai nostri wrapper.
   Le animazioni JavaScript sono disattivate a monte dallo script (che legge la
   stessa preferenza), quindi questa è la seconda linea di difesa per il CSS.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-widget *,
	.goyn-widget *::before,
	.goyn-widget *::after,
	.goyn-chrome *,
	.goyn-chrome *::before,
	.goyn-chrome *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Nessuna riga deve restare fuori dalla maschera se le animazioni sono
	   disattivate: il titolo va mostrato subito, non mai. */
	body.goyn-anim-ready .goyn-line > span[data-goyn-reveal] {
		transform: none;
	}
}