/* ═══════════════════════════════════════════════════════════
   BASE — reset, tipografia, layout di sezione, accessibilità
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-5));
  -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-5)); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

/* ── SCALA TIPOGRAFICA ── */

.t-display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.t-h2, .section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
  max-width: 20ch;
}

.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.t-label, .section-eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue);
  margin-bottom: var(--space-4);
}

.section-eyebrow::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

.section-desc {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: var(--muted);
  max-width: 56ch;
  line-height: var(--lh-relaxed);
  margin-top: var(--space-4);
}

.section-head { margin-bottom: clamp(36px, 5vw, 64px); }

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

.section-head--center .section-eyebrow::before { display: none; }

.section-head--center .section-title,
.section-head--center .section-desc { margin-inline: auto; }

/* ── LAYOUT DI SEZIONE ── */

.section {
  padding-block: var(--pad-y);
  position: relative;
}

.section--tight { padding-block: clamp(40px, 6vw, 80px); }

.section__inner {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section__inner--narrow { max-width: var(--maxw-narrow); }

/*
  Allinea un contenitore a tutta larghezza (carosello, marquee) con il
  testo della sezione, che è centrato dentro --maxw.
*/
.bleed-align {
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
}

.page-shell {
  max-width: var(--maxw-narrow);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-9)) var(--pad-x) var(--pad-y);
}

.page-shell--center { text-align: center; }

.page-shell--center .section-title,
.page-shell--center .section-desc { margin-inline: auto; }

/* ── ACCESSIBILITÀ ── */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Su fondo scuro il blu di brand non ha contrasto sufficiente. */
.hero :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.reel-modal :focus-visible,
.site-header:not(.is-over-light):not(.is-solid) :focus-visible {
  outline-color: var(--focus-on-dark);
}

.skip-link:focus {
  position: fixed;
  top: var(--space-3); left: var(--space-3);
  z-index: calc(var(--z-modal) + 1);
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: var(--space-3) var(--space-5);
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-pill);
}

/* ── REVEAL ALLO SCROLL ──
   Dissolvenza con micro-sollevamento e messa a fuoco. La sfocatura
   è breve e si applica una sola volta: non pesa sullo scroll. */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.99);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ease-out) var(--delay, 0ms),
    transform 0.9s var(--ease-out) var(--delay, 0ms),
    filter 0.7s var(--ease-out) var(--delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Chiuso il reveal, l'elemento non deve più occupare un layer di composizione. */
[data-reveal].is-settled { will-change: auto; transition: none; }

[data-reveal].is-animating { will-change: opacity, transform, filter; }

/* Varianti direzionali, per rompere la monotonia fra una sezione e l'altra. */
[data-reveal='left']  { transform: translate3d(-28px, 0, 0); }
[data-reveal='right'] { transform: translate3d(28px, 0, 0); }
[data-reveal='scale'] { transform: scale(0.94); filter: blur(10px); }

/* Reveal iniziale della pagina, leggero e una volta sola. */
@keyframes cc-page-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: none; }
}

.has-js .site-header { animation: cc-page-in 0.8s var(--ease-out) both; }

/* ── Schermi molto stretti (320px) ──
   Il mobile non è il desktop ristretto: qui si riducono i respiri
   verticali e si evita qualsiasi overflow orizzontale. */
@media (max-width: 380px) {
  :root {
    --pad-x: 18px;
    --pad-y: 56px;
  }

  .section-title { max-width: none; }
  .btn--lg { padding: var(--space-3) var(--space-5); font-size: var(--fs-small); }
}

/* ── Schermi molto larghi (1920px+) ── */
@media (min-width: 1800px) {
  :root { --pad-y: 136px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; filter: none; }
}

/* ═══════════════════════════════════════════════════════════
   BARRA DI AMMINISTRAZIONE
   Quando sei loggato, WordPress mette in cima una barra fissa alta
   32px e compensa spingendo giù il documento con un margine. Gli
   elementi in position: fixed non seguono quel margine e finiscono
   sotto la barra: l'header del tema risultava tagliato. Qui li
   spostiamo della stessa altezza.
   Sotto i 600px la barra scorre via con la pagina, quindi non serve
   nessuno scostamento.
   ═══════════════════════════════════════════════════════════ */

body.admin-bar { --admin-bar-h: 32px; }

@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar { --admin-bar-h: 46px; }
}

@media (max-width: 600px) {
  body.admin-bar { --admin-bar-h: 0px; }
}

body.admin-bar .site-header { top: calc(var(--admin-bar-h) + 2px); }
body.admin-bar .progress-bar { top: var(--admin-bar-h); }
body.admin-bar .mobile-nav { top: var(--admin-bar-h); }

body.admin-bar {
  scroll-padding-top: calc(var(--nav-h) + var(--admin-bar-h) + var(--space-5));
}

body.admin-bar [id] {
  scroll-margin-top: calc(var(--nav-h) + var(--admin-bar-h) + var(--space-5));
}