/* ===========================================================================
   Navigation — the top bar and the tab bar.

   These are viewport-driven, not container-driven, and that is a deliberate
   exception to the container-query preference in docs/rules/03-css-tokens.md.
   A card should respond to the space it is given; navigation chrome responds to
   the device, because whether a thumb or a mouse is driving is a property of the
   device and not of the slot the component sits in.

   Reference: docs/design/03-ui-patterns.md
   =========================================================================== */

@layer components {

  /* -------------------------------------------------------------------------
     Top bar.

     Replaces .bh-header, which put every destination in one flex row and let it
     wrap. On a phone that produced three ragged lines of equal-weight links with
     no hierarchy, which is the specific thing that made the product feel like a
     document rather than an app.

     Now the row holds only what belongs at the top on every screen size: the
     brand, the reading destinations, and the tools. On a phone the destinations
     move to the tab bar and this keeps the brand and the tools.
     ------------------------------------------------------------------------- */
  .bh-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding-inline: var(--sp-5);
    padding-block: var(--sp-3);
  }

  .bh-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--bh-chrome);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  /* Reading destinations. Sentence-weight links, not buttons: they are where
     you go, not what you do. */
  .bh-topbar__read {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    font-size: var(--fs-body-s);
  }

  .bh-topbar__read a {
    position: relative;
    padding-block: var(--sp-2);
    color: var(--bh-titanium);
    text-decoration: none;
    transition: color var(--dur-instant) var(--ease-human);
  }

  .bh-topbar__read a:hover { color: var(--bh-chrome); }

  /* The current destination gets weight and an underline, not just a colour.
     docs/design/00-design-language.md forbids state by colour alone, and this is
     the most-seen instance of that rule in the product. */
  .bh-topbar__read a[aria-current="page"] {
    color: var(--bh-chrome);
    font-weight: 600;
  }

  .bh-topbar__read a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    border-radius: var(--r-full);
    background: var(--bh-ember);
  }

  /* Tools sit at the far end: search, language, account. Icon-first, because
     they are verbs and they repeat on every screen. */
  .bh-topbar__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-inline-start: auto;
  }

  /* -------------------------------------------------------------------------
     Scroll condensing.

     The bar loses height as the page moves, which is the small thing that makes
     a scroll feel like an app surface rather than a document. Driven by
     animation-timeline, so there is no scroll listener and no jank: see
     docs/rules/04-javascript.md, which forbids scroll listeners for animation.

     Gated behind @supports for a reason that bites: with animation-timeline
     unsupported, the shorthand below is an animation with a 0s duration and
     "both" fill, so it would snap to its end state and the bar would render
     permanently condensed. The feature query is what keeps the fallback at
     full height instead of at the wrong height.
     ------------------------------------------------------------------------- */
  @supports (animation-timeline: scroll()) {
    .bh-topbar {
      animation: bh-topbar-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--sp-8);
    }

    @keyframes bh-topbar-condense {
      to { padding-block: var(--sp-2); }
    }

    .bh-topbar .bh-brandmark {
      animation: bh-brandmark-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--sp-8);
    }

    @keyframes bh-brandmark-condense {
      to { --bh-brandmark-size: 22px; }
    }
  }

  /* -------------------------------------------------------------------------
     Tab bar.

     The single largest change in how the product feels on a phone. Fixed to the
     bottom, in Vapor, with the safe-area inset respected so it clears the home
     indicator instead of sitting under it.

     Icon plus label, never icon alone: an unlabelled icon row is a guessing
     game, and it is also the accessibility failure that icon-only navigation
     always turns out to be.
     ------------------------------------------------------------------------- */
  .bh-tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-tabbar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* The inset is added rather than replacing the padding: on a device with no
       safe area env() resolves to 0px and the bar still needs its own breathing
       room. */
    padding-block: var(--sp-2);
    padding-block-end: calc(var(--sp-2) + env(safe-area-inset-bottom));
  }

  .bh-tabbar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-block-size: var(--tap-min);
    padding-block: var(--sp-1);
    color: var(--bh-titanium);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-decoration: none;
    /* A tab label must never wrap: two lines shifts the icon row out of
       alignment and the whole bar stops reading as a single control. */
    white-space: nowrap;
    transition: color var(--dur-instant) var(--ease-human);
  }

  .bh-tabbar__tab .bh-icon {
    /* Slightly larger than the inline default: this is a thumb target, and the
       icon is doing most of the identifying work at this size. */
    --bh-icon-size: 24px;
  }

  .bh-tabbar__tab:active { transform: scale(0.94); }

  /* Colour, weight and a filled indicator: three signals, so the current tab
     survives greyscale, low vision and a colour-blind reader. */
  .bh-tabbar__tab[aria-current="page"] {
    color: var(--bh-ember);
    font-weight: 700;
  }

  .bh-tabbar__tab[aria-current="page"] .bh-icon {
    stroke-width: 2;
  }

  /* -------------------------------------------------------------------------
     Which bar is showing.

     One breakpoint, one place. Every app inherits the same rule instead of
     re-deciding it, which is what stopped the previous layouts from agreeing
     with each other about what a small screen was.
     ------------------------------------------------------------------------- */
  .bh-tabbar { display: grid; }

  /* Room for the bar, so the last thing on the page is not permanently hidden
     behind it. Tied to the shell, because only a shell knows whether its app has
     a tab bar at all.

     The reservation is on the footer, not on the main element. .bh-shell is a
     three-row grid at 100dvh, so the footer is always the last band on the page
     and padding under the main region would only push the footer into the bar
     instead of the article. That was the first version and it hid the tagline. */
  .bh-shell--tabbed .bh-footer {
    padding-block-end: calc(var(--sp-9) + env(safe-area-inset-bottom));
  }

  @media (min-width: 48rem) {
    .bh-tabbar { display: none; }

    .bh-shell--tabbed .bh-footer {
      padding-block-end: var(--sp-6);
    }
  }

  /* Below the breakpoint the reading destinations live in the tab bar, so the
     top bar drops them rather than wrapping them onto a second line. */
  @media (max-width: 47.99rem) {
    .bh-topbar__read { display: none; }

    .bh-topbar {
      gap: var(--sp-3);
      padding-inline: var(--sp-4);
    }
  }

  /* -------------------------------------------------------------------------
     Footer. Secondary destinations and the tagline, below the fold, out of the
     way of the two bars that carry actual navigation.
     ------------------------------------------------------------------------- */
  .bh-footer {
    padding: var(--sp-6) var(--sp-5);
    border-block-start: 1px solid var(--bh-hairline);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .bh-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-block-start: var(--sp-3);
  }
}