/*
 * Clarity Component: toc-sidebar
 * Two BEM blocks bundled together:
 *   .cv-toc-layout — page-level 1/3 sidebar + 2/3 content layout
 *   .cv-toc        — sticky table-of-contents widget that lives in the sidebar
 *
 * Mobile: TOC collapses to a tap-to-open dropdown.
 * Desktop: TOC sticks at top: 96px (matches scroll-padding-top of feature pages).
 *
 * Source-of-truth pattern lifted from the live Clarity site's `js-anchor-nav`
 * markup on /payment-hub/features/<slug> pages (2026-04-28).
 */

/* ────────────────────────────────────────────────────────────────────
   LAYOUT — sidebar (1/3) + content (2/3)
   ──────────────────────────────────────────────────────────────────── */

/* On pages that use the TOC layout, neutralize the donor shell's
   `.wrapper { overflow: hidden }` — that rule turns .wrapper into a
   scroll container, which breaks `position: sticky` on every descendant.
   Replacing it with `overflow-x: clip; overflow-y: visible` keeps the
   horizontal clipping (so the payment-hub-hero illustration that extends
   past the viewport edge still doesn't trigger a horizontal scrollbar)
   while letting the TOC sidebar stick correctly.
   Scoped via :has() so other pages keep the original behavior. */
.wrapper:has(.cv-toc-layout) {
  overflow: visible;
  overflow-x: clip;
  overflow-y: visible;
}

.cv-toc-layout {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .cv-toc-layout {
    padding-top: 60px;
    padding-bottom: 90px;
  }
}

.cv-toc-layout__container {
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 var(--cv-space-4, 15px);
}

.cv-toc-layout__row {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .cv-toc-layout__row {
    flex-direction: row;
    margin: 0 -23px;
  }
}

.cv-toc-layout__sidebar,
.cv-toc-layout__content {
  width: 100%;
}

@media (min-width: 768px) {
  /* Ratio: ~22 / 78 — the sidebar shrunk by roughly a third from the original
     33/67 split so the article column has more room.
     The sidebar itself is the sticky element. `align-self: flex-start` keeps
     it at its natural content height (instead of stretching to the row height),
     and `position: sticky; top: 96px` pins it against the viewport as the user
     scrolls past it. The row's height is set by the content column, so the
     sidebar can stick all the way down to the bottom of the article. */
  .cv-toc-layout__sidebar {
    width: 22%;
    padding: 0 16px;
    align-self: flex-start;
    position: sticky;
    top: 96px;
    z-index: 5;
  }
  .cv-toc-layout__content {
    width: 78%;
    padding: 0 16px;
    min-width: 0;  /* allow flex child to shrink under content overflow */
  }
}

/* Shift the TOC sidebar left into the empty margin between the viewport edge
   and the centered container, so the inline-CTA breakouts in the article
   (which extend up to -200px past the article's left edge) don't visually
   overlap the TOC. The compensating `margin-right` keeps the article column
   anchored where it was — only the sidebar moves.

   Math: container max-width is 1230px. Available shift on each side equals
   (100vw - 1230 - 32) / 2  (subtract 32 for a small buffer so the sidebar
   never touches the actual viewport edge). Capped at -180px on ultra-wide
   displays so the TOC doesn't drift too far away from the article body. */
@media (min-width: 1280px) {
  .cv-toc-layout__sidebar {
    margin-left: clamp(-180px, calc((1262px - 100vw) / 2), 0px);
    margin-right: clamp(0px, calc((100vw - 1262px) / 2), 180px);
  }
}

/* ── Hide / show the TOC sidebar ──────────────────────────────────── */
/* When the user clicks the close (×) button inside the TOC, JS adds
   `cv-toc-layout--toc-hidden` to the layout. The sidebar disappears,
   the article column expands to full width, and a "Show Contents"
   chip appears (positioned: fixed) so the reader can bring it back. */

.cv-toc-layout--toc-hidden .cv-toc-layout__sidebar {
  display: none;
}

@media (min-width: 768px) {
  .cv-toc-layout--toc-hidden .cv-toc-layout__content {
    width: 100%;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TOC WIDGET — the sticky navigation panel
   ──────────────────────────────────────────────────────────────────── */

.cv-toc {
  position: relative;
  z-index: 5;
  font-family: var(--cv-font-family);
}

/* On desktop the parent `.cv-toc-layout__sidebar` is the sticky element,
   so `__sticky` is just a passive wrapper. On mobile it serves only as a
   positioning context for the dropdown menu's absolute overlay. */
.cv-toc__sticky {
  position: relative;
}

/* ── Mobile toggle (visible on mobile only) ──────────────────────── */

.cv-toc__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.cv-toc__toggle-text {
  flex: 1;
  font-size: 0.94rem;
  line-height: 1.2;
  color: var(--cv-color-text-strong, #0f172a);
  padding-top: 20px;
  padding-bottom: 12px;
}

.cv-toc__toggle-text strong {
  display: block;
  font-weight: 600;
}

.cv-toc__active-label {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--cv-color-text, #475569);
  /* truncate long section names */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv-toc__toggle-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 12px;
  margin-top: 24px;
  color: var(--cv-color-text-strong, #0f172a);
  transition: transform 0.2s ease;
}

.cv-toc.cv-toc--open .cv-toc__toggle-icon {
  transform: rotate(180deg);
}

/* ── Desktop title (visible on desktop only) ─────────────────────── */

.cv-toc__title {
  display: none;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--cv-color-text-strong, #0f172a);
  line-height: 1.2;
  margin-bottom: 12px;
  padding-top: 20px;
  /* Make room for the close (×) button on the right */
  padding-right: 28px;
  position: relative;
}

/* ── Close button (desktop-only — mobile already collapses to a dropdown) ── */

.cv-toc__close {
  display: none;
}

@media (min-width: 768px) {
  .cv-toc__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px;
    right: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--cv-color-text, #475569);
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .cv-toc__close:hover,
  .cv-toc__close:focus-visible {
    color: var(--cv-color-accent-hover, #00B860);
    background: rgba(15, 23, 42, 0.05);
    outline: none;
  }
  .cv-toc__close svg {
    width: 14px;
    height: 14px;
    display: block;
  }
}

/* ── Floating "Show Contents" chip (appears after TOC is hidden) ──── */
/* Lives outside `.cv-toc-layout` so it stays visible even when the TOC
   layout itself is collapsed. JS toggles `[hidden]` to show/hide it. */

.cv-toc-show {
  display: none;  /* hidden by default; JS removes the [hidden] attribute when needed */
}

@media (min-width: 768px) {
  .cv-toc-show {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 50;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--cv-color-accent, #17D994);
    color: var(--cv-color-text-on-accent, #0f172a);
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .cv-toc-show:not([hidden]) { display: inline-flex; }
  .cv-toc-show:hover,
  .cv-toc-show:focus-visible {
    background: var(--cv-color-accent-hover, #00B860);
    color: #ffffff;
    outline: none;
  }
  .cv-toc-show svg {
    width: 14px;
    height: 14px;
    display: block;
  }
}

/* ── Menu container (collapsible on mobile) ──────────────────────── */

.cv-toc__menu-container {
  display: none;
}

.cv-toc.cv-toc--open .cv-toc__menu-container {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 8px 0;
  z-index: 10;
  max-height: 70vh;
  overflow-y: auto;
}

/* ── Desktop overrides ───────────────────────────────────────────── */

@media (min-width: 768px) {
  .cv-toc__toggle { display: none; }
  .cv-toc__title { display: block; }

  .cv-toc__menu-container {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-left: 1px solid var(--cv-color-border, #e2e8f0);
  }
}

/* ── Menu list ───────────────────────────────────────────────────── */

.cv-toc__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cv-toc__item {
  margin: 0;
}

.cv-toc__link {
  display: block;
  padding: 10px 15px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cv-color-text-strong, #0f172a);
  text-decoration: none;
  border: none;
  transition: color 0.15s ease, font-weight 0.15s ease;
}

@media (min-width: 768px) {
  .cv-toc__link {
    padding: 10px 0 10px 34px;
  }
}

.cv-toc__link:hover {
  color: var(--cv-color-accent-hover, #00B860);
}

.cv-toc__link--active {
  color: var(--cv-color-accent, #17D994);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .cv-toc__link,
  .cv-toc__toggle-icon { transition: none; }
}