/* Stili del sito, sopra la base di Bootstrap Italia. */

/* Campo di ricerca nella riga del logo: solo la linea inferiore, in un colore visibile sul blu. Selettore con la stessa specificità di Bootstrap Italia (tag + attributo + classe). */
input[type="search"].header-search-line {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

input[type="search"].header-search-line::placeholder {
  color: rgba(255, 255, 255, 0.95); /* 4.71:1 su #0c71c3 */
}

/* Logo della riga centrale ingrandito a 96px solo da 1200px: sotto, con ricerca e social sulla stessa riga, allargherebbe la pagina. */
.logo-principale {
  height: 72px;
  width: auto;
}

@media (min-width: 1200px) {
  .logo-principale {
    height: 96px;
  }
}

/* Tra 992 e 1199px le voci di menu con il padding di Bootstrap Italia non entrano nel container: padding ridotto. Serve "li.nav-item" per la specificità. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link {
    padding: 13px 12px;
  }
}

input[type="search"].header-search-line:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #fff;
}

/* Link senza sottolineatura di base: il contrasto con il testo supera 3:1. Sottolineatura su hover e focus da tastiera. */
a {
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* Voci di menu con sottomenu: niente sottolineatura all'hover, la freccia indica già che si aprono. */
.navbar .navbar-collapsable .navbar-nav li a.nav-link.nav-link-menu:hover,
.navbar .navbar-collapsable .navbar-nav li a.nav-link.nav-link-menu:focus-visible {
  text-decoration: none;
}

/* Freccia dei menu a tendina: icona dello sprite al posto del triangolo CSS di Bootstrap, poco visibile su questa barra. */
.nav-link-menu.dropdown-toggle::after {
  display: none;
}

.nav-link-menu-freccia {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  transition: transform 0.15s ease;
}

.nav-link-menu[aria-expanded="true"] .nav-link-menu-freccia {
  transform: rotate(180deg);
}

/* WCAG 1.4.1: un link dentro un paragrafo deve distinguersi anche senza il colore. */
p a {
  text-decoration: underline;
}

/* Su .bg-light il grigio di .text-muted scende sotto 4.5:1: si usa --bs-gray-700. */
.bg-light .text-muted {
  color: var(--bs-gray-700) !important;
}

/* Stessa protezione, per lo sfondo tenue del colore primario (usato anche
   in evento.php per "Informazioni pratiche"/"Contatti e referenti") — il
   contrasto di .text-muted può scendere sotto soglia su uno sfondo tenue
   invece che bianco puro. */
.bg-primary-tenue .text-muted {
  color: var(--bs-gray-700) !important;
}

/* Bordo primario tenue per le card da mettere in risalto; va abbinato alla classe base .border. */
.border-primary-soft {
  border-color: rgba(var(--bs-primary-rgb), .25) !important;
}

/* Link "Vai al contenuto principale" (header.php): invisibile finché non
   riceve il focus da tastiera (WCAG 2.4.1). Definito qui perché questa build
   di Bootstrap Italia non include .sr-only-focusable. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 1100;
  padding: 0.5rem 1rem;
  background: var(--bs-primary);
  color: #fff;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 0;
}

/* Nel footer i link hanno lo stesso colore del testo: sottolineatura sempre visibile. */
.it-footer a {
  text-decoration: underline;
}

/* Carosello immagini in home: banner a piena larghezza, altezza fissa e
   contenuta (non deve occupare troppo spazio verticale). */
.home-carousel-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .home-carousel-img {
    height: 240px;
  }
}

/* Hero eventi in home: sostituisce il carosello immagini quando c'è almeno un evento non concluso, con la stessa altezza. Con più eventi scorre (transform) con frecce, pallini e barra di avanzamento. */
.home-evento-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .home-evento-hero {
    height: 240px;
  }
}

.home-evento-track {
  display: flex;
  height: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .home-evento-track {
    transition: none;
  }
}

.home-evento-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: var(--bs-primary);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.home-evento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .74) 100%);
}

.home-evento-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.home-evento-content {
  position: relative;
  z-index: 2;
  padding-bottom: 28px;
  width: 100%;
}

.home-evento-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.home-evento-freccia:hover,
.home-evento-freccia:focus-visible {
  background: #fff;
}

.home-evento-freccia .icon {
  fill: var(--bs-primary);
}

.home-evento-freccia.prev {
  left: 1rem;
}

.home-evento-freccia.next {
  right: 1rem;
}

.home-evento-dots {
  position: absolute;
  z-index: 4;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
}

.home-evento-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  padding: 0;
}

.home-evento-dots button.attivo {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}

.home-evento-progresso {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .25);
}

.home-evento-progresso-barra {
  height: 100%;
  width: 0%;
  background: #fff;
}

/* Pallini del carosello: ingranditi, grigio-blu 5.11:1 su bianco, quello attivo nel colore primario. */
.splide__pagination button {
  width: 20px;
  height: 20px;
  background-color: var(--bs-gray-secondary);
  margin: 0 6px;
}

.splide__pagination button.is-active {
  width: 26px;
  height: 26px;
  background-color: var(--bs-primary);
}

/* Card orizzontale della pagina Eventi: miniatura stretta a sinistra. min-height, non height: con un titolo lungo la card cresce e la miniatura la segue. */
.evento-card-orizzontale {
  min-height: 150px;
}

.evento-locandina-orizzontale-link {
  width: 120px;
}

.evento-locandina-orizzontale {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 575.98px) {
  .evento-locandina-orizzontale-link {
    width: 90px;
  }
}

/* Etichetta calendario sovrapposta sull'angolo della locandina orizzontale:
   sfondi pieni (non tenui) per restare leggibile sopra qualunque foto,
   un'ombra per staccarla visivamente dalla locandina sottostante. */
.evento-calendario-etichetta {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 36px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.evento-calendario-etichetta .cal-mese {
  background: var(--bs-primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 0;
}

.evento-calendario-etichetta .cal-giorno {
  background: #fff;
  color: var(--bs-primary);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.evento-calendario-etichetta .cal-anno {
  background: #fff;
  color: var(--bs-gray-700);
  font-size: .55rem;
  font-weight: 600;
  padding-bottom: 2px;
}

/* Righe di informazioni nella pagina di dettaglio evento (luoghi, contatti,
   ecc.): un separatore sottile tra una riga e l'altra, nessuno prima della
   prima o dopo l'ultima. */
.evento-riga-info + .evento-riga-info {
  border-top: 1px solid var(--bs-border-color);
}

/* Evidenziazione del termine cercato, quando si arriva da /cerca.php (vedi
   assets/js/site.js). scroll-margin-top lascia spazio sotto la barra del
   menu, che resta agganciata in cima durante lo scroll. */
.ricerca-evidenziata {
  background-color: #fff3a3;
  color: #1c1c1c;
  padding: 0 .15em;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--bs-primary);
  scroll-margin-top: 96px;
}

/* Voci del menu di Amministrazione Trasparente senza sottovoci (link diretti
   sul portale originale, senza sottomenu da aprire): niente freccina di
   espansione, che altrimenti farebbe sembrare la voce un accordion apribile. */
.accordion-header .accordion-button-flat::after {
  content: none;
}

/* Voce del menu di Amministrazione Trasparente della pagina corrente; box-shadow invece di border-left per non spostare il testo. */
.amm-trasp-voce-attiva {
  font-weight: 700;
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

/* Intestazione colorata del menu di Amministrazione Trasparente: angoli arrotondati solo in alto, per saldarsi con l'accordion sotto. */
.amm-trasp-sidebar-header {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* Icona a destra di ogni voce del menu: freccia per i link interni, icona di uscita per quelli esterni. */
.amm-trasp-voce-icona {
  fill: var(--bs-gray-secondary);
  opacity: 0.7;
}

.amm-trasp-voce-attiva .amm-trasp-voce-icona {
  fill: var(--bs-primary);
  opacity: 1;
}

/* Figlio flex che deve potersi restringere sotto la larghezza del contenuto (min-width: 0), per esempio un titolo lungo accanto a un badge. */
.min-w-0 {
  min-width: 0;
}

/* Etichette di categoria lunghe: vanno a capo solo se non entrano (i .badge di Bootstrap Italia sono white-space: nowrap). */
.badge {
  white-space: normal;
}

/* Barra del menu agganciata in cima durante lo scroll, con il logo ridotto al simbolo. Sfondo esplicito: Bootstrap Italia lo imposta solo da desktop in su, su mobile resterebbe trasparente. */
.it-header-navbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 1020;
  background-color: var(--bs-primary);
}

/* Pulsante "Menu" su mobile: il bianco di Bootstrap Italia dipende dal componente navscroll, qui non usato. */
.it-header-navbar-wrapper .custom-navbar-toggler,
.it-header-navbar-wrapper .custom-navbar-toggler .it-list {
  color: #fff;
}

/* Mini logo nella barra del menu: visibile solo quando la barra è
   effettivamente "agganciata" in cima allo schermo durante lo scroll
   (classe .is-pinned aggiunta da assets/js/site.js) — a pagina intera resta
   nascosto, perché il logo esteso è già visibile poco sopra. */
.navbar-brand-compact {
  display: none;
}

.it-header-navbar-wrapper.is-pinned .navbar-brand-compact {
  display: flex;
}

/* Barra del menu nascosta quando si sovrappone al footer (calcolo in site.js), senza toglierla dal flusso per non far saltare il layout. */
.it-header-navbar-wrapper.nascosta-su-footer {
  visibility: hidden;
  pointer-events: none;
}

/* Dirigenti cessati: linea verticale che collega gli avatar, per indicare la sequenza degli incarichi. */
.dirigenti-timeline {
  position: relative;
  padding-left: 76px;
}

.dirigenti-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
  background: var(--bs-border-color);
}

.dirigenti-timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.dirigenti-timeline-item:last-child {
  margin-bottom: 0;
}

.dirigenti-timeline-marker {
  position: absolute;
  left: -76px;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  z-index: 1;
}

.dirigenti-timeline-marker .icon {
  fill: #fff;
}

/* Valore del blocco "referente" sotto l'icona (colonna stretta): carattere più piccolo e su una riga, per non spezzare numeri di telefono. */
.amm-trasp-icona-info-etichetta {
  font-size: 0.7rem;
}
.amm-trasp-icona-info-valore {
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* Pulsante "Leggi tutto/Leggi meno" nei callout di home (PNRR/Superbonus):
   Bootstrap aggiorna da solo aria-expanded sul trigger del collapse, qui si
   usa solo per scambiare le due etichette e ruotare la freccina — nessun JS
   dedicato necessario. */
.leggi-tutto-btn .leggi-tutto-aperto {
  display: none;
}

.leggi-tutto-btn[aria-expanded="true"] .leggi-tutto-chiuso {
  display: none;
}

.leggi-tutto-btn[aria-expanded="true"] .leggi-tutto-aperto {
  display: inline;
}

.leggi-tutto-icona {
  transition: transform 0.2s ease;
}

/* Timeline di in-evidenza.php: linea verticale con il quadratino calendario (mese e giorno) come marcatore. */
.evidenza-timeline {
  position: relative;
  padding-left: 76px;
}

.evidenza-timeline::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 25px;
  width: 2px;
  background: var(--bs-border-color);
}

.evidenza-timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
}

.evidenza-timeline-item:last-child {
  margin-bottom: 0;
}

.evidenza-timeline-marker {
  position: absolute;
  left: -76px;
  top: 0;
  width: 52px;
  border-radius: .25rem;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  z-index: 1;
}

.evidenza-timeline-mese {
  background: var(--bs-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 0;
}

.evidenza-timeline-giorno {
  background: #fff;
  color: var(--bs-primary);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 4px 0 0;
}

.evidenza-timeline-anno {
  background: #fff;
  color: var(--bs-gray-700);
  font-size: .65rem;
  font-weight: 600;
  padding: 0 0 3px;
}

@media (max-width: 575.98px) {
  .evidenza-timeline {
    padding-left: 64px;
  }
  .evidenza-timeline::before {
    left: 21px;
  }
  .evidenza-timeline-marker {
    left: -64px;
    width: 44px;
  }
  .evidenza-timeline-giorno {
    font-size: 1rem;
  }
}

.leggi-tutto-btn[aria-expanded="true"] .leggi-tutto-icona {
  transform: rotate(180deg);
}

/* Card con sottile bordo superiore nel colore primario, resto neutro e icona colorata. */
.card-bordo-superiore {
  border-top: 4px solid var(--bs-primary);
}

/* Card orizzontale (icona a sinistra, testo e freccia a destra). I pannelli sono figli diretti di .card, senza .card-body: con un livello in più height: 100% non raggiunge l'altezza reale della card quando anch'essa deriva da un flex-grow. */
.card-riga-orizzontale {
  flex-direction: row;
  align-items: stretch;
}

/* Senza .card-body il titolo erediterebbe il colore del link: colore ripristinato. */
.card-riga-orizzontale .card-title {
  color: hsl(210, 33%, 28%);
}

/* Sfondo tenue derivato dal colore primario (--bs-primary-rgb), al posto del grigio-lavanda di --bs-light. */
.bg-primary-tenue {
  background-color: rgba(var(--bs-primary-rgb), .06);
}

/* Mega menu a griglia (header.php): pannello nel colore primario, icona bianca e testo per ogni voce. */
.navbar .dropdown-menu {
  background-color: var(--bs-primary);
  border: none;
  overflow: hidden;
}

/* Intestazione bianca del pannello: titolo e breve descrizione della sezione, sopra la griglia delle voci. */
.mega-menu-intestazione {
  background-color: #fff;
  padding: .9rem 1rem;
}

.mega-menu-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  padding: .5rem;
}

.mega-menu-griglia-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  padding: .75rem .5rem;
  border-radius: .5rem;
  text-decoration: none;
  color: #fff;
  white-space: normal;
}

.mega-menu-griglia-item .icon {
  flex-shrink: 0;
}

.mega-menu-griglia-item:hover,
.mega-menu-griglia-item:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Locandina nel testo di evento.php: miniatura con bordo, pulsante di download sotto, descrizione a fianco; al clic si ingrandisce in un modal. */
.evento-locandina-riquadro {
  width: 200px;
}

/* Mappa a tutta larghezza in sedi-contatti.php: esce dal .container con 100vw e margini negativi calcolati sulla propria posizione, senza scorrimento orizzontale. Altezza in vh con minimo e massimo. */
.dove-siamo-mappa-wrapper {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 65vh;
  min-height: 380px;
  max-height: 640px;
}

.dove-siamo-mappa {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Scheda sopra l'angolo della mappa con indirizzo e pulsante indicazioni;
   su mobile torna un blocco normale sotto la mappa. */
.dove-siamo-mappa-scheda {
  background: var(--bs-white);
  border-radius: 0.5rem;
  padding: 1.25rem;
  position: static;
  margin: -0.5rem 1rem 0;
}

@media (min-width: 768px) {
  .dove-siamo-mappa-scheda {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    margin: 0;
    max-width: 320px;
  }
}

/* Intestazioni di tabella ordinabili (Atti a rilevanza esterna e Provvedimenti di tutela). */
.tabella-th-sort {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}
.tabella-th-sort:hover {
  color: var(--bs-primary);
}
.tabella-th-sort-icona {
  opacity: .35;
  transition: opacity .15s ease, transform .15s ease;
}
.tabella-th-sort.is-asc .tabella-th-sort-icona {
  opacity: 1;
  transform: rotate(180deg);
}
.tabella-th-sort.is-desc .tabella-th-sort-icona {
  opacity: 1;
}

/* Programma dell'evento: orari in caselle blu piene. */
.programma-orario {
  padding: .15rem .6rem;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
}

/* Pagine di Attività e Servizi: foto di copertina a tutta larghezza e blocchi finali. */
.pagina-copertina {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 4px;
}
@media (max-width: 575.98px) {
  .pagina-copertina {
    height: 200px;
  }
}
.blocco-settore > .card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Testo più scuro sulle etichette a sfondo tenue, per il contrasto minimo 4.5:1. */
.bg-opacity-10.text-success { color: #006b47 !important; }
.bg-opacity-10.text-primary { color: #0a5fa3 !important; }

/* "Chiudi" del menu da telefono: sta sul velo scuro della pagina, il blu non si legge. */
.navbar .close-div .close-menu {
  color: #fff;
}

/* Schema icona+linea: la colonna del contenuto deve potersi restringere, altrimenti tabelle e testi lunghi allargano la pagina. */
.border-start.border-3.border-primary.ms-3 + .flex-grow-1 {
  min-width: 0;
}

/* Organigramma con zoom: il disegno riempie l'area, lo zoom agisce sul viewBox dell'SVG (site.js). */
.org-zoom-area {
  position: relative;
  height: clamp(360px, 62vh, 760px);
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: 6px;
  background: #fff;
  cursor: grab;
  touch-action: none;
}
.org-zoom-area.is-trascinamento {
  cursor: grabbing;
}
.org-zoom-area:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}
.org-zoom-area > svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}
.org-zoom:fullscreen,
.org-zoom.is-schermo-intero {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 0;
}
.org-zoom.is-schermo-intero {
  position: fixed;
  inset: 0;
  z-index: 1080;
}
.org-zoom:fullscreen .card-body,
.org-zoom.is-schermo-intero .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.org-zoom:fullscreen .org-zoom-area,
.org-zoom.is-schermo-intero .org-zoom-area {
  flex: 1 1 auto;
  height: auto;
}

/* Posizioni organizzative: numero dell'Area in un bollino nel colore dell'Area. */
.po-bollino {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: .95rem;
}

/* Titolari di incarichi dirigenziali: fascia d'intestazione nel colore del sito, testo bianco esplicito. */
.dng-fascia {
  background: var(--bs-primary);
}
.dng-fascia span,
.dng-fascia h2,
.dng-fascia p {
  color: #fff;
}
.dng-scheda::after {
  display: none;
}

/* Vincoli: la tabella scorre dentro il suo riquadro senza allargare la pagina. */
.vincoli-tabella { contain: layout; }
.vincoli-tabella th, .vincoli-tabella td { min-width: 9rem; }