/* ==========================================================================
   TelaStampiamo — Pagine interne (Contatti)
   Dark editorial coerente con la home. Form custom con focus states curati.
   ========================================================================== */

.ts-page {
	max-width: var(--ts-maxw);
	margin-inline: auto;
	padding: calc(var(--ts-header-h) + var(--ts-space-2xl)) var(--ts-gutter) var(--ts-space-2xl);
}

/* Pagine interne: leggero backdrop sfumato dietro la nav (legge sopra il contenuto) */
body.page #ts-header,
body.ts-internal #ts-header {
	background: linear-gradient(to bottom, rgba(13, 13, 13, 0.9), rgba(13, 13, 13, 0));
}

/* --- Hero pagina --- */
.ts-page-hero { margin-bottom: var(--ts-space-2xl); max-width: 50rem; }
.ts-page-title {
	font-family: var(--ts-font-display);
	font-size: clamp(2.6rem, 1.6rem + 4vw, 6rem);
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-top: var(--ts-space-sm);
}
.ts-page-title span { color: var(--ts-red); }
.ts-page-lead {
	margin-top: var(--ts-space-md);
	color: var(--ts-text-dim);
	font-size: var(--ts-text-lg);
	max-width: 44ch;
}

/* --- Griglia contatti --- */
.ts-contact-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

/* --- Colonna canali: un solo componente, stesso stile per tutti i contatti --- */
.ts-channels { display: grid; gap: var(--ts-space-sm); align-content: start; }
.ts-channel {
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ts-gray-2); border-left-width: 2px;
	border-radius: var(--ts-radius);
	background: color-mix(in oklab, var(--ts-gray) 82%, transparent);
	color: var(--ts-white); text-decoration: none;
	transition: transform var(--ts-dur-normal) var(--ts-ease-out-expo),
	            border-color var(--ts-dur-normal) var(--ts-ease-out-expo),
	            background var(--ts-dur-normal);
}
.ts-channel-ic { display: grid; place-items: center; }
.ts-channel-ic .ts-ic { width: 24px; height: 24px; color: var(--ts-text-dim); transition: color var(--ts-dur-normal); }
.ts-channel-text { display: grid; gap: 0.15rem; }
.ts-channel-label { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-text-dim); }
.ts-channel-value { font-size: var(--ts-text-lg); line-height: 1.2; color: var(--ts-white); }
.ts-channel:hover { transform: translateY(-3px); border-color: var(--ts-red); background: color-mix(in oklab, var(--ts-gray) 94%, transparent); }
.ts-channel:hover .ts-ic { color: var(--ts-red); }
.ts-channel:focus-visible { outline: 2px solid var(--ts-red); outline-offset: 3px; }
/* WhatsApp: stesso componente, solo accento rosso (icona + bordo sinistro) */
.ts-channel--wa { border-left-color: var(--ts-red); }
.ts-channel--wa .ts-ic { color: var(--ts-red); }
.ts-channel-note { margin-top: var(--ts-space-2xs); font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-text-dim); }

/* Sfondo a shader inchiostro (canvas fisso dietro il contenuto, sopra lo sfondo body) */
.ts-contatti-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.ts-page--contatti { position: relative; }
.ts-page--contatti > .ts-page-hero,
.ts-page--contatti > .ts-contact-grid { position: relative; z-index: 1; }

/* --- Form --- */
.ts-contact-form-wrap {
	position: relative;
	background: color-mix(in oklab, var(--ts-gray) 88%, transparent);
	border: var(--ts-hairline);
	border-radius: 6px;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	backdrop-filter: blur(2px);
}
.ts-form { display: grid; gap: var(--ts-space-lg); }

.ts-field { position: relative; display: grid; gap: 0.5rem; }
.ts-field label {
	font-family: var(--ts-font-mono);
	font-size: var(--ts-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ts-text-dim);
	transition: color var(--ts-dur-normal) var(--ts-ease-out-quint);
}
.ts-field:focus-within label { color: var(--ts-red); }

.ts-field input,
.ts-field textarea,
.ts-select select {
	width: 100%;
	font-family: var(--ts-font-body);
	font-size: var(--ts-text-base);
	color: var(--ts-white);
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--ts-gray-2);
	padding: 0.7rem 0;
	transition: border-color var(--ts-dur-normal) var(--ts-ease-out-quint);
}
.ts-field input::placeholder,
.ts-field textarea::placeholder { color: color-mix(in oklab, var(--ts-white) 32%, transparent); }
.ts-field textarea { resize: vertical; min-height: 6rem; }

/* Underline rosso che si "disegna" al focus (ink-like) */
.ts-field::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--ts-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ts-dur-slow) var(--ts-ease-out-expo);
	pointer-events: none;
}
.ts-field:focus-within::after { transform: scaleX(1); }
.ts-field input:focus,
.ts-field textarea:focus,
.ts-select select:focus { outline: none; }

/* Select custom */
.ts-select { position: relative; }
.ts-select select {
	appearance: none;
	cursor: pointer;
	padding-right: 2rem;
}
.ts-select select option { background: var(--ts-gray); color: var(--ts-white); }
.ts-select-arrow {
	position: absolute;
	right: 0.2rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ts-red);
	pointer-events: none;
}

/* Submit (riusa lo stile del bottone CTA del finale) */
.ts-form-submit { justify-self: start; margin-top: var(--ts-space-2xs); }
.ts-form-submit[disabled] { opacity: 0.6; pointer-events: none; }
.ts-form-privacy { font-size: var(--ts-text-xs); color: var(--ts-text-dim); }

/* Stato invio */
.ts-form-status {
	padding: var(--ts-space-sm) var(--ts-space-md);
	border-radius: 4px;
	margin-bottom: var(--ts-space-md);
	font-size: var(--ts-text-sm);
	border: 1px solid transparent;
}
.ts-form-status--ok { background: rgba(40, 160, 80, 0.12); border-color: rgba(40, 160, 80, 0.5); color: #b7f0c8; }
.ts-form-status--error { background: rgba(193, 39, 45, 0.12); border-color: var(--ts-red); color: #f2c5c5; }

/* Honeypot: fuori schermo ma raggiungibile dai bot */
.ts-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Ink splat al focus (creato da contatti.js) */
.ts-ink-splat {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	transform-origin: center;
	will-change: transform, opacity;
}

/* --- Reveal allo scroll (solo con motion attivo) --- */
html.ts-js:not(.ts-static) [data-reveal] { opacity: 0; transform: translateY(26px); }

/* --- Responsive --- */
@media (max-width: 820px) {
	.ts-contact-grid { grid-template-columns: 1fr; gap: var(--ts-space-lg); }
	.ts-channels { order: 1; }
	.ts-contact-form-wrap { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
	html.ts-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   CHI SIAMO
   ========================================================================== */

/* Background shader (fisso, dietro tutto) */
#ts-about-bg {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	display: block;
}

.ts-page--about { position: relative; z-index: 1; }
/* Leggibilita' del testo sopra lo shader */
.ts-page--about h1, .ts-page--about h2, .ts-page--about h3 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85); }
.ts-page--about p { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9); }

.ts-section-label {
	font-family: var(--ts-font-mono);
	font-size: var(--ts-text-xs);
	letter-spacing: var(--ts-tracking-wide);
	text-transform: uppercase;
	color: var(--ts-red);
	margin-bottom: var(--ts-space-md);
}

.ts-about-hero { margin-bottom: var(--ts-space-2xl); max-width: 52rem; }

/* Manifesto */
.ts-about-manifesto { margin-block: var(--ts-space-2xl); }
.ts-manifesto-title {
	font-family: var(--ts-font-display);
	font-size: clamp(2.8rem, 1.6rem + 5vw, 7rem);
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.ts-manifesto-title span { color: var(--ts-red); }
.ts-manifesto-text { margin-top: var(--ts-space-lg); color: var(--ts-text-dim); font-size: var(--ts-text-lg); max-width: 46ch; }

/* Metodo */
.ts-about-method { margin-block: var(--ts-space-2xl); }
.ts-method-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
.ts-method-step {
	padding-top: var(--ts-space-md);
	border-top: var(--ts-hairline);
	display: grid;
	gap: 0.5rem;
}
.ts-method-num {
	font-family: var(--ts-font-mono);
	font-size: var(--ts-text-sm);
	color: var(--ts-red);
	letter-spacing: 0.1em;
}
.ts-method-name { font-family: var(--ts-font-display); font-size: var(--ts-text-2xl); text-transform: uppercase; letter-spacing: 0.02em; }
.ts-method-desc { color: var(--ts-text-dim); font-size: var(--ts-text-base); max-width: 36ch; }

/* La città */
.ts-about-city { margin-block: var(--ts-space-2xl); max-width: 50rem; }
.ts-city-title {
	font-family: var(--ts-font-display);
	font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.5rem);
	line-height: 0.95;
	text-transform: uppercase;
}
.ts-city-text { margin-top: var(--ts-space-md); color: var(--ts-text-dim); font-size: var(--ts-text-lg); max-width: 48ch; }

/* CTA */
.ts-about-cta {
	margin-top: var(--ts-space-2xl);
	padding-top: var(--ts-space-xl);
	border-top: var(--ts-hairline);
	display: grid;
	gap: var(--ts-space-md);
	justify-items: start;
}
.ts-about-cta-line { font-family: var(--ts-font-display); font-size: var(--ts-text-2xl); text-transform: uppercase; letter-spacing: 0.02em; }

@media (max-width: 700px) {
	.ts-method-steps { grid-template-columns: 1fr; }
}

/* Fallback senza shader: pattern statico che evoca curve di livello */
html.ts-static #ts-about-bg,
html.ts-no-js #ts-about-bg { display: none; }
html.ts-static .ts-page--about,
html.ts-no-js .ts-page--about {
	background:
		radial-gradient(120% 80% at 80% 10%, rgba(193, 39, 45, 0.10), transparent 60%),
		repeating-radial-gradient(circle at 75% 25%, transparent 0 38px, rgba(193, 39, 45, 0.06) 39px 40px),
		var(--ts-black);
}
/* Shader ATTIVO anche su mobile (chi-siamo.js aggiunge .ts-about-live): il canvas torna visibile
   e lo sfondo statico viene rimosso. La doppia classe (.ts-static.ts-about-live) vince per
   specificità sulle regole di fallback qui sopra → niente dipendenza dall'ordine. */
html.ts-static.ts-about-live #ts-about-bg { display: block; }
html.ts-static.ts-about-live .ts-page--about { background: transparent; }

/* ==========================================================================
   PRIVACY & COOKIE POLICY
   Testo denso: lo shader d'inchiostro (stesso di Contatti) resta un dettaglio
   periferico, il contenuto vive dentro pannelli opachi per la leggibilità.
   ========================================================================== */

.ts-privacy-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; opacity: 0.55; }
.ts-page--privacy { position: relative; }
.ts-page--privacy > .ts-page-hero,
.ts-page--privacy > .ts-legal-layout { position: relative; z-index: 1; }

.ts-legal-layout {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

/* --- Indice (TOC) --- */
.ts-legal-toc {
	position: sticky;
	top: calc(var(--ts-header-h) + var(--ts-space-md));
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: var(--ts-space-md);
	background: color-mix(in oklab, var(--ts-gray) 82%, transparent);
	border: var(--ts-hairline);
	border-radius: var(--ts-radius);
}
.ts-legal-toc-h { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); letter-spacing: var(--ts-tracking-wide); text-transform: uppercase; color: var(--ts-red); margin-bottom: 0.2rem; }
.ts-legal-toc a { font-size: var(--ts-text-sm); color: var(--ts-text-dim); border-left: 2px solid transparent; padding-left: 0.75rem; transition: color var(--ts-dur-fast), border-color var(--ts-dur-fast); }
.ts-legal-toc a:hover { color: var(--ts-white); }
.ts-legal-toc a.is-active { color: var(--ts-white); border-left-color: var(--ts-red); }

/* --- Contenuto legale --- */
.ts-legal-content { display: grid; gap: var(--ts-space-lg); }
/* L'header e' fixed: senza questo, un anchor jump (TOC, link #cookie nel footer, back/forward)
   scrolla il titolo esattamente sotto l'header, nascondendolo. */
.ts-legal-content [id] { scroll-margin-top: calc(var(--ts-header-h) + var(--ts-space-md)); }
.ts-legal-section {
	background: color-mix(in oklab, var(--ts-gray) 88%, transparent);
	border: var(--ts-hairline);
	border-radius: 6px;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	backdrop-filter: blur(2px);
}
.ts-legal-section h2 {
	font-size: var(--ts-text-2xl);
	letter-spacing: 0.01em;
	margin-bottom: var(--ts-space-md);
}
.ts-legal-section h3 {
	font-family: var(--ts-font-body);
	font-size: var(--ts-text-lg);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ts-white);
	margin-top: var(--ts-space-lg);
	margin-bottom: var(--ts-space-xs);
	padding-top: var(--ts-space-md);
	border-top: var(--ts-hairline);
}
.ts-legal-section h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ts-legal-section p,
.ts-legal-section li { color: var(--ts-text-dim); max-width: 68ch; }
.ts-legal-section p + p { margin-top: var(--ts-space-xs); }
.ts-legal-section ul { padding-left: 1.25rem; display: grid; gap: 0.4rem; margin-top: 0.5rem; }
.ts-legal-section a { color: var(--ts-white); text-decoration: underline; text-underline-offset: 2px; }
.ts-legal-section a:hover { color: var(--ts-red); }
.ts-legal-section code { font-family: var(--ts-font-mono); font-size: 0.9em; color: var(--ts-white); }
.ts-legal-updated { font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); color: var(--ts-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* Placeholder ben visibile per i dati legali ancora da compilare (inc/consent.php). */
.ts-legal-todo {
	background: transparent;
	color: var(--ts-red);
	font-family: var(--ts-font-mono);
	font-size: 0.85em;
	border: 1px dashed var(--ts-red);
	border-radius: 3px;
	padding: 0.1em 0.5em;
}

/* Bottone inline (dentro un paragrafo) per riaprire il banner cookie. */
.ts-legal-inline-btn {
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font: inherit; color: var(--ts-white); text-decoration: underline; text-underline-offset: 2px;
}
.ts-legal-inline-btn:hover { color: var(--ts-red); }

/* Tabelle cookie (grid, non <table>: più facile da rendere responsive). */
.ts-legal-table { display: grid; margin-top: 0.75rem; border: var(--ts-hairline); border-radius: var(--ts-radius); overflow: hidden; }
.ts-legal-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--ts-space-sm); padding: 0.65rem 0.9rem; border-top: var(--ts-hairline); }
.ts-legal-row:first-child { border-top: 0; }
.ts-legal-row--head { background: color-mix(in oklab, var(--ts-gray) 70%, transparent); font-family: var(--ts-font-mono); font-size: var(--ts-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ts-text-dim); }
.ts-legal-row span { font-size: var(--ts-text-sm); color: var(--ts-text-dim); }

@media (max-width: 820px) {
	.ts-legal-layout { grid-template-columns: 1fr; }
	/* Strip orizzontale scorrevole (non più una griglia verticale): niente "Indice" in colonna
	   che si spezza su più righe, ogni voce resta su una riga sola e scorre col dito. */
	.ts-legal-toc {
		position: static;
		display: flex;
		flex-wrap: nowrap;
		gap: 1.5rem;
		overflow-x: auto;
		padding-block: var(--ts-space-sm);
		-webkit-overflow-scrolling: touch;
	}
	.ts-legal-toc-h { display: none; }
	.ts-legal-toc a {
		flex: none;
		white-space: nowrap;
		border-left: 0;
		padding-left: 0;
		padding-bottom: 0.3rem;
		border-bottom: 2px solid transparent;
	}
	.ts-legal-toc a.is-active { border-bottom-color: var(--ts-red); }
	.ts-legal-row { grid-template-columns: 1fr; gap: 0.15rem; }
	.ts-legal-row--head { display: none; }
}