@import url(./page-bottom-decor.css);

.site-map {
  position: relative;
  padding-top: 2rem;
  z-index: 1;
}

.site-map > .container {
  position: relative;
  z-index: 1;
}

.site-map .flow-line {
  position: absolute;
  top: -2rem;
  left: 1rem;
  bottom: 0;
  color: #001529;
  font-weight: 700;
}
.site-map .flow-line::after {
  content: "";
  position: absolute;
  display: block;
  width: 0.375rem;
  left: 0;
  top: 2rem;
  bottom: 0;
  border-radius: 0.1875rem;
  background: linear-gradient(109deg, #91F17E 13.04%, #0653BD 76.3%);
}

.site-map .card {
  --bs-card-spacer-y: 1.12rem;
  --bs-card-spacer-x: 1.12rem;
  --bs-card-title-spacer-y: 0.62rem;
  --bs-card-title-color: #001529;
  --bs-card-color: #001529;
  --bs-card-bg: #FFF;
  --bs-card-border-width: 0;
  --bs-card-cap-bg: #FFF;
  display: flex;
  flex-flow: column;
  margin-top: 0.88rem;
  margin-left: 1.5rem;
}

.site-map .card .card-heading {
  flex: 1 1 100%;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}
.site-map .card .card-heading:has(+.card-body) {
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) 0 var(--bs-card-spacer-x);
}
.site-map .card .card-body {  
  flex: 1 0 100%;
  margin-left: var(--bs-card-spacer-y);
}

.site-map .card .card-map,
.site-map .card .card-submap {
  position: relative;
}
.site-map .card .card-map {
  display: flex;
  flex-flow: column;
  padding-bottom: 0.5rem;
}

.site-map .card .card-map::before,
.site-map .card .card-submap::before {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  background-color: #004099;
  left: calc(var(--bs-card-spacer-y) * -1);
  top: 0;
  bottom: 0;
}
.site-map .card .card-submap::before {
  display: none;
}

.site-map .card .card-submap {
  padding-left: var(--bs-card-spacer-y);
}

.site-map .card .card-title {
  position: relative;
  font-size: clamp(14px,1.11vw,16px);
  font-weight: 700;
  margin-bottom: 0;
}

.site-map .card .card-text {
  font-weight: 500;
  margin-bottom: 0;
}

.site-map .card a {
  color: var(--bs-card-color);
  font-weight: 600;
  text-decoration: none;
}
.site-map .card a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.site-map .card:has(.card-footer) {
  position: relative;
  padding-bottom: 3.5rem;
}
.site-map .card .card-footer {
  position: absolute;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 64, 153, 0.12);
  bottom: var(--bs-card-spacer-y);
  left: var(--bs-card-spacer-x);
  right: var(--bs-card-spacer-x);
}

@media screen and (min-width: 992px) {
  .site-map {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }
  .site-map .flow-line {
    top: -2rem;
  }
  .site-map .flow-line::after {
    top: 2rem;
    left: 1rem;
  }
  .site-map .card  {
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;

    flex-flow: row;
    margin-top: 1.25rem;
    margin-left: 4rem;
  }
  .site-map .card .card-heading {
    flex: 0 0 30%;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  }
  .site-map .card .card-body {
    flex: 1 0 auto;
  }
  .site-map .card .card-map:has(.card-submap) {
    flex-flow: row;
    padding-bottom: 0;
  }
  .site-map .card .card-map > .card-text {
    display: inline-block;
    flex: 1 0 40%;
  }
  .site-map .card .card-submap {
    display: inline-flex;
    flex-flow: column;
    flex: 1 0 60%;
    padding-bottom: 0.75rem;
  }
  .site-map .card .card-submap::before {
    display: block;
    left: 0;
  }
  .site-map .card .card-submap .card-text {
    display: block;
  }
}