/* ==========================================================================
   SVETIX — ASPETTO
   Due cose che il resto del tema non fa:
   1. le trame dello sfondo di pagina (la parte CSS: gli strati veri li
      compone il PHP dai colori della variante attiva);
   2. la famiglia di stile "Elegante", che NON cambia i colori — cambia il
      modo in cui il tema li usa.

   Perche una famiglia di stile e non venti opzioni separate: raggio, ombra,
   bordo, spaziatura e sottolineatura non sono scelte indipendenti. Un sito
   elegante non e un sito futuristico con il raggio a zero; e un altro
   insieme di regole, e cambiarle una alla volta porta quasi sempre a
   qualcosa che non e ne l'uno ne l'altro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRAME DI SFONDO
   Gli strati stanno in --sx-body-bg-image (scritta dal Companion). Qui resta
   solo cio che il PHP non puo dire: che la trama non deve scorrere con la
   pagina, e che le sezioni con un fondo proprio la coprono — e giusto cosi,
   e quel che da ritmo fra zone "di carta" e pannelli pieni.
   -------------------------------------------------------------------------- */
body[class*="sx-tex--"] {
	background-attachment: fixed;
	background-repeat: repeat;
}

/* La vignetta e l'unica che deve stare SOPRA il contenuto di sfondo delle
   sezioni, altrimenti gli angoli non si scuriscono mai. Resta comunque sotto
   al testo e non intercetta i clic. */
.sx-tex--vignetta .sx-site::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 42%, transparent 52%, var(--sx-tex-vignetta, rgba(0, 0, 0, .1)) 100%);
}
.sx-tex--vignetta .sx-site > * { position: relative; z-index: 1; }

@media print {
	body[class*="sx-tex--"] { background-image: none; }
	.sx-tex--vignetta .sx-site::after { display: none; }
}

/* --------------------------------------------------------------------------
   2. FAMIGLIA "ELEGANTE"
   Regola di fondo: togliere. Meno raggio, meno ombra, meno colore pieno,
   piu aria e piu filetti. Tutto resta appeso alle stesse variabili, quindi
   funziona identico su chiara, scura e neutra.
   -------------------------------------------------------------------------- */
.sx-style--elegante {
	--sx-radius: 6px;
	--sx-radius-lg: 10px;
	--sx-border-w: 1px;
}

/* I titoli respirano: interlinea piu stretta, spaziatura fra le lettere quasi
   nulla. Con un carattere graziato la crenatura negativa dei font futuristici
   fa sembrare le lettere incollate. */
.sx-style--elegante h1,
.sx-style--elegante h2,
.sx-style--elegante h3,
.sx-style--elegante .sx-hero__title,
.sx-style--elegante .sx-heading-block__title,
.sx-style--elegante .sx-cta__title {
	letter-spacing: -.005em;
	line-height: 1.12;
	font-weight: 500;
}

.sx-style--elegante .sx-hero__title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }

/* L'occhiello: maiuscoletto spaziato, con un filetto corto davanti. E il
   dettaglio piu "da rivista" di tutto il foglio, e costa tre righe. */
.sx-style--elegante .sx-eyebrow,
.sx-style--elegante .sx-frasi__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sx-font-body);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
}
.sx-style--elegante .sx-eyebrow::before,
.sx-style--elegante .sx-frasi__kicker::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

/* Bottoni: rettangolo appena smussato, niente alone, niente sollevamento.
   Il primario resta pieno perche deve restare il punto piu scuro (o piu
   chiaro) della pagina; il secondario diventa un filetto. */
.sx-style--elegante .sx-btn,
.sx-style--elegante .wp-block-button__link,
.sx-style--elegante .vc_btn3 {
	border-radius: 4px;
	box-shadow: none;
	letter-spacing: .04em;
	font-weight: 500;
	padding-inline: 1.5rem;
}
.sx-style--elegante .sx-btn:hover { transform: none; box-shadow: none; }
.sx-style--elegante .sx-btn--ghost,
.sx-style--elegante .sx-btn--secondary {
	background: transparent;
	border: 1px solid var(--sx-border-strong);
}
.sx-style--elegante .sx-btn--ghost:hover,
.sx-style--elegante .sx-btn--secondary:hover { border-color: var(--sx-primary); }

/* Schede: filetto invece di ombra. L'ombra e cio che fa sembrare "app" un
   sito; il filetto e cio che lo fa sembrare stampato. */
.sx-style--elegante .sx-card,
.sx-style--elegante .sx-plan,
.sx-style--elegante .sx-surface,
.sx-style--elegante .sx-caro__item {
	box-shadow: none;
	border: 1px solid var(--sx-border);
	background: var(--sx-surface);
	backdrop-filter: none;
}
.sx-style--elegante .sx-card:hover,
.sx-style--elegante .sx-plan:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--sx-border-strong);
}

/* L'icona della scheda perde il riquadro colorato e resta un segno. */
.sx-style--elegante .sx-card__icon {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--sx-accent);
}

/* Titoli di scheda e di sezione: un filetto sotto, come le testatine dei
   giornali. Si ferma a 2.4rem invece di attraversare tutta la colonna. */
.sx-style--elegante .sx-heading-block__title::after {
	content: "";
	display: block;
	width: 2.4rem;
	height: 1px;
	margin-top: 1.1rem;
	background: var(--sx-accent);
	opacity: .8;
}
.sx-style--elegante .sx-align-center .sx-heading-block__title::after { margin-inline: auto; }

/* I link NEL TESTO si sottolineano davvero, ma sotto la linea di base: e la
   differenza fra una sottolineatura che taglia le lettere e una che le
   accompagna.

   "Nel testo" va preso alla lettera: solo dentro a paragrafi, elenchi e
   citazioni. La prima versione diceva "ogni link dentro al contenuto" e
   sottolineava anche i titoli delle schede e i bottoni dei plugin di terze
   parti — sul catalogo telefoni ogni nome di modello era sottolineato. Un
   tema non deve entrare nel markup di casa d'altri. */
.sx-style--elegante .sx-entry-content p > a,
.sx-style--elegante .sx-entry-content li > a,
.sx-style--elegante .sx-entry-content blockquote a,
.sx-style--elegante .sx-card__text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	text-decoration-color: var(--sx-border-strong);
}
.sx-style--elegante .sx-entry-content p > a:hover,
.sx-style--elegante .sx-entry-content li > a:hover,
.sx-style--elegante .sx-card__text a:hover { text-decoration-color: currentColor; }

/* Stessa ragione: le regole "elegante" valgono per gli elementi del tema, non
   per quello che stampano gli altri plugin. Bottoni e schede di un plugin
   restano come sono — se un giorno vorranno adeguarsi, useranno le variabili. */
.sx-style--elegante [class*="pch-"] a,
.sx-style--elegante [class*="sqc-"] a,
.sx-style--elegante [class*="svtx-"] a { text-decoration: none; }

/* Testata: un filetto e basta. Niente pillola di vetro, niente ombra. */
.sx-style--elegante .sx-header--glass .sx-header__inner,
.sx-style--elegante .sx-header {
	box-shadow: none;
}
.sx-style--elegante .sx-header--glass .sx-header__inner {
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--sx-border);
	background: var(--sx-overlay);
}
.sx-style--elegante .sx-header--standard { border-bottom: 1px solid var(--sx-border); }

/* Menu: senza pastiglie, con il segno che cresce sotto la voce attiva. */
.sx-style--elegante .sx-nav a {
	letter-spacing: .02em;
	border-radius: 0;
}
.sx-style--elegante .sx-nav a.btn--p { border-radius: 4px; }

/* Fascia numeri e frasi: i numeri restano il pezzo forte, ma senza gradiente
   colorato — in un tema elegante un numero sfumato sembra un banner. */
.sx-style--elegante .sx-stat__value {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--sx-text);
	font-weight: 400;
}
.sx-style--elegante .sx-stat__label {
	letter-spacing: .2em;
	font-size: .68rem;
}

/* Le frasi: corsivo, come una citazione vera. */
.sx-style--elegante .sx-frasi__f { font-style: italic; font-weight: 400; }
.sx-style--elegante .sx-frasi--band {
	border-block: 1px solid var(--sx-border);
	background: var(--sx-bg-alt);
}
.sx-style--elegante .sx-frasi--band::before,
.sx-style--elegante .sx-frasi--band::after { display: none; }

/* Indice: il numero in tono minore, il titolo in evidenza. */
.sx-style--elegante .sx-indice__n {
	font-family: var(--sx-font-heading);
	font-weight: 400;
	opacity: .3;
}
.sx-style--elegante .sx-indice__riga::before { background: var(--sx-bg-alt); }
.sx-style--elegante .sx-indice__freccia { border-radius: 2px; }

/* Sezioni: un filetto fra una e l'altra quando hanno lo stesso fondo.
   :not() evita la riga doppia dove il colore gia cambia. */
.sx-style--elegante .sx-section + .sx-section:not(.sx-section--bg-alt):not(.sx-section--bg-surface):not(.sx-section--bg-gradient) {
	border-top: 1px solid var(--sx-border);
}

/* Pie di pagina: filetto sopra, niente fondo pieno. */
.sx-style--elegante .sx-footer {
	border-top: 1px solid var(--sx-border);
	background: transparent;
}

/* Immagini appena smussate: in un impaginato elegante l'angolo tondo grande
   e la cosa che stona per prima. */
.sx-style--elegante .sx-entry-content img,
.sx-style--elegante .sx-card__media img { border-radius: 3px; }

/* La griglia in vetro del carosello perde lo specchio. */
.sx-style--elegante .sx-caro__item { backdrop-filter: none; }