/* ========== CSS DELLA SITEMAP ========== */

/* diagramma ad albero verticale */
/* Container generale della sitemap */
.container-sitemap {
  max-width: 900px;        /* larghezza massima per desktop */
  margin: 0 auto;           /* centra la sitemap orizzontalmente */
  padding: 20px;            /* padding interno */
  border-radius: 8px;       /* bordi arrotondati */
}

/* Titolo */
.container-sitemap h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1.8em;
}

/* Vertical tree */
.vertical-tree ul {
  list-style: none;
  padding-left: 20px;
  border-left: 2px solid #999999; /* linea verticale principale */
}

.vertical-tree li {
  padding-left: 15px;
  margin: 10px 0;
  position: relative;
}

.vertical-tree li a {
  border: 1px solid #2c4d75;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
}

.vertical-tree li::before {
  content: '';
  position: absolute;
  left: -2px; /* allineamento con border-left */
  top: 15px;
  width: 10px; /* linea orizzontale */
  border-top: 2px solid #999999;
}

/* Link dei nodi */
.vertical-tree li a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid #1f3a5f;
  text-decoration: none;
  color: #1f3a5f;
  font-weight: 600;
  transition: all 0.3s;
}

.vertical-tree li a:hover {
  background: #1f3a5f;
  color: #fff;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .container-sitemap {
    padding: 15px;
    max-width: 100%;
  }

  .vertical-tree ul {
    padding-left: 15px;
  }

  .vertical-tree li {
    padding-left: 15px;
  }

  .vertical-tree li::before,
  .vertical-tree ul::before {
    display: none; /* rimuove le linee per mobile */
  }
}