/**
 * About Section Nav Strip
 *
 * The white strip under the page-banner on every About Us sub-page that
 * hosts the tab-bar (nav mode) for section navigation. Owns the visual
 * seam (background + bottom hairline) between the hero and the first
 * content section below.
 *
 * Loaded site-wide for $is_about_section so every sub-page renders the
 * strip consistently — not just the About Us landing. Previously this
 * block lived in about-hub.css, which only loads on the landing page,
 * so sub-pages (Leadership, Philosophy, Vision & Values, QMS, etc.)
 * rendered the tab-bar with no containing strip and a disconnected
 * active underline indicator.
 *
 * Also corrects a CLS/visual-disconnect bug: the base .tab-bar__tab
 * carries margin-block-end: -1px so its active 2px border overlaps the
 * component's own 1px hairline. When .about-section-nav suppresses that
 * hairline (because the strip owns the seam), the negative margin
 * pushes the active indicator 1px below the strip edge. We neutralise
 * the margin here so the active underline sits exactly on the strip.
 *
 * @package Vimta
 */

@layer components {

  .about-section-nav {
    background: var(--white);
    border-block-end: 1px solid var(--border-subtle);
  }

  /* Suppress the tab-bar's built-in hairline — the strip owns the seam. */
  .about-section-nav .tab-bar--underline .tab-bar__nav {
    border-block-end: none;
  }

  /* Neutralise the tab's negative margin so the active 2px underline sits
     flush on the strip's bottom border instead of floating 1px below it. */
  .about-section-nav .tab-bar--underline .tab-bar__tab {
    margin-block-end: 0;
  }

}