/*
Theme Name:   Tappa
Template:     hello-elementor
Description:  Tema figlio di Hello Elementor per il laboratorio "Tappa".
              Qui stanno i token del design system (colori, caratteri, spazi,
              angoli) e le poche regole che Elementor gratuito non sa scrivere:
              la fascia di loghi che scorre e la barra di schede che resta in
              alto. Un aggiornamento di Elementor o di Hello non tocca questo file.
Version:      1.0.0
Text Domain:  tappa
*/

:root {
	/* Colori (dai token del DESIGN.md) */
	--color-electric-lime: #beff50;
	--color-off-black-ink: #14140f;
	--color-off-white-canvas: #f5f5eb;
	--color-pure-white: #ffffff;
	--color-ash: #d2d2c8;
	--color-graphite: #6e6e64;
	--color-deep-charcoal: #30302a;
	--color-stone: #919183;
	--color-smoke: #b9b9b7;

	/* Carattere: OTSono e' proprietario, Inter e' il sostituto indicato */
	--font-otsono: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--radius-cards: 28px;
	--radius-inner: 18px;
	--radius-pills: 9999px;
	--radius-inputs: 8px;
	--page-max-width: 1200px;
}

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-pure-white);
	color: var(--color-off-black-ink);
	font-family: var(--font-otsono);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'ss01', 'cv11';
}

/* Hello Elementor mette margini e titoli propri: sulle pagine Tappa li togliamo */
.tappa-page .page-header,
.tappa-page .site-header,
.tappa-page .site-footer { display: none; }

a { color: inherit; }

/* Fuoco visibile da tastiera su tutto cio' che si clicca */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--color-off-black-ink);
	outline-offset: 3px;
}

/* ---- Fascia di loghi che scorre (Elementor non anima: la regola sta qui) ---- */
.tappa-marquee { overflow: hidden; }
.tappa-marquee-track {
	display: flex;
	width: max-content;
	animation: tappa-scorri 60s linear infinite;
}
.tappa-marquee:hover .tappa-marquee-track { animation-play-state: paused; }
@keyframes tappa-scorri {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Barra di schede che resta in alto mentre si scorre ---- */
.tappa-sticky {
	position: sticky;
	top: 88px;
	z-index: 16;
}

/* ---- Intestazione fissa in alto ---- */
.tappa-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Chi ha chiesto meno movimento non vede animazioni */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tappa-marquee-track { animation: none; }
}