/*
 * The navbar (shared/_navigation): the menu button, the logo from 1280px, the
 * company search (components/search.css), the two page links from 1024px, and
 * the New York clock —
 * in that order, as today. Sticky, on the surface, one rule underneath; its
 * height is the --navbar-height token the statement tables' sticky header
 * offsets itself by.
 *
 * A component rather than layout: its links are `styled_link_to` links, and
 * `.link` lives in this layer — in `layout` these rules would lose to it
 * whatever their specificity, because a later layer always wins.
 */
@layer components {
  .navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    block-size: var(--navbar-height);
    padding-inline: var(--gutter);
    border-block-end: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface);

    @media (width >= 1024px) {
      gap: var(--space-xl);
    }
  }

  .navbar__menu {
    display: grid;
    place-items: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    margin-inline-start: calc(var(--space-sm) * -1);
    border-radius: var(--radius-md);

    &:hover {
      background-color: var(--color-surface-raised);
    }

    @media (width >= 1650px) {
      display: none;
    }
  }

  .navbar__logo {
    display: none;

    @media (width >= 1280px) {
      display: flex;
    }
  }

  .navbar__search {
    flex: 1;
    min-inline-size: 0;
    max-inline-size: 30rem;
  }

  .navbar__links {
    display: none;
    align-items: center;
    gap: var(--space-2xs);

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--target-min);
      padding-inline: var(--space-sm);
      color: var(--color-ink-muted);
      font-size: var(--text-ui);
      font-weight: var(--weight-medium);
      text-decoration: none;

      &:hover {
        color: var(--color-ink);
      }

      &[aria-current="page"] {
        color: var(--color-ink);
        font-weight: var(--weight-semibold);
      }
    }

    @media (width >= 1024px) {
      display: flex;
    }
  }

  .navbar__clock {
    margin-inline-start: auto;
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
  }

  /* The logo lockup: the three-bar mark and the serif wordmark. */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    text-decoration: none;
  }

  .logo__bar--1 { fill: var(--color-brand-1); }
  .logo__bar--2 { fill: var(--color-brand-2); }
  .logo__bar--3 { fill: var(--color-brand-3); }
}