/* mappa del sito ad albero (include/mappa-albero.php -> generaMappaAlbero) */
.ma-albero { --ma-c: #4694d1; --ma-scuro: #2f6f9f; --ma-chiaro: #DCEBF7; --ma-tenue: #F2F8FD; --ma-linea: #9fc3df; }
.ma-albero { max-width: 1200px; margin: 30px auto; font-family: inherit; text-align: left; box-sizing: border-box; }
.ma-albero * { box-sizing: border-box; }
.ma-albero ul { list-style: none !important; max-width: none !important; margin: 0 !important; padding: 0 !important; column-count: 1 !important; columns: auto 1 !important; border: 0 !important; }
.ma-albero li { list-style: none !important; margin: 0 !important; font-weight: normal; text-align: left; line-height: 1.35; background: none !important; }
.ma-albero li::marker { content: ""; }
.ma-root { display: flex; justify-content: flex-start; position: relative; padding-bottom: 24px; }
.ma-root::after { content: ""; position: absolute; left: 20px; bottom: 0; height: 24px; border-left: 2px solid var(--ma-linea); }
.ma-albero .ma-root a { display: inline-block; background: var(--ma-scuro); color: #FFFFFF !important; font-weight: 700; font-size: 1.2em; padding: 10px 28px; border-radius: 30px; text-decoration: none !important; }
.ma-albero .ma-root a:hover { opacity: 0.85; }
.ma-albero .ma-l1 { margin-left: 20px !important; }
.ma-albero .ma-l1 > li { position: relative; padding: 12px 0 0 24px !important; }
.ma-l1 > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--ma-linea); }
.ma-l1 > li:last-child::before { bottom: auto; height: 36px; }
.ma-l1 > li::after { content: ""; position: absolute; left: 0; top: 36px; width: 22px; border-top: 2px solid var(--ma-linea); }
.ma-n1 { display: block; background: var(--ma-c); color: #FFFFFF; font-weight: 700; font-size: 1.15em; padding: 12px 16px; border-radius: 8px; }
.ma-n1 small { display: block; font-weight: normal; font-size: 0.72em; opacity: 0.9; margin-top: 3px; }
.ma-albero a.ma-foglia { display: block; background: #FFFFFF; color: var(--ma-scuro) !important; border: 1px solid var(--ma-chiaro); border-radius: 6px; padding: 6px 10px; font-size: 0.95em; text-decoration: none !important; }
.ma-albero a.ma-foglia:hover { background: var(--ma-tenue); border-color: var(--ma-linea); }
.ma-albero .ma-rami { margin-left: 14px !important; }
.ma-albero .ma-rami > li { position: relative; padding: 5px 0 5px 20px !important; }
.ma-rami > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--ma-linea); }
.ma-rami > li:last-child::before { bottom: auto; height: 22px; }
.ma-rami > li::after { content: ""; position: absolute; left: 0; top: 22px; width: 16px; border-top: 2px solid var(--ma-linea); }
@media screen and (min-width: 1280px) {
  .ma-albero:not(.ma-lungo) .ma-root { justify-content: center; }
  .ma-albero:not(.ma-lungo) .ma-root::after { left: 50%; margin-left: -1px; }
  .ma-albero:not(.ma-lungo) .ma-l1 { display: flex; margin-left: 0 !important; }
  .ma-albero:not(.ma-lungo) .ma-l1 > li { flex: 1 1 0; min-width: 0; padding: 24px 9px 0 !important; }
  .ma-albero:not(.ma-lungo) .ma-l1 > li::before, .ma-albero:not(.ma-lungo) .ma-l1 > li:last-child::before { left: 0; right: 0; top: 0; bottom: auto; height: 0; border-left: 0; border-top: 2px solid var(--ma-linea); }
  .ma-albero:not(.ma-lungo) .ma-l1 > li:first-child::before { left: 50%; }
  .ma-albero:not(.ma-lungo) .ma-l1 > li:last-child::before { right: 50%; }
  .ma-albero:not(.ma-lungo) .ma-l1 > li::after { left: 50%; top: 0; width: 0; height: 24px; margin-left: -1px; border-top: 0; border-left: 2px solid var(--ma-linea); }
  .ma-albero:not(.ma-lungo) .ma-n1 { text-align: center; }
  .ma-albero.ma-lungo .ma-rami { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 0 8px 18px !important; border-left: 2px solid var(--ma-linea) !important; }
  .ma-albero.ma-lungo .ma-rami > li { padding: 0 !important; }
  .ma-albero.ma-lungo .ma-rami > li::before, .ma-albero.ma-lungo .ma-rami > li::after { display: none; }
  .ma-albero.ma-lungo a.ma-foglia { height: 100%; }
}
.ma-anim .ma-root, .ma-anim .ma-sez { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease var(--d, 0s), transform 0.7s ease var(--d, 0s); }
.ma-anim .ma-root.ma-in, .ma-anim .ma-sez.ma-in { opacity: 1; transform: none; }
.ma-albero .ma-n2 { display: block; background: var(--ma-chiaro); color: var(--ma-scuro) !important; font-weight: 700; padding: 6px 10px; border-radius: 6px; text-decoration: none !important; }

/* colori del sito */
.ma-albero { --ma-c: #296bdf; --ma-scuro: #1e4da1; --ma-chiaro: #dde7fa; --ma-tenue: #f2f6fd; --ma-linea: #9fbcf1; }

.ma-albero a.ma-n1-link, .ma-albero a.ma-n1-link:visited { color: #FFFFFF !important; text-decoration: none !important; }
.ma-albero a.ma-n1-link:hover { background: var(--ma-scuro); }
@media screen and (min-width: 1280px) {
  #main_text .ma-albero:not(.ma-lungo) .ma-l1 > li.ma-sez-link, .ma-albero:not(.ma-lungo) .ma-l1 > li.ma-sez-link { flex: 0 0 150px !important; }
}

/* layout lungo: rami orizzontali che collegano la linea verticale a ogni pulsante */
@media screen and (min-width: 1280px) {
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li { position: relative; }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li::after { content: "" !important; display: block !important; position: absolute; top: 50%; left: -8px; width: 8px; height: 0; border-top: 2px solid var(--ma-linea); margin-top: -1px; }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li:nth-child(3n+1)::after { left: -20px; width: 20px; }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li.ma-gruppo::after { top: 20px; }
}
/* layout lungo: la linea verticale si ferma all'ultima voce */
@media screen and (min-width: 1280px) {
  .ma-albero.ma-lungo .ma-sez > .ma-rami { border-left: 0 !important; }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li:nth-child(3n+1)::before { content: "" !important; display: block !important; position: absolute; left: -20px; top: -8px; bottom: 0; height: auto; border-left: 2px solid var(--ma-linea); }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li:nth-child(3n+1):nth-last-child(-n+3)::before { bottom: auto; height: calc(50% + 9px); }
  .ma-albero.ma-lungo .ma-sez > .ma-rami > li.ma-gruppo:nth-child(3n+1):nth-last-child(-n+3)::before { height: 29px; }
}

/* i trattini arrivano a toccare i pulsanti */
.ma-albero .ma-l1 > li::after { width: 24px; }
.ma-albero .ma-rami > li::after { width: 20px; }

/* organigramma: le caselle-link si allargano quanto serve, il testo non esce mai */
@media screen and (min-width: 1280px) {
  #main_text .ma-albero:not(.ma-lungo) .ma-l1 > li.ma-sez-link.ma-sez-link, .ma-albero:not(.ma-lungo) .ma-l1 > li.ma-sez-link.ma-sez-link { flex: 0 0 auto !important; width: auto; max-width: 220px; min-width: 120px; }
}
.ma-albero a.ma-n1-link { overflow-wrap: break-word; }

/* mobile e tablet: la mappa non tocca i bordi dello schermo */
@media screen and (max-width: 1279px) {
  .txt-right .ma-albero { padding-left: 16px; padding-right: 16px; }
}

/* la mappa ha esattamente gli stessi bordi del testo della pagina (20px a sinistra e a destra), a ogni larghezza */
.ma-albero, #main_text .ma-albero { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; }
@media screen and (min-width: 1280px) {
  .ma-albero:not(.ma-lungo) .ma-l1.ma-l1 { margin-left: -9px !important; margin-right: -9px !important; }
}