/* ===== Service Page Sidebar Navigation ===== */

.service-layout {
  display: flex;
  gap: 0;
}

.service-sidebar-col {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
}

.service-content-col {
  flex: 1;
  min-width: 0;
}

.service-sidebar {
  position: sticky;
  top: 80px;
  padding: 24px 0 24px 16px;
  height: fit-content;
}

.service-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 14px;
  padding-left: 16px;
}

.service-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid #e0e0e0;
}

.service-sidebar-nav li {
  margin-bottom: 0;
}

.service-sidebar-nav a {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: all 0.25s ease;
  line-height: 1.4;
}

.service-sidebar-nav a:hover {
  color: var(--heading-color);
  border-left-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.service-sidebar-nav a.active {
  color: var(--accent-color);
  font-weight: 600;
  border-left-color: var(--accent-color);
}

/* Responsive: hide sidebar below xl */
@media (max-width: 1199.98px) {
  .service-sidebar-col {
    display: none;
  }

  .service-layout {
    display: block;
  }
}