/* ==========================================================================
   RYLA Distretto 2050, pagina provvisoria
   Impostazione sobria e istituzionale: nessun effetto decorativo superfluo,
   il peso visivo sta nei marchi ufficiali e nella tipografia.

   Questo foglio viene incorporato anche dentro dist/index.php dallo script
   di generazione: modificare solo qui, mai la copia dentro il template.
   ========================================================================== */

:root {
  --ryla-azure: #019cde;
  --ryla-gold: #f7a81b;
  --ryla-teal: #00a2b3;
  --ryla-cranberry: #d41367;

  --royal-blue: #17458f;
  --deep: #0a1c40;

  /* Titoli in grazie e testo in bastoni.
     Georgia e Helvetica non esistono su Android: le voci finali
     assicurano un ripiego decoroso (Noto Serif e Roboto). */
  --font-titoli: Georgia, "Times New Roman", "Noto Serif", "Droid Serif", serif;
  --font-testo: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
}

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

html {
  /* Impedisce a iOS di ingrandire il testo ruotando lo schermo */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* 100vh come ripiego: dvh non è supportato da iOS Safari precedenti la 15.4 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-testo);
  line-height: 1.65;
  color: #fff;
  /* Testo chiaro su fondo scuro: senza questo su iOS e macOS risulta impastato */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sfumatura ferma, senza animazioni: il fondo istituzionale del Rotary. */
  background:
    radial-gradient(ellipse at 50% -10%, rgba(23, 69, 143, .85) 0%, transparent 62%),
    linear-gradient(180deg, #0d2a5c 0%, var(--deep) 100%);
  background-color: var(--deep);
  overflow-x: hidden;
}

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

/* --------------------------------------------------------------------------
   Barra superiore
   Le misure con env() tengono conto della tacca e degli angoli arrotondati
   su iPhone in orizzontale.
   -------------------------------------------------------------------------- */
.topbar {
  padding-top: 1.9rem;
  padding-left: max(2rem, env(safe-area-inset-left));
  padding-right: max(2rem, env(safe-area-inset-right));
}
.topbar img {
  width: clamp(118px, 13vw, 158px);
  opacity: .9;
  transition: opacity .2s ease;
}
.topbar a:hover img { opacity: 1; }

/* --------------------------------------------------------------------------
   Blocco centrale
   -------------------------------------------------------------------------- */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(2rem, 6vh, 3rem);
  padding-bottom: clamp(2.4rem, 7vh, 3.5rem);
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

.lockup { animation: fade .8s ease both; }

@keyframes fade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Le misure crescono con lo schermo ma restano leggibili a 320px */
.mark {
  width: clamp(190px, 50vw, 330px);
  margin: 0 auto 1.2rem;
}

.wordmark {
  width: clamp(150px, 40vw, 258px);
  margin: 0 auto;
}

.rule {
  width: clamp(96px, 22vw, 124px);
  height: 4px;
  margin: clamp(1.8rem, 5vh, 2.6rem) auto clamp(1.6rem, 4vh, 2.2rem);
  border: 0;
  border-radius: 2px;
  /* I quattro colori del marchio RYLA. */
  background: linear-gradient(90deg,
    var(--ryla-azure) 0 25%,
    var(--ryla-gold) 25% 50%,
    var(--ryla-teal) 50% 75%,
    var(--ryla-cranberry) 75% 100%);
}

/* Due righe distinte: il distretto fa da occhiello in bastoni maiuscoli,
   l'edizione sotto in corsivo con grazie. */
.occhiello {
  margin: 0 0 .55rem;
  font-family: var(--font-testo);
  font-size: clamp(.72rem, 2vw, .78rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .26em;
  /* La spaziatura a destra dell'ultima lettera sposta il testo fuori asse */
  text-indent: .26em;
  color: rgba(255, 255, 255, .58);
}

h1 {
  margin: 0 0 clamp(1.4rem, 4vh, 1.9rem);
  font-family: var(--font-titoli);
  font-size: clamp(1.15rem, 4.2vw, 1.72rem);
  font-weight: 400;
  /* Maiuscolo: serve più spaziatura, altrimenti le lettere si affollano */
  text-transform: uppercase;
  letter-spacing: .09em;
  text-indent: .09em;
  color: #fff;
  text-wrap: balance;
}
h1 .anno { color: var(--ryla-gold); }

.lead {
  margin: 0 auto;
  max-width: 44ch;
  font-family: var(--font-titoli);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, .93);
  text-wrap: pretty;
}

/* Righe di servizio sotto al testo principale.
   La misura è larga perché la prima riga stia intera su una sola riga
   sugli schermi da computer; sui telefoni va a capo naturalmente. */
.nota {
  margin: 1.5rem auto 0;
  /* La riga resta su una sola linea quando c'è spazio e va a capo solo
     quando serve davvero: con una misura fissa andava a capo anche su
     schermi larghi. */
  width: max-content;
  max-width: 100%;
  font-size: clamp(.9rem, 3vw, .95rem);
  color: rgba(255, 255, 255, .62);
  text-wrap: pretty;
}
.nota--seguito {
  margin-top: .35rem;
  max-width: min(100%, 62ch);
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Collegamenti
   -------------------------------------------------------------------------- */
.links {
  margin-top: clamp(1.8rem, 5vh, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .2rem 1rem;
  font-size: .97rem;
}
.links span { color: rgba(255, 255, 255, .35); }
.links a {
  display: inline-block;
  /* Area toccabile di almeno 44px in altezza, come da linee guida iOS */
  padding: .62rem .2rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(247, 168, 27, .75);
  transition: border-color .2s ease, color .2s ease;
}
.links a:hover {
  color: var(--ryla-gold);
  border-color: var(--ryla-gold);
}

/* --------------------------------------------------------------------------
   Piè di pagina
   -------------------------------------------------------------------------- */
.footer {
  padding-top: 1.6rem;
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1rem));
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer p {
  margin: 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}

a:focus-visible {
  outline: 3px solid var(--ryla-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Adattamenti per dispositivo
   -------------------------------------------------------------------------- */

/* Telefoni: collegamenti incolonnati, il punto separatore non serve più */
@media (max-width: 560px) {
  .topbar {
    padding-top: 1.4rem;
    padding-left: max(1.4rem, env(safe-area-inset-left));
    padding-right: max(1.4rem, env(safe-area-inset-right));
  }
  .links {
    flex-direction: column;
    gap: .1rem;
  }
  .links span { display: none; }
  .links a { padding: .62rem 1rem; }
}

/* Telefoni stretti: l'occhiello in maiuscolo spaziato andrebbe a capo */
@media (max-width: 400px) {
  .occhiello {
    font-size: .66rem;
    letter-spacing: .15em;
    text-indent: .15em;
  }
}

/* Telefono in orizzontale: schermo basso, va compresso tutto in altezza */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar { padding-top: 1rem; }
  .stage { padding-top: 1.2rem; padding-bottom: 1.6rem; }
  .mark { width: clamp(130px, 20vw, 190px); margin-bottom: .8rem; }
  .wordmark { width: clamp(104px, 16vw, 148px); }
  .rule { margin: 1.2rem auto 1rem; }
  h1 { margin-bottom: .9rem; }
  .nota { margin-top: 1rem; }
  .links { margin-top: 1.2rem; flex-direction: row; }
  .links span { display: inline; }
  .footer { padding-top: 1rem; }
}

/* Schermi molto ampi: i marchi possono respirare di più */
@media (min-width: 1600px) {
  .mark { width: 366px; }
  .wordmark { width: 286px; }
  .topbar img { width: 172px; }
}

/* Dispositivi a puntamento grosso: niente effetti al passaggio, che sui
   touch restano "appiccicati" dopo il tocco */
@media (hover: none) {
  .links a:hover { color: #fff; border-color: rgba(247, 168, 27, .75); }
  .topbar a:hover img { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}