/* ==========================================================================
   Light Zone Photography - header
   --------------------------------------------------------------------------
   The fixed header and everything inside it: the brand logo, the primary nav, the mega menu, the mobile drawer and the burger. The scroll behaviour lives here too - `data-stuck` is set by site.js once the page leaves the top, and the backdrop below is what it turns on. The header never hides and never resizes.

   Loaded by: every page
   ========================================================================== */
/* --- Header ------------------------------------------------------------ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform 0.6s var(--ease-out), background-color 0.5s, border-color 0.5s, backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
.header[data-stuck="true"] {
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

/* One row: brand left, call to action right, menu centred on the page itself
   rather than on the space those two happen to leave over. The logo is sized
   so it can never reach the menu, even at the narrowest desktop width. */
.header__inner {
  height: 90px; /* FIXED HEIGHT: Stops the header from expanding */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  /* padding-block: clamp(0.7rem, 1.4vw, 1.15rem); COMMENTED OUT: Prevents extra stretching */
}
.header__inner > .nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* The wordmark is the supplied logo artwork - white paths on a transparent
   ground, so it sits on any backdrop. Height drives it; width follows the
   viewBox, which keeps the 2.13:1 artwork from being squashed. */
.brand__logo {
  height: var(--logo-h);
  width: auto;
  display: block;
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.brand:hover .brand__logo { opacity: 0.82; transform: translateY(-1px); }


/* --- Primary nav + mega menu ------------------------------------------- */
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.6rem); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.4s var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__caret { transition: transform 0.4s var(--ease-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.megamenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  /* The panel swings down on its top edge — the menu's own 3D gesture */
  transform-origin: top center;
  transform: perspective(var(--depth)) rotateX(-12deg) translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.55s var(--ease-out),
    visibility 0.55s;
}
.megamenu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: perspective(var(--depth)) rotateX(0) translateY(0);
}

.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

.megagroup__label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.megagroup__blurb {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-bottom: 1.1rem;
  line-height: 1.5;
}
.megagroup__list { display: grid; gap: 0.15rem; }

.megalink {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  margin-inline: -0.75rem;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.95rem;
  transition: color 0.35s var(--ease-out), background-color 0.35s, transform 0.45s var(--ease-out);
}
.megalink:hover,
.megalink:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(6px);
}
.megalink__num {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.megamenu__feature {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
  isolation: isolate;
}
.megamenu__feature img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out), opacity 0.6s;
}
.megamenu__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.92), transparent 70%);
}
.megamenu__feature:hover img { transform: scale(1.1); opacity: 0.85; }
.megamenu__feature span {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
}

/* --- Mobile nav -------------------------------------------------------- */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 110;
}
.burger i {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background: var(--text);
  transition: transform 0.5s var(--ease-out), opacity 0.3s;
}
.burger i:nth-child(1) { top: 18px; }
.burger i:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--ink-950);
  padding: 6.5rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), visibility 0.6s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.drawer__group + .drawer__group { margin-top: 2.25rem; }
.drawer__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 0.5rem;
}
.drawer__link {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__link:hover { color: var(--text); }
.drawer__actions { margin-top: 2.5rem; display: grid; gap: 0.85rem; }

body[data-locked="true"] { overflow: hidden; }


/* --- Responsive ---------------------------------------------------------- */

/* Between the mobile breakpoint and a roomy desktop the centred menu and the
   right-hand button start to meet. Tightening both keeps everything on one row
   without having to drop the call to action. */
@media (min-width: 1025px) and (max-width: 1320px) {
  .nav { gap: 1rem; }
  .nav__link { font-size: 0.72rem; letter-spacing: 0.14em; }
  .header__inner > .btn {
    padding: 0.8rem 1.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
  }
  .header__inner > .btn .btn__arrow { display: none; }
}

@media (max-width: 1180px) {
  .megamenu__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .megamenu__feature { display: none; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: block; }

  /* The drawer carries navigation and its own call to action below this
     breakpoint. Leaving the desktop button in the bar overflows the header,
     and leaving the mega-menu in the layout overflows the viewport. */
  .header__inner > .btn { display: none; }
  .megamenu { display: none; }
}