/* ====== Sitemap Tree ====== */
/* Container styling */
.sitemap-horizontal {
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden;
}

/* Tree container */
.sitemap-tree {
  position: relative;
  padding-top: 10px;
}

/* Main connecting horizontal line */
.sitemap-tree::before {
  content: "";
  position: absolute;
  top: 30px; /* position of horizontal line */
  left: 10%;
  right: 10%;
  height: 2px;
  background-color: #999;
  z-index: 1;
}

/* Each node container */
.sitemap-node {
  position: relative;
  list-style: none;
}

/* Small vertical connector from line to box */
.sitemap-node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background-color: #999;
  z-index: 0;
}

/* Box styling */
.sitemap-box {
  display: inline-block;
  position: relative;
  z-index: 2;
  background-color: #cce5ff;
  border-radius: 10px;
  padding: 12px 30px;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Hover effect */
.sitemap-box:hover {
  background-color: #b3daff;
  transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sitemap-branch {
    flex-direction: column;
  }

  .sitemap-tree::before {
    display: none; /* remove line on mobile */
  }

  .sitemap-node::before {
    display: none; /* remove connectors on mobile */
  }
}








/* ===== LEFT TREE STRUCTURE ===== */
.tree-structure-left ul {
  padding-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.tree-structure-left li {
  list-style: none;
  position: relative;
  text-align: center;
  padding: 20px 5px 0 5px;
}
.tree-structure-left li::before,
.tree-structure-left li::after {
  content: '';
  position: absolute;
  top: 0;
  border-top: 2px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree-structure-left li::before { left: 0; border-right: 2px solid #ccc; }
.tree-structure-left li::after { right: 0; border-left: 2px solid #ccc; }
.tree-structure-left li:only-child::before,
.tree-structure-left li:only-child::after { display: none; }
.tree-structure-left ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #ccc;
  height: 20px;
}

/* ===== RIGHT TREE STRUCTURE ===== */
.tree-structure-right ul {
  padding-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.tree-structure-right li {
  list-style: none;
  position: relative;
  text-align: center;
  padding: 20px 5px 0 5px;
}
.tree-structure-right li::before,
.tree-structure-right li::after {
  content: '';
  position: absolute;
  top: 0;
  border-top: 2px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree-structure-right li::before { left: 0; border-right: 2px solid #ccc; }
.tree-structure-right li::after { right: 0; border-left: 2px solid #ccc; }
.tree-structure-right li:only-child::before,
.tree-structure-right li:only-child::after { display: none; }
.tree-structure-right ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #ccc;
  height: 20px;
}

/* ===== BOX STYLES (LEFT TREE) ===== */
.tree-box-header-left {
  background-color: #b3e5fc;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  display: inline-block;
  min-width: 130px;
}
.tree-box-category-left {
  background-color: #c8e6c9;
  border-radius: 6px;
  padding: 8px 15px;
  margin-top: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  display: inline-block;
}
.tree-box-location-left {
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 6px 10px;
  margin: 3px 0;
  display: inline-block;
}

/* ===== BOX STYLES (RIGHT TREE) ===== */
.tree-box-header-right {
  background-color: #bbdefb;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  display: inline-block;
  min-width: 130px;
}
.tree-box-category-right {
  background-color: #dcedc8;
  border-radius: 6px;
  padding: 8px 15px;
  margin-top: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  display: inline-block;
}
.tree-box-location-right {
  background-color: #f1f8e9;
  border-radius: 5px;
  padding: 6px 10px;
  margin: 3px 0;
  display: inline-block;
}

/* ===== COMMON INTERACTIONS ===== */
.tree-box-header-left:hover,
.tree-box-category-left:hover,
.tree-box-header-right:hover,
.tree-box-category-right:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .tree-structure-left ul,
  .tree-structure-right ul {
    flex-direction: column;
    align-items: center;
  }
}