/* ------------------------------------------------------------------
   C.A.P. — Cucina Agricola Popolare
   Pagina unica, tutto centrato, nessun filetto. Zero dipendenze esterne.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Cucina Popolare";
  /* WOFF2 per tutti; l'OTF resta come rete di sicurezza per browser vecchi */
  src: url("../fonts/CucinaPopolare-Regular.woff2") format("woff2"),
       url("../fonts/CucinaPopolare-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --rosso: #e30613;
  --bianco: #ffffff;
  /* Su questo rosso perfino il bianco pieno arriva solo a 4,88:1 di contrasto:
     non c'e' margine per smorzare il testo secondario senza scendere sotto la
     soglia di leggibilita'. La gerarchia la fanno corpo e spaziatura, non il colore. */
  --filo: rgba(255, 255, 255, 0.4);     /* solo sottolineatura dei link */

  /* marchio: solo maiuscolo, per manifesto e titoli grandi */
  --font: "Cucina Popolare", "Futura", "Avenir Next", "Trebuchet MS", sans-serif;
  /* macchina da scrivere: occhielli, menù, informazioni di servizio */
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;

  --margine: clamp(1.5rem, 6vw, 4rem);
  --respiro: clamp(3.5rem, 10vw, 6.5rem);  /* spazio fra i blocchi */
}

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

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

body {
  margin: 0;
  background: var(--rosso);
  color: var(--bianco);
  font-family: var(--font);
  /* Il font è solo maiuscolo: lo dichiaro comunque, così anche il
     carattere di ripiego resta coerente se l'OTF non carica. */
  text-transform: uppercase;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* ---------- logo in testa ---------- */

.testata {
  padding: clamp(2.5rem, 8vw, 4.5rem) var(--margine) 0;
  display: flex;
  justify-content: center;
}

.testata__marchio {
  margin: 0;
  font-size: 0;   /* l'h1 non ha testo: il nome sta nell'alt dell'immagine */
  line-height: 0;
}

.testata__marchio img { width: min(38vw, 11rem); }

/* ---------- impianto ---------- */

main {
  padding: 0 var(--margine);
  max-width: 46rem;
  margin: 0 auto;
}

.section { padding-block: var(--respiro); }

.section__titolo {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  font-family: var(--mono);
  /* il Courier è già largo di suo: meno spaziatura del marchio */
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
}

/* ---------- manifesto ---------- */

.manifesto {
  margin: 0;
  font-weight: 400;
  /* tarata sulla riga più lunga ("Si sposta, apparecchia, riparte."):
     gli a capo restano quelli scritti nell'HTML anche a 360px */
  font-size: clamp(1.15rem, 0.74rem + 1.95vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  display: grid;
  gap: 1.15em;
}

.manifesto span { display: block; }

/* ---------- prossimo appuntamento ---------- */

.evento__nome {
  margin: 0;
  font-size: clamp(2.25rem, 1.5rem + 5vw, 4.5rem);
  font-weight: 400;
  line-height: 0.95;
}

.evento__quando {
  margin: 0.45em 0 0;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  line-height: 1.2;
}

.evento__dove {
  margin: 0.65em 0 0;
  font-family: var(--mono);
  font-size: clamp(0.875rem, 0.83rem + 0.25vw, 1rem);
}

.evento__etichetta {
  margin: clamp(2rem, 5vw, 3rem) 0 1em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: clamp(0.875rem, 0.83rem + 0.3vw, 1.0625rem);
}

.menu li { line-height: 1.4; }

.evento__prezzo {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.5rem);
  line-height: 1.3;
}

.sep { padding: 0 0.5em; }

/* a capo che esiste solo su schermo stretto */
.acapo-stretto { display: none; }

@media (max-width: 30rem) {
  /* la riga del prezzo si impila attorno alla stella:
     55 euro a persona / ★ / posti contati */
  .evento__prezzo .sep {
    display: block;
    padding: 0.35em 0;
  }

  /* la data va a capo prima dell'ora, non in mezzo a "ore 12:30" */
  .acapo-stretto { display: inline; }
  .evento__quando .tratto { display: none; }
}

.bottone {
  display: inline-block;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: 0.75em 1.7em;
  background: var(--bianco);
  color: var(--rosso);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: opacity 0.15s ease;
}

.bottone:hover, .bottone:focus-visible { opacity: 0.82; }

/* ---------- contatti ---------- */

.contatti {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* spazio piccolo qui perché lo spazio vero lo fa il padding dei link,
     che serve a portare l'area di tocco a 44px */
  gap: 0.15em;
}

.contatti a {
  display: inline-block;
  padding: 0.62em 0.25em;
  text-decoration: underline;
  text-decoration-color: var(--filo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  /* misurata sul contatto più lungo: sta su una riga sola già da 375px */
  font-size: clamp(1.0625rem, 0.787rem + 1.31vw, 1.625rem);
  letter-spacing: 0;
  overflow-wrap: anywhere;  /* rete di sicurezza sotto i 320px */
}

.contatti a:hover, .contatti a:focus-visible { text-decoration-color: var(--bianco); }

/* ---------- piede ---------- */

.piede {
  padding: 0 var(--margine) clamp(3rem, 8vw, 5rem);
  display: flex;
  justify-content: center;
}

.piede__logo { width: min(58vw, 18rem); }

/* ---------- accessibilità ---------- */

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}