/**
 * Chronicle section nav — current-page highlight + mobile top rail.
 *
 * The nav is the global icon-list widget 2875 (`.chronical-list`), reused on the
 * Chronicle page (1250) and every chronicle_section archive (template 2874). It
 * links between subpages, so there is no scroll spy: chronicle-nav.js marks the
 * entry matching the current URL with `.ck-toc-current` (same class vocabulary
 * as the Concept TOC, see page-toc.css) and this file styles it and turns
 * the mobile list into a sticky horizontal rail under the header.
 */

/* The current entry inverts the widget's own colours: black at rest, 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.
   Prefix mirrors Elementor's own generated selector shape
   (.elementor-NNNN .elementor-element.elementor-global-2875 …) so these rules
   win on specificity/order, on whichever page the global widget renders. */
.elementor-element.elementor-global-2875
  .ck-toc-item.ck-toc-current
  > a
  .elementor-icon-list-text {
  color: #000;
}

.elementor-element.elementor-global-2875
  .ck-toc-item.ck-toc-current
  > a:hover
  .elementor-icon-list-text {
  color: #bebcb4;
}

/* Mobile: the list becomes an always-visible horizontal rail stuck under the
   header — same construction as the Concept TOC (page-toc.css), but the
   containers here carry no hook class, so the MOBILE wrapper is selected
   structurally: the container whose direct child is the nav widget and which
   also holds the old Filter trigger (that excludes the desktop wrapper). */
@media (max-width: 767px) {
  /* Sticky rail docked to the header's bottom edge; follows the bar up when it
     hides (.ckh--hidden = scroll-down, .ckh--idle-hidden = idle autohide).
     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. */
  .e-con:has(> .chronical-list):has(.filter-trigger) {
    position: sticky;
    top: var(--ckh-h, 48px);
    z-index: 998;
    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 container whenever the rail isn't stuck, and the shared
       transform below keeps bar and rail flush anyway. */
    clip-path: inset(0 0 -24px 0);
  }

  /* The lift reads as separation from the content scrolling under the rail, so
     it belongs only to a page that has actually moved — flat at the top,
     shadow from the first pixel of scroll (flag set by chronicle-nav.js). */
  .ck-rail-scrolled .e-con:has(> .chronical-list):has(.filter-trigger) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  body:has(.ckh--hidden) .e-con:has(> .chronical-list):has(.filter-trigger),
  body:has(.ckh--idle-hidden)
    .e-con:has(> .chronical-list):has(.filter-trigger) {
    transform: translateY(calc(-1 * var(--ckh-h, 48px)));
  }

  /* Rail carries the shadow for the header+rail plane; drop the header's own
     scroll shadow (!important beats its id-scoped rule). */
  .ckh {
    box-shadow: none !important;
  }

  /* A hidden header's sticky LOCATION wrapper still covers the rail at
     z-index 999 and would swallow taps — let them through while hidden. */
  body:has(.ckh--hidden) .elementor-location-header,
  body:has(.ckh--idle-hidden) .elementor-location-header {
    pointer-events: none;
  }

  /* The old Filter accordion (snippet 3043) is obsolete here: hide its
     trigger row and undo the height:0 collapse it puts on .filter-list.
     !important also beats the inline height 3043's JS may set on click. */
  .e-con:has(> .dynamic-data) {
    display: none !important;
  }

  .chronical-list.filter-list {
    height: auto !important;
    overflow: visible !important;
  }

  /* The rail itself: single line, horizontal scroll, hidden scrollbar. */
  .chronical-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;
  }

  .chronical-list .elementor-icon-list-items::-webkit-scrollbar {
    display: none;
  }

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

  .chronical-list .elementor-icon-list-text {
    white-space: nowrap;
  }
}