/* =====================================================================
   MORSE · tema "originale"
   Ricalca il sito Wix del gruppo: il mare in movimento sullo sfondo,
   la testata scura con la grande scritta MORSE rossa, la barra azzurra
   del menu, i pannelli blu mare semitrasparenti, i titoli verdi (italiano)
   e rossi (inglese), il motto in corsivo calligrafico.
   ===================================================================== */

:root {
  --rosso-morse: #FC0022;      /* la scritta MORSE */
  --rosso: #CC1013;            /* titoli in inglese */
  --verde: #68B04D;            /* titoli in italiano */
  --verde-motto: #1C8A43;      /* "La lingua del mare" */
  --azzurro-menu: #3A8BC2;     /* barra del menu */
  --pannello: rgba(25, 64, 86, 0.81);
  --testata: rgba(35, 35, 35, 0.6);
  --font-originale: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-poppins: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-calligrafico: "Sacramento", "Brush Script MT", cursive;
  --font-neon: "Monoton", "Helvetica Neue", Arial, sans-serif;
}

body {
  background: #1B3A4B;
  font-family: var(--font-originale);
}

/* ---------- Il mare in movimento, fermo dietro a tutto ---------- */

.sfondo-mare {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #1B3A4B url("../video/mare-poster.jpg") center / cover no-repeat;
}
.sfondo-mare video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* un velo scuro, come nel sito originale, perché il testo resti leggibile */
.sfondo-mare::after { content: ""; position: absolute; inset: 0; background: rgba(10, 30, 42, 0.28); }

/* ---------- Testata: emblema, MORSE rosso, la sigla ---------- */

.testata {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.4rem var(--margine) 1.5rem;
  background: var(--testata);
  color: #fff;
  text-align: center;
}
.testata-emblema {
  width: min(46vw, 11.5rem);
  height: auto;
  margin: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
.testata-morse {
  margin: 0;
  font-family: var(--font-originale);
  font-weight: 700;
  font-size: clamp(4.2rem, 22vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--rosso-morse);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25), 0 10px 24px rgba(0, 0, 0, 0.4);
}
.testata-sigla {
  max-width: none;
  margin: 0.2rem 0 0;
  font-family: var(--font-originale);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(0.8rem, 3.7vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.iniziale { color: var(--rosso-morse); font-weight: 700; text-shadow: none; }

@media (min-width: 760px) {
  .testata { flex-direction: row; justify-content: center; gap: 2.5rem; text-align: left; }
  .testata-emblema { width: 13rem; }
}

/* ---------- Il menu: la barra azzurra, la voce aperta scura ---------- */

.quadrante {
  background: var(--azzurro-menu);
  border: 0;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.quadrante-tacche, .quadrante-lancetta { display: none; }
.quadrante-binario { padding: 0; }
.quadrante-stazioni { gap: 0; }
.stazione {
  padding: 0.95rem 1rem;
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.75);
  color: #FBFBFB;
  font-family: var(--font-originale);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}
.stazione:hover { background: rgba(0, 0, 0, 0.12); color: #fff; }
.stazione[aria-current="page"] { background: #323232; color: #fff; font-weight: 400; }
.menu-apri { border-right: 1px solid rgba(255, 255, 255, 0.75); color: #fff; font-family: var(--font-originale); }
.menu-icona i:nth-child(2) { background: #fff; }
.quadrante.scorre .quadrante-scala { -webkit-mask-image: none; mask-image: none; }

/* ---------- Home: bandiera, motto calligrafico, la chiamata ---------- */

.benvenuto { display: none; }
body.in-home .benvenuto {
  display: block;
  padding: 2.25rem var(--margine) 1.5rem;
  text-align: center;
}
.benvenuto-bandiera {
  width: min(100%, 40rem);
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
}
.benvenuto-motto {
  margin: 1.5rem 0 0;
  font-family: var(--font-calligrafico);
  font-size: clamp(2.9rem, 12.5vw, 6.25rem);
  white-space: nowrap;
  line-height: 1;
  color: var(--verde-motto);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.benvenuto-motto-en { margin-top: 0.3rem; color: var(--rosso); }
.benvenuto-cq {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 1.5rem auto 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}
.benvenuto-cq audio { width: min(78vw, 20rem); height: 2.4rem; }
.benvenuto-cq figcaption { color: #000; font-family: var(--font-originale); font-size: 1rem; letter-spacing: 0.08em; }

/* ---------- Le sezioni: pannelli blu mare sopra le onde ---------- */

.sezione {
  --testo-2: #CFDDE3;
  --linea: rgba(255, 255, 255, 0.28);
  --azione: #8FD0FF;
  --azione-scuro: #BFE4FF;
  max-width: 62rem;
  margin: 1.75rem auto 0;
  padding: 2rem var(--margine) 2.5rem;
  background: var(--pannello);
  color: #fff;
}
@media (min-width: 760px) { .sezione { margin-top: 2.5rem; padding: 2.5rem 2.5rem 3rem; } }

.sezione-testa h2 {
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: clamp(2.2rem, 10vw, 2.75rem);
  line-height: 1.1;
  color: var(--verde);
}
.sezione-testa p { color: #fff; font-size: 1.15rem; }

.voce-titolo { font-family: var(--font-poppins); font-weight: 600; font-size: 1.2rem; color: #fff; }
.voce-descrizione { color: #E6EEF1; }
.voce-data, .voce-numero { color: #A9C3CE; font-family: var(--font-originale); }
.voce-azioni { font-family: var(--font-originale); font-weight: 700; }
.quadrato, .anteprima { border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.segnaposto { background: var(--azzurro-menu); }

/* i riquadri bianchi dentro i pannelli tengono il testo scuro */
.serie, .emittenti, .documento, .lettore-avviso, .sezione input, .sezione select, .sezione textarea {
  --testo-2: #4E5D68;
  --linea: #CFD9DE;
  --azione: #2F3BB0;
  --azione-scuro: #232D8C;
  color: var(--mare);
}
.serie .voce-titolo, .emittenti .radio-nome, .serie .voce-descrizione { color: var(--mare); }
.serie .voce-data, .serie .voce-numero { color: var(--testo-2); }

.articolo h2 { font-family: var(--font-poppins); font-weight: 600; color: var(--verde); }
.articolo-corpo h3 { font-family: var(--font-poppins); font-weight: 600; color: #FF5A5F; }
.articolo-data { color: #A9C3CE; }
.articolo figure img { border-radius: 4px; }

/* ---------- Piede: la fascia scura con il Morse e il motto ---------- */

.piede-fondo { margin-top: 2.5rem; background: var(--testata); color: #fff; }
.piede { text-align: center; justify-items: center; }
.piede-logo { background: #fff; }
.piede-morse { color: #fff; font-family: var(--font-originale); font-weight: 400; letter-spacing: 0.2em; }
.piede .piede-motto { font-family: var(--font-originale); }
.piede-motto-en { color: #C8D3D8; }
.piede-gestisci { color: #C8D3D8; }

/* il saluto finale, come nel sito originale */
.piede::before {
  content: "73";
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  color: #2AA6D6;
}

@media (prefers-reduced-motion: reduce) {
  .sfondo-mare video { display: none; }
}

/* i nominativi sul pannello scuro: bianchi, sottolineati d'azzurro */
.sezione .nominativo { color: #fff; text-decoration-color: rgba(143, 208, 255, 0.6); }
.sezione a.nominativo:hover { color: #8FD0FF; }
.serie .nominativo, .emittenti .nominativo { color: var(--mare); }

/* la schermata del sito nascosto, con la stessa testata */
.cancello { background: linear-gradient(rgba(25, 40, 50, 0.55), rgba(25, 40, 50, 0.7)), #1B3A4B url("../video/mare-poster.jpg") center / cover no-repeat; }
.cancello-titolo { font-family: var(--font-originale); font-style: normal; font-weight: 700; text-transform: none; }
.cancello-scheda img { width: min(56vw, 13rem); }