/* =============================================================================
   header-desktop.css — desktop header component
   Visible at 1024px+. Completely independent of header-mobile.css.

   Responsibilities:
   - Fixed 80px structural bar at the top of the viewport.
   - Two-zone flex row: logo (left) + Contact CTA (right).
   - Horizontal padding uses --layout-desktop-margin (72px) — .site-sidebar
     (css/layout.css, position: fixed) uses the same token as its own `left`
     value, so the nav column's text lines up with the logo. See the
     "Alignment contract" comment in layout.css for the full reasoning.
   - No border, divider, or box-shadow — carbon bg is continuous with page.

   Sub-elements:
     .header-desktop__logo  — studio name link, left-aligned
     .header-desktop__cta   — Contact button modifier (overrides .btn height/width)

   Shares design tokens (colors, spacing) with header-mobile.css
   but has no shared HTML structure, CSS rules, or JavaScript behavior.
   ============================================================================= */


/* ── Mobile: hide this component ─────────────────────────────────────────────── */

.header-desktop {
  display: none;
}


/* ── Desktop: 80px fixed flex bar ────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .header-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--layout-desktop-header-height);   /* 80px */
    padding-inline: var(--layout-desktop-margin);  /* 72px — same token as .site-sidebar's `left` value */
    background-color: var(--color-carbon);
    border: none;                                  /* explicit — no bottom divider */
    box-shadow: none;
  }


  /* ── Logo ──────────────────────────────────────────────────────────────────── */

  .header-desktop__logo {
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-decoration: none;
  }

  .header-desktop__logo:hover {
    opacity: 0.7;
  }


  /* ── Contact CTA ───────────────────────────────────────────────────────────── */
  /*
   * Specificity (0,2,0) — beats .btn-outline (0,1,0) which loads after this file.
   *
   * Overrides:
   *   .btn        height: 3rem (48px)  → 2.5rem (40px)
   *   .btn-outline width: 100%          → 6rem   (96px, fixed per Figma spec)
   */

  .header-desktop .header-desktop__cta {
    width: 6rem;        /* 96px — Figma spec */
    height: 2.5rem;     /* 40px — Figma spec */
    flex-shrink: 0;     /* never compress in the flex row */
  }

}