/* Minimal Editorial navigation. Mobile menu uses a checkbox-driven CSS toggle
   (no JavaScript), consistent with the project's minimal-JS architecture. */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.wordmark {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

/* Two-line wordmark - a compact stacked block, not a wider single line.
   display:flex + flex-direction:column sizes this to its own content
   (the wider of the two lines), same shrink-to-fit sizing the single-line
   version already had - it has no effect on nav centering below, which is
   already independent of this element's width (see .primary-nav's own
   absolute-positioning comment). Tight line-height keeps the two lines
   reading as one compact mark rather than two loosely related ones. */
.wordmark__link {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.wordmark__line {
  display: block;
  white-space: nowrap;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Smallest desktop range only (920-1199px): even with the mobile cutover
   moved out to 920px, the 9-item nav's own text width (PROJECTS/PORTRAITS/
   LINES/ARTBOX/INDUSTRIAL/TRAVEL/PROOFING/PRINTS/CONTACT) plus the two-line
   wordmark and SHOP/cart still needs a smaller gap than the normal --space-32
   to stay collision-free right at 920px. Reducing only the gap (never the
   type size, never moving the nav off-center, never growing the 80px
   header) is the one adjustment allowed here. The upper bound was extended
   from 1099px to 1199px because 1100px only had 2-5px of clearance with
   the normal --space-32 gap once ARTBOX was added - too fragile. The
   normal --space-32 gap now resumes at 1200px, where it fits comfortably. */
@media (min-width: 920px) and (max-width: 1199px) {
  .primary-nav ul {
    gap: var(--space-8);
  }
}

.primary-nav a {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.primary-nav a:hover {
  opacity: 0.7;
}

.primary-nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

/* Soft-orange header accent: wordmark + the four requested nav items
   (PORTRAITS, ARTBOX, TRAVEL, PRINTS). Scoped to .wordmark and the
   .primary-nav__link--accent class only, so SHOP/cart and the other five
   nav items keep their default color. Applying color (not a new hover/
   focus/border rule) means the existing :hover opacity fade and
   [aria-current="page"] border-bottom (currentColor) keep working
   unchanged, and the same markup/class is shared by the desktop and
   mobile menu so no separate mobile rule is needed. */
.wordmark,
.primary-nav a.primary-nav__link--accent {
  color: #d58a4e;
}

/* True centering (not flex space-between, which only centers a middle
   item when the two side items happen to be similar widths) - .site-header
   is already position:relative, so the nav can center on the header itself
   regardless of how wide .wordmark or .site-header__shop are. Desktop
   only: the mobile tier below already gives .primary-nav its own
   position:fixed full-screen treatment, which this would conflict with.
   920px (not 900px, not 768px): adding ARTBOX to the nav (9 items total)
   made 900px collide again by a couple of pixels even with the compact
   gap tier above - the shared header/nav transition point was moved up
   only as far as necessary (900px -> 920px) so the desktop layout only
   ever renders where it actually fits. */
@media (min-width: 920px) {
  .primary-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* SHOP + cart, right side of the header. Desktop only - hidden by default
   so the existing mobile header (wordmark + MENU toggle) is completely
   unchanged; restored at the same 920px breakpoint the rest of this
   file's desktop/mobile split now uses. */
.site-header__shop {
  display: none;
}

@media (min-width: 920px) {
  .site-header__shop {
    display: flex;
    align-items: center;
    gap: var(--space-24);
  }
}

.site-header__shop-link {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

.site-header__shop-link:hover {
  opacity: 0.7;
}

.site-header__cart {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text);
}

.site-header__cart:hover {
  opacity: 0.7;
}

.site-header__cart-icon {
  display: block;
}

.site-header__cart-count {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
}

/* Mobile menu toggle (checkbox-driven, no JS) */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-input:focus-visible ~ .nav-toggle-label {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

.nav-toggle-label {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 919px) {
  /* Enlarges the tappable area to the established 44x44px minimum
     (matching Single Print's controls, the PROJECTS index links) without
     changing the visible "MENU" text - flex-centers it inside the bigger
     box rather than growing the type. */
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .primary-nav {
    position: fixed;
    inset: 0;
    top: var(--header-height);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: var(--color-background);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
    padding-top: var(--space-96);
  }

  /* display:inline-block (mobile only) so the padding below actually
     expands the link's own interactive box - as plain display:inline
     (the shared/desktop rule), padding-top/bottom is visually present
     but doesn't enlarge the hit area, which is exactly why this measured
     ~24px despite already having padding-bottom. Desktop's own
     .primary-nav a rule (display:inline, padding-bottom: space-4) is
     untouched - this override exists only inside this media query. */
  .primary-nav a {
    display: inline-block;
    font-size: 16px;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .nav-toggle-input:checked ~ .primary-nav {
    opacity: 1;
    visibility: visible;
  }
}