/* =========================================================
   disorder.css — page-specific styles for disorder.php
   (single condition detail page)
   ========================================================= */

.page-hero-disorder{
  padding: 56px 0 40px;
  background:
    radial-gradient(circle at 85% 0%, rgba(47,169,140,0.14), transparent 45%),
    var(--bg-deep);
}
.disorder-back-link{
  display:inline-block; margin-top:14px;
  font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; font-weight:500;
  color:#DCEFE8; text-decoration:none;
}
.disorder-back-link:hover{text-decoration:underline;}

.disorder-detail-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:44px;
  align-items:start;
}

/* ---------- Sidebar / Table of Contents ---------- */
.disorder-sidebar{
  position:sticky;
  top:24px;
}
.disorder-sidebar h2{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-dim); margin-bottom:14px;
}
.disorder-sidebar ul{
  list-style:none; margin:0; padding:0;
  border-left:2px solid var(--paper-line);
}
.disorder-sidebar li{margin:0;}
.disorder-sidebar a{
  display:block;
  padding:8px 0 8px 16px; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:'IBM Plex Sans',sans-serif; font-size:13.5px;
  color:var(--muted); text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.disorder-sidebar a:hover{color:var(--teal-dim);}
.disorder-sidebar a.is-active{
  color:var(--teal-dim); font-weight:600;
  border-left-color:var(--teal);
}

/* ---------- Main content ---------- */
.disorder-content section{
  scroll-margin-top:24px;
  padding-bottom:28px; margin-bottom:28px;
  border-bottom:1px solid var(--paper-line);
}
.disorder-content section:last-of-type{border-bottom:none;}
.disorder-content h1{
  font-size:19px; margin-bottom:12px; color:var(--ink, #1B2E28);
}
.disorder-content p{
  font-size:14.5px; line-height:1.7; color:var(--muted); margin:0;
}

.disorder-page-disclaimer{margin-top:8px; margin-bottom:36px;}

/* ---------- Pagination ---------- */
.disorder-pagination .pagination{
  display:flex; justify-content:space-between; align-items:center;
  list-style:none; padding:0; margin:0; gap:12px;
}
.disorder-pagination .page-link{
  display:inline-block; padding:10px 16px; border-radius:var(--radius-lg);
  border:1px solid var(--paper-line-strong); background:#fff;
  font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500;
  color:var(--muted); text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.disorder-pagination .page-link:hover{border-color:var(--teal); color:var(--teal-dim);}
.disorder-pagination .page-item.disabled .page-link{
  opacity:.4; pointer-events:none;
}

/* Hero text colors — tune these for contrast against .page-hero-disorder's background */
.page-hero-disorder .eyebrow{
  color:#7FBFAE; /* category label, e.g. "Mood" */
}
.page-hero-disorder h1{
  color:#FFFFFF; /* the disorder title, e.g. "Bipolar Disorder" */
}
.page-hero-disorder .page-hero-lead{
  color:#D7E7E1; /* the summary sentence below the title */
}
.disorder-back-link{
  color:#DCEFE8; /* the "Back to Conditions We Treat" link */
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .disorder-detail-layout{grid-template-columns:1fr;}
  .disorder-sidebar{
    position:static;
    border:1px solid var(--paper-line); border-radius:var(--radius-lg);
    padding:16px 18px; margin-bottom:8px;
  }
  .disorder-sidebar ul{
    border-left:none;
    display:flex; flex-wrap:wrap; gap:6px 14px;
  }
  .disorder-sidebar a{padding:4px 0; border-left:none;}
  .disorder-sidebar a.is-active{border-left:none; text-decoration:underline;}
}
@media (max-width: 560px){
  .disorder-pagination .pagination{flex-direction:column; align-items:stretch;}
  .disorder-pagination .page-link{text-align:center;}
}