/* ==========================================================================
   Ecolstone — stili condivisi da tutte le pagine
   (font, colori del brand, reset, struttura pagina, footer)
   ========================================================================== */

/* --- Font ospitati in locale (licenza OFL, vedi assets/fonts) ------------ */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Variabili del brand ------------------------------------------------- */
:root {
  --color-bg: #F6F4EF;
  --color-ink: #20413F;
  --color-accent: #6CBD44;
  --color-surface: rgba(32, 65, 63, 0.035);
  --color-line: rgba(32, 65, 63, 0.12);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* --- Struttura pagina: contenuto + footer sempre in fondo ---------------- */
.page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.page > main { flex: 1; }

/* --- Etichetta piccola con barre d'accento ------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 2.25rem;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}
/* compensa lo spazio finale lasciato dal letter-spacing */
.eyebrow { padding-left: 0.2em; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* --- Forme decorative di sfondo ------------------------------------------ */
.blob {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.blob--accent {
  top: -22vmax;
  right: -14vmax;
  width: 48vmax;
  fill: var(--color-accent);
  opacity: 0.16;
  transform: rotate(-18deg);
}

.blob--ink {
  bottom: -26vmax;
  left: -20vmax;
  width: 52vmax;
  fill: var(--color-ink);
  opacity: 0.06;
  transform: rotate(24deg);
}

@media (max-width: 600px) {
  .blob--accent { top: -12vmax; right: -22vmax; width: 50vmax; }
  .blob--ink    { bottom: -18vmax; left: -28vmax; width: 56vmax; }
}

/* --- Menu in alto ---------------------------------------------------------- */
.site-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 1.25rem var(--gutter);
}

.site-nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.site-nav a {
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* --- Selettore lingua IT / EN ------------------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.lang-switch a {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch a:hover { background: var(--color-surface); }

.lang-switch a[aria-current="true"] {
  background: var(--color-ink);
  color: var(--color-bg);
}

@media (max-width: 600px) {
  .site-header { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a::after,
  .lang-switch a { transition: none; }
}

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  padding: 1.5rem var(--gutter);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
}