/* ═══════════════════════════════════════════════════════════════════════════
   site-nav.css — the shared header mega menu.

   Consolidated from the .mega-menu rules built for index.html
   (assets/discover-v12/page.css). Link it after places.css on every interior
   page so the header dropdowns are the same component the home page opens,
   in the same colours. index.html keeps its own copy in page.css; this file
   is a faithful copy, not the source of truth, so a redesign of the menu has
   to be re-synced by hand in both.

   Two things are added here that page.css does not need:
   · the font tokens, because these pages do not load page.css and the rules
     below are written against --font-nav / --font-sans / --font-display;
   · the .em-hdr / .em-brand open state, which is the .site-header one in the
     vocabulary the interior bar actually uses.
   ═══════════════════════════════════════════════════════════════════════ */

/* The rules below are written against page.css's :root, which these pages do
   not load. Mapped onto the interior build's own tokens so the menu takes the
   page's typefaces rather than a second, nearly-identical stack. */
.mega-menu {
  --font-display: var(--em-display, Optima, "Optima Nova", Candara, "Trebuchet MS", sans-serif);
  --font-sans: var(--em-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
  --font-nav: var(--em-body, "Source Sans 3", "Segoe UI", system-ui, sans-serif);
}

/* ————————————————— 1 · Header mega menu ————————————————————————————————
   Two panels under a fixed 4.25rem header. The scrim is a separate layer so
   the panel keeps its own backdrop-filter; both close on pointer-leave.

   The sheet is the night ground, on every page that carries this menu. The
   bar above it is NOT: it takes the light plate while a menu is down (see
   `.em-hdr.is-mega-open` at the foot of this file). That pairing is the
   brief — a light bar over a black sheet — so the ink in here is set against
   #100f0d and the ink up there against the paper, and neither inherits from
   the other. Changing one does not change the other. */

.mega-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky-bar);
  pointer-events: none;
}

.mega-menu[hidden] {
  display: none;
}

.mega-menu__scrim {
  position: absolute;
  left: 0;
  right: 0;
  top: 4.25rem;
  bottom: 0;
  background: rgba(var(--em-rgb-veil), 0.42);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mega-menu.is-open .mega-menu__scrim {
  opacity: 1;
}

.mega-menu__panel {
  position: absolute;
  top: 4.25rem;
  left: 0;
  right: 0;
  background: rgba(16, 15, 13, 0.93);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  color: var(--em-text-on-inverse);
  border-bottom: 1px solid rgba(var(--em-rgb-sand), 0.18);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--em-ease-soft);
}

.mega-menu__panel[hidden] {
  display: none;
}

.mega-menu.is-open .mega-menu__panel {
  opacity: 1;
  transform: none;
}

.mega-menu__inner {
  max-width: 93.75rem;
  margin: 0 auto;
  padding: clamp(34px, 3.6vw, 50px) clamp(20px, 4vw, 64px) clamp(40px, 4.2vw, 58px);
}

.mega-menu__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(24px, 2.6vw, 34px);
}

.mega-menu__eyebrow {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse);
  white-space: nowrap;
}

.mega-menu__rule {
  flex: 1;
  height: 1px;
  background: rgba(var(--em-rgb-on-inverse), 0.16);
}

.mega-menu__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: rgba(var(--em-rgb-on-inverse), 0.55);
  white-space: nowrap;
}

.mega-menu__body {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(30px, 4vw, 84px);
}

.mega-menu__col {
  min-width: 11.25rem;
  flex-shrink: 1;
}

.mega-menu.is-open .mega-menu__col,
.mega-menu.is-open .mega-menu__feat {
  animation: megaItem 0.55s var(--em-ease-soft) both;
  animation-delay: calc(0.04s + var(--i, 0) * 0.06s);
}

@keyframes megaItem {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.mega-menu__col-label {
  margin: 0 0 1.25rem;
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse);
}

.mega-menu__links {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  align-items: flex-start;
}

.mega-menu__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.2;
  color: var(--em-text-on-inverse);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.4s var(--em-ease-soft),
    color 0.3s ease;
}

.mega-menu__link:hover {
  transform: translateX(6px);
  color: var(--p-brand-white);
}

.mega-menu__meta {
  font-size: 11px;
  color: rgba(var(--em-rgb-sand), 0.5);
  white-space: nowrap;
}

.mega-menu__feat {
  margin-left: auto;
  width: min(22.5rem, 100%);
  min-width: 12.5rem;
  flex-shrink: 1;
}

.mega-menu__feat-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #26241f;
}

.mega-menu__feat-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 1.6s var(--em-ease-image),
    filter 1.6s ease;
}

.mega-menu__feat:hover .mega-menu__feat-frame img {
  transform: scale(1.05);
  filter: brightness(1.06);
}

.mega-menu__feat-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.875rem;
  margin-top: 1rem;
}

.mega-menu__feat-kicker {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral-on-inverse);
}

.mega-menu__feat-name {
  margin: 0.3125rem 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--em-text-on-inverse);
}

.mega-menu__feat-meta {
  margin: 0.1875rem 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: rgba(var(--em-rgb-on-inverse), 0.6);
}

.mega-menu__feat-cta {
  flex: none;
  border: 0;
  border-bottom: 1px solid rgba(var(--em-rgb-on-inverse), 0.5);
  padding: 0 0 3px;
  background: transparent;
  font-family: var(--font-nav);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--em-text-on-inverse);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.mega-menu__feat-cta:hover {
  border-color: var(--em-text-on-inverse);
}

@media (max-width: 1023.98px) {
  .mega-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu__panel,
  .mega-menu__scrim {
    transition: none;
  }
  .mega-menu.is-open .mega-menu__col,
  .mega-menu.is-open .mega-menu__feat {
    animation: none;
  }
}

/* ————————————————— The bar the menu hangs from ————————————————————————
   page.css hangs the panel at a literal 4.5rem because that is what its
   header measures. Here the bar's height is a token, so the panel reads it:
   one number to change if the bar ever moves. */
.mega-menu__panel,
.mega-menu__scrim {
  top: var(--em-hdr, 4.5rem);
}

/* While a menu is down the bar takes the panel's plate, exactly as on
   index.html. It has to out-rank `is-over` and `is-inverted` — the two
   states the bar wears over a hero picture — or a menu opened at the top of
   a community page drops a paper sheet under a white-ink bar on a gradient.
   Both of those are single-class, so the pairs below are spelled out rather
   than relying on source order alone. */
.em-hdr.is-mega-open,
.em-hdr.is-mega-open.is-over,
.em-hdr.is-mega-open.is-inverted,
.em-hdr.is-mega-open.is-over.is-inverted {
  color: var(--em-ink);
  background: rgba(250, 249, 246, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
  backdrop-filter: blur(20px) saturate(1.06);
  border-bottom-color: rgba(0, 0, 0, 0);
}

/* The lockup is fixed outside the bar and carries its own dark wash over a
   picture; on the paper plate both have to go. */
.em-brand.is-mega-open,
.em-brand.is-mega-open.is-over {
  color: var(--em-ink);
}

.em-brand.is-mega-open.is-over::before {
  content: none;
}

/* The trigger keeps the nav link's box; only the rule under it is asserted,
   the same way a hovered link behaves. */
.em-hdr__nav button.em-hdr__link {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.em-hdr__link[aria-expanded="true"]::after {
  transform: scaleX(1);
}