/* ---------------------------------------------------------------------------
 * accessibilita.css - Acquedotto Lucano S.p.A.
 *
 * Correzioni di accessibilita' che si fanno in CSS.
 *   AL-06  Link nel testo distinguibili solo dal colore   (1.4.1)
 *   AL-01  Pallini del carosello: focus e area di attivazione (2.4.7)
 *
 * COLLOCAZIONE
 *   Le regole possono stare in acqlucano.css, ma sono scritte per vincere
 *   sui fogli caricati dopo (owl.theme.default, home.min, sezioni.min,
 *   interne.min). Se si preferisce tenerle separate, caricare questo file
 *   come ULTIMO <link rel="stylesheet"> del template.
 *
 * Entrambe le regole sono state provate sul sito in produzione: vedere le
 * schede AL-06 e AL-01 per gli esiti.
 * ------------------------------------------------------------------------- */


/* ===========================================================================
 * AL-06 - 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).
 *
 * ATTENZIONE AL SELETTORE: sulle pagine di contenuto il testo non e' quasi
 * mai dentro <p>. Su /contatti i numeri verdi stanno in <div> nudi, dentro
 * il contenitore .testolungo. Una regola "main p a" non li raggiunge.
 * ========================================================================= */

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;   /* leggibilita' sotto le lettere discendenti */
}

/* Lo stato hover resta distinguibile da quello di riposo */
main p a:hover,
main li a:hover,
main .testolungo a:hover {
  text-decoration-thickness: 2px;
}


/* ===========================================================================
 * AL-01 - Pallini del carosello
 *
 * Due problemi: nessun contorno di focus visibile, e area di attivazione di
 * soli 8x8 px.
 *
 * ATTENZIONE ALLA SPECIFICITA': una regola ".owl-dot { ... }" viene battuta
 * da ".it-carousel-wrapper .owl-dots .owl-dot" di bootstrap-italia, e una
 * ".owl-dots .owl-dot:focus" viene battuta sull'outline. Serve includere il
 * tipo di elemento: .owl-dots button.owl-dot.
 * ========================================================================= */

/* Area di attivazione portata a 24x24 px SENZA cambiare l'aspetto del
   pallino: il riquadro trasparente e' un pseudo-elemento sovrapposto. */
.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%);
}

/* Contorno di focus visibile.
   L'!important serve a battere la regola "button.owl-dot:focus { outline: 0 }"
   gia' presente in acqlucano.css: quella regola imposta anche un bordo verde
   che in pagina non compare mai. Conviene cancellarla del tutto; finche' c'e',
   questa deve poterla scavalcare. */
.owl-dots button.owl-dot:focus-visible,
.owl-dots button.owl-dot:focus {
  outline: 2px solid #234d70 !important;
  outline-offset: 3px;
}

.skiplink {
  position: absolute; left: -9999px; top: 0;
  z-index: 1100;                      /* sopra l'header, che è navbar-fixed-top */
  padding: .75rem 1.25rem;
  background: #234d70; color: #fff; text-decoration: underline;
}
.skiplink:focus {
  left: 0;                            /* mai display:none: renderebbe il link non focalizzabile */
}

.card { position: relative; }
.card h3 a::after {
  content: ""; position: absolute; inset: 0;   /* estende l'area cliccabile a tutta la card */
}