/**
 * In-page table of contents — scroll spy + mobile top rail.
 *
 * Two Elementor icon-list widgets render the same anchor list: a vertical one in
 * the desktop sidebar and one inside the sticky `.filter-row` on mobile.
 * page-toc.js flags the entry for the section currently in view with
 * `.ck-toc-current`; here it gets its highlight, and the mobile list is turned
 * into a horizontally scrolling rail.
 *
 * Loaded on every page in bykirin_toc_pages() (inc/page-toc.php) — Concept, and
 * the legal/shipping pages — so nothing here may be scoped to a page ID.
 */

/* The current entry inverts the widget's own colours: black at rest, and the
   idle grey on hover. Idle entries keep the Elementor defaults (#BEBCB4 → #000).
   Colour alone carries the current state — no underline, at rest or on hover.
   The `body .elementor .elementor-element` prefix is specificity, not scoping —
   Elementor's generated per-widget rules are (0,4,0)/(0,5,0) and would otherwise
   win; this is (0,5,2). It used to read `.elementor-602`, which stopped working
   the moment a second page grew a TOC. */
body
  .elementor
  .elementor-element
  .ck-toc-item.ck-toc-current
  > a
  .elementor-icon-list-text {
  color: #000;
}

/* Mobile: the sticky row's list becomes a single-line horizontal rail that the
   script keeps scrolled to the current section. */
@media (max-width: 767px) {
  /* The rail sticks to the header's bottom edge. Plain CSS sticky — the
     container's Elementor sticky was never enabled (its settings carry a
     leftover sticky_on but no `sticky` key, so no Elementor sticky markup is
     output). The row's parent is the page-root container, so it stays stuck
     for the whole page. When the header slides away (.ckh--hidden = dynamic
     scroll-down, .ckh--idle-hidden = idle autohide) the rail follows up to the
     top of the screen. It moves on `transform`, exactly like the header bar
     (translateY, 0.3s ease): animating `top` instead re-runs sticky layout on
     the main thread every frame while the bar slides on the compositor, so the
     two drift apart mid-transition and the page shows through the gap.
     z-index below the header's 999 so the bar passes over the rail.

     Everything positional waits for `.ck-rail-pinned` (page-toc.js): until the
     page has scrolled past where the rail actually sits, it is a normal
     in-flow row that scrolls away with the content. Sticky on its own would
     pin it the moment it touched `top`, i.e. from the first scroll on any page
     whose rail starts near the top. */
  .filter-row {
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
    will-change: transform;
    background: #fafafa;
    /* The 20px blur of the lift below would bleed out the sides and the top
       edge, where the rail meets the header; clip everything but the bottom
       overflow away. No seam band above the rail: it would paint over whatever
       sits above the row whenever the rail isn't stuck, and the shared
       transform below keeps bar and rail flush anyway. */
    clip-path: inset(0 0 -24px 0);
  }

  .ck-rail-pinned .filter-row {
    position: sticky;
    top: var(--ckh-h, 48px);
    z-index: 998;
  }

  /* The single frame where the rail pins or releases: `top` changes instantly
     but the header-follow transform below would animate into place, so the row
     would drop a header height and slide back. Both land at once instead —
     while the lift, which also switches on at that moment, keeps its transition
     and fades in rather than snapping. */
  .ck-rail-crossing .filter-row {
    transition: box-shadow 0.3s ease;
  }

  /* The lift reads as separation from the content scrolling under the rail —
     so it belongs to the pinned rail only; in flow there is nothing passing
     underneath to separate from. (`.ck-rail-scrolled`, still set by
     page-toc.js, remains the "page has moved at all" flag.) */
  .ck-rail-pinned.ck-rail-scrolled .filter-row {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  /* Only a pinned rail follows the header up; in flow this would yank the row
     48px over the content above it. */
  .ck-rail-pinned body:has(.ckh--hidden) .filter-row,
  .ck-rail-pinned body:has(.ckh--idle-hidden) .filter-row {
    transform: translateY(calc(-1 * var(--ckh-h, 48px)));
  }

  /* The rail is flush under the header and carries the shadow for both, so the
     header's own scroll shadow would land on top of the rail as a dark band.
     Drop it here; !important beats the widget's id-scoped rule. */
  .ckh {
    box-shadow: none !important;
  }

  /* A hidden header slides its bar away with translateY(-100%), but the sticky
     LOCATION wrapper keeps its box at top:0 — and at z-index 999 it sits over
     the rail that just moved up under it, swallowing the taps. Nothing in the
     wrapper is visible while hidden, so let pointer events through to the rail;
     the bar itself re-enables them as soon as it slides back. */
  body:has(.ckh--hidden) .elementor-location-header,
  body:has(.ckh--idle-hidden) .elementor-location-header {
    pointer-events: none;
  }

  .filter-row .elementor-widget-icon-list .elementor-icon-list-items {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: #fafafa;
    padding: 8px 12px;
    margin: 0;
  }

  .filter-row
    .elementor-widget-icon-list
    .elementor-icon-list-items::-webkit-scrollbar {
    display: none;
  }

  .filter-row .elementor-widget-icon-list .elementor-icon-list-item {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  .filter-row .elementor-widget-icon-list .elementor-icon-list-text {
    white-space: nowrap;
  }
}