/**
 * Banner cookie (eu_cookie_compliance) — riquadro in basso a destra.
 *
 * Il CSS di default del modulo è rimosso via libraries-override in
 * comuni_theme.info.yml. Colori, bordi, ombre, tipografia e bottoni stanno
 * sulle classi Bootstrap Italia nel template
 * templates/eu_cookie_compliance_popup_info.html.twig: qui restano solo il
 * posizionamento del riquadro e il reset delle regole di struttura del modulo
 * (i float e i max-width del suo CSS "bare", che resta caricato se un sito ha
 * use_bare_css attivo).
 *
 * ATTENZIONE — vincoli imposti dal JS del modulo (createPopup):
 * 1. #sliding-popup è creato a runtime e la sua proprietà `bottom` è animata
 *    inline da -altezza a 0, quindi il wrapper deve restare ancorato al fondo
 *    e lo scostamento dai bordi non può stare lì sotto forma di `bottom`.
 * 2. L'altezza usata come punto di partenza dell'animazione è misurata con
 *    outerHeight() PRIMA che venga aggiunta la classe .sliding-popup-bottom.
 *    Per questo lo scostamento dal fondo è il `padding` di #sliding-popup
 *    (incluso in outerHeight) e non un `margin` del riquadro interno (che
 *    collasserebbe e resterebbe fuori dalla misura), e per questo la larghezza
 *    del riquadro non dipende da un layout flex del wrapper: entrambe le cose
 *    devono valere già al momento della misura.
 */

/* Binario dell'animazione di entrata: senza .sliding-popup-bottom, così le
   spaziature sono già presenti quando il JS misura l'altezza. */
#sliding-popup {
  padding: 0 2.5rem 2.5rem;
}

/* position/z-index arrivavano dal CSS del modulo, che qui non è più caricato:
   vanno dichiarati qui, altrimenti il banner resta in fondo al flusso della
   pagina e l'animazione su `bottom` non ha alcun effetto. */
#sliding-popup.sliding-popup-bottom {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  background: none;
  /* la pagina attorno al riquadro resta cliccabile */
  pointer-events: none;
}

#sliding-popup.sliding-popup-top {
  position: relative;
  z-index: 99999;
}

/* Larghezza e allineamento a destra dichiarati su un normale blocco, senza
   passare dal flex sul wrapper: il JS misura l'altezza quando la classe
   .sliding-popup-bottom non è ancora applicata, e con la larghezza già
   vincolata la misura coincide con quella definitiva (altrimenti il testo
   wrappa meno, l'altezza è sottostimata e il riquadro spunta dal fondo per
   tutta la durata dell'animazione di entrata). */
#sliding-popup .eu-cookie-compliance-banner {
  pointer-events: auto;
  width: 440px;
  max-width: 100%;
  margin-left: auto;
}

/* Reset struttura del modulo: dentro il riquadro niente inline-block, niente
   larghezze all'80% e niente float. */
#sliding-popup .eu-cookie-compliance-content {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
}

#sliding-popup .eu-cookie-compliance-message,
#sliding-popup .eu-cookie-compliance-buttons,
#sliding-popup .eu-cookie-compliance-categories-buttons {
  float: none;
  max-width: none;
  margin: 0;
}

/* Il titolo arriva dal campo popup_info della config come <h2>: nel riquadro
   va riportato sulla scala tipografica dell'h5 di Bootstrap Italia. */
#sliding-popup .eu-cookie-compliance-message h2 {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
}

#sliding-popup .eu-cookie-compliance-message p:last-child {
  margin-bottom: 0;
}

/* Sotto il breakpoint sm il riquadro occupa la larghezza disponibile,
   restando staccato dai bordi per non perdere angoli e ombra. */
@media (max-width: 575.98px) {
  #sliding-popup {
    padding: 0 0.75rem 0.75rem;
  }

  #sliding-popup .eu-cookie-compliance-banner {
    width: auto;
  }
}