/* ==========================================================================
   Tack System — base tipografica e componenti ricorrenti
   Dipende da tokens.css. Le classi qui sotto sono pensate per essere
   assegnate anche dall'editor Elementor (campo "Classi CSS"), cosi' le
   pagine restano modificabili senza toccare il codice.
   ========================================================================== */

/* --- Reset minimo ------------------------------------------------------- */
body.tk {
  font-family: var(--tk-font);
  font-size: var(--tk-fs-body);
  line-height: var(--tk-lh-body);
  color: var(--tk-ink);
  background: var(--tk-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tk img { max-width: 100%; height: auto; display: block; }
.tk svg { display: block; }
/* :where() azzera la specificita' del selettore: cosi' il reset non batte
   le classi dei bottoni, che arrivano dopo e devono poter dare il colore. */
.tk :where(a) { color: inherit; text-decoration: none; }

/* Il reset di Hello Elementor colora OGNI link al passaggio e alla pressione:
   `a:active, a:hover { color: #336 }`, un blu notte. Ha specificita' (0,1,1) e
   batteva il nostro reset, che sta dentro `:where()` e quindi non ne ha
   nessuna: al passaggio bottoni e link viravano al blu.
   Qui si rimette l'eredita' anche per i due stati. `:where()` tiene la
   specificita' a (0,2,0): abbastanza per battere il padre, e i componenti che
   hanno un colore proprio se lo riprendono con la loro regola :hover, subito
   sotto — e' il motivo per cui ogni variante di .tk-btn ripete il colore
   anche quando non cambia. */
.tk :where(a):hover,
.tk :where(a):active { color: inherit; }

/* --- Contenitore -------------------------------------------------------- */
.tk-container {
  width: 100%;
  max-width: var(--tk-container);
  margin-inline: auto;
  padding-inline: var(--tk-gutter);
}

/* --- Sezioni ------------------------------------------------------------ */
.tk-section        { padding-block: 112px; }
.tk-section--sm    { padding-block: 80px; }
.tk-section--md    { padding-block: 96px; }
.tk-section--dark  { background: var(--tk-black); color: var(--tk-on-dark); }
.tk-section--light { background: var(--tk-light); }

/* --- Scala tipografica -------------------------------------------------- */
.tk-eyebrow {
  font-size: var(--tk-fs-eyebrow);
  line-height: var(--tk-lh-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tk-ls-eyebrow);
  text-transform: uppercase;
  margin: 0;
}
/* Sopratitolo in pillola: stessa forma del bottone, ma non e' un bottone —
   niente link, niente stato al passaggio. Introdotto il 24/09/2026 per le
   pagine settore. Si mette accanto a .tk-eyebrow, non al suo posto. */
.tk-pill {
  display: inline-flex;
  align-items: center;
  background: var(--tk-orange);
  color: var(--tk-white);
  padding: 7px 16px 6px;
  border-radius: var(--tk-r-pill);
  letter-spacing: var(--tk-ls-label);
}

.tk-label {
  font-size: var(--tk-fs-label);
  line-height: var(--tk-lh-label);
  font-weight: 600;
  letter-spacing: var(--tk-ls-label);
  text-transform: uppercase;
  margin: 0;
}
.tk-h1 {
  font-size: var(--tk-fs-h1);
  line-height: var(--tk-lh-h1);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
}
.tk-h2 {
  font-size: var(--tk-fs-h2);
  line-height: var(--tk-lh-h2);
  font-weight: 700;
  margin: 0;
}
.tk-h3 {
  font-size: var(--tk-fs-h3);
  line-height: var(--tk-lh-h3);
  font-weight: 700;
  margin: 0;
}
.tk-lead { font-size: var(--tk-fs-lead); line-height: var(--tk-lh-lead); margin: 0; }
.tk-body { font-size: var(--tk-fs-body); line-height: var(--tk-lh-body); margin: 0; }
.tk-sm   { font-size: var(--tk-fs-sm);   line-height: var(--tk-lh-sm);   margin: 0; }
.tk-xs   { font-size: var(--tk-fs-xs);   line-height: var(--tk-lh-xs);   margin: 0; }

.tk-accent        { color: var(--tk-orange); }
.tk-accent-green  { color: var(--tk-green); }
.tk-accent-yellow { color: var(--tk-yellow); }
.tk-accent-purple { color: var(--tk-purple); }

/* --- Bottoni ------------------------------------------------------------ */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--tk-r-pill);
  font-size: var(--tk-fs-ui);
  line-height: var(--tk-lh-ui);
  font-weight: 700;
  text-align: center;
  padding: 14px 28px;
  cursor: pointer;
  transition: background-color var(--tk-ease), border-color var(--tk-ease),
              transform var(--tk-ease), box-shadow var(--tk-ease);
}
.tk-btn:focus-visible { outline: 2px solid var(--tk-orange); outline-offset: 3px; }
.tk-btn .tk-i { flex: none; }

.tk-btn--primary { background: var(--tk-orange); color: var(--tk-white); box-shadow: var(--tk-sh-cta); }
.tk-btn--primary:hover,
.tk-btn--primary:active { background: var(--tk-orange-deep); color: var(--tk-white); }

.tk-btn--green { background: var(--tk-green); color: var(--tk-white); box-shadow: var(--tk-sh-btn); padding: 16px 32px; }
.tk-btn--green:hover,
.tk-btn--green:active { background: #128055; color: var(--tk-white); }

.tk-btn--ghost { background: transparent; border-color: var(--tk-on-dark-25); color: var(--tk-white); }
.tk-btn--ghost:hover,
.tk-btn--ghost:active { border-color: var(--tk-white); background: rgba(255, 255, 255, 0.06); color: var(--tk-white); }

.tk-btn--glass {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--tk-white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tk-btn--glass:hover,
.tk-btn--glass:active { background: rgba(0, 0, 0, 0.45); color: var(--tk-white); }

.tk-btn--white { background: var(--tk-white); color: var(--tk-orange); }
.tk-btn--white:hover,
.tk-btn--white:active { background: #f3f3f3; color: var(--tk-orange); }

.tk-btn--sm { padding: 10px 20px; gap: 8px; font-weight: 600; }

/* Pagine di sezione (24/09/2026). Nel Figma i bottoni dell'apertura sono
   neri o bordati, e quelli della fascia finale bianchi con il testo nero.
   Come per le altre varianti, ogni stato interattivo ripete il colore: il
   reset di Hello Elementor colora di #336 ogni link al passaggio. */
.tk-btn--dark { background: var(--tk-ink); color: var(--tk-white); }
.tk-btn--dark:hover,
.tk-btn--dark:focus,
.tk-btn--dark:active { background: #000; color: var(--tk-white); }

.tk-btn--outline { background: transparent; border-color: var(--tk-border-ink-25); color: var(--tk-ink); }
.tk-btn--outline:hover,
.tk-btn--outline:focus,
.tk-btn--outline:active { background: rgba(10, 10, 10, 0.04); border-color: var(--tk-ink); color: var(--tk-ink); }

.tk-btn--light { background: var(--tk-white); color: var(--tk-ink); }
.tk-btn--light:hover,
.tk-btn--light:focus,
.tk-btn--light:active { background: #f3f3f3; color: var(--tk-ink); }

.tk-btn--lg { padding: 16px 28px; }

/* Link testuale con freccia */
.tk-linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tk-fs-ui);
  line-height: var(--tk-lh-ui);
  font-weight: 600;
}
.tk-linkarrow .tk-i { transition: transform var(--tk-ease); }
.tk-linkarrow:hover .tk-i { transform: translateX(3px); }

/* --- Icone -------------------------------------------------------------- */
.tk-i { display: inline-block; flex: none; }
.tk-i svg, .tk-i img { width: 100%; height: 100%; display: block; }
.tk-i--16 { width: 16px; height: 16px; }
.tk-i--18 { width: 18px; height: 18px; }
.tk-i--20 { width: 20px; height: 20px; }
.tk-i--22 { width: 22px; height: 22px; }
.tk-i--28 { width: 28px; height: 28px; }

/* Riquadro colorato dietro l'icona */
.tk-iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--tk-r-icon);
  flex: none;
}
.tk-iconbox--orange { background: var(--tk-orange-08); }
.tk-iconbox--green  { background: var(--tk-green-08); }
.tk-iconbox--yellow { background: var(--tk-yellow-08); }
.tk-iconbox--purple { background: var(--tk-purple-08); }

/* Riquadri piu' piccoli delle pagine di sezione: 40 e 36px, raggio 12. */
.tk-iconbox--sm { width: 40px; height: 40px; border-radius: var(--tk-r-icon-sm); }
.tk-iconbox--xs { width: 36px; height: 36px; border-radius: var(--tk-r-icon-sm); }

/* Variante a fondo pieno: il colore di marca al posto della velatura, con il
   simbolo bianco. Usata nella striscia sotto l'hero dal 23/09/2026. Va dopo
   le velature, altrimenti perderebbe a parita' di specificita'. */
.tk-iconbox--piena { width: 48px; height: 48px; color: var(--tk-white); }
.tk-iconbox--piena.tk-iconbox--orange { background: var(--tk-orange); }
.tk-iconbox--piena.tk-iconbox--green  { background: var(--tk-green); }
.tk-iconbox--piena.tk-iconbox--yellow { background: var(--tk-yellow); }
.tk-iconbox--piena.tk-iconbox--purple { background: var(--tk-purple); }

/* --- Utilita' ----------------------------------------------------------- */
.tk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Punti di rottura --------------------------------------------------- */
/* 1100px: il menu orizzontale non ci sta piu' -> menu a scomparsa
   1024px: le griglie a 4/5/6 colonne passano a 2/3
    640px: tutto su una colonna, come nei mockup a 401px           */

@media (max-width: 1024px) {
  .tk-section     { padding-block: 80px; }
  .tk-section--sm { padding-block: 64px; }
  .tk-section--md { padding-block: 72px; }
  .tk-h1 { font-size: 48px; line-height: 1.15; }
  .tk-h2 { font-size: 38px; line-height: 1.2; }
}

@media (max-width: 640px) {
  :root { --tk-gutter: 24px; }
  .tk-section     { padding-block: 64px; }
  .tk-section--sm { padding-block: 48px; }
  .tk-section--md { padding-block: 56px; }

  /* CORPO FLUIDO AL POSTO DELLA SILLABAZIONE (24/09/2026).
     Il problema: a 48px fissi una parola italiana lunga — "riqualificazione",
     "Trasformiamo" — e' piu' larga dei 334px di contenuto che restano su un
     telefono da 382px, e usciva tagliata (invisibile, perche' sotto i 1100px
     html ha overflow-x: clip, che nasconde lo sforamento invece di produrre
     una barra di scorrimento).
     Prima rimediavamo con `hyphens: auto`, ma spezzare la parola col trattino
     e' brutto ed e' stato tolto su richiesta. Ora il titolo si RIMPICCIOLISCE
     quanto basta: il corpo segue la larghezza della finestra e resta dentro i
     limiti del Figma ai due estremi.
     I conti: 8.4vw su un telefono da 390px fa ~33px, e la parola piu' lunga
     che abbiamo (16 caratteri) occupa ~325px sui 342 disponibili. A 640px il
     valore tocca il tetto di 48px, che e' il corpo del mockup a 401px. */
  .tk-h1 { font-size: clamp(26px, 8.4vw, 48px); line-height: 1.08; }
  .tk-h2 { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.22; }

  /* Rete di sicurezza per una parola fuori scala (un URL, un nome tecnico):
     va a capo senza trattino invece di sforare. Con il corpo fluido non
     dovrebbe mai scattare. */
  .tk-h1, .tk-h2 { overflow-wrap: break-word; }
  .tk-lead { font-size: 16px; line-height: 26px; }
}