/* ---------------------------------------------------------------------------
 * accessibilita.css - Padania Acque S.p.A.
 *
 * Correzioni di accessibilita' (WCAG 2.1 AA) che si fanno in CSS.
 *   T1  Link "Salta al contenuto principale"              (2.4.1)
 *   T2  Contorno di focus unico per tutto il sito         (2.4.7, 1.4.11)
 *   L1  Link nel testo distinguibili non solo dal colore  (1.4.1)
 *   P3  Pallini del carosello: area di attivazione 24x24
 *   C1  Card cliccabili su tutta la superficie
 *
 * COLLOCAZIONE
 *   Caricare questo file DOPO padania.css e dopo i fogli di terze parti
 *   (bootstrap-italia, owl.theme.default, home.min, angular-material).
 *   Le regole di focus usano !important per battere quelle delle librerie.
 * ------------------------------------------------------------------------- */


/* ===========================================================================
 * T2 - Contorno di focus unico (tecnica WCAG C40, indicatore a due colori)
 *
 * Alone bianco interno + contorno blu scuro esterno: resta visibile su
 * qualsiasi sfondo del sito.
 *   #1a2e5a su bianco        ~13:1
 *   alone #fff su #2773aa    ~5:1   (barra superiore)
 *   alone #fff su #1a2e5a    ~13:1  (menu principale, footer)
 *
 * :focus-visible mostra il contorno con la tastiera e non al clic del mouse.
 * Le vecchie regole di outline sparse in padania.css sono state rimosse:
 * non reintrodurle, altrimenti tornano a vincere su questa.
 * ========================================================================= */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:not([tabindex="-1"]):focus {
  outline: 3px solid #1a2e5a !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #fff !important;
}
#main_container:focus { outline: none !important; box-shadow: none !important; }


/* ===========================================================================
 * T1 - Link "Salta al contenuto principale"
 *
 * Fuori schermo finche' non riceve il focus, poi compare in alto a sinistra.
 * Mai display:none o visibility:hidden: il link non sarebbe piu' focalizzabile.
 * Il contorno di focus e' quello di T2.
 * Il salto e' gestito da accessibilita.js (Angular intercetta i link "#").
 * ========================================================================= */

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;                  /* sopra l'header, che e' navbar-fixed-top */
  padding: .75rem 1.25rem;
  background: #234d70;
  color: #fff;
  text-decoration: underline;
}

.skiplink:focus,
.skiplink:focus-visible {
  left: 0;
}

#main_container { scroll-margin-top: 120px; }   /* altezza dell'header fisso */
#main_container:focus { outline: none; }        /* riceve il focus solo dal salto */


/* ===========================================================================
 * L1 - Link dentro al testo
 *
 * I link nel corpo del testo si distinguono solo per il colore (#234d70
 * contro #555555: rapporto 1,19:1, sotto il 3:1 richiesto da 1.4.1).
 * Il testo delle pagine di contenuto spesso non e' dentro <p> ma in <div>
 * dentro .testolungo: per questo il terzo selettore.
 * ========================================================================= */

main p a:not(.btn):not(.badge),
main li a:not(.btn):not(.badge),
main .testolungo a:not(.btn):not(.badge) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

main p a:hover,
main li a:hover,
main .testolungo a:hover {
  text-decoration-thickness: 2px;
}


/* ===========================================================================
 * P3 - Pallini del carosello
 *
 * Area di attivazione portata a 24x24 px senza cambiare l'aspetto del
 * pallino: il riquadro trasparente e' uno pseudo-elemento sovrapposto.
 * Il contorno di focus e' quello di T2.
 * Le etichette ("Next" ripetuto) vanno corrette nel JavaScript del carosello.
 * ========================================================================= */

.it-carousel-wrapper .owl-dots .owl-dot {
  position: relative;
}

.it-carousel-wrapper .owl-dots .owl-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}


/* ===========================================================================
 * C1 - Card cliccabili
 *
 * Il link del titolo copre tutta la card, cosi' l'area cliccabile e' ampia
 * ma per la tastiera e gli screen reader resta un solo link.
 * ========================================================================= */

.card { position: relative; }

.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ===========================================================================
 * P1 - Pulsante Pausa / Riprendi del carosello
 *
 * Creato da accessibilita.js (caroselloPausa) dentro al carosello, in basso
 * a destra sulla riga dei pallini. Discreto ma sempre visibile: 2.2.2 vale
 * anche per chi usa il mouse, quindi NON va nascosto (niente sr-only, niente
 * "visibile solo al focus").
 *   Icona #1a2e5a su bianco ~13:1, bordo #1a2e5a (1.4.11: minimo 3:1).
 *   32x32 px: sopra i 24x24 consigliati per l'area di attivazione.
 * ========================================================================= */

.owl-carousel .carosello-pausa {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #1a2e5a;
  border-radius: 50%;
  background: #fff;
  color: #1a2e5a;
  cursor: pointer;
}

.owl-carousel .carosello-pausa svg {
  fill: currentColor;
}

.owl-carousel .carosello-pausa:hover {
  background: #1a2e5a;
  color: #fff;
}

#f_sosp label[for="comune"],
#f_ric_news label[for="search"] { display: block; font-weight: 600; margin-bottom: .25rem; }

   #in_evidenza { margin: 32px 0 64px; }
   #in_evidenza h3 { color: #234d70 !important; font-size: 1.778em; margin: 0 0 32px; }
   #in_evidenza .scheda-sito { margin-bottom: 24px; }
   #in_evidenza .row-eq-height,
   #in_evidenza .mb16 { margin-bottom: 0 !important; }
   @media (max-width: 767px) {
     #in_evidenza { margin: 32px 0; }
   }
   
   
#CybotCookiebotDialog a:not([role="tab"]),
#CybotCookiebotDialog a[role="button"] {
  text-decoration: underline !important;
}
#CybotCookiebotDialog a[role="tab"][aria-selected="true"] {
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
}