/* The site header (index.ehtml). Its tokens come from the site system the page imports. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {
  .site-header {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }

  .site-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-5);
  }

  .site-wordmark {
    margin-right: auto;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-wordmark:hover {
    color: var(--ink);
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
  }

  .site-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
  }

  .site-nav a:hover {
    color: var(--ink);
  }

  .site-nav a[aria-current='page'] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
  }

  /* A call to action in the header is a secondary button: the page's own filled button stays
     the one strong action on screen. */
  .site-header-row > .button {
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .site-header-row {
      padding-block: var(--space-4);
    }

    .site-nav {
      order: 3;
      flex-basis: 100%;
    }
  }
}