:root {
  --sfondo: #f2f6f7;
  --superficie: #ffffff;
  --testo: #16272e;
  --testo-secondario: #4a5f68;
  --mare: #0f5f6e;
  --mare-scuro: #0a4550;
  --linea: #d3c5a6;
  --sabbia: #eadfc8;
  --tenda-a: #4db2ec;
  --tenda-b: #ffffff;
  --focus: #c2410c;
  --avviso: #eab308;
  --avviso-sfondo: #fff6cc;
  --errore: #dc2626;
  --errore-sfondo: #fde8e8;

  --font-titoli: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0e1b20;
    --superficie: #15272e;
    --testo: #e6eef0;
    --testo-secondario: #a6b9bf;
    --mare: #5fb8c9;
    --mare-scuro: #8fd0dc;
    --linea: #3a4a4d;
    --sabbia: #2b271f;
    --focus: #fb923c;
    --avviso: #facc15;
    --avviso-sfondo: #2f2a10;
    --errore: #f87171;
    --errore-sfondo: #3a1b1b;
  }
}

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

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

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

body {
  margin: 0;
  background: var(--sabbia);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--mare-scuro); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.salta-al-contenuto {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--superficie);
  color: var(--testo);
  padding: 0.6rem 1rem;
  border: 2px solid var(--focus);
  z-index: 10;
}
.salta-al-contenuto:focus { top: 1rem; }

.contenitore {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Intestazione: tendone a strisce bianco-celesti (i colori del Pescara Calcio) con il bordo
   a festoni: ogni striscia termina in un semicerchio, come le tende parasole.
   --altezza-striscia = altezza totale, festoni compresi
   --larghezza-striscia = larghezza di ogni striscia (il raggio del festone è la metà) */
.intestazione {
  --altezza-striscia: 48px;
  --larghezza-striscia: 32px;
  background: var(--sabbia);
}

.intestazione::before {
  --raggio: calc(var(--larghezza-striscia) / 2);
  --altezza-tessuto: calc(var(--altezza-striscia) - var(--raggio));
  content: "";
  display: block;
  height: var(--altezza-striscia);
  background:
    /* festoni: un semicerchio sotto ogni striscia */
    radial-gradient(circle at var(--raggio) 0,
      var(--tenda-a) calc(var(--raggio) - 0.5px), transparent var(--raggio))
      0 var(--altezza-tessuto) / calc(var(--larghezza-striscia) * 2) var(--raggio) repeat-x,
    radial-gradient(circle at calc(var(--larghezza-striscia) * 1.5) 0,
      var(--tenda-b) calc(var(--raggio) - 0.5px), transparent var(--raggio))
      0 var(--altezza-tessuto) / calc(var(--larghezza-striscia) * 2) var(--raggio) repeat-x,
    /* tessuto a righe verticali */
    repeating-linear-gradient(90deg,
      var(--tenda-a) 0 var(--larghezza-striscia),
      var(--tenda-b) var(--larghezza-striscia) calc(var(--larghezza-striscia) * 2))
      0 0 / 100% var(--altezza-tessuto) no-repeat;
}

.intestazione .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}

.marchio {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--testo);
  text-decoration: none;
}

/* Area del contenuto: <main> e il suo contenitore hanno lo stesso sfondo sabbia */
main,
main .contenitore {
  background: var(--sabbia);
}
main { padding-bottom: 2rem; }

/* Hero */
.hero {
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}

h1 {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: clamp(2.25rem, 8.5vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.introduzione {
  font-size: clamp(1.15rem, 3.4vw, 1.3rem);
  color: var(--testo-secondario);
  margin: 0 0 1.25rem;
}

/* Foto (tutte 16:9, 1280×720) */
.foto {
  margin: 1.5rem 0;
}
.foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--superficie);
}
.foto + .foto { margin-top: 1rem; }
section > .foto:last-child { margin-bottom: 0; }

/* Contenuto */
.motivi section {
  padding-block: clamp(1.75rem, 5vw, 2.75rem);
  border-top: 1px solid var(--linea);
}

h2 {
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  text-wrap: balance;
  scroll-margin-top: 1rem;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* Indice dei motivi */
.indice {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 6px solid var(--tenda-a);
  border-radius: 4px;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
}
.indice h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.indice ol { margin: 0; padding-left: 1.4rem; }
.indice li { padding-block: 0.2rem; }
.indice a { display: inline-block; padding-block: 0.15rem; }

.riepilogo {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-left: 6px solid var(--mare);
  border-radius: 4px;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  margin-block: clamp(1.75rem, 5vw, 2.75rem);
}
.riepilogo h2 { font-size: 1.35rem; }

/* Sezioni "Approfondisci" espandibili */
details {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.9rem 1.1rem;
  list-style-position: inside;
}
details[open] summary { border-bottom: 1px solid var(--linea); }
details p { padding: 1rem 1.1rem; }
.approfondimento { padding: 1rem 1.1rem; }
.approfondimento p { padding: 0; }

/* Piè di pagina */
.piede {
  margin-top: 0;
  padding-block: 2rem;
  border-top: 1px solid var(--linea);
  background: var(--sabbia);
  font-size: 0.9rem;
  color: var(--testo-secondario);
}
.piede p { margin-bottom: 0.5rem; }

/* Selettore di lingua */
.intestazione .contenitore { flex-wrap: wrap; }

.lingue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
}
.lingue a,
.lingue span {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.55rem 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 4px;
  text-decoration: none;
}
/* Su schermi stretti tutte le lingue restano su un'unica riga */
@media (max-width: 34rem) {
  .lingue ul { gap: 0.15rem 0.1rem; }
  .lingue a,
  .lingue span { min-width: 2rem; padding-inline: 0.2rem; }
}
.lingue a { color: var(--testo-secondario); }
.lingue a:hover { color: var(--mare-scuro); background: var(--superficie); }
.lingue span[aria-current] {
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--linea);
}

/* Avviso di traduzione automatica */
.avviso {
  background: var(--avviso-sfondo);
  border: 1px solid var(--linea);
  border-left: 6px solid var(--avviso);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.25rem, 4vw, 2rem);
  font-size: 0.95rem;
}
.avviso p { margin: 0; }
.avviso .avviso-titolo { font-weight: 700; margin-bottom: 0.35rem; }
/* Riquadro "Lo sapevi?": rosso, con una linea separatrice sopra e una sotto */
.dato {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(1.25rem, 4vw, 2rem);
}
.dato + section { border-top: 0; }  /* evita la doppia linea con la sezione successiva */
.avviso-dato {
  background: var(--errore-sfondo);
  border-left-color: var(--errore);
  margin: 0;
}