/**
 * Desktop mega-nav stylesheet — viewport-conditional payload.
 *
 * Loaded via:
 *   <link rel="stylesheet" href="/styles/mega-nav.css"
 *         media="(min-width: 768px)" precedence="default">
 *
 * Browsers fetch this with low priority on narrow viewports and never parse/
 * apply the rules until the viewport widens, so mobile users save the
 * download + parse cost of styles they will never see.
 *
 * Pure CSS (no @apply) because public/* assets are served as-is and don't
 * pass through the Tailwind pipeline. Token references via var(--*) match
 * the design system defined in app/globals.css :root.
 *
 * Visual brief: docs/discovery/phase3reqs/Shopify_Megamenu_Center_opening_clippath.md
 *   - Curtain effect: clip-path inset(0 50% 0 50%) → inset(0 0% 0 0%)
 *   - Snappy ease-out-quint feels fast at start, settles at end
 *   - will-change: clip-path forces GPU compositing for jitter-free reveal
 *   - pointer-events: none while closed → invisible panel never blocks page clicks
 *   - No pixel gap between menubar and panel — bridged by negative top inset
 */

/* ── Mega nav (top-level menubar) ─────────────────── */

.scwv-mega-nav {
  position: relative;
}

.scwv-mega-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-block: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scwv-mega-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.scwv-mega-nav__link {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration-line: none;
  padding-inline: 0.75rem;
  padding-block: 0.5rem;
  transition-property: color, background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--brand-nav-link);
}

.scwv-mega-nav__link:hover,
.scwv-mega-nav__link--open {
  color: var(--brand-nav-link-hover);
}

.scwv-mega-nav__link--active {
  color: var(--brand-nav-link-hover);
}

/* ── Panel (curtain reveal container) ─────────────── */

.scwv-mega-nav__panel {
  position: absolute;
  z-index: 40;
  overflow: hidden;
  /* Full-bleed across viewport while sitting inside a constrained container —
     negative-margin trick avoids depending on JS measurement.
     No gap between menubar and panel — prevents premature mouseleave. */
  top: 100%;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  background-color: var(--surface-bg);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
  /* Closed state: 0px-wide vertical sliver in the centre */
  clip-path: inset(0 50% 0 50%);
  pointer-events: none;
  opacity: 0;
  will-change: clip-path, opacity;
  /* EaseOutQuint — starts fast, settles elegantly */
  transition:
    clip-path 0.42s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.18s ease-out;
}

.scwv-mega-nav__panel.is-open {
  clip-path: inset(0 0% 0 0%);
  pointer-events: auto;
  opacity: 1;
}

.scwv-mega-nav__panel-inner {
  margin-inline: auto;
  padding-block: 2rem 2.5rem;
  min-height: 18rem;
  max-height: calc(100vh - var(--header-height, 7rem) - 2rem);
  overflow-y: auto;
}

.scwv-mega-nav__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.scwv-mega-nav__grid:has(.scwv-mega-nav__cms) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* ── Sub-list (navigation children) ───────────────── */

.scwv-mega-nav__sub-list {
  margin: 0;
  list-style: none;
  padding: 0;
  display: grid;
  column-gap: 1.5rem;
  row-gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scwv-mega-nav__sub-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration-line: none;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--brand-text);
}

.scwv-mega-nav__sub-link:hover {
  opacity: 0.7;
}

.scwv-mega-nav__sub-link--all .scwv-mega-nav__sub-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-heading);
}

.scwv-mega-nav__sub-img-wrap {
  display: block;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: var(--brand-promo-latte, #f0ede8);
  aspect-ratio: 4 / 3;
}

.scwv-mega-nav__sub-img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.scwv-mega-nav__sub-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.375;
}

/* ── CMS column (mega_menu_block content) ─────────── */

.scwv-mega-nav__cms {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-left: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  padding-left: 2rem;
}

.scwv-mega-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scwv-mega-block__media {
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: var(--brand-promo-latte, #f0ede8);
  aspect-ratio: 16 / 10;
}

.scwv-mega-block__img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.scwv-mega-block__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scwv-mega-block__heading {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--brand-heading);
}

.scwv-mega-block__rich-text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--brand-text);
}

.scwv-mega-block__rich-text > * + * {
  margin-top: 0.5rem;
}

.scwv-mega-block__cta {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration-line: none;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--brand-heading);
}

.scwv-mega-block__cta:hover {
  color: var(--brand-nav-link-hover);
}

/* ── Reduced motion: cut animation, keep state ────── */

@media (prefers-reduced-motion: reduce) {
  .scwv-mega-nav__panel {
    transition: opacity 0.12s linear;
    clip-path: inset(0 0% 0 0%);
  }
  .scwv-mega-nav__panel:not(.is-open) {
    opacity: 0;
  }
}