/*!
 * Neonatology Academy — In-Page Section Navigation (left rail)
 * Reusable "On this page" sidebar. Prefix: snav-
 * Works alongside the global top header (nav.js). Does NOT replace it.
 */

:root {
  --snav-w: 232px;          /* sidebar width (desktop) */
  --snav-top: 60px;         /* global header height (matches nav.js NAV_H) */
  --snav-brand: #0f766e;
  --snav-brand-soft: #0d9488;
  --snav-bg: #ffffff;
  --snav-border: #e2e8f0;
  --snav-text: #475569;
  --snav-text-dim: #475569;
  --snav-active-bg: #f0fdfa;
  --snav-active-border: #0f766e;
  --snav-hover-bg: #f8fafc;
  --snav-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .04);
}

/* ── Desktop: fixed sticky left rail ─────────────────────────────────── */
.snav {
  position: fixed;
  top: var(--snav-top);
  left: 0;
  width: var(--snav-w);
  height: calc(100vh - var(--snav-top));
  background: var(--snav-bg);
  border-right: 1px solid var(--snav-border);
  box-shadow: var(--snav-shadow);
  z-index: 900;                 /* below the top header (nav.js uses higher) */
  display: flex;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  overflow: hidden;
}

.snav-head {
  padding: 1rem 1.15rem .65rem;
  border-bottom: 1px solid var(--snav-border);
  flex-shrink: 0;
}
.snav-head-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--snav-text-dim);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.snav-head-title {
  margin-top: .2rem;
  font-size: .98rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.snav-list {
  list-style: none;
  margin: 0;
  padding: .55rem .6rem 1.25rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
.snav-list::-webkit-scrollbar { width: 7px; }
.snav-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }

.snav-item { margin: 1px 0; }

.snav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--snav-text);
  font-size: .855rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  background: none;
  width: 100%;
  text-align: left;
}
.snav-link:hover { background: var(--snav-hover-bg); color: #1e293b; }
.snav-link .snav-ico {
  width: 16px;
  text-align: center;
  font-size: .82rem;
  color: var(--snav-text-dim);
  flex-shrink: 0;
  transition: color .13s;
}
.snav-link.snav-active {
  background: var(--snav-active-bg);
  color: var(--snav-brand);
  border-left-color: var(--snav-active-border);
  font-weight: 700;
}
.snav-link.snav-active .snav-ico { color: var(--snav-brand); }

.snav-link .snav-count {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  color: var(--snav-text-dim);
  background: #f1f5f9;
  border-radius: 99px;
  padding: .05rem .45rem;
  flex-shrink: 0;
}
.snav-link.snav-active .snav-count { background: #ccfbf1; color: var(--snav-brand); }

/* Sub-heading / group divider inside the list */
.snav-group-label {
  padding: .85rem .8rem .3rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--snav-text-dim);
}

/* ── Content offset so the rail never covers the page ────────────────── */
@media (min-width: 1100px) {
  body.snav-on .container,
  body.snav-on main.container {
    padding-left: calc(var(--snav-w) + clamp(1rem, 3vw, 3rem));
  }
  /* Whole-page shift (pages whose header is not fixed, e.g. guideline docs) */
  body.snav-on.snav-shift-body { padding-left: var(--snav-w); }
}

/* ── Mobile / tablet: collapsible top dropdown ───────────────────────── */
.snav-mobile-toggle { display: none; }

@media (max-width: 1099px) {
  .snav {
    position: sticky;
    top: var(--snav-top);
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--snav-border);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    z-index: 850;
    margin-bottom: 1rem;
  }
  body.snav-on .container,
  body.snav-on main.container { padding-left: clamp(1rem, 3vw, 3rem); }

  .snav-head { display: none; }

  .snav-mobile-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .8rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: #1e293b;
  }
  .snav-mobile-toggle .snav-mt-ico { color: var(--snav-brand); }
  .snav-mobile-toggle .snav-mt-current {
    color: var(--snav-brand);
    font-weight: 700;
  }
  .snav-mobile-toggle .snav-chev {
    margin-left: auto;
    color: var(--snav-text-dim);
    transition: transform .18s;
  }
  .snav.snav-open .snav-chev { transform: rotate(180deg); }

  .snav-list {
    display: none;
    max-height: 55vh;
    padding: .35rem .7rem 1rem;
    border-top: 1px solid var(--snav-border);
  }
  .snav.snav-open .snav-list { display: block; }
}

/* Respect reduced motion for the smooth scroll fallback */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}