/* Stili propri del sito ADOC APS Umbria (si aggiungono a main.css, che non va modificato). */

/* Your custom css codes start here: */

/* --------------------------------------------------------------------------
   ADOC Umbria: celeste istituzionale #25B7E8 (rgb 37,183,232), da usare solo in
   punti mirati; il colore principale resta il blu del preset (#0B4575).
   Stesse varianti delle classi del template che sostituisce.
-------------------------------------------------------------------------- */
/* fondo pieno: box "Dona il 5x1000" sotto lo slider */
.bg-adoc-celeste {
  background-color: #25B7E8 !important;
}
/* come .bg-theme-colored-transparent (opacita' 0.75) */
.bg-adoc-celeste-transparent {
  background-color: rgba(37, 183, 232, 0.75) !important;
}

/* Menu principale (nel template entrambi grigio scuro #333, da
   menu.css):
   - voce della pagina corrente: blu istituzionale, colore del tema
   - passaggio del mouse: celeste (anche sulla voce corrente: regola dopo) */
.menuzord .menuzord-menu > li.active > a {
  background: #0B4575;
  color: #fff;
}
.menuzord .menuzord-menu > li:hover > a {
  background: #25B7E8;
  color: #fff;
}
/* Sottovoci dei menu a tendina: stesso celeste al passaggio del mouse (nel
   template #333, da menu.css) */
.menuzord .menuzord-menu ul.dropdown li:hover > a {
  background: #25B7E8;
  color: #fff;
}

/* Menu principale: voci con sottomenu = pulsanti (freccina, cursore a mano);
   la pagina "madre" e' la prima voce del sottomenu, in evidenza. */
.menuzord .menuzord-menu > li.ha-sottomenu > a {
  cursor: pointer;
}
.menuzord .menuzord-menu > li.ha-sottomenu > a .indicator {
  margin-left: 6px;
  transition: transform .15s;
}
.menuzord .menuzord-menu > li.ha-sottomenu > a[aria-expanded="true"] .indicator {
  transform: rotate(180deg);
}
.menuzord .menuzord-menu ul.dropdown li.voce-panoramica > a {
  font-weight: 700;
  border-bottom: 1px solid #ddd;
}
.menuzord .menuzord-menu ul.dropdown li > a[aria-current="page"] {
  color: #0B4575;
  font-weight: 700;
}
/* Focus da tastiera ben visibile sul menu (WCAG 2.4.7) */
.menuzord .menuzord-menu a:focus-visible,
.menuzord .showhide:focus-visible {
  outline: 3px solid #0B4575;
  outline-offset: -3px;
  background: #fff;
  color: #0B4575;
}
.menuzord .menuzord-menu ul.dropdown li:focus-within > a {
  background: #25B7E8;
  color: #fff;
}
/* "Vai al contenuto principale": visibile solo quando riceve il focus */
.salta-al-contenuto {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100000;
  padding: 10px 16px;
  background: #0B4575;
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 4px 4px;
}
.salta-al-contenuto:focus {
  top: 0;
  color: #fff;
}
#contenuto-principale:focus {
  outline: none;
}

/* Logo ADOC in testata: il template limita il logo a 38px di altezza (pensato
   per il suo logo orizzontale 252x40); il logo ADOC e' piu' compatto, quindi
   stessa altezza massima del sito attuale. */
.menuzord-brand img {
  max-height: 60px;
}

/* Logo ADOC nel footer scuro: su riquadro bianco, come nel footer del sito
   attuale (il template usava un logo bianco). */
.footer-logo-adoc {
  max-width: 180px;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
}

/* Voce di menu "Contatti": su schermi larghi c'e' il pulsante "Contatti" a
   destra del menu (visibile, come nel template, solo da 992px in su: classi
   hidden-sm/hidden-xs), quindi la voce si nasconde; sotto i 992px il pulsante
   non c'e' e la voce resta nel menu, anche in quello mobile. */
@media (min-width: 992px) {
  .menuzord-menu > li.voce-solo-mobile {
    display: none;
  }
}

/* Evidenziatore celeste ADOC: fascia celeste chiara dietro il testo (come un
   pennarello sulla meta' inferiore delle lettere), testo nel blu istituzionale.
   Il celeste pieno come colore del testo non e' leggibile su bianco (2,3:1). */
.evidenzia-adoc {
  color: #0B4575;
  background: linear-gradient(transparent 55%, rgba(37, 183, 232, 0.35) 55%);
  padding: 0 2px;
}

/* "Lo sportello risponde": menu degli argomenti a sinistra del modulo */
.sportello-argomenti li {
  margin-bottom: 8px;
}
.sportello-argomenti .btn {
  text-align: left;
  white-space: normal;
}
/* Al passaggio del mouse: celeste ADOC con testo bianco (anche l'icona) */
.sportello-argomenti .btn:hover,
.sportello-argomenti .btn:focus {
  background-color: #25B7E8;
  border-color: #25B7E8;
  color: #fff;
}

/* Pulsante "Sostienici" in testata, accanto a "Contatti": celeste ADOC,
   blu istituzionale al passaggio del mouse */
.btn-adoc-celeste,
.btn-adoc-celeste:focus {
  background-color: #25B7E8;
  border-color: #25B7E8;
  color: #fff;
}
.btn-adoc-celeste:hover,
.btn-adoc-celeste:active {
  background-color: #0B4575;
  border-color: #0B4575;
  color: #fff;
}

/* Pagina "Sostienici": elenco "Come puoi aiutarci" (link alle sezioni) */
.sostienici-modi li {
  border-bottom: 1px solid #e5e5e5;
}
.sostienici-modi li:last-child {
  border-bottom: 0;
}
.sostienici-modi li a {
  display: block;
  padding: 12px 0;
  color: #333;
}
.sostienici-modi li a:hover {
  color: #25B7E8;
}
.sostienici-modi .fa {
  font-size: 22px;
  float: left;
  margin-top: 4px;
}

/* Slider della home: foto delle notizie desaturate, piu' contrastate e un po'
   piu' scure, per leggere meglio i titoli bianchi e rendere omogenee foto di
   provenienza diversa. Il filtro vale solo per lo sfondo (.slotholder, che
   contiene anche le copie usate da dissolvenza e Ken Burns), non per testi e
   pulsanti. Valori da regolare qui:
   grayscale = desaturazione (0 colori pieni, 1 bianco e nero)
   contrast  = contrasto (1 invariato)
   brightness = luminosita' (1 invariata, piu' bassa = piu' scura) */
.rev_slider_wrapper .rev_slider .slotholder {
  filter: grayscale(0.45) contrast(1.15) brightness(0.75);
}

/* Pagina FAQ: pulsanti delle categorie su piu' righe, con spazio tra le righe */
.faq-categorie > li {
  margin-bottom: 10px;
}

/* Fasce "Iscriviti alla newsletter ADOC" (chi-siamo.php e
   include/nuovo/newsletter-fascia.php): pulsante staccato dal campo email.
   L'input-group di Bootstrap li attacca e la classe m-0 del template toglie
   ogni margine (con !important), da qui la regola piu' specifica. */
.newsletter-form .input-group-btn .btn {
  margin-left: 12px !important;
  border-radius: 3px;
}
.newsletter-form .input-group .form-control {
  border-radius: 3px;
}

/* Immagini a tutta larghezza (img-fullwidth): mantengono sempre le proporzioni
   originali. Gli attributi width/height nel codice servono solo a riservare lo
   spazio mentre la foto si carica; senza height:auto l'altezza indicata restava
   fissa mentre la larghezza si adattava alla colonna, deformando l'immagine. */
img.img-fullwidth {
  height: auto;
}

/* Link al passaggio del mouse: celeste ADOC ovunque (nel template diventavano
   grigi, #737373 e #666 nel footer scuro, quasi illeggibili; quelli con le
   classi di colore del tema, che usano !important, non cambiavano affatto).
   Esclusi i pulsanti (.btn), che hanno il loro stile; il menu principale ha
   regole proprie piu' specifiche (sfondo celeste, testo bianco). */
a:not(.btn):hover,
a:not(.btn):focus,
.footer a:not(.btn):hover,
.footer a:not(.btn):focus {
  color: #25B7E8;
}
a.text-white:not(.btn):hover, a.text-white:not(.btn):focus,
a.text-theme-colored:not(.btn):hover, a.text-theme-colored:not(.btn):focus,
a.text-gray:not(.btn):hover, a.text-gray:not(.btn):focus,
a.text-gray-darkgray:not(.btn):hover, a.text-gray-darkgray:not(.btn):focus,
a.text-gray-dimgray:not(.btn):hover, a.text-gray-dimgray:not(.btn):focus,
a.text-gray-light:not(.btn):hover, a.text-gray-light:not(.btn):focus {
  color: #25B7E8 !important;
}
/* Dentro i riquadri celesti il celeste sparirebbe: bianco e sottolineato */
.bg-adoc-celeste a:not(.btn):hover,
.bg-adoc-celeste a:not(.btn):focus {
  color: #fff !important;
  text-decoration: underline;
}

/* Link interni alla pagina ("#sezione"): la barra del menu e' fissa in alto e
   non deve coprire il titolo della sezione raggiunta */
[id] {
  scroll-margin-top: 90px;
}

/* Pulsanti bianchi (btn-default) che al passaggio del mouse diventano celeste ADOC */
.btn.btn-hover-celeste:hover,
.btn.btn-hover-celeste:focus,
.btn.btn-hover-celeste:active {
  background-color: #25B7E8;
  border-color: #25B7E8;
  color: #fff;
}

/* FAQ: domande a fisarmonica, celeste ADOC al passaggio del mouse e al focus */
.faq-voce .panel-title a:hover,
.faq-voce .panel-title a:focus,
.faq-voce .panel-title:hover a,
.faq-voce .panel-title:focus a {
  background: #25B7E8;
  color: #fff;
}
.faq-voce .panel-title a:hover::after,
.faq-voce .panel-title a:focus::after,
.faq-voce .panel-title:hover a::after {
  color: #fff;
}

/* FAQ: voce aperta (a.active, impostata dal template) in celeste ADOC con testo
   bianco, anche dopo il clic mentre ha ancora il focus. !important perche' il
   template imposta sfondo grigio chiaro con !important sulla voce aperta. */
.faq-voce .panel-title a.active,
.faq-voce .panel-title a.active:hover,
.faq-voce .panel-title a.active:focus {
  background: #25B7E8 !important;
  border-bottom: 0 !important;
  color: #fff !important;
}
.faq-voce .panel-title a.active::after {
  background: transparent !important;
  color: #fff !important;
}

/* Link leggibili: nel template i link senza classe e i "Leggi..." (btn-read-more)
   erano grigio #999 senza sottolineatura (contrasto 2,8:1 su bianco, sotto il
   minimo 4,5:1 di WCAG AA) e si riconoscevano solo al passaggio del mouse.
   Ora blu ADOC #0B4575, senza sottolineatura. Restano esclusi
   i link con classi proprie (pulsanti, titoli, menu, footer) e quelli nei riquadri
   scuri o colorati, che mantengono il loro stile. */
.btn-read-more {
  color: #0B4575;
  font-weight: 600;
}
.main-content .container p a:not(.btn):not([class]),
.main-content .container li a:not(.btn):not([class]),
.rich-content a,
.informativa a {
  color: #0B4575;
}
.main-content .container p a:not(.btn):not([class]):hover,
.main-content .container p a:not(.btn):not([class]):focus,
.main-content .container li a:not(.btn):not([class]):hover,
.main-content .container li a:not(.btn):not([class]):focus,
.rich-content a:hover,
.rich-content a:focus,
.informativa a:hover,
.informativa a:focus {
  color: #25B7E8;
}
.bg-theme-colored a:not(.btn):not([class]),
.bg-adoc-celeste a:not(.btn):not([class]),
.bg-black a:not(.btn):not([class]),
.bg-dark a:not(.btn):not([class]) {
  color: #fff !important;
}
/* Titoli delle schede (notizie, eventi, rassegna stampa, home): il h2/h4 ha la
   classe text-white del template ma il riquadro e' chiaro (#f8f8f8): il titolo
   e' un link blu ADOC, celeste al passaggio del mouse. */
.post .entry-content .entry-title a:not(.btn) {
  color: #0B4575;
}
.post .entry-content .entry-title a:not(.btn):hover,
.post .entry-content .entry-title a:not(.btn):focus {
  color: #25B7E8;
}