/* ==========================================================================
   WV Mega Menu — v2 rebuild (2026-04-22)
   --------------------------------------------------------------------------
   Floating 1280×593 pill with backdrop blur, decorative notch,
   3-column grid. Namespace renamed from .wv-mega → .wv-mega-menu.
   Non-frozen file — iterate freely during visual tuning.
   ========================================================================== */

.wv-mega-menu {
  position: fixed;
  top: var(--wv-header-height);
  left: 50%;
  width: min(1280px, calc(100vw - 32px));
  height: 570px;
  max-height: calc(100vh - var(--wv-header-height) - 24px);
  background: var(--wv-color-surface);
  border-radius: var(--wv-radius-sm);
  z-index: 999;
  overflow: hidden;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    visibility 220ms ease;
}

.wv-mega-menu.wv-mega-menu--open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* ── SHOP trigger — surface bg while menu is open (connects visually to the menu) ──
   Padding gives the text breathing room, ::after extends the background down to
   the header's bottom edge so it meets the mega menu flush. */
.wv-nav-link--dropdown[aria-expanded="true"] {
  position: relative;
  padding: 6px 10px 6px 12px;
  /* Negative margins cancel the padding's contribution to the flex
     main-size so .wv-header__left's space-between doesn't redistribute
     Quiz/First5. Text stays pinned to its closed-state position.
     Asymmetric bg: 12px left of text, 10px right. */
  margin-left: -12px;
  margin-right: -10px;
  background: var(--wv-color-surface);
  border-top-left-radius: var(--wv-radius-sm);
  border-top-right-radius: var(--wv-radius-sm);
}

.wv-nav-link--dropdown[aria-expanded="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Bridges from the button's bottom to the header's bottom edge so the
     SHOP bg meets the mega menu flush. Math: header 81px, button
     centered vertically with padding = ~31px tall, bottom at ~56px,
     header bottom at 81px → 25px gap. */
  height: 25px;
  background: var(--wv-color-surface);
}

/* ── Backdrop tint — matches cart drawer pattern (rgba(0,0,0,0.5) via token) ── */
.wv-mega-menu__backdrop {
  position: fixed;
  top: var(--wv-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--wv-color-overlay);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.wv-mega-menu__backdrop.wv-mega-menu__backdrop--visible {
  opacity: 1;
  visibility: visible;
}

/* ── Grid ──
   Tablet-default gap + padding (tightest tier). Restored to
   gap 48 / padding 20 56 in the @media (min-width: 1280px)
   block below. Refactored 2026-06-01: collapsed legacy
   max-width: 1311 and max-width: 1023 progressive tightenings
   into the canonical 768 / 1280 tiers. */
.wv-mega-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 20px 32px;
  height: 100%;
}

.wv-mega-menu__col {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
  /* Hide the scrollbar visually while preserving wheel/touch scroll.
     More Benefits expansion in Col 1 can push content just past the
     column height — users still get the full list via scroll, but
     don't see a scrollbar appear mid-interaction. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wv-mega-menu__col::-webkit-scrollbar {
  display: none;
}

/* Flex columns with overflow-y:auto will happily shrink children below
   their natural size before falling back to scroll (.wv-mega-menu__divider
   was being squished from 1px to 0 when More Benefits expanded). Pin every
   direct child to its natural size so overflow goes to scroll instead. */
.wv-mega-menu__col > * {
  flex-shrink: 0;
}

.wv-mega-menu__col-heading {
  color: var(--wv-color-text-secondary);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.wv-mega-menu__divider {
  border: 0;
  height: 1px;
  background: var(--wv-color-text-primary);
  margin: 0 0 20px;
}

/* ── Col 1: Start with your goal ── */

/* Trim Col 1's divider margin-bottom by 8 so the first benefit link's
   `padding: 8px 0` rhythm doesn't push its text further from the
   divider than Col 2 (hero img) and Col 3 (card) — both of which sit
   flush at the global 20px. Net visual gap to first text/image in
   each column lands at 20. */
.wv-mega-menu__col--goals .wv-mega-menu__divider {
  margin-bottom: 12px;
}

.wv-mega-menu__benefit-list,
.wv-mega-menu__more-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wv-mega-menu__benefit-item,
.wv-mega-menu__more-item {
  margin: 0;
}

.wv-mega-menu__benefit,
.wv-mega-menu__more-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  transition: color 180ms ease;
}

.wv-mega-menu__benefit {
  color: var(--wv-color-text-primary);
}

/* More Benefits rows — same font as the MORE BENEFITS toggle
   (wv-label-small + uppercase + subdued). 20px indent + tighter
   vertical padding to visually nest under the core 6. */
.wv-mega-menu__more-link {
  padding: 4px 0 4px 20px;
  color: var(--wv-color-text-secondary);
  text-transform: uppercase;
}

.wv-mega-menu__benefit:hover,
.wv-mega-menu__more-link:hover {
  color: var(--wv-color-olive-dark);
}

.wv-mega-menu__benefit-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.wv-mega-menu__more-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 8px 0;
  margin-top: 4px;
  color: var(--wv-color-text-secondary);
  text-transform: uppercase;
  cursor: pointer;
}

.wv-mega-menu__more-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 200ms ease;
}

.wv-mega-menu__more-toggle[aria-expanded="true"] .wv-mega-menu__more-icon {
  transform: rotate(45deg);
}

.wv-mega-menu__quiz-block {
  margin-top: auto;
  padding-top: 10px;
}

.wv-mega-menu__quiz-prompt {
  margin: 0 0 12px;
  color: var(--wv-color-text-secondary);
}

.wv-mega-menu__quiz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 48px;
  background: var(--wv-color-quiz);
  border-radius: 72px;
  color: var(--wv-color-text-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms ease;
}

.wv-mega-menu__quiz-btn:hover {
  background: var(--wv-color-quiz-hover);
}

/* ── Col 2: The First5 ── */
/* Frame removed (2026-06-03) — image now sits free, designer-driven
   sizing, stroke + radius applied directly to the img. */
.wv-mega-menu__hero-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--wv-color-text-primary);
  margin-bottom: 20px;
}

/* TEMP 2026-06-03 — Col 3 placeholder image (the F5 flatlay) shown
   while Your Practice + Foundation Bundles cards are commented out.
   No border/radius here — the asset has them baked in. Remove this
   rule when the cards come back. */
.wv-mega-menu__col-placeholder {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-bottom: 16px;
}

.wv-mega-menu__product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wv-mega-menu__product-item {
  border-top: 1px solid var(--wv-color-surface-2);
}

.wv-mega-menu__product-item:first-child {
  border-top: 0;
}

.wv-mega-menu__product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: var(--wv-color-text-primary);
  text-decoration: none;
  transition: color 180ms ease;
}

.wv-mega-menu__product:hover {
  color: var(--wv-color-olive-dark);
}

.wv-mega-menu__product-arrow {
  width: 18px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* ── Col 3: Shop more ── */
.wv-mega-menu__card {
  display: block;
  position: relative;
  width: 100%;
  max-width: 347px;
  height: 191px;
  border-radius: 16px;
  border: 1px solid var(--wv-color-text-primary);
  overflow: hidden;
  margin-bottom: 16px;
  text-decoration: none;
}

.wv-mega-menu__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Per-image crop anchors — tune visually */
.wv-mega-menu__card--your-practice .wv-mega-menu__card-img {
  object-position: center 70%;
}

.wv-mega-menu__card--bundles .wv-mega-menu__card-img {
  object-position: center 100%;
}

.wv-mega-menu__card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 66.5px;
  background: var(--wv-color-card-bg);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.wv-mega-menu__card-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.wv-mega-menu__card-title {
  color: var(--wv-color-text-primary);
}

.wv-mega-menu__card-eyebrow {
  color: var(--wv-color-olive-dark);
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.wv-mega-menu__card-desc {
  margin: 0;
  color: var(--wv-color-text-primary);
}

/* ── Browse all products strip — bottom-right of Col 3 ── */
.wv-mega-menu__browse {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  text-decoration: none;
  transition: color 180ms ease;
}

.wv-mega-menu__browse:hover {
  color: var(--wv-color-olive-dark);
}

.wv-mega-menu__browse-label {
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
}

.wv-mega-menu__browse-count {
  color: var(--wv-color-text-secondary);
  text-transform: uppercase;
}

.wv-mega-menu__browse-arrow {
  color: var(--wv-color-text-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1280px) {
  .wv-mega-menu__grid {
    gap: 48px;
    padding: 20px 56px;
  }
}

/* Mobile-first: mega-menu hidden by default, revealed at tablet+. */
.wv-mega-menu,
.wv-mega-menu__backdrop {
  display: none;
}

@media (min-width: 768px) {
  .wv-mega-menu,
  .wv-mega-menu__backdrop {
    display: revert;
  }
}