/**
 * Rail nav: the category and its sibling procedures, in the interior rail.
 *
 * Styled as a panel to match the other rail blocks in layout.css, but with a
 * gold rule under the heading rather than a full border, so a page carrying
 * both this and a CTA block does not read as two competing boxes.
 */

.rail-nav {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--s-5);
}

.rail-nav__heading {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-slate-200);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  position: relative;
}
.rail-nav__heading::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 3rem;
  height: 2px;
  background: var(--c-gold-600);
}
.rail-nav__heading a { color: var(--c-slate-700); text-decoration: none; }
.rail-nav__heading a:hover { color: var(--c-slate-900); }

.rail-nav__list { list-style: none; margin: 0; padding: 0; }

.rail-nav__item + .rail-nav__item { border-top: 1px solid var(--c-rule-2); }
.rail-nav__item a {
  display: block;
  padding: var(--s-2) 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.rail-nav__item a:hover { color: var(--c-slate-700); transform: translateX(2px); }

.rail-nav__item.is-current a {
  color: var(--c-slate-900);
  font-weight: 700;
}
/* A gold tick in the margin, so the current item is not marked by weight
   alone — weight is easy to miss in a list of twenty. */
.rail-nav__item.is-current a::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 2px;
  margin-inline-end: var(--s-2);
  vertical-align: middle;
  background: var(--c-gold-600);
}