/* ==========================================================
   Componenti di base: superfici, focus, pulsanti, link con freccia.
   Le classi storiche (.gs-btn, .gs-biglink, .um-button, Jetpack, newsletter)
   sono mappate qui, così le pagine esistenti cambiano senza riscriverle.
   ========================================================== */

/* ---------- Superfici ----------
   Ogni fascia dichiara i propri colori; pulsanti, link e focus li leggono da qui. */
.gs-surface--paper,
body {
	--s-bg: var(--gs-paper);
	--s-fg: var(--gs-ink);
	--s-muted: var(--gs-grey);
	--s-link: var(--gs-ink);
	--s-link-hover: var(--gs-acid);
	--s-focus: var(--gs-ink);
	--s-focus-halo: var(--gs-paper);
	--s-btn-bg: var(--gs-ink);
	--s-btn-fg: var(--gs-paper);
	--s-btn-bg-hover: var(--gs-acid);
	--s-btn-fg-hover: var(--gs-on-accent);
	--s-btn-line: var(--gs-ink);
}

.gs-surface--pink {
	--s-bg: var(--gs-pink);
	--s-link-hover: var(--gs-acid-deep);
	--s-focus-halo: var(--gs-pink);
	--s-btn-bg-hover: var(--gs-acid-deep);
}

.gs-surface--ink,
.gs-section--ink,
.gs-foot {
	--s-bg: var(--gs-ink);
	--s-fg: var(--gs-paper);
	--s-muted: var(--gs-pink);
	--s-link: var(--gs-paper);
	--s-link-hover: var(--gs-acid-light);
	--s-focus: var(--gs-paper);
	--s-focus-halo: var(--gs-ink);
	--s-btn-bg: var(--gs-paper);
	--s-btn-fg: var(--gs-ink);
	--s-btn-bg-hover: var(--gs-acid-light);
	--s-btn-fg-hover: var(--gs-ink);
	--s-btn-line: var(--gs-paper);
}

/* Sul rame il cambio di colore va verso il bianco; il focus è un doppio anello espresso + crema */
.gs-surface--copper,
.gs-section--acid {
	--s-bg: var(--gs-acid);
	--s-fg: var(--gs-on-accent);
	--s-muted: var(--gs-paper);
	--s-link: var(--gs-paper);
	--s-link-hover: var(--gs-on-accent);
	--s-focus: var(--gs-ink);
	--s-focus-halo: var(--gs-paper);
	--s-btn-bg: var(--gs-ink);
	--s-btn-fg: var(--gs-paper);
	--s-btn-bg-hover: var(--gs-paper);
	--s-btn-fg-hover: var(--gs-ink);
	--s-btn-line: var(--gs-paper);
}

.gs-surface--paper,
.gs-surface--pink,
.gs-surface--ink,
.gs-surface--copper {
	background: var(--s-bg);
	color: var(--s-fg);
}

/* ---------- Focus ----------
   Anello pieno più alone del colore di fondo: resta visibile su crema, espresso e rame. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--s-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--s-focus-halo);
	border-radius: 4px;
}
.gs-button:focus-visible { border-radius: var(--gs-radius-pill); }

/* ---------- Pulsanti ----------
   Tre livelli: primario (pieno), secondario (contorno), testuale (.gs-link).
   Tre misure: --sm 44px, base 52px, --lg 60px. Il testo resta in minuscolo:
   il maiuscolo si legge male in russo e non esiste in cinese. */
.gs-button,
.gs-btn .wp-block-button__link,
a.gs-btn,
.wp-block-jetpack-contact-form .wp-block-button__link,
.wp-block-jetpack-form-step-navigation .wp-block-button__link,
.um .um-button,
.um input[type="submit"].um-button,
.um a.um-button,
.gs-nl__row button[type="submit"],
.gs-ws__btn {
	--btn-h: var(--gs-control);
	--btn-px: 24px;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--btn-h);
	max-width: 100%;
	padding: 10px var(--btn-px) !important;
	border: 2px solid var(--s-btn-bg) !important;
	border-radius: var(--gs-radius-pill) !important;
	background: var(--s-btn-bg) !important;
	color: var(--s-btn-fg) !important;
	box-shadow: none !important;
	font-family: var(--gs-display) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.005em !important;
	text-transform: none !important;
	text-decoration: none !important;
	/* Le etichette lunghe (russo, tedesco) vanno a capo invece di uscire dallo schermo */
	white-space: normal;
	text-align: center;
	text-wrap: balance;
	cursor: pointer;
	transform: none !important;
	transition:
		background-color var(--gs-fast) var(--gs-ease),
		border-color var(--gs-fast) var(--gs-ease),
		color var(--gs-fast) var(--gs-ease);
	-webkit-tap-highlight-color: transparent;
}

.gs-button:hover,
.gs-btn .wp-block-button__link:hover,
a.gs-btn:hover,
.wp-block-jetpack-contact-form .wp-block-button__link:hover,
.wp-block-jetpack-form-step-navigation .wp-block-button__link:hover,
.um .um-button:hover,
.um a.um-button:hover,
.gs-nl__row button[type="submit"]:hover,
.gs-ws__btn:hover {
	background: var(--s-btn-bg-hover) !important;
	border-color: var(--s-btn-bg-hover) !important;
	color: var(--s-btn-fg-hover) !important;
}

/* Sempre rotondi: a riposo, al passaggio, al focus e alla pressione.
   Il vecchio style.css azzerava gli angoli al passaggio (.gs-btn … :hover { border-radius: 0 !important }):
   :is() prende la specificità più alta tra i selettori e vince comunque. */
:is(.gs-button, .gs-btn .wp-block-button__link, a.gs-btn, .wp-block-jetpack-contact-form .wp-block-button__link, .wp-block-jetpack-form-step-navigation .wp-block-button__link, .um .um-button, .um input[type="submit"].um-button, .um a.um-button, .gs-nl__row button[type="submit"], .gs-ws__btn, .gs-head-extras .gs-menu-login > .menu-link, .gs-mnav__toggle, .gs-lang__toggle, .gs-totop),
:is(.gs-button, .gs-btn .wp-block-button__link, a.gs-btn, .wp-block-jetpack-contact-form .wp-block-button__link, .wp-block-jetpack-form-step-navigation .wp-block-button__link, .um .um-button, .um input[type="submit"].um-button, .um a.um-button, .gs-nl__row button[type="submit"], .gs-ws__btn, .gs-head-extras .gs-menu-login > .menu-link, .gs-mnav__toggle, .gs-lang__toggle, .gs-totop):is(:hover, :focus, :focus-visible, :active) {
	border-radius: var(--gs-radius-pill) !important;
}

/* Pressione: il pulsante si abbassa di tono, senza spostarsi */
.gs-button:active,
.gs-btn .wp-block-button__link:active,
a.gs-btn:active,
.um .um-button:active,
.gs-nl__row button[type="submit"]:active {
	filter: brightness(0.88);
}

/* Secondario: contorno nel colore del testo, si riempie al passaggio */
.gs-button--secondary,
.gs-btn--ghost .wp-block-button__link,
.wp-block-jetpack-form-step-navigation .is-style-outline .wp-block-button__link,
.um .um-button.um-alt,
.um a.um-button.um-alt,
.gs-ws__btn--ghost {
	background: transparent !important;
	border-color: var(--s-btn-line) !important;
	color: var(--s-fg) !important;
}
.gs-button--secondary:hover,
.gs-btn--ghost .wp-block-button__link:hover,
.wp-block-jetpack-form-step-navigation .is-style-outline .wp-block-button__link:hover,
.um .um-button.um-alt:hover,
.um a.um-button.um-alt:hover,
.gs-ws__btn--ghost:hover {
	background: var(--s-btn-bg) !important;
	border-color: var(--s-btn-bg) !important;
	color: var(--s-btn-fg) !important;
}

.gs-button--sm { --btn-h: var(--gs-control-sm); --btn-px: 18px; font-size: 16px !important; }
.gs-button--lg { --btn-h: var(--gs-control-lg); --btn-px: 30px; font-size: 19px !important; }
.gs-button--block { display: flex !important; width: 100%; }

/* Disattivato: tono spento, nessun cambio al passaggio */
.gs-button:disabled,
.gs-button[aria-disabled="true"],
.um .um-button:disabled,
.gs-nl__row button[type="submit"]:disabled {
	background: var(--gs-pink) !important;
	border-color: var(--gs-pink) !important;
	color: var(--gs-grey) !important;
	cursor: not-allowed;
	filter: none;
}

/* In attesa (login, newsletter, form): il filo gira al posto della freccia */
.gs-button[aria-busy="true"] { cursor: progress; }
.gs-button[aria-busy="true"]::after {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.gs-button[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.5; }
}

/* ---------- Link con freccia ----------
   Stile unico per tutti i richiami ad altre pagine: titoli cliccabili, CTA testuali, "Tutti i lavori".
   Al passaggio, al focus e alla pressione cambia il colore e la freccia scorre di 4px.
   La freccia è disegnata in CSS (stessi tratti arrotondati del filo) e ha uno spazio fisso: niente salti. */
.gs-link,
.gs-foot__write,
.gs-button--arrow {
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.gs-link,
.gs-foot__write {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: var(--gs-control-sm);
	color: var(--s-link) !important;
	font-weight: 600;
	text-decoration: none !important;
	background: none !important;
	transition: color var(--gs-fast) var(--gs-ease);
}

.gs-link::after,
.gs-foot__write::after,
.gs-button--arrow::after {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
	transition: transform var(--gs-fast) var(--gs-ease);
}

.gs-link:hover,
.gs-link:focus-visible,
.gs-link:active,
.gs-foot__write:hover,
.gs-foot__write:focus-visible,
.gs-foot__write:active {
	color: var(--s-link-hover) !important;
	text-decoration: none !important;
}

.gs-link:hover::after,
.gs-link:focus-visible::after,
.gs-link:active::after,
.gs-foot__write:hover::after,
.gs-foot__write:focus-visible::after,
.gs-foot__write:active::after,
.gs-button--arrow:hover::after,
.gs-button--arrow:focus-visible::after,
.gs-button--arrow:active::after {
	transform: translateX(var(--gs-nudge));
}

/* Le frecce scritte a mano nei contenuti ("Scrivimi →") le toglie gabrysarte_arrow_links()
   in PHP, che aggiunge al loro posto .gs-link o .gs-button--arrow: funziona anche senza JS. */

/* Titoli cliccabili (card dei progetti, voci di elenco): stesso comportamento, freccia facoltativa */
.gs-titlelink {
	color: var(--s-link);
	text-decoration: none;
	transition: color var(--gs-fast) var(--gs-ease);
}
.gs-titlelink:hover,
.gs-titlelink:focus-visible,
.gs-titlelink:active { color: var(--s-link-hover); }

/* Esterni: freccia diagonale */
.gs-link--external { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gs-link--external:hover::after,
.gs-link--external:focus-visible::after { transform: translate(calc(var(--gs-nudge) * 0.7), calc(var(--gs-nudge) * -0.7)); }

/* Indietro / verso l'alto */
.gs-link--back { flex-direction: row-reverse; }
.gs-link--back::after { transform: scaleX(-1); }
.gs-link--back:hover::after,
.gs-link--back:focus-visible::after { transform: scaleX(-1) translateX(var(--gs-nudge)); }

/* ---------- Link nel testo corrente ----------
   Dentro un paragrafo un link deve distinguersi senza affidarsi al solo colore:
   resta una sottolineatura sottile, che si colora al passaggio. */
.entry-content p:not(.gs-biglink) a:not([class]),
.entry-content li a:not([class]),
.gs-prose a:not([class]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: color var(--gs-fast) var(--gs-ease), text-decoration-color var(--gs-fast) var(--gs-ease);
}
.entry-content p:not(.gs-biglink) a:not([class]):hover,
.entry-content li a:not([class]):hover,
.gs-prose a:not([class]):hover {
	color: var(--s-link-hover);
	text-decoration-color: currentColor;
}

/* ---------- Link grandi (Contatti) ----------
   Un indirizzo email a 40px non ha spazi dove andare a capo: su 320px usciva di 124px dallo schermo.
   La colonna della griglia si allargava al contenuto; con min-width 0 resta larga quanto lo schermo. */
.gs-split > * { min-width: 0; }
.gs-biglink,
.entry-content p.gs-biglink {
	overflow-wrap: anywhere;
	font-size: clamp(24px, 6vw, 96px);
}
/* Sull'espresso il rame pieno non si legge (2.4:1): al passaggio si usa il rame chiaro */
.gs-biglink a:hover,
.gs-section--ink .gs-biglink a:hover { color: var(--s-link-hover); }

/* ---------- Testo nascosto ma letto dagli screen reader ---------- */
.gs-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Ticker delle competenze ----------
   Markup riscritto da gabrysarte_marquee() (inc/components.php).
   Ogni voce porta con sé lo spazio e il nodo: le due metà sono identiche, il giro non scatta. */
.gs-marquee {
	position: relative;
	color: var(--gs-paper);
}
.gs-marquee__track {
	display: inline-flex;
	gap: 0 !important;
	will-change: transform;
}
.gs-marquee__item {
	display: inline-flex;
	align-items: center;
	flex: none;
	white-space: nowrap;
}
.gs-marquee__knot {
	flex: none;
	width: 1.15em;
	height: 0.7em;
	margin: 0 0.55em;
	color: var(--gs-acid-light);
}
.gs-marquee:hover .gs-marquee__track { animation-play-state: paused; }

/* Senza movimento: le voci restano ferme e vanno a capo, una sola volta */
@media (prefers-reduced-motion: reduce) {
	.gs-marquee__track {
		animation: none !important;
		display: flex;
		flex-wrap: wrap;
		padding-left: var(--gs-gutter) !important;
		padding-right: var(--gs-gutter) !important;
	}
	.gs-marquee__item--dup { display: none !important; }
}

/* ---------- Newsletter ----------
   Campo e pulsante sulla stessa riga anche sul telefono, alti uguali (52px),
   con gli stessi angoli del resto del sito; consenso e messaggi leggibili. */
.gs-nl .gs-nl__row {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: 8px !important;
}
.gs-nl .gs-nl__row input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: var(--gs-control) !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 2px solid var(--s-fg) !important;
	border-radius: var(--gs-radius-pill) !important;
	background: transparent !important;
	color: var(--s-fg) !important;
	font: 400 17px/1 var(--gs-display) !important;
}
.gs-nl .gs-nl__row input[type="email"]::placeholder { color: var(--s-muted); opacity: 1; }
.gs-nl .gs-nl__row input[type="email"]:focus-visible {
	outline: 3px solid var(--s-focus) !important;
	outline-offset: 3px;
}
.gs-nl .gs-nl__row input[type="email"][aria-invalid="true"] { border-color: var(--gs-acid-light) !important; }
.gs-nl .gs-nl__row button[type="submit"] {
	flex: none;
	width: auto !important;
	height: var(--gs-control) !important;
	--btn-px: 20px;
}
.gs-nl .gs-nl__row button[type="submit"][aria-busy="true"] { cursor: progress; }
.gs-nl .gs-nl__row button[type="submit"][aria-busy="true"]::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: gs-spin 0.8s linear infinite;
}

.gs-nl .gs-nl__consent {
	align-items: flex-start !important;
	gap: 12px;
	font-size: 15px !important;
	line-height: 1.45;
	color: var(--s-muted);
}
.gs-nl .gs-nl__consent input[type="checkbox"] {
	width: 22px !important;
	height: 22px !important;
	margin-top: 0 !important;
	border-radius: 6px !important;
}
.gs-nl .gs-nl__consent input[type="checkbox"]:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; }
.gs-nl .gs-nl__consent a { color: var(--s-fg) !important; }

.gs-nl .gs-nl__msg {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px !important;
	border-radius: var(--gs-radius);
	font-size: 15px !important;
	line-height: 1.45;
}
.gs-nl .gs-nl__msg--ok,
.gs-nl .gs-nl__msg--exists { background: var(--gs-pink) !important; color: var(--gs-ink) !important; }
.gs-nl .gs-nl__msg--err { background: var(--gs-acid) !important; color: var(--gs-on-accent) !important; }

/* Telefoni stretti: il pulsante resta compatto, il campo prende il resto */
@media (max-width: 360px) {
	.gs-nl .gs-nl__row button[type="submit"] { --btn-px: 16px; font-size: 16px !important; }
}

/* ---------- Torna su ----------
   Discreto, in basso a destra; site.js lo mostra dopo ~1,5 schermate
   e lo nasconde con il banner dei cookie aperto o col footer in vista. */
.gs-totop {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 900;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--gs-paper);
	border-radius: var(--gs-radius-pill);
	background: var(--gs-ink);
	color: var(--gs-paper);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--gs-ink) 22%, transparent);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--gs-fast) var(--gs-ease), transform var(--gs-fast) var(--gs-ease), visibility 0s linear var(--gs-fast), background-color var(--gs-fast) var(--gs-ease);
	--s-focus: var(--gs-ink);
	--s-focus-halo: var(--gs-paper);
}
.gs-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.gs-totop:hover { background: var(--gs-acid); }
.gs-totop svg { transition: transform var(--gs-fast) var(--gs-ease); }
.gs-totop:hover svg,
.gs-totop:focus-visible svg { transform: translateY(calc(var(--gs-nudge) * -1)); }
@media print { .gs-totop { display: none !important; } }

/* Footer: sul telefono testo e modulo della newsletter uno sotto l'altro,
   altrimenti il campo email resta largo 54px nella seconda colonna */
@media (max-width: 760px) {
	.gs-foot .gs-foot__news {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px;
	}
}

/* ---------- Parole lunghe nei titoli ----------
   In russo e tedesco una parola sola può superare la larghezza del telefono:
   sillabazione vera invece di un taglio a caso, e titoli grandi un po' più piccoli. */
:lang(ru) :is(h1, h2, .gs-display, .gs-title),
:lang(de) :is(h1, h2, .gs-display, .gs-title) {
	hyphens: auto;
	overflow-wrap: break-word !important;
}
@media (max-width: 600px) {
	:lang(ru) .entry-content .gs-display,
	:lang(de) .entry-content .gs-display { font-size: 11.5vw !important; }
}

/* "Scrivimi" del footer: su schermi stretti le parole lunghe (es, ru, de) non escono dallo schermo */
.gs-foot__write { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) {
	.gs-foot__write { font-size: min(48px, 11.5vw) !important; }
}

/* Righe "Cosa faccio" della home: una parola lunga (ru "Изобразительное") non allarga la colonna */
.gs-row > * { min-width: 0; }
.gs-row h3 { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Pagina non trovata (404.php) ---------- */
.gs-404 { width: 100%; }
.gs-404__body {
	display: grid;
	justify-items: start;
	gap: 18px;
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(56px, 10vw, 140px) var(--gs-gutter, 24px);
}
.gs-404__body .gs-filo { width: 72px; height: 72px; color: var(--gs-acid); }
.gs-404__code {
	margin: 0;
	font-family: var(--gs-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--gs-acid-deep);
}
.gs-404__title { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.gs-404__lead { max-width: 52ch; margin: 0; font-size: clamp(18px, 1.6vw, 22px); }
.gs-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 12px 0 0; }

/* Link "Vai al contenuto": visibile solo col focus, come un pulsante del sito */
.skip-link.screen-reader-text:focus {
	top: 12px !important;
	left: 12px !important;
	z-index: 100000;
	padding: 12px 20px !important;
	border-radius: var(--gs-radius-pill) !important;
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
	font-size: 15px !important;
	font-weight: 600;
	outline: 3px solid var(--gs-acid) !important;
	outline-offset: 2px;
	text-decoration: none !important;
}

/* Titoli sulle fasce rame: bianchi come il testo (l'espresso sul rame arriva a 2.4:1) */
.gs-section--acid :is(h1, h2, h3, h4, .gs-title) { color: var(--s-fg) !important; }

/* Directory dei membri (Ultimate Member): i grigi del plugin non arrivano a 4.5:1 sul crema */
.um-members-none p,
.um-member-directory-filters,
.um-member-directory-filters a { color: var(--s-muted) !important; }