/* =========================================================================
   IL BANNER DEI COOKIE

   UNA STRISCIA IN BASSO, NON UN VELO SOPRA LA PAGINA. Il velo scuro con
   il riquadro al centro e' la forma piu' diffusa ed e' la peggiore: ferma
   la lettura prima che il visitatore sappia se il sito gli interessa, e
   il primo gesto che gli chiediamo e' togliersi di torno qualcosa. La
   striscia si vede, si legge, e lascia il contenuto leggibile dietro.

   I DUE PULSANTI HANNO LO STESSO PESO VISIVO. "Solo i necessari" non e'
   scritto in grigetto piccolo: un rifiuto che costa piu' fatica di un
   consenso e' un consenso strappato, e il Garante lo contesta come tale.
   La differenza fra i due e' il colore, non la dimensione.
   ========================================================================= */

.rt-cookie {
  position: fixed;
  inset: auto 0 0 0;
  /* Sopra la barra d'acquisto fissa della scheda (60) e sopra il righello
     (120), sotto il menu a scomparsa (200). La striscia copre la barra
     d'acquisto finche' non si risponde: due barre fisse sovrapposte sono
     il difetto che Giuseppe ha gia' contestato alla cassa, ma qui una
     delle due sparisce al primo clic e non torna per sei mesi. */
  z-index: 140;
  padding: var(--rt-s4);
  background: var(--rt-superficie);
  border-top: 1px solid var(--rt-linea);
  box-shadow: var(--rt-ombra-3);
}

.rt-cookie[hidden] { display: none; }

/* L'entrata dal basso: il banner non lampeggia, sale. Un elemento che
   compare di colpo a meta' lettura sembra un errore della pagina. */
.rt-cookie {
  animation: rt-cookie-su var(--rt-transizione) ease-out both;
}

@keyframes rt-cookie-su {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-cookie { animation: none; }
}

.rt-cookie__dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4) var(--rt-s8);
  max-width: var(--rt-larghezza);
  margin-inline: auto;
}

.rt-cookie__testo {
  /* min-width: 0 e non la larghezza naturale: un elemento flex non scende
     sotto il suo contenuto se non glielo si dice, e qui dentro c'e' un
     paragrafo intero. E' lo stesso inciampo della pastiglia
     dell'assicurazione alla cassa. */
  flex: 1 1 28rem;
  min-width: 0;
}

.rt-cookie__titolo {
  display: block;
  margin-bottom: var(--rt-s1);
  color: var(--rt-ink);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
}

.rt-cookie__testo p {
  margin: 0;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  line-height: var(--rt-interlinea);
}

.rt-cookie__testo a {
  color: var(--rt-blu);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.rt-cookie__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s3);
}

/* I pulsanti del banner sono piu' bassi di un pulsante di pagina: qui
   non sono l'azione principale, sono il modo di togliere la striscia. */
.rt-cookie__azioni .rt-btn {
  padding: var(--rt-s3) var(--rt-s5);
  font-size: var(--rt-t-sm);
}

/* Sul telefono i due pulsanti vanno a tutta larghezza e sotto il testo:
   affiancati in 390px diventano due bersagli da sfiorare per sbaglio. */
@media (max-width: 620px) {
  .rt-cookie__azioni { width: 100%; }
  .rt-cookie__azioni .rt-btn { flex: 1 1 0; min-width: 0; }
}

/* Il pulsante nel piede che riapre la striscia. Vive dentro la stessa
   lista dei documenti legali, quindi eredita il suo aspetto e qui si
   toglie solo quello che un <button> si porta dietro di suo. */
.rt-cookie-riapri {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}