/* ── Docs page layout ──────────────────────────────────── */

.score-page-content {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  max-width: 1200px;
  margin: 40px auto;
}

.score-hero-sub.docs {
  max-width: 620px
}

/* ── Sidebar column ────────────────────────────────────── */

.sidebar {
  width: 23%;
  flex-shrink: 0;
  position: sticky;
  top: 76px;
  align-self: flex-start;
}

/* ── Sidebar nav — background, border, radius from .woocommerce-MyAccount-navigation ── */

.docs-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

/* ── Nav list — from .woocommerce-MyAccount-navigation ul ── */

.docs-sidebar-pages {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  margin: 0;
}

.docs-sidebar-pages > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.3;
  transition: background 0.15s, color 0.15s;
}

.docs-sidebar-pages > li > a:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

.docs-sidebar-pages > li.current-page > a {
  color: var(--brand);
  font-weight: 600;
  background: rgba(65, 202, 228, 0.1);
  border-left: 2px solid var(--brand);
}

/* ── H2 sub-list (shown on current page) ──────────────── */

.docs-sidebar-h2s {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 4px 0 8px;
  margin: 0;
  border-top: 1px solid var(--border);
}

.docs-sidebar-h2s li a {
  display: block;
  padding: 5px 20px 5px 30px;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
  transition: color 0.15s;
}

.docs-sidebar-h2s li a:hover {
  color: var(--text);
}

/* ── Main content column ───────────────────────────────── */

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

.docs-content h2 {
  margin: 12px 0 12px;
}

.docs-content p {
  margin-bottom: 24px;
}
.docs-content .wp-block-list {
  list-style: disc;
  list-style-position: inside;
  padding-left: 0;
  margin-bottom: 36px;
}

.docs-content .wp-block-list li {
  margin-bottom: 6px;
}

/* ── Responsive: stack below 768px ────────────────────── */

@media (max-width: 768px) {
  .score-page-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    position: static;
  }
}