/* ==========================================================================
   header.css — global header (masthead)
   --------------------------------------------------------------------------
   Milestone 2 · Global header shell

   Spec: Phase 2 §0.3 (Global Header) · Phase 5 §3.1 (Header)
   Sticky masthead: primary nav row (72px desktop / 64px mobile) is the first
   visible element on every page (the Phase 5 §3.2 utility bar was removed in
   Visual Polish Pass 2 — contact facts live on the Contact page and footer).

   Non-functional shell: no JavaScript, no animation. The `transparent` →
   `solid` on scroll and compact (64px) variants are JS-driven and land in a
   later milestone.
   ========================================================================== */

.site-header {
  /* Component-scoped dimensions (scoped custom properties) */
  --nav-height-desktop: 72px;
  --nav-height-mobile: 64px;

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-background);
}

/* --------------------------------------------------------------------------
   Nav bar row — logo · primary nav · CTA · hamburger
   Phase 2 §0.3: 72px desktop / 64px mobile.
   -------------------------------------------------------------------------- */
.header__bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  min-height: var(--nav-height-mobile);
}

@media (min-width: 1024px) {
  .header__inner {
    min-height: var(--nav-height-desktop);
  }
}

/* --------------------------------------------------------------------------
   Brand logo — logos/logo-header.svg (Phase R1). The asset is a wide
   wordmark lockup drawn on an A4 canvas; the img box is sized to the visible
   lockup (object-fit cover + object-position) so the empty canvas is cropped
   without stretching or distorting the artwork. Navbar height unchanged.
   -------------------------------------------------------------------------- */
.site-logo {
  display: inline-flex;
  align-items: center;
  margin-inline-end: auto;
  text-decoration: none;
}

.site-logo__img {
  display: block;
  width: clamp(230px, 30vw, 360px);
  height: clamp(40px, 6.5vw, 44px);
  object-fit: cover;
  object-position: 50% 41%;
}

/* --------------------------------------------------------------------------
   Header CTA — minimal button styling (Contact Us placeholder).
   Hidden below 1024px; the CTA moves into the mobile navigation overlay.
   -------------------------------------------------------------------------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-24);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-button-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-button);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 90%, var(--color-heading));
}

.btn-cta--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Scrolled state (Phase 5 §3.1 "scrolled" variant · Phase 6 §11 state
   classes) — applied by JS (main.js), styled here. Subtle raised shadow on
   scroll only; the compact 64px shrink variant is deferred to the Astro
   navigation milestone. Transition uses the standard token.
   -------------------------------------------------------------------------- */
.site-header {
  transition: box-shadow var(--transition-standard);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-raised);
}