/* -- Site Header (marketing) -------------------------------------
   Fixed-height product header: brand left, nav center, actions right.
   The doc site's own chrome uses .site-header/<site-header>; marketing
   pages use .mk-header so the two never collide. */

@layer components {
  .mk-header {
    /* container query, not @media: the header adapts to the width it is
       placed in (doc preview box, sidebar layout, full page) */
    container: mk-header / inline-size;
    position: relative;
    width: 100%;
    background: var(--background);
    color: var(--foreground);

    &[data-variant="sticky"] {
      position: sticky;
      top: 0;
      z-index: 50;
    }
  }

  .mk-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    max-width: 80rem;
    margin-inline: auto;
    padding: 0.5rem 1.25rem;
  }

  .mk-header-brand {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    text-decoration: none;

    & svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  }

  .mk-header-name {
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }

  /* nav collapses below the container breakpoint (source: `hidden md:flex`).
     The nav composes the navigation-menu component (.nav-menu-list /
     .nav-menu-trigger / .nav-menu-content) — its dropdown popovers are the
     native Popover API, so the header stays CSS-only. */
  .mk-header-nav { display: none; align-items: center; }

  .mk-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

  @container mk-header (min-width: 30rem) {
    .mk-header-inner { padding-inline: 2rem; }
    .mk-header-nav { display: flex; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    /* navigation-menu suppresses its own transitions; nothing header-side
       animates, so no overrides needed here */
  }

  @media (forced-colors: active) {
    .mk-header { border-bottom: 1px solid CanvasText; }
  }
}