/* ==========================================================================
   Devgun Family Law -- Chrome: Practice-area detail rail nav
   Figma: detail-page "Left" card (7146:753) -- rounded Light Blue card,
   parent title + divider, sibling links with the current page bolded.
   Rendered by templates/App/Includes/RailNav.ss on practice-area detail
   pages (App/Pages/Layout/TopLevelPage.ss, $Parent.exists branch).
   ========================================================================== */

.rail-nav {
  background-color: var(--color-bg-card-rail);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  margin-bottom: var(--space-gap);
}

.rail-nav__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.rail-nav__item {
  margin-bottom: 0.5rem;
}

.rail-nav__link {
  display: block;
  padding: 0.375rem 0;
  color: var(--color-text-default);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body2);
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: break-word;
}

.rail-nav__link:hover,
.rail-nav__link:focus {
  text-decoration: underline;
}

/* X8: stronger current-item state -- darker color + 700 weight (both
   already present) plus a 3px left accent bar, per the design PNG
   (05-collab-family-divorce.png rail region shows the current item bolded
   and darker; the accent is this pass's addition for a clearer at-a-glance
   marker, since --fw-bold alone reads subtly at the rail's 16px body
   size). Negative margin/padding compensates so the accent doesn't shift
   the link text against its siblings. */
.rail-nav__link.current,
.rail-nav__link.section {
  color: var(--color-green-dark);
  font-weight: var(--fw-bold);
  padding-left: 0.625rem;
  margin-left: -0.625rem;
  border-left: 3px solid var(--color-green-dark);
}

@media (min-width: 992px) {
  .rail-nav {
    position: sticky;
    top: 1.5rem;
  }
}

/* ==========================================================================
   Rail disclosure wrapper (build-spec 5.4 / Section 6 rail collapse)
   TopLevelPage.ss wraps RailNav.ss in a <details class="rail-disclosure">
   so the rail collapses below lg to a disclosure above the content; the
   <summary> carries the section title (the card's in-nav title is hidden
   inside the wrapper to avoid a duplicate). An inline script in the layout
   auto-opens the disclosure at lg+; without JS it stays a functional,
   openable native disclosure at every width.
   ========================================================================== */

.rail-disclosure {
  background-color: var(--color-bg-card-rail);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  margin-bottom: var(--space-gap);
}

/* The card surface moves to the wrapper; neutralize it on the inner nav. */
.rail-disclosure .rail-nav {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

/* Summary replaces the in-card title (same look as .rail-nav__title). */
.rail-disclosure .rail-nav__title {
  display: none;
}

.rail-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.rail-disclosure__summary::-webkit-details-marker {
  display: none;
}

.rail-disclosure__summary::marker {
  content: none;
}

.rail-disclosure__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
  margin: 0;
}

.rail-disclosure__chevron {
  flex: none;
  color: var(--color-text-heading);
}

@media (prefers-reduced-motion: no-preference) {
  .rail-disclosure__chevron {
    transition: transform 0.2s ease;
  }
}

.rail-disclosure[open] > .rail-disclosure__summary {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.rail-disclosure[open] .rail-disclosure__chevron {
  transform: rotate(180deg);
}

@media (min-width: 992px) {
  /* Sticky moves to the wrapper (the nav inside a <details> cannot stick
     on its own); chevron hidden to match the desktop card (7146:753). */
  .rail-disclosure {
    position: sticky;
    top: 1.5rem;
  }

  .rail-disclosure .rail-nav {
    position: static;
  }

  .rail-disclosure__chevron {
    display: none;
  }
}