/* ============================================================
   Villa San Vigilio — BASE: reset, scaling responsive, container, utility
   ============================================================ */
/* fonts.css e tokens.css sono caricati PRIMA di base.css (enqueue separato / link),
   così cambiare i token invalida sempre la cache. */

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

/* LAYOUT: 1rem = 16px @1920, proporzionale col viewport (larghezze/spaziature = proporzioni Figma).
   FONT: ridotti separatamente via --fs-scale in tokens.css (il Figma è nativo a 1920, più grande
   di un MacBook 16 → i testi risultavano grossi). Così il layout resta fedele e solo i font calano.
   Reflow mobile: <=1024px base fissa 16px. */
html {
  font-size: calc(min(100vw, 1920px) / 140);   /* adattato al MacBook 16 (~86%). 120 = Figma 1:1 pieno. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 1024px) {
  html { font-size: 100%; }
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--c-navy);
  background: var(--c-white);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- Container condiviso (UN solo container per tutto il sito) ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.full-bleed {            /* immagini/sezioni a tutta larghezza */
  width: 100%;
}

/* ---- Utility tipografiche riusabili ---- */
.t-hero    { font-size: var(--fs-hero);    font-weight: 400; line-height: var(--lh-tight); }
.t-h1      { font-size: var(--fs-h1);      font-weight: 400; line-height: var(--lh-tight); }
.t-h2      { font-size: var(--fs-h2);      font-weight: 400; line-height: var(--lh-tight); }
.t-lead    { font-size: var(--fs-lead);    font-weight: 400; line-height: var(--lh-body); }
.t-footer  { font-size: var(--fs-footer);  font-weight: 400; line-height: var(--lh-body); }

.u-center  { text-align: center; }
.u-upper   { text-transform: uppercase; }

/* Accessibilità */
:focus-visible { outline: 2px solid var(--c-blue-deep); outline-offset: 3px; }
.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;
}