/* =============================================================================
   towing-disclosure.css — accordion + tab chrome for the long public pages.

   Loaded by tw_disclosure_css() (public/pages/_compact.php) on /services,
   /service-areas, /faq, /pricing and /about. Nothing here is page-specific:
   it is one visual treatment for "this row is a control you can open".

   WHY A SEPARATE FILE. The CSP is `style-src 'self'` — no <style> blocks and
   no style= attributes anywhere — so every rule below has to live in a real
   stylesheet. towing-site.css and towing-ui.css are owned elsewhere.

   WHAT IT BUILDS ON. .tw-fold (towing-site.css §19.4) already supplies the
   card, the radius and the rotating chevron. .tw-fold--acc only turns that
   quiet row into something that reads as clickable from across the page: a
   chevron seated in a circular well, a hover state, a focus ring, and a
   safety-orange edge while it is open. Base behaviour is untouched, so a fold
   without the modifier looks exactly as it did.

   No CSS nesting — nothing else in this codebase uses it.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. ACCORDION GROUP
   The gap owns the spacing between rows, so the base `.tw-fold + .tw-fold`
   margin is zeroed inside a group and the rhythm cannot double up. The group
   also supplies the breathing room that was missing between a chip row and the
   disclosure underneath it (.tw-taglist--lg has margin: 0).
   -------------------------------------------------------------------------- */
.tw-accgroup {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}
.tw-accgroup > .tw-fold + .tw-fold { margin-top: 0; }
/* A section header already carries its own generous bottom margin, and the tab
   strip its own. Neither should be padded twice. */
.tw-section__head + .tw-accgroup { margin-top: 0; }
.tw-tabstrip + .tw-accgroup { margin-top: 0.25rem; }
.tw-accgroup + .tw-section__more { margin-top: 1.5rem; }
.tw-accgroup + .tw-accgroup { margin-top: 0.75rem; }


/* -----------------------------------------------------------------------------
   2. THE ROW READS AS A CONTROL
   -------------------------------------------------------------------------- */
.tw-fold--acc {
  background: var(--surface-card);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  transition: border-color var(--dur-menu) var(--ease-out),
              background-color var(--dur-menu) var(--ease-out);
}

/* 56px, comfortably past the 48px floor, and room on the right for the marker
   well so a long title can never collide with it. */
.tw-fold--acc > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.9375rem 3.5rem 0.9375rem 1.125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The marker well. ::after (the chevron) is inherited from .tw-fold and only
   nudged right so it lands in the middle of this circle. */
.tw-fold--acc > summary::before {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 1.875rem;
  height: 1.875rem;
  margin-top: -0.9375rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container);
  transition: border-color var(--dur-menu) var(--ease-out),
              background-color var(--dur-menu) var(--ease-out);
}
.tw-fold--acc > summary::after {
  right: 1.6875rem;
  border-right-color: var(--secondary);
  border-bottom-color: var(--secondary);
}

/* Pointer devices get the hover promise; coarse pointers get the press. */
@media (hover: hover) and (pointer: fine) {
  .tw-fold--acc:hover {
    border-color: color-mix(in srgb, var(--secondary) 55%, var(--outline-variant));
    background: var(--surface-container);
  }
  .tw-fold--acc:hover > summary::before {
    border-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 16%, transparent);
  }
}
.tw-fold--acc > summary:active { background: var(--surface-container); }

/* Keyboard focus has to be visible on the row, not just on the glyph. */
.tw-fold--acc > summary:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--secondary);
  outline-offset: -3px;
  border-radius: 12px;
}

/* Open: safety-orange edge down the left, so an open row is identifiable at a
   glance in a stack of closed ones. */
.tw-fold--acc[open] {
  border-color: color-mix(in srgb, var(--secondary) 48%, var(--outline-variant));
  box-shadow: inset 3px 0 0 0 var(--secondary);
}
.tw-fold--acc[open] > summary::before {
  border-color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 18%, transparent);
}

/* The hero panel keeps its raised-card elevation; the inset edge would fight
   the chevron strip along its top. */
.tw-fold--acc.tw-hero__panel[open] { box-shadow: var(--elev-3); }
.tw-fold--acc.tw-hero__panel > summary { padding-left: 0; padding-right: 3rem; }


/* -----------------------------------------------------------------------------
   3. A SECTION HEADING USED AS A SUMMARY
   Pricing and About fold whole page sections away. The <h2> moves inside the
   <summary> (valid: summary takes phrasing content intermixed with heading
   content) so the document outline and every #anchor survive the change.
   The two-part selector is deliberate: `.tw-hero__panel h2` is 0-1-1 and would
   otherwise win over a single class.
   -------------------------------------------------------------------------- */
.tw-fold__sum {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.tw-fold--acc > summary .tw-fold__kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--secondary);
}
.tw-fold--acc > summary .tw-fold__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;
  text-transform: none;
  color: var(--on-surface);
}

/* The section lede that used to sit under the <h2> now opens the fold body. */
.tw-fold__lede {
  margin: 0 0 1.25rem;
  color: var(--on-surface-variant);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* A fold body holding a table or a card grid needs a little air above it — the
   base .tw-fold__body only pads the sides and the bottom. */
.tw-fold--acc > .tw-fold__body { padding-top: 0.25rem; }


/* -----------------------------------------------------------------------------
   4. TAB STRIP
   .tw-tabstrip (towing-site.css §19.3) is already a real-link, no-JS,
   ?tab=-driven control. It only needed a stronger selected state and a shell
   that keeps its own horizontal scrolling off the page. tw-disclosure.js then
   nudges the active tab into view when the strip overflows — an enhancement,
   never a requirement.
   -------------------------------------------------------------------------- */
.tw-tabshell {
  max-width: 100%;
  margin-bottom: 1.25rem;
}
.tw-tabshell .tw-tabstrip {
  margin-bottom: 0;
  scroll-padding-inline: 1rem;
}
/* The underline sits on the strip's own bottom border; give the active tab a
   soft ground so it also reads as selected without relying on colour alone. */
.tw-tabshell .tw-tabstrip a[aria-current="page"] {
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
}
@media (max-width: 47.99rem) {
  .tw-tabshell .tw-tabstrip a { font-size: 0.875rem; padding: 0 0.75rem; }
}
/* On a wide screen a horizontal scroller has no affordance — there is no
   touch to flick it and the overflowed tabs are simply invisible. With eight
   FAQ topics the strip is wider than the column, so let it wrap instead. */
@media (min-width: 64rem) {
  .tw-tabshell .tw-tabstrip { flex-wrap: wrap; row-gap: 0.25rem; }
}


/* -----------------------------------------------------------------------------
   5. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tw-fold--acc,
  .tw-fold--acc > summary::before,
  .tw-fold--acc > summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Anchored navigation: land on the control, not the top of the page.

   Tabs and in-page section menus are real links, so clicking one is a real
   navigation and the browser would otherwise land at the very top — the reader
   loses their place and has to scroll back down. The links carry a fragment
   pointing at their own strip; scroll-margin-top then stops the sticky header
   from sitting on top of the thing we just scrolled to.
   --------------------------------------------------------------------------- */
.tw-tabstrip[id],
.tw-accgroup[id],
[id^="tw-nav-"] {
  scroll-margin-top: 6rem;
}

/* A reader who has not scrolled should not be nudged at all. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------
   Back to top.
   Hidden until the reader is far enough down to want it. The CSP forbids the
   inline script that would normally add a "js is on" class before first paint,
   so the button starts hidden and the deferred script reveals it — no flash of
   a floating button on a page the reader has not scrolled yet. With scripting
   off it stays hidden; Home still scrolls to the top, so nothing is lost.
   --tw-bottom-stack lets the shortcut bar push it up without either component
   knowing the other's height.
   --------------------------------------------------------------------------- */
.tw-backtotop {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--tw-bottom-stack, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-container) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--on-surface);
  font: 600 0.8125rem/1 var(--font-body);
  text-decoration: none;
  box-shadow: var(--elev-2);
  transition: opacity var(--dur-menu, 200ms) ease,
              transform var(--dur-menu, 200ms) ease,
              background-color var(--dur-menu, 200ms) ease;
}

/* The script owns visibility. */
.tw-backtotop {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}
.tw-backtotop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (hover: hover) {
  .tw-backtotop:hover { background: var(--surface-container-high); }
}
.tw-backtotop:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--secondary));
  outline-offset: 2px;
}
.tw-backtotop:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .tw-backtotop { transition: none; }
  .tw-backtotop:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Public left section menu (tw_sectionnav) + the split it sits in.

   The public counterpart of the admin work surface: a sticky column of section
   links on the left, the chosen section beside it. A horizontal strip of eight
   topics cannot be read at a glance and runs off a phone; read down the left
   they all fit and the current one is obvious.
   --------------------------------------------------------------------------- */

.tw-secsplit {
  display: grid;
  gap: var(--stack-md, 1rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .tw-secsplit { grid-template-columns: 15rem minmax(0, 1fr); }
}

.tw-secsplit__main { min-width: 0; }   /* a wide table must not stretch the grid */

.tw-secnav {
  min-width: 0;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  background: var(--surface-container-low, var(--surface-container));
  padding: 0.5rem;
}

@media (min-width: 62rem) {
  .tw-secnav {
    position: sticky;
    top: 6rem;                 /* clears the sticky site header */
    align-self: start;         /* without this the column stretches and never sticks */
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.tw-secnav__title {
  margin: 0;
  padding: 0.5rem 0.625rem 0.375rem;
  font: 700 0.6875rem/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.tw-secnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tw-secnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  color: var(--on-surface-variant);
  text-decoration: none;
  font: 600 0.875rem/1.25 var(--font-body);
  transition: background-color var(--dur-menu, 200ms) ease, color var(--dur-menu, 200ms) ease;
}

@media (hover: hover) {
  .tw-secnav__link:hover { background: var(--hairline-faint); color: var(--on-surface); }
}
.tw-secnav__link:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--secondary));
  outline-offset: 2px;
}
.tw-secnav__link[aria-current="page"] {
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: var(--on-surface);
  font-weight: 700;
}

.tw-secnav__count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  background: var(--surface-variant);
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
}
.tw-secnav__link[aria-current="page"] .tw-secnav__count {
  background: color-mix(in srgb, var(--secondary) 30%, transparent);
  color: var(--on-surface);
}

/* Narrow: two per row, so eight topics are four compact rows, not a tall list. */
@media (max-width: 61.99rem) {
  .tw-secnav { position: static; max-height: none; overflow: visible; }
  .tw-secnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
  .tw-secnav__link { background: var(--surface-card); border: 1px solid var(--outline-variant); }
  .tw-secnav__link[aria-current="page"] { border-color: var(--secondary); }
}
@media (max-width: 30rem) {
  .tw-secnav__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tw-secnav__link { transition: none; }
}