/*
Theme Name: Svetix Core
Theme URI: https://svetix.ch/
Author: Svetix
Author URI: https://svetix.ch/
Description: Tema high-tech minimale con 10 varianti colore, sfondo a particelle e pannello visuale. Colori, tipografia, layout, testata e footer si controllano con interruttori e cursori, senza toccare il codice. Compatibile WPBakery, con app installabile inclusa. Attiva il tema figlio "Svetix Core Child" per le tue personalizzazioni.
Version: 1.27.0
Requires at least: 6.0
Tested up to: 6.8
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: svetix-core
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* ==========================================================================
   SVETIX CORE — FOGLIO DI STILE PRINCIPALE
   --------------------------------------------------------------------------
   Indice:
   0.  Token di fallback (:root)
   1.  Reset & base
   2.  Tipografia
   3.  Layout / container
   4.  Header (standard | transparent | glass)
   5.  Navigazione + stili menu futuristici
   6.  Bottoni & form
   7.  Contenuti / articoli / commenti
   8.  Footer
   9.  Utility & animazioni
   10. Accessibilita / reduced-motion / print
   11. Mobile hardening (touch, notch, tabelle, viewport dinamico)

   NOTA: tutti i colori/tipografie derivano da variabili CSS iniettate
   dinamicamente dal Companion Plugin (classe Svetix_Dynamic_CSS).
   I valori qui sotto sono SOLO fallback se il plugin non e attivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOKEN DI FALLBACK
   -------------------------------------------------------------------------- */
:root {
	/* Colori (preset "light" di default) */
	--sx-bg: #ffffff;
	--sx-bg-alt: #fafafb;
	--sx-surface: #ffffff;
	--sx-surface-2: #f4f4f6;
	--sx-text: #0b0b0c;
	--sx-text-muted: #6b7280;
	--sx-primary: #111113;
	--sx-primary-contrast: #ffffff;
	--sx-accent: #6b7280;
	--sx-border: #ececef;
	--sx-border-strong: #d9d9df;
	--sx-shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 8px 24px rgba(11, 11, 12, .05);
	--sx-shadow-lg: 0 2px 4px rgba(11, 11, 12, .04), 0 24px 60px rgba(11, 11, 12, .09);
	--sx-gradient: linear-gradient(135deg, #111113 0%, #3a3a40 100%);
	--sx-glow: none;
	--sx-overlay: rgba(255, 255, 255, .72);

	/* Tipografia */
	--sx-font-heading: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sx-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--sx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--sx-fs-base: 17px;
	--sx-lh-base: 1.65;
	--sx-fw-body: 400;
	--sx-fw-heading: 600;
	--sx-ls-heading: -0.022em;
	--sx-h1: clamp(2.4rem, 5.2vw, 4.1rem);
	--sx-h2: clamp(1.9rem, 3.6vw, 2.9rem);
	--sx-h3: clamp(1.4rem, 2.4vw, 1.85rem);
	--sx-h4: 1.25rem;

	/* Layout */
	--sx-container: 1200px;
	--sx-gutter: clamp(20px, 4vw, 40px);
	--sx-section-y: clamp(56px, 8vw, 120px);
	--sx-radius: 14px;
	--sx-radius-sm: 8px;
	--sx-radius-lg: 24px;
	--sx-radius-pill: 999px;
	--sx-border-w: 1px;

	/* Motion */
	--sx-ease: cubic-bezier(.22, 1, .36, 1);
	--sx-dur: .38s;
	--sx-header-h: 76px;
}

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sx-header-h) + 24px);
}

body {
	margin: 0;
	background-color: var(--sx-bg);
	background-image: var(--sx-body-bg-image, none);
	color: var(--sx-text);
	font-family: var(--sx-font-body);
	font-size: var(--sx-fs-base);
	font-weight: var(--sx-fw-body);
	line-height: var(--sx-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	/*
	 * Serve a impedire lo scorrimento laterale, ma attenzione:
	 * "overflow-x: hidden" trasforma il body in un contenitore di scorrimento,
	 * e da quel momento "position: sticky" sui discendenti NON funziona piu —
	 * la testata fissa resta ferma dov'e invece di seguire la pagina.
	 * "clip" taglia allo stesso modo senza creare il contenitore: e per questo
	 * che la seconda dichiarazione vince sui browser che la conoscono, mentre
	 * i piu vecchi ricadono sulla prima.
	 */
	overflow-x: hidden;
	overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe { max-width: 100%; height: auto; display: block; }

a {
	color: var(--sx-primary);
	text-decoration: none;
	transition: color var(--sx-dur) var(--sx-ease), opacity var(--sx-dur) var(--sx-ease);
}
a:hover { opacity: .78; }

hr {
	border: 0;
	height: var(--sx-border-w);
	background: var(--sx-border);
	margin: var(--sx-section-y) 0;
}

::selection {
	background: var(--sx-primary);
	color: var(--sx-primary-contrast);
}

:focus-visible {
	outline: 2px solid var(--sx-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .sx-heading {
	font-family: var(--sx-font-heading);
	font-weight: var(--sx-fw-heading);
	letter-spacing: var(--sx-ls-heading);
	line-height: 1.1;
	margin: 0 0 .55em;
	color: var(--sx-text);
	text-wrap: balance;
}
h1 { font-size: var(--sx-h1); }
h2 { font-size: var(--sx-h2); }
h3 { font-size: var(--sx-h3); }
h4 { font-size: var(--sx-h4); }
h5 { font-size: 1.05rem; }
h6 { font-size: .92rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sx-text-muted); }

/* Nessun testo scende sotto i 12px: sotto quella soglia il maiuscoletto
   spaziato diventa faticoso da leggere, soprattutto su schermi piccoli. */
:root { --sx-fs-micro: .78rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

small { font-size: .85em; color: var(--sx-text-muted); }

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 0 1.25rem 1.6rem;
	border-left: 2px solid var(--sx-primary);
	font-size: 1.12em;
	color: var(--sx-text);
}
blockquote cite { display: block; margin-top: .8rem; font-size: .8em; color: var(--sx-text-muted); font-style: normal; }

code, kbd, pre, samp { font-family: var(--sx-font-mono); font-size: .9em; }
code {
	background: var(--sx-surface-2);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	padding: .15em .45em;
}
pre {
	background: var(--sx-surface-2);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	padding: 1.25rem 1.4rem;
	overflow-x: auto;
	line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; }

ul, ol { padding-left: 1.35em; margin: 0 0 1.15em; }
li { margin-bottom: .4em; }

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: .95em;
}
th, td {
	padding: .85rem 1rem;
	border-bottom: var(--sx-border-w) solid var(--sx-border);
	text-align: left;
}
th { font-family: var(--sx-font-heading); font-weight: 600; }

/* --------------------------------------------------------------------------
   3. LAYOUT / CONTAINER
   -------------------------------------------------------------------------- */
.sx-container {
	width: 100%;
	max-width: var(--sx-container);
	margin-inline: auto;
	padding-inline: var(--sx-gutter);
}
.sx-container--narrow { max-width: min(760px, var(--sx-container)); }
.sx-container--wide { max-width: min(1560px, 100%); }
.sx-container--full { max-width: 100%; padding-inline: 0; }

.sx-site { display: flex; flex-direction: column; min-height: 100vh; }
.sx-main { flex: 1 0 auto; padding-block: var(--sx-section-y); }
.sx-layout--boxed .sx-site { max-width: 1440px; margin-inline: auto; box-shadow: var(--sx-shadow-lg); }

.sx-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px);
}
.sx-has-sidebar .sx-content-grid { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 900px) {
	.sx-has-sidebar .sx-content-grid { grid-template-columns: minmax(0, 1fr); }
}

.sx-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	background: var(--sx-primary);
	color: var(--sx-primary-contrast);
	padding: .8rem 1.2rem;
	border-radius: 0 0 var(--sx-radius-sm) 0;
}
.sx-skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.sx-header {
	position: relative;
	z-index: 100;
	width: 100%;
	transition: background-color var(--sx-dur) var(--sx-ease),
	            box-shadow var(--sx-dur) var(--sx-ease),
	            border-color var(--sx-dur) var(--sx-ease),
	            backdrop-filter var(--sx-dur) var(--sx-ease);
}
.sx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 48px);
	min-height: var(--sx-header-h);
}

/* Brand */
.sx-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.sx-brand__logo { display: block; }

/*
 * L'altezza e quella impostata nel pannello, la larghezza la calcola il
 * browser dalle proporzioni del logo.
 *
 * Nota: qui serve "height", non "max-height". Con max-height il logo puo solo
 * rimpicciolirsi rispetto alla sua altezza naturale: alzando il cursore oltre
 * quella, non succedeva niente. Il max-width resta come rete di sicurezza sui
 * telefoni, dove un logo molto largo sfonderebbe la barra.
 */
.sx-brand__logo img,
.sx-brand__logo svg {
	height: var(--sx-logo-h, 32px);
	width: auto;
	max-width: 100%;
}
.sx-brand__title {
	font-family: var(--sx-font-heading);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: -.02em;
	margin: 0;
	white-space: nowrap;
}
.sx-brand__title a { color: var(--sx-text); }
.sx-brand__tagline { font-size: .78rem; color: var(--sx-text-muted); margin: 0; }

/* 4a. Variante STANDARD */
.sx-header--standard {
	background: var(--sx-bg);
	border-bottom: var(--sx-border-w) solid var(--sx-border);
}

/* 4b. Variante TRANSPARENT (minimale, si sovrappone all'hero) */
.sx-header--transparent {
	position: absolute;
	inset: 0 0 auto 0;
	background: transparent;
	border-bottom: var(--sx-border-w) solid transparent;
}
.sx-header--transparent.is-stuck {
	position: fixed;
	background: var(--sx-overlay);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--sx-border);
}

/* 4c. Variante FLOATING GLASSMORPHIC */
.sx-header--glass {
	position: fixed;
	inset: clamp(10px, 1.6vw, 20px) 0 auto 0;
	background: transparent;
	border: 0;
	pointer-events: none;
}
.sx-header--glass .sx-header__inner {
	pointer-events: auto;
	background: var(--sx-overlay);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-pill);
	padding-inline: clamp(18px, 2.4vw, 30px);
	min-height: 62px;
	box-shadow: var(--sx-shadow);
	transition: box-shadow var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease);
}
.sx-header--glass.is-stuck .sx-header__inner { box-shadow: var(--sx-shadow-lg); }

/* Spaziatore per header fissi/assoluti */
.sx-header-spacer { height: var(--sx-header-h); }
.sx-header--standard + .sx-header-spacer { display: none; }

/* --------------------------------------------------------------------------
   5. NAVIGAZIONE — stili menu futuristici
   -------------------------------------------------------------------------- */
.sx-nav { display: flex; align-items: center; }
.sx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(4px, 1.4vw, 12px); }
.sx-nav li { margin: 0; position: relative; }
.sx-nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem .8rem;
	font-size: .93rem;
	font-weight: 500;
	letter-spacing: -.008em;
	color: var(--sx-text-muted);
	border-radius: var(--sx-radius-pill);
	white-space: nowrap;
	transition: color var(--sx-dur) var(--sx-ease), background-color var(--sx-dur) var(--sx-ease);
}
.sx-nav a:hover,
.sx-nav .current-menu-item > a,
.sx-nav .current_page_item > a,
.sx-nav .current-menu-ancestor > a { color: var(--sx-text); opacity: 1; }

/* 5a. UNDERLINE — linea che si espande dal centro */
.sx-menu--underline a::after {
	content: "";
	position: absolute;
	left: .8rem;
	right: .8rem;
	bottom: .25rem;
	height: 1.5px;
	background: var(--sx-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--sx-dur) var(--sx-ease);
}
.sx-menu--underline a:hover::after,
.sx-menu--underline .current-menu-item > a::after { transform: scaleX(1); }

/* 5b. PILL — pastiglia morbida */
.sx-menu--pill a:hover,
.sx-menu--pill .current-menu-item > a { background: var(--sx-surface-2); }

/* 5c. GLOW — alone neon (ideale su preset Cyber-Minimal) */
.sx-menu--glow a { overflow: hidden; }
.sx-menu--glow a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--sx-gradient);
	opacity: 0;
	transform: scale(.85);
	transition: opacity var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease);
	z-index: -1;
}
.sx-menu--glow a:hover { color: var(--sx-text); text-shadow: var(--sx-glow); }
.sx-menu--glow a:hover::before { opacity: .14; transform: scale(1); }

/* 5d. BRACKET — parentesi tecniche */
.sx-menu--bracket a::before,
.sx-menu--bracket a::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	color: var(--sx-primary);
	font-family: var(--sx-font-mono);
	transition: opacity var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease);
}
.sx-menu--bracket a::before { content: "["; left: .18rem; transform: translate(6px, -50%); }
.sx-menu--bracket a::after { content: "]"; right: .18rem; transform: translate(-6px, -50%); }
.sx-menu--bracket a:hover::before,
.sx-menu--bracket a:hover::after,
.sx-menu--bracket .current-menu-item > a::before,
.sx-menu--bracket .current-menu-item > a::after { opacity: .85; transform: translate(0, -50%); }

/* Sottomenu */
.sx-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 8px;
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	box-shadow: var(--sx-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease), visibility var(--sx-dur);
	z-index: 20;
}
.sx-nav li:hover > .sub-menu,
.sx-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sx-nav .sub-menu a { width: 100%; border-radius: var(--sx-radius-sm); padding: .55rem .7rem; }
.sx-nav .sub-menu a:hover { background: var(--sx-surface-2); }
.sx-nav .sub-menu .sub-menu { top: -8px; left: calc(100% + 6px); }
.sx-nav .menu-item-has-children > a::after { content: ""; width: 5px; height: 5px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.sx-menu--underline .menu-item-has-children > a::after { position: static; background: none; transform: rotate(45deg) translateY(-2px); }

/* Toggle mobile */
.sx-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	cursor: pointer;
	color: var(--sx-text);
	padding: 0;
}
.sx-nav-toggle__bars,
.sx-nav-toggle__bars::before,
.sx-nav-toggle__bars::after {
	display: block;
	width: 17px;
	height: 1.6px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--sx-dur) var(--sx-ease), opacity var(--sx-dur) var(--sx-ease);
}
.sx-nav-toggle__bars::before,
.sx-nav-toggle__bars::after { content: ""; position: absolute; }
.sx-nav-toggle__bars::before { transform: translateY(-5.5px); }
.sx-nav-toggle__bars::after { transform: translateY(5.5px); }
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars { background: transparent; }
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::before { transform: rotate(45deg); }
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::after { transform: rotate(-45deg); }

.sx-header__actions { display: flex; align-items: center; gap: .6rem; }

@media (max-width: 980px) {
	.sx-nav-toggle { display: inline-flex; position: relative; }
	.sx-nav {
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		right: 0;
		display: block;
		padding: 14px;
		background: var(--sx-surface);
		border: var(--sx-border-w) solid var(--sx-border);
		border-radius: var(--sx-radius-lg);
		box-shadow: var(--sx-shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease), visibility var(--sx-dur);
		max-height: 74vh;
		overflow-y: auto;
	}
	.sx-header--glass .sx-nav { left: var(--sx-gutter); right: var(--sx-gutter); }
	.sx-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
	.sx-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.sx-nav a { padding: .75rem .85rem; font-size: 1rem; }
	.sx-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: var(--sx-border-w) solid var(--sx-border);
		border-radius: 0;
		margin-left: .85rem;
		padding: 2px 0 2px 6px;
	}
}

/* --------------------------------------------------------------------------
   6. BOTTONI & FORM
   -------------------------------------------------------------------------- */
.sx-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--sx-font-heading);
	font-size: .93rem;
	font-weight: 550;
	line-height: 1;
	padding: .92rem 1.5rem;
	border-radius: var(--sx-radius-pill);
	border: var(--sx-border-w) solid transparent;
	cursor: pointer;
	text-align: center;
	transition: transform var(--sx-dur) var(--sx-ease),
	            box-shadow var(--sx-dur) var(--sx-ease),
	            background-color var(--sx-dur) var(--sx-ease),
	            border-color var(--sx-dur) var(--sx-ease),
	            color var(--sx-dur) var(--sx-ease);
}
.sx-btn--primary,
button,
input[type="submit"],
.wp-block-button__link {
	background: var(--sx-primary);
	color: var(--sx-primary-contrast);
}
.sx-btn--primary:hover,
button:hover,
input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--sx-shadow-lg), var(--sx-glow);
	opacity: 1;
}
.sx-btn--ghost {
	background: transparent;
	color: var(--sx-text);
	border-color: var(--sx-border-strong);
}
.sx-btn--ghost:hover { border-color: var(--sx-primary); transform: translateY(-2px); opacity: 1; }
.sx-btn--gradient {
	background: var(--sx-gradient);
	color: var(--sx-primary-contrast);
	border: 0;
}
.sx-btn--gradient:hover { transform: translateY(-2px); box-shadow: var(--sx-shadow-lg), var(--sx-glow); opacity: 1; }
.sx-btn--link { background: none; padding: .3rem 0; color: var(--sx-text); border-radius: 0; }
.sx-btn--sm { padding: .62rem 1.05rem; font-size: .85rem; }
.sx-btn--lg { padding: 1.08rem 1.9rem; font-size: 1rem; }
.sx-btn:active { transform: translateY(0); }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	font-family: inherit;
	font-size: .95rem;
	color: var(--sx-text);
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	padding: .8rem 1rem;
	transition: border-color var(--sx-dur) var(--sx-ease), box-shadow var(--sx-dur) var(--sx-ease);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--sx-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-primary) 16%, transparent);
}
label { display: inline-block; margin-bottom: .35rem; font-size: .88rem; color: var(--sx-text-muted); }

/* --------------------------------------------------------------------------
   7. CONTENUTI
   -------------------------------------------------------------------------- */
.sx-page-header { margin-bottom: clamp(32px, 5vw, 64px); }
.sx-page-header__eyebrow {
	display: inline-block;
	font-family: var(--sx-font-mono);
	font-size: var(--sx-fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sx-text-muted);
	margin-bottom: .9rem;
}

.sx-entry { margin-bottom: clamp(40px, 6vw, 72px); }
.sx-entry__thumb {
	overflow: hidden;
	border-radius: var(--sx-radius-lg);
	border: var(--sx-border-w) solid var(--sx-border);
	margin-bottom: 1.6rem;
}
.sx-entry__thumb img { width: 100%; transition: transform .7s var(--sx-ease); }
.sx-entry:hover .sx-entry__thumb img { transform: scale(1.035); }
.sx-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	font-family: var(--sx-font-mono);
	font-size: var(--sx-fs-micro);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sx-text-muted);
	margin-bottom: .8rem;
}
.sx-entry__title { margin-bottom: .6rem; }
.sx-entry__title a { color: var(--sx-text); }
.sx-entry__excerpt { color: var(--sx-text-muted); }
.sx-entry__more { margin-top: 1.1rem; }

.sx-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(24px, 3.4vw, 44px);
}

/* Pagina a tutta larghezza: le sezioni si occupano da sole della larghezza,
   quindi qui non serve nessuno spazio fra un blocco e l'altro — altrimenti
   fra due fasce a contatto comparirebbe una riga vuota. */
.sx-entry-content--full > * + * { margin-top: 0; }

.sx-entry-content > * + * { margin-top: 1.15em; }
.sx-entry-content img { border-radius: var(--sx-radius); }
.sx-entry-content .alignwide { width: min(1360px, 100vw - 2 * var(--sx-gutter)); margin-inline: auto; }
.sx-entry-content .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.alignleft { float: left; margin: .35rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: .35rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; display: block; }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

.sx-pagination { margin-top: clamp(40px, 6vw, 72px); }
.sx-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.sx-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 .7rem;
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	font-size: .9rem; color: var(--sx-text-muted);
	transition: all var(--sx-dur) var(--sx-ease);
}
.sx-pagination .page-numbers:hover { border-color: var(--sx-primary); color: var(--sx-text); }
.sx-pagination .page-numbers.current { background: var(--sx-primary); border-color: var(--sx-primary); color: var(--sx-primary-contrast); }

.sx-sidebar .widget {
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.sx-sidebar .widget-title { font-size: var(--sx-fs-micro); text-transform: uppercase; letter-spacing: .13em; color: var(--sx-text-muted); margin-bottom: 1rem; }
.sx-sidebar ul { list-style: none; padding: 0; }

.sx-comments { margin-top: clamp(48px, 7vw, 90px); padding-top: clamp(32px, 4vw, 56px); border-top: var(--sx-border-w) solid var(--sx-border); }
.sx-comments .comment-list { list-style: none; padding: 0; }
.sx-comments .comment-body {
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	padding: 1.4rem;
	margin-bottom: 1rem;
}
.sx-comments .children { list-style: none; padding-left: clamp(14px, 3vw, 40px); }
.sx-comments .avatar { border-radius: 50%; float: left; margin-right: .9rem; }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.sx-footer {
	flex-shrink: 0;
	background: var(--sx-bg-alt);
	border-top: var(--sx-border-w) solid var(--sx-border);
	color: var(--sx-text-muted);
	font-size: .92rem;
}
.sx-footer a { color: var(--sx-text-muted); }
.sx-footer a:hover { color: var(--sx-text); opacity: 1; }
.sx-footer__widgets {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	padding-block: clamp(44px, 6vw, 80px);
}
.sx-footer--columns .sx-footer__widgets { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sx-footer--minimal .sx-footer__widgets { display: none; }
.sx-footer--centered .sx-footer__widgets { grid-template-columns: 1fr; text-align: center; }
.sx-footer .widget-title {
	font-family: var(--sx-font-heading);
	font-size: var(--sx-fs-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--sx-text);
	margin-bottom: 1rem;
}
.sx-footer .widget ul { list-style: none; padding: 0; margin: 0; }
.sx-footer .widget li { margin-bottom: .5rem; }
.sx-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.6rem;
	border-top: var(--sx-border-w) solid var(--sx-border);
	font-size: .84rem;
}
.sx-footer--centered .sx-footer__bottom { justify-content: center; text-align: center; }
.sx-footer--minimal .sx-footer__bottom { border-top: 0; }
.sx-footer__social { display: flex; gap: .5rem; }
.sx-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: 50%;
	transition: all var(--sx-dur) var(--sx-ease);
}
.sx-footer__social a:hover { border-color: var(--sx-primary); transform: translateY(-2px); box-shadow: var(--sx-glow); }

/* --------------------------------------------------------------------------
   9. UTILITY & ANIMAZIONI
   -------------------------------------------------------------------------- */
.sx-surface {
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-lg);
	box-shadow: var(--sx-shadow);
}
.sx-muted { color: var(--sx-text-muted); }
.sx-mono { font-family: var(--sx-font-mono); letter-spacing: .04em; }
.sx-gradient-text {
	background: var(--sx-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sx-text-center { text-align: center; }
.sx-text-left { text-align: left; }
.sx-text-right { text-align: right; }
.sx-hidden { display: none !important; }

/* Rivelazione allo scroll (attivata da assets/js/theme.js) */
.sx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--sx-ease), transform .75s var(--sx-ease); will-change: opacity, transform; }
.sx-reveal.is-visible { opacity: 1; transform: none; }

/* Il nodo del logo pulsa piano: il marchio resta vivo senza distrarre.
   La regola prefers-reduced-motion piu sotto lo ferma per chi lo chiede. */
.sx-logo__node {
	transform-box: fill-box;
	transform-origin: center;
	animation: sx-node-pulse 3.4s ease-in-out infinite;
}
@keyframes sx-node-pulse {
	0%, 100% { opacity: .88; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.16); }
}

@keyframes sx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   10. ACCESSIBILITA / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.sx-reveal { opacity: 1; transform: none; }
}

@media print {
	.sx-header, .sx-footer, .sx-nav-toggle, .sx-sidebar { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Barra admin: evita che copra gli header fissi */
.admin-bar .sx-header--glass { top: calc(32px + clamp(10px, 1.6vw, 20px)); }
.admin-bar .sx-header--transparent.is-stuck { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .sx-header--glass { top: calc(46px + clamp(10px, 1.6vw, 20px)); }
	.admin-bar .sx-header--transparent.is-stuck { top: 46px; }
}

/* --------------------------------------------------------------------------
   11. MOBILE HARDENING
   Regole nate da un audit automatico su 320/390/430/768/1024/1440px.
   Criterio: si distingue il TOUCH dal solo schermo stretto usando
   (pointer: coarse) — un tablet a 1024px con le dita ha bisogno di tap
   target grandi tanto quanto un telefono, un desktop stretto no.
   -------------------------------------------------------------------------- */

/* 11a. Viewport dinamico: su iOS/Android la barra del browser compare e
   scompare. svh/dvh evitano il "salto" e il taglio del contenuto. */
@supports (height: 100svh) {
	.sx-site { min-height: 100svh; }
	.sx-hero--full { min-height: 88svh; }
}

/* 11b. Tap target minimi 44x44 (linea guida Apple/WCAG 2.5.8) */
@media (pointer: coarse) {

	.sx-btn,
	button,
	input[type="submit"],
	input[type="button"],
	.wp-block-button__link,
	.vc_btn3 {
		min-height: 44px;
	}

	.sx-btn--sm { padding-block: .78rem; min-height: 44px; }

	/* I link testuali ricevono area cliccabile senza spostare la grafica */
	.sx-btn--link {
		min-height: 44px;
		align-items: center;
		padding-block: .6rem;
	}

	.sx-nav-toggle { width: 46px; height: 46px; }

	.sx-nav a { min-height: 44px; }

	.sx-footer__social a { width: 44px; height: 44px; }

	.sx-pagination .page-numbers { min-width: 44px; height: 44px; }

	.sx-accordion__title { padding-block: 1.25rem; }

	/* Niente flash grigio al tocco: l'evidenza la danno gli stati :active */
	a, button, summary, input, select, textarea {
		-webkit-tap-highlight-color: transparent;
	}
}

/* 11c. Campi form: sotto i 16px iOS zooma automaticamente al focus e
   sballa il layout. Su touch si forza 16px, sul desktop resta il valore
   del design system. */
@media (pointer: coarse) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}
}

/* 11d. Tabelle, pre e iframe: scorrono nel proprio contenitore invece di
   sfondare la pagina. Il wrapper .sx-scroll-x lo applica theme.js. */
.sx-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	max-width: 100%;
	margin-bottom: 1.5rem;
}
.sx-scroll-x > table { margin-bottom: 0; min-width: 480px; }
.sx-scroll-x::-webkit-scrollbar { height: 6px; }
.sx-scroll-x::-webkit-scrollbar-thumb {
	background: var(--sx-border-strong);
	border-radius: var(--sx-radius-pill);
}

.sx-entry-content iframe,
.sx-entry-content video { max-width: 100%; }

/* 11e. Parole lunghe e URL non spezzabili non allargano piu la pagina */
.sx-entry-content,
.sx-card__text,
.sx-accordion__body,
.sx-comments .comment-body { overflow-wrap: break-word; word-break: break-word; }

/* 11f. Notch e barre di sistema (iPhone in verticale e in orizzontale) */
@supports (padding: env(safe-area-inset-left)) {
	.sx-container {
		padding-left: max(var(--sx-gutter), env(safe-area-inset-left));
		padding-right: max(var(--sx-gutter), env(safe-area-inset-right));
	}
	.sx-footer__bottom { padding-bottom: max(1.6rem, env(safe-area-inset-bottom)); }
}

/* 11g. Menu mobile: altezza con dvh, scroll contenuto, blocco dello
   scroll di pagina quando e aperto (classe messa da theme.js) */
@media (max-width: 980px) {
	.sx-nav { max-height: 74dvh; overscroll-behavior: contain; }
}
body.sx-nav-open { overflow: hidden; touch-action: none; }

/* 11h. Schermi molto stretti (320px) */
@media (max-width: 380px) {
	.sx-hero__actions { flex-direction: column; align-items: stretch; }
	.sx-hero__actions .sx-btn { width: 100%; }
	.sx-cta { flex-direction: column; align-items: stretch; }
	.sx-cta__actions .sx-btn { width: 100%; }
	.sx-header__cta { display: none; } /* il CTA resta nel menu, non stringe l'header */
	.sx-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* 11i. Telefono in orizzontale: hero a schermo pieno diventa scomodo */
@media (max-height: 520px) and (orientation: landscape) {
	.sx-hero--full { min-height: auto; padding-block: calc(var(--sx-section-y) * .8); }
	.sx-nav { max-height: 66dvh; }
}

/* 11j. Lo spaziatore usa l'altezza REALE dell'header misurata da theme.js
   (fallback sul valore del Customizer se il JS non e ancora partito). */
.sx-header-spacer { height: var(--sx-header-real-h, var(--sx-header-h)); }
html { scroll-padding-top: calc(var(--sx-header-real-h, var(--sx-header-h)) + 24px); }