/* ==========================================================================
   section-nav.css  -  Shared sticky side-navigation (scroll-spy) rail.
   Single source of truth for the LOOK of the rail used by both the Locations
   (/location) and Practice Areas (/practice-areas) hub pages. Markup comes from
   partials/elements/section-nav.ejs; scroll-spy behavior from
   /javascript/section-nav.js.

   This file owns ONLY the component's look (colors, type, spacing, the left
   accent bar, the active state, and the mobile top-bar treatment). Each page
   keeps its own LAYOUT concerns (the .loc-layout / .pa-layout grid, the rail
   width, and the sticky offset for the rail), re-scoped to .section-nav within
   that layout, so placement stays byte-for-byte identical to the prior inline
   per-page navs.

   Color scheme (navy accent + navy text):
     accent    #0b336e
     text      #0a1e3c
     text-soft rgba(10, 30, 60, 0.82)
     text-dim  rgba(10, 30, 60, 0.55)
     active    rgba(10, 30, 60, 0.06) wash
   ========================================================================== */

.section-nav {
  display: flex;
  flex-direction: column;
}
.section-nav__eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(10, 30, 60, 0.55);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}
.section-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Services-hub button design: left accent bar that thickens on hover/active,
   serif name + small description. */
.section-nav__link {
  display: block;
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-left: 4px solid rgba(10, 30, 60, 0.4);
  text-decoration: none;
  transition: border-left-width 0.15s ease, padding-left 0.15s ease;
}
.section-nav__link:hover,
.section-nav__link:focus,
.section-nav__link.is-active {
  border-left-width: 7px;
  padding-left: calc(1.25rem - 3px);
  /* Active/hover marker bar is NAVY (was black #111111, originally gold #c7a559).
     Shared component, so this navy accent shows on both /location and
     /practice-areas. */
  border-left-color: #0b336e;
}
/* Active state is marked by the thicker navy left bar + bold underlined name;
   no background wash (it read as a gray highlight). */
.section-nav__link.is-active {
  background-color: transparent;
}
.section-nav__name {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(10, 30, 60, 0.82);
  transition: color 0.15s ease;
}
.section-nav__link:hover .section-nav__name,
.section-nav__link.is-active .section-nav__name {
  color: #0a1e3c;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.section-nav__link.is-active .section-nav__name {
  font-weight: 700;
}
.section-nav__desc {
  display: block;
  margin: 0.2rem 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(10, 30, 60, 0.55);
}

/* ---- Mobile: the rail collapses to a horizontal top bar of buttons -------
   Matches the locations page's prior mobile treatment at the same breakpoint.
   Per-page layout CSS still owns the surrounding stack (flex-direction,
   gutters); this block themes the component's own mobile presentation. */
@media (max-width: 991.98px) {
  .section-nav__eyebrow { display: none; }
  /* Equally-spaced buttons across the mobile top bar: each link is an equal
     flex track, centered, so the items divide the width evenly. */
  .section-nav__list {
    flex-direction: row;
    flex-wrap: wrap;            /* long labels (e.g. "Intellectual Property") wrap
                                  to a second row instead of overflowing the page */
    gap: 0.25rem;
    justify-content: space-between;
  }
  .section-nav__link {
    flex: 1 1 0;
    text-align: center;
    padding: 0.4rem 0.5rem;
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .section-nav__link:hover,
  .section-nav__link:focus,
  .section-nav__link.is-active {
    padding-left: 0.7rem;
    border-left: 0;
    /* Mobile active/hover marker (underline) also NAVY, matching desktop. */
    border-bottom-color: #0b336e;
  }
  .section-nav__name { font-size: 0.95rem; }
  .section-nav__desc { display: none; }
}