/* =============================================================================
   towing-pricingnav.css — the in-tab category rail on /pricing.

   WHAT IT IS. The "Rates and mileage" and "Adjustments and extras" tabs used to
   print every service's rate table (and every extras card) in one column, which
   is a very long scroll on a phone and an unreadable wall on a desktop. Those
   two tabs now render a left-hand category rail plus a single content pane: one
   service, or the mileage table, or one extras card at a time.

   HOW IT WORKS. Nothing here is behaviour — the rail is a list of real <a>
   links carrying ?tab=…&cat=…#pr-nav, resolved on the server. It works with
   JavaScript disabled, the choice survives a reload and the Back button, and
   the #pr-nav fragment means a click lands on the rail rather than throwing the
   reader back to the top of the page. This file only lays the two columns out
   and makes the selected row look selected.

   WHY A SEPARATE FILE. The CSP is `style-src 'self'` — no <style> blocks and no
   style= attributes anywhere — so every rule has to live in a real stylesheet,
   and towing-site.css / towing-ui.css / towing-disclosure.css are owned
   elsewhere. Linked from public/pages/pricing.php as the first node of the page
   body, the same way the disclosure assets are emitted.

   Palette: asphalt #0C0F14, safety orange #FF6B1F (--secondary), signal blue
   #7FB4FF (--primary). All three come from towing-tokens.css; nothing is
   hard-coded. No CSS nesting — nothing else in this codebase uses it.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. THE TWO-COLUMN SHELL

   Stacked by default (rail above pane) and side by side from 62rem. The pane is
   an explicit minmax(0, 1fr) track and carries min-width: 0 as well: a grid item
   defaults to min-width: auto, so one wide rate table would otherwise stretch
   the column and push the whole page sideways instead of scrolling inside its
   own .tw-table__scroll wrapper.

   scroll-margin-top matches the .tw-tabstrip[id] rule in towing-disclosure.css
   so the sticky site header never parks on top of the rail we just jumped to.
   -------------------------------------------------------------------------- */
.pr-split {
  display: grid;
  gap: 1rem;
  margin-top: 0.25rem;
  min-width: 0;
  scroll-margin-top: 6rem;
}
.pr-pane {
  min-width: 0;
  max-width: 100%;
}


/* -----------------------------------------------------------------------------
   2. THE CATEGORY RAIL
   Sidebar tone (--surface-container-low) so it reads as chrome, not as another
   content card sitting next to the real one.
   -------------------------------------------------------------------------- */
.pr-catnav {
  min-width: 0;
  padding: 0.625rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
}
.pr-catnav__title {
  margin: 0 0 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Two per row on a narrow screen: seven services stacked one-per-line is a
   whole phone screen of menu before any price is visible. */
.pr-catnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

/* 44px floor on the touch target, and a long service name wraps inside the
   row rather than widening the rail. */
.pr-catnav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-menu) var(--ease-out),
              background-color var(--dur-menu) var(--ease-out),
              border-color var(--dur-menu) var(--ease-out);
}
.pr-catnav__link:active { transform: scale(0.98); }

/* Selected: safety orange, and never colour alone — the fill, the border and
   the weight all change, so it survives a monochrome or high-contrast render. */
.pr-catnav__link[aria-current="page"] {
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
  border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
  color: var(--on-surface);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .pr-catnav__link:hover {
    color: var(--on-surface);
    background: var(--surface-container-high);
  }
  .pr-catnav__link[aria-current="page"]:hover {
    background: color-mix(in srgb, var(--secondary) 20%, transparent);
  }
}
.pr-catnav__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   3. THE PANE HEADING
   The section's kicker and <h2> keep their wording and the <h2> keeps its id,
   so every #pr-rates / #pr-mileage / #pr-mods / #pr-extras anchor still lands.
   Sized to match .tw-fold--acc > summary .tw-fold__title, which is what these
   sections looked like before.
   -------------------------------------------------------------------------- */
.pr-pane__head {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 0.875rem;
}
.pr-pane__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--secondary);
}
.pr-pane__title {
  margin: 0;
  font-family: var(--font-display, Manrope, system-ui, sans-serif);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--on-surface);
}
/* The section lede is reused verbatim from the accordion layout; outside a fold
   body it needs no padding correction, only its own bottom margin. */
.pr-pane > .tw-fold__lede { margin-bottom: 1rem; }
.pr-pane > .tw-table-card + .tw-t-body-sm,
.pr-pane > .tw-card + .tw-t-body-sm,
.pr-pane > .tw-table-card + .tw-section__more { margin-top: 1rem; }


/* -----------------------------------------------------------------------------
   4. DESKTOP: RAIL BESIDE THE PANE, AND IT FOLLOWS YOU DOWN
   62rem is the point where 16rem of rail plus a rate table still leaves the
   table its five columns without a horizontal scrollbar.
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .pr-split {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .pr-catnav {
    position: sticky;
    top: 5.5rem;                       /* clears the sticky .tw-sitehead */
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pr-catnav__list { grid-template-columns: minmax(0, 1fr); }
}


/* -----------------------------------------------------------------------------
   5. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pr-catnav__link { transition: none; }
  .pr-catnav__link:active { transform: none; }
}