/* ============================================================
   Header — Fixed top bar
   ============================================================ */

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: transform var(--transition-slow);
  /* NOTE: `view-transition-name: header` is intentionally NOT set here.
     A persistent view-transition-name makes the header an isolated
     backdrop-root, which disables `backdrop-filter` on its descendants —
     killing the frosted-glass nav buttons (.blur-button*) at rest.
     The page-transition design still needs the header named so it can stay
     crisp while the page blurs (see base.css ::view-transition-*(header)),
     so view-transition-header.js applies the name ONLY during navigation
     (pageswap/pagereveal) and clears it once the transition finishes. */
}

.header-hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: var(--Space-m);
  color: var(--text-primary);
}

/* ============================================================
   Wordmark
   ============================================================ */

.header__wordmark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1; /* Stays on top of moving logo */
  text-decoration: none;
}

.header__wordmark svg {
  height: 6.1rem; /* 61px total with border-box: 45px content + 8px×2 padding — matches live */
  width: auto;
  fill: var(--text-primary-d-4);
  padding: var(--Space-3xs) var(--Space-2xs); /* 8px 11.3px — matches live SVG padding */
}

/* Remove individual path hover, apply to entire SVG */
.header__wordmark path:hover {
  fill: inherit !important;
}

.header__wordmark:hover path {
  fill: var(--text-primary-d-9) !important;
  transition: fill 0.3s ease;
}

/* ============================================================
   Scroll logo — position: absolute, JS drives left
   ============================================================ */

.header__scroll-logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0; /* Starting position — JS overrides */
  transition: none; /* No CSS transition — JS handles movement */
  view-transition-name: scroll-logo;
  width: 100px;
  height: auto;
  z-index: 0; /* Behind wordmark and nav */
  padding: var(--Space-3xs);
  pointer-events: none;
  text-decoration: none;
}

.header__scroll-logo svg {
  display: block; /* Remove inline baseline descender space — was making link box ~7px too tall */
  width: 100%;
  height: auto;
  fill: var(--text-primary-d-4);
}

/* ============================================================
   Navigation — pushed right via margin-left: auto
   ============================================================ */

.header__nav {
  margin-left: auto;
  flex-shrink: 0;
  z-index: 1; /* Stays on top of moving logo */
  padding-right: var(--Space-2xs); /* 11.3px — matches live nav element padding-right */
}

.header__nav-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0 var(--Space-2xs); /* 11.3px each side — matches live UL element */
  margin: 0;
  gap: var(--Space-4xs); /* 5.6px between buttons */
}

/* ============================================================
   Nav buttons — shared pill styling
   From Bricks classes: nav-button-default, nav-button-work,
   nav-button-dropdown, blur-button, blur-button-work
   ============================================================ */

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: var(--Space-xl);
  height: auto;
  padding: var(--Space-4xs) var(--Space-3xs);
  border: 1px solid var(--text-primary-l-3);
  border-radius: var(--Radius-s);
  background-color: transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--body-xs);
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), width var(--transition-base);
}

/* Default buttons (Studio, Contact) */
.nav-button--default:hover {
  background-color: var(--color-surface-d9t-t-5);
  color: var(--text-primary-d-10);
}

/* Blur effect on all non-work buttons */
.blur-button {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: url(#glass-distortion);
}

/* Work dropdown button — removes blur on hover */
.blur-button-work {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  filter: url(#glass-distortion);
}

/* The fade applies whenever the dropdown LI is hovered (or has focus inside).
   This includes when the cursor moves down onto the dropdown menu items —
   the parent LI's :hover state stays active because :hover propagates from
   descendants. If we only used `.blur-button-work:hover`, the border would
   reappear as soon as the cursor left the trigger button. */
.nav-dropdown:hover .blur-button-work,
.nav-dropdown:focus-within .blur-button-work {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  border-color: hsla(46, 100%, 65%, 0); /* Border fades to transparent */
}

/* Dropdown items (Portfolio, Available) */
.nav-button--dropdown {
  width: var(--Space-xl);
}

.nav-button--dropdown:hover {
  background-color: var(--color-surface-d9t-t-5);
  color: var(--text-primary-d-10);
}

/* ============================================================
   Work dropdown
   ============================================================ */

.nav-dropdown {
  position: relative;
  list-style: none;
}

.nav-button--work {
  gap: 0;
}

.nav-button__label {
  pointer-events: none;
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%; /* Flush with trigger bottom — NO margin, or :hover is lost in the gap */
  left: 0;
  min-width: var(--ComponentSize-3xs);
  display: none;
  flex-direction: column;
  list-style: none;
  /* padding-top is INSIDE the menu's hit area (unlike margin), so cursor stays "over" the menu
     while moving from trigger down to first item — keeps :hover alive */
  padding: var(--Space-4xs) 0 0;
  margin: 0;
  background: transparent;
  gap: var(--Space-4xs); /* 5.6px between dropdown pill buttons */
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  display: flex;
}

.nav-dropdown__menu li {
  list-style: none;
}

.nav-dropdown__menu .nav-button {
  white-space: nowrap;
}

/* ============================================================
   Cart count badge (mini cart — only visible when items in cart)
   ============================================================ */

.cart-count-badge {
  position: relative;
  display: inline-flex;
  margin-left: 2px;
  background: var(--color-primary);
  color: var(--color-surface);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  font-size: var(--body-xs);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

/* ============================================================
   Responsive — mobile ≤ 767px
   Live site pattern: header becomes a vertical column.
     Row 1: wordmark (centered, larger)
     Row 2: nav buttons (centered, larger). No hamburger.
   ============================================================ */

@media (max-width: 767px) {
  .header__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: var(--Space-3xs); /* 8px between wordmark row and nav row */
    padding: var(--Space-s); /* 22.6px all sides — matches live site mobile padding */
  }

  /* Wordmark — bigger, centered. Same SVG as desktop, just sized up.
     The token resolves wider than a typical mobile viewport
     (--ComponentSize-xl min = 47.99rem ≈ 480px), so max-width: 100%
     is essential — caps at viewport width. The live site does the same.

     The desktop SVG padding (8px 11.3px) is preserved on mobile — that
     vertical 8px gives breathing room below the wordmark text before the
     header's row-gap kicks in, matching the live site's spacing. */
  .header__wordmark svg {
    width: var(--ComponentSize-xl);
    max-width: 100%;
    height: auto;
  }

  /* Scroll logo — hide visually but KEEP the wrapper as a 0×0 flex item.
     The wrapper stays in the column flow so row-gap applies on BOTH sides
     (wordmark↔wrapper and wrapper↔nav). The live site does the same:
     its wrapper collapses to 0×0 because the SVG inside is position: absolute,
     and that "invisible third item" doubles the visual gap above the nav.
     If we used display: none, we'd lose one row-gap (~8px) of breathing room. */
  .header__scroll-logo {
    position: static; /* override desktop's position: absolute so it's in flow */
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  .header__scroll-logo svg {
    display: none;
  }

  /* Nav — drop desktop auto-margin, take the full column width so its
     flex children (UL → buttons) can lay out naturally without shrinking. */
  .header__nav {
    margin-left: 0;
    padding-right: 0;
    width: 100%;
  }

  .header__nav-items {
    align-items: center;
    justify-content: center;
    padding: 0; /* drop the desktop horizontal padding too */
  }

  /* Nav buttons grow on mobile: wider, larger text.
     flex-shrink: 0 is required — without it, the row of 3 wider buttons
     would shrink back to 64px to fit a narrow parent (flex default behavior). */
  .nav-button {
    width: var(--ComponentSize-2xs);
    font-size: var(--body-m);
    flex-shrink: 0;
  }

  .nav-button--dropdown {
    width: var(--ComponentSize-2xs);
  }

  /* Dropdown menu still anchored under the Work button.
     The hover-gap fix (padding-top, no margin) still applies. */
  .nav-dropdown__menu {
    min-width: var(--ComponentSize-2xs);
  }
}