/* ════════════════════════════════════════════════════════════════════
   BRAND HEADER — Site header
   BEM block: .brand-header

   Layout:  [ logo                          nav · nav · nav   Contact ]
   Height:  3rem mobile / 3.5rem desktop  (compact, leaves the hero room)
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .brand-header {
    --brand-header-h: 3rem;

    position: relative;
    z-index: var(--z-header);
    inline-size: 100%;
    block-size: var(--brand-header-h);
    background-color: var(--surface-page);
    border-block-end: var(--line-hairline) solid color-mix(in oklch, var(--primary) 8%, transparent);
  }

  .brand-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
    block-size: 100%;
  }

  .brand-header__logo {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--text-heading);
    text-decoration: none;
    text-transform: uppercase;
  }

  .brand-header__logo:hover {
    color: var(--primary);
  }

  .brand-header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }

  .brand-header__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-m);
  }

  .brand-header__menu a {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--text-heading);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  .brand-header__menu a:hover {
    color: var(--primary);
  }

  .brand-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--secondary);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition:
      background-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .brand-header__cta:hover {
    background-color: var(--secondary-hover);
    transform: translateY(-0.0625rem);
  }


  /* ── Desktop ─────────────────────────────────────────────────── */

  @media (min-width: 64em) {
    .brand-header {
      --brand-header-h: 3.5rem;
    }
  }


  /* ── Mobile — hide menu items, keep logo + CTA ───────────────── */

  @media (max-width: 47.99em) {
    .brand-header__menu {
      display: none;
    }
  }


  /* ── Reduced motion ──────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .brand-header__cta {
      transition: none;
    }

    .brand-header__cta:hover {
      transform: none;
    }
  }

}