/* main.css — stili base globali + componenti UI condivisi */

@import "tokens.css?v=cb1763";
@import "reset.css?v=20260522000013";
@import "grid.css?v=20260522000013";

/* ---- TIPOGRAFIA ----
   Solo H1 è bold (700). Tutti gli altri titoli (H2-H6) sono semibold (600) — regola globale.
   Eventuali override font-weight nei file specifici devono rispettare questa regola. */
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-title); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-title); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-title); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-title); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-title); }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-title); }

p { color: var(--c-body); line-height: var(--lh-relaxed); }
strong { font-weight: var(--fw-semibold); color: var(--c-title); }

/* Sopratitolo (eyebrow). Stile unico per tutto il sito — modello visivo "Unicità" della home:
   capitalizzato come scritto nel template, letter-spacing soft, weight medium, grigio chiaro.
   Sulle varianti scure usare anche la classe .eyebrow--light per il colore. */
.eyebrow {
  font-size: clamp(13px, 0.78vw, 15px);
  text-transform: none;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--c-muted);
  margin: 0 0 14px;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.75); }

a.link {
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.link:hover { color: var(--c-green-dark); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semibold);
  font-size: 17px;        /* uniforme per tutti i pulsanti del sito */
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--c-green); color: var(--c-white); }
.btn-primary:hover { background: var(--c-green-dark); }

.btn-outline {
  background: transparent;
  color: var(--c-green-dark);
  border-color: var(--c-green-dark);
}
.btn-outline:hover { background: var(--c-green-dark); color: var(--c-white); }

.btn-ghost {
  background: transparent;
  color: var(--c-white);
  border-color: var(--c-white);
}
.btn-ghost:hover { background: var(--c-white); color: var(--c-green-dark); }

/* ---- IMG PLACEHOLDER ---- */
.img-placeholder {
  background: var(--c-bg-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.4);
  font-size: var(--fs-small);
  border-radius: 0;
  aspect-ratio: 16 / 10;
  width: 100%;
}
.img-placeholder::after { content: "Immagine"; }

/* ---- SECTIONS ----
   Regola globale: ogni fascia ha padding-block simmetrico = var(--section-py)
   (definito responsive in tokens.css). Le sezioni custom (.section-*) ereditano
   lo stesso token così che lo spazio sopra/sotto sia uniforme su tutto il sito. */
.section,
[class*="section-"]:not(.section-why-dark):not(.section-macro-territory):not([class*="section-h"]):not([class*="__"]) {
  padding-block: var(--section-py);
}
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-green-dark); color: var(--c-white); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-white); }
.section--dark p { color: rgba(255,255,255,0.85); }

/* ---- SKIP LINK A11Y ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-green-dark); color: var(--c-white); padding: 12px 16px;
  z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ---- VISUALLY HIDDEN (a11y label off-screen) ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- BREADCRUMBS ---- */
.breadcrumbs {
  font-size: var(--fs-small);
  color: var(--c-body);
  padding-block: var(--sp-4);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* Stessa regola della breadcrumb dell'hero: a capo FRA le voci, mai dentro.
   `ol` ha già `flex-wrap: wrap`; qui manca solo che la singola voce resti
   intera. Misurato: la più lunga del sito è 234px su 352 disponibili. */
.breadcrumbs li { white-space: nowrap; }
.breadcrumbs li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: rgba(0,0,0,0.3);
}
.breadcrumbs a:hover { color: var(--c-green); }
.breadcrumbs [aria-current="page"] { color: var(--c-title); font-weight: var(--fw-medium); }

/* ---- MARGINE LATERALE RIDOTTO SOTTO 1920px ----
   Alla base (≥1901px) il contenuto vive in 8 col centrali (col-content 3/11) con ~2 col
   di margine per lato: generoso, da design. Sotto 1920px quei margini risultano eccessivi
   su laptop/monitor → allargo a 10 col (2/12, ~1 col per lato) così il contenuto respira.
   NB: queste regole stanno QUI (main.css, <link> con ?v=build_ts → busta a ogni rebuild)
   e NON in grid.css, perché gli @import base hanno una versione statica e un loro edit
   non arriverebbe ai browser con cache.
   - col-content: 769→1900px (≤768px resta a 1 colonna via grid.css; ≤1024 era già 2/12).
   - col-half-l/r: solo ≥1025px (sotto restano impilate a piena larghezza, vedi grid.css). */
@media (min-width: 769px) and (max-width: 1900px) {
  .col-content { grid-column: 2 / 12; }
}
@media (min-width: 1025px) and (max-width: 1900px) {
  .col-half-l { grid-column: 2 / 7; }
  .col-half-r { grid-column: 7 / 12; }
}