/* assets/css/components/tab-bar.css
 * @layer components — Reusable tab bar component
 * ════════════════════════════════════════════════════════════════════
 *
 * Two visual variants (via modifier class):
 *   .tab-bar--underline  (default) — horizontal rail, bottom-underline on active
 *   .tab-bar--pills                — rounded pill container with pill triggers
 *
 * JS: reuses navigation.js IIFE #16 (.ec-tabs) via the dual-class trick.
 * The component root carries both .tab-bar and .ec-tabs classes.
 * CSS targets .tab-bar, JS targets .ec-tabs — clean separation.
 *
 * Accessibility: the component ships with full ARIA tabs pattern from PHP
 * (server-rendered aria-selected, aria-controls, role attributes, hidden
 * on inactive panels). JS refines roving tabindex + arrow keys on mount.
 * Graceful JS-less degradation: first tab is visible pre-JS, no layout shift.
 *
 * Mobile: both variants collapse to a horizontal CSS scroll rail with
 * snap-points and hidden scrollbar — long tab labels never truncate or
 * wrap, users swipe through the full set.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     ROOT — shared layout for both variants
     ════════════════════════════════════════════════════════════════════ */

  .tab-bar {
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
  }

  .tab-bar__nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-inline-size: 0;
    /* Horizontal scroll rail at every width — tabs never wrap or truncate.
       On wide screens the nav fits inline and the overflow is inert; on
       narrow screens users swipe through the full set. Hidden scrollbar
       for cleanliness — the visible peek of adjacent tabs is the affordance. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-bar__nav::-webkit-scrollbar {
    display: none;
  }

  .tab-bar__tab {
    scroll-snap-align: start;
  }

  /* Base tab trigger — shared between switcher (<button>) and nav (<a>) modes.
     Resets anchor defaults so nav-mode links don't carry inherited underlines. */
  .tab-bar__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition:
      color            var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      box-shadow       var(--duration-fast) var(--ease-default);
  }

  .tab-bar__tab:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Panels — show/hide via [hidden] attribute driven by JS.
     tabindex=0 on panels (set in PHP) makes them focusable so keyboard
     users can Tab into the active panel content after leaving the tablist. */
  .tab-bar__panel {
    display: block;
    min-inline-size: 0;
  }

  .tab-bar__panel[hidden] {
    display: none;
  }

  .tab-bar__panel:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-m);
  }


  /* ════════════════════════════════════════════════════════════════════
     VARIANT — UNDERLINE (default)
     ─────────────────────────────────────────────────────────────────────
     Horizontal rail with a full-width bottom hairline. Inactive tabs
     appear to "float above" the hairline. Active tab gets a 2px bottom
     border in primary teal that visually overlaps the 1px hairline,
     reading as a clean "selected" indicator.
     Premium, high-weight. Good for content switching.
     ════════════════════════════════════════════════════════════════════ */

  .tab-bar--underline .tab-bar__nav {
    gap: var(--space-s);
    border-block-end: 1px solid var(--border-subtle);
  }

  .tab-bar--underline .tab-bar__tab {
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    font-size: var(--text-m);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    border-block-end: 2px solid transparent;
    /* Negative margin pulls the 2px border down to overlap the parent's
       1px hairline, so the active indicator sits exactly on the line. */
    margin-block-end: -1px;
  }

  .tab-bar--underline .tab-bar__tab:hover {
    color: var(--text-main);
  }

  /* Active state — switcher mode uses aria-selected, nav mode uses .is-current.
     Both produce the same visual: primary teal text + primary teal underline. */
  .tab-bar--underline .tab-bar__tab[aria-selected="true"],
  .tab-bar--underline .tab-bar__tab.is-current {
    color: var(--primary);
    font-weight: var(--weight-semibold);
    border-block-end-color: var(--primary);
  }

  .tab-bar--underline .tab-bar__tab:focus-visible {
    border-radius: var(--radius-xs);
  }


  /* ════════════════════════════════════════════════════════════════════
     VARIANT — PILLS
     ─────────────────────────────────────────────────────────────────────
     Rounded pill container with pill triggers inside. Active pill lifts
     slightly via a white background + subtle shadow. Compact, filter-chip
     feel. Good for narrowing lists (investor docs, resource filters).
     ════════════════════════════════════════════════════════════════════ */

  .tab-bar--pills .tab-bar__nav {
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    background: var(--surface-tinted);
    border-radius: var(--radius-full);
    align-self: flex-start;
  }

  .tab-bar--pills .tab-bar__tab {
    padding-block: var(--space-xs);
    padding-inline: var(--space-m);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    border-radius: var(--radius-full);
  }

  .tab-bar--pills .tab-bar__tab:hover {
    color: var(--text-main);
  }

  /* Active state — switcher via aria-selected, nav via .is-current */
  .tab-bar--pills .tab-bar__tab[aria-selected="true"],
  .tab-bar--pills .tab-bar__tab.is-current {
    background: var(--white);
    color: var(--text-main);
    font-weight: var(--weight-semibold);
    box-shadow: var(--shadow-xs);
  }

  .tab-bar--pills .tab-bar__tab:focus-visible {
    border-radius: var(--radius-full);
  }


  /* ════════════════════════════════════════════════════════════════════
     MOBILE — horizontal scroll rail for both variants
     ─────────────────────────────────────────────────────────────────────
     On narrow screens, the tab nav becomes a horizontal CSS scroll rail.
     Native momentum scroll on iOS/Android. Snap-points so tabs snap to
     the edge. Hidden scrollbar — affordance is the visible peek of the
     next tab at the edge and natural edge clipping.
     ════════════════════════════════════════════════════════════════════ */

  /* Mobile: let the underline variant's scroll rail bleed past the container
     inline padding so the hairline extends edge-to-edge. */
  @media (max-width: 48em) {
    .tab-bar--underline .tab-bar__nav {
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
      scroll-padding-inline: var(--gutter);
    }
  }

}