/* ==========================================================================
   Mega menu nav 1.0 — navigation bar with a mega-menu
   --------------------------------------------------------------------------
   Plain CSS. No framework, no build step, no external request.

   The component enhances native <details> elements. Before the script runs —
   or if it never runs — every menu still opens and closes with the mouse and
   with the keyboard, because that is what <details>/<summary> already does.

   PROPORTIONS
   Every metric is expressed in em and derives from --dn-font-size. The ratios
   were measured pixel by pixel on the published reference image (see
   README.md, "Provenance"), and they are what makes the component look like
   itself at any size:

     nav text        1                (the reference unit)
     bar height      4.758 em
     bar radius      1.491 em         (noticeably squarer than a pill)
     bar padding     0.671 em vertical, 1.491 em left, 0.796 em right
                                      (asymmetric on the reference, measured)
     primary button  7.898 x 3.416 em, radius 0.550 em
     ghost button    4.677 x 3.363 em (2 px shorter than the primary one)
     active pill     8.397 x 2.593 em, radius 0.666 em
     panel radius    1.795 em         (rounder than the bar — measured, not a typo)
     panel offset    1.117 em below the bar
     icon tile       2.591 em square, radius 0.607 em
     grid pitch      26.344 em across, 5.221 em down
     small text      0.86 em          (eyebrow, descriptions, "Explore" link)

   So changing --dn-font-size rescales the whole component, and nothing else
   needs to be touched.

   Order of this file:
     1. Face declarations
     2. Design tokens
     3. Shell and bar
     4. Links, triggers, chevron
     5. Buttons
     6. Panel: header, grid, cards
     7. Open / close motion
     8. Variants
     9. Narrow screens
    10. Fallbacks: reduced motion, forced colours, no backdrop-filter

   Naming follows BEM: .mega-menu-nav, .mega-menu-nav__part, .mega-menu-nav--variant.
   ========================================================================== */

/* ==========================================================================
   1. Face declarations
   --------------------------------------------------------------------------
   Two subsets, both local. Latin alone covers French and English; latin-ext
   is fetched only if the page actually uses a character that needs it.
   The face is variable (weight 200-800), so one file covers every weight the
   component asks for.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("PlusJakartaSans-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("PlusJakartaSans-variable-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

.mega-menu-nav {
  /* --- scale ------------------------------------------------------------ */
  /* The single knob. Everything below is em, so this rescales the component. */
  --dn-font-size: 1rem;

  /* --- colour ----------------------------------------------------------- */
  /* The surface is a white veil, not an opaque grey. On the reference it
     composites to #1c1c1c over black; the tint is kept as raw channels so the
     same value can be reused at several opacities. */
  --dn-tint: 255 255 255;
  --dn-surface: rgb(var(--dn-tint) / 0.11);
  --dn-surface-hover: rgb(var(--dn-tint) / 0.06);
  --dn-line: rgb(var(--dn-tint) / 0.057); /* measured: composite 41 on 28 */
  --dn-blur: 24px;

  /* One token drives the primary button, the open trigger's pill, the "Explore"
     link and the icons: change it and the whole accent follows.
     The reference measures #2864E9 — an exact reading, 91 % of the button's
     pixels — and that is what the measurement bench still pins. This violet is
     a deliberate departure from it; put the blue back here to return to the
     original. */
  --dn-accent: #7c3aed;
  --dn-accent-hover: #6d28d9;
  --dn-accent-ink: #ffffff;

  --dn-ink: #fdfdfd;
  --dn-ink-title: #fafbff;
  --dn-ink-muted: #c5cbd9;
  --dn-ink-eyebrow: #d2d7e1;
  --dn-tile-bg: #fafbff;
  --dn-tile-ink: var(--dn-accent);

  --dn-focus: #c4b5fd;

  /* --- geometry, all measured ------------------------------------------- */
  --dn-bar-h: 4.758em;
  --dn-bar-r: 1.491em;
  /* The 1 px border sits inside the border box, so it is taken out of the
     padding: the measured gap is from the outer edge. */
  --dn-bar-pad-y: calc(0.671em - 1px);
  /* Asymmetric on the reference: 1.380 em on the link side, 0.796 em on the
     button side. Measured, not a guess — see README. */
  --dn-bar-pad-left: calc(1.491em - 1px);
  --dn-bar-pad-right: calc(0.796em - 1px);

  --dn-link-pad-x: 0.9em; /* same inset as the active pill */
  --dn-link-gap: 0.145em;
  --dn-link-chevron-gap: 0.32em;
  /* Box, not ink. On the Lucide 24-unit grid the chevron path spans half the
     box plus one stroke, so a 1.049 em box draws the 0.612 em glyph measured
     on the reference. */
  --dn-chevron-w: 1.049em;
  --dn-stroke: 2;

  --dn-btn-h: 3.416em;
  --dn-btn-h-ghost: 3.363em;
  --dn-btn-r: 0.55em;
  /* Two values, not one: the measured labels are narrower than what this
     face renders, and the reference insets differ between the two buttons. */
  --dn-btn-pad-x: 1.024em;
  --dn-btn-pad-x-ghost: 0.959em;
  --dn-btn-gap: 0.543em;

  --dn-pill-h: 2.593em;
  --dn-pill-r: 0.666em;

  --dn-panel-r: 1.795em;
  --dn-panel-offset: 1.117em;
  --dn-panel-pad-x: calc(1.719em - 1px);
  --dn-panel-pad-top: calc(2.078em - 1px);
  --dn-panel-pad-bottom: calc(2.233em - 1px);

  --dn-card-pad-x: 1.01em;
  --dn-card-pad-y: 0.5em;
  --dn-card-text-gap: 0.419em;
  --dn-col-gap: 0.525em;
  --dn-head-gap: 1.81em;
  --dn-row-gap: 1.423em;

  --dn-tile-size: 2.591em;
  --dn-tile-r: 0.607em;
  --dn-tile-gap: 0.895em;
  --dn-icon-size: 1.05em;

  /* --- type ------------------------------------------------------------- */
  --dn-font: "Plus Jakarta Sans", "Instrument Sans", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, sans-serif;
  --dn-weight-link: 550;
  --dn-weight-strong: 800;
  --dn-weight-body: 550;
  --dn-size-small: 0.86em;

  /* --- motion ----------------------------------------------------------- */
  --dn-duration: 180ms;
  --dn-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* The wave that runs through the panel's contents once the surface has
     landed: when it starts, how far apart the blocks are, and how far each one
     travels. Set --dn-stagger-step to 0 to have everything arrive together. */
  --dn-stagger-base: 50ms;
  --dn-stagger-step: 32ms;
  --dn-stagger-rise: 0.6em;

  /* Hover, read back by the script. The first is a guard against the bar
     unfolding under a pointer that is only crossing it. The second has to
     outlast the trip across --dn-panel-offset, the gap between the bar and
     the panel, which belongs to neither of them: leaving the bar there fires
     a pointerleave, and only the delay keeps the panel from vanishing
     mid-travel. */
  --dn-hover-in: 90ms;
  --dn-hover-out: 220ms;

  /* --- layout ----------------------------------------------------------- */
  --dn-max-width: 82em; /* the reference layout is 82 x the nav text */

  /* The component declares its own box model so it does not depend on the
     host page having a reset. */
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: var(--dn-max-width);
  margin-inline: auto;
  font-family: var(--dn-font);
  font-size: var(--dn-font-size);
  font-weight: var(--dn-weight-link);
  line-height: 1.2;
  color: var(--dn-ink);
  -webkit-text-size-adjust: 100%;
}

.mega-menu-nav *,
.mega-menu-nav *::before,
.mega-menu-nav *::after {
  box-sizing: inherit;
}

/* ==========================================================================
   3. Shell and bar
   ========================================================================== */

.mega-menu-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dn-bar-pad-right);
  min-height: var(--dn-bar-h);
  padding: var(--dn-bar-pad-y) var(--dn-bar-pad-right) var(--dn-bar-pad-y)
    var(--dn-bar-pad-left);
  border: 1px solid var(--dn-line);
  border-radius: var(--dn-bar-r);
  background: var(--dn-surface);
  -webkit-backdrop-filter: blur(var(--dn-blur));
  backdrop-filter: blur(var(--dn-blur));
}

/* ==========================================================================
   4. Links, triggers, chevron
   ========================================================================== */

.mega-menu-nav__links {
  display: flex;
  align-items: center;
  gap: var(--dn-link-gap);
  min-width: 0; /* a flex child never shrinks below its content otherwise */
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu-nav__item {
  position: static; /* the panel is positioned against .mega-menu-nav, not this */
  margin: 0;
}

.mega-menu-nav__disclosure {
  margin: 0;
}

/* The trigger is either a <summary> (menu) or an <a> (plain link). Both get
   the same box so the row reads as one rhythm. */
.mega-menu-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--dn-link-chevron-gap);
  height: var(--dn-pill-h);
  padding-inline: var(--dn-link-pad-x);
  border: 0;
  border-radius: var(--dn-pill-r);
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dn-duration) var(--dn-ease),
    color var(--dn-duration) var(--dn-ease);
}

/* <summary> ships with a disclosure triangle; remove it in both engines. */
summary.mega-menu-nav__trigger {
  list-style: none;
}
summary.mega-menu-nav__trigger::-webkit-details-marker,
summary.mega-menu-nav__trigger::marker {
  display: none;
  content: "";
}

.mega-menu-nav__trigger:hover {
  background: var(--dn-surface-hover);
}

.mega-menu-nav__trigger:focus-visible {
  outline: 2px solid var(--dn-focus);
  outline-offset: 2px;
}

/* Open menu: the trigger becomes the accent pill. */
.mega-menu-nav__disclosure[open] > .mega-menu-nav__trigger {
  background: var(--dn-accent);
  color: var(--dn-accent-ink);
}

/* The component owns how the icons are drawn: the markup only carries the
   path data, so a host page cannot end up with mismatched stroke widths. */
.mega-menu-nav__chevron,
.mega-menu-nav__icon,
.mega-menu-nav__more-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--dn-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mega-menu-nav__chevron {
  display: block;
  flex: none;
  width: var(--dn-chevron-w);
  height: auto;
  transition: transform var(--dn-duration) var(--dn-ease);
}

.mega-menu-nav__disclosure[open] > .mega-menu-nav__trigger .mega-menu-nav__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.mega-menu-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--dn-btn-gap);
  flex: none;
}

.mega-menu-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dn-btn-h);
  padding-inline: var(--dn-btn-pad-x);
  border: 0;
  border-radius: var(--dn-btn-r);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dn-duration) var(--dn-ease);
}

.mega-menu-nav__button:focus-visible {
  outline: 2px solid var(--dn-focus);
  outline-offset: 2px;
}

.mega-menu-nav__button--ghost {
  height: var(--dn-btn-h-ghost);
  padding-inline: var(--dn-btn-pad-x-ghost);
  border: 1px solid var(--dn-line);
  background: transparent;
  color: var(--dn-ink);
}

.mega-menu-nav__button--ghost:hover {
  background: var(--dn-surface-hover);
}

.mega-menu-nav__button--primary {
  background: var(--dn-accent);
  color: var(--dn-accent-ink);
  font-weight: var(--dn-weight-strong);
}

.mega-menu-nav__button--primary:hover {
  background: var(--dn-accent-hover);
}

/* ==========================================================================
   6. Panel
   ========================================================================== */

.mega-menu-nav__panel {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--dn-panel-offset);
  padding: var(--dn-panel-pad-top) var(--dn-panel-pad-x)
    var(--dn-panel-pad-bottom);
  border: 1px solid var(--dn-line);
  border-radius: var(--dn-panel-r);
  background: var(--dn-surface);
  -webkit-backdrop-filter: blur(var(--dn-blur));
  backdrop-filter: blur(var(--dn-blur));
}

.mega-menu-nav__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* The "Explore…" link is nowrap: without this wrap it pushes the header
     strip out of the panel on a narrow screen (measured: 10 px of overflow at
     320 px). */
  flex-wrap: wrap;
  gap: 0.4em 1em;
  /* No inset: on the reference the header aligns with the panel padding,
     while the cards are indented by their own padding. */
  margin-bottom: var(--dn-head-gap);
}

.mega-menu-nav__eyebrow {
  font-size: var(--dn-size-small);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dn-ink-eyebrow);
}

.mega-menu-nav__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border-radius: 0.3em;
  color: var(--dn-accent);
  font-size: var(--dn-size-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mega-menu-nav__more:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mega-menu-nav__more:focus-visible {
  outline: 2px solid var(--dn-focus);
  outline-offset: 2px;
}

.mega-menu-nav__more-arrow {
  display: block;
  width: 0.8em;
  height: auto;
}

/* --- grid --------------------------------------------------------------- */

.mega-menu-nav__grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid column will not go below the width of its
     content otherwise, and a long description would push the panel wider than
     the bar. */
  grid-template-columns: repeat(var(--dn-cols, 3), minmax(0, 1fr));
  column-gap: var(--dn-col-gap);
  row-gap: var(--dn-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu-nav__card {
  display: flex;
  align-items: flex-start;
  gap: var(--dn-tile-gap);
  min-width: 0;
  padding: var(--dn-card-pad-y) var(--dn-card-pad-x);
  border-radius: var(--dn-tile-r);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dn-duration) var(--dn-ease);
}

.mega-menu-nav__card:hover {
  background: var(--dn-surface-hover);
}

.mega-menu-nav__card:focus-visible {
  outline: 2px solid var(--dn-focus);
  outline-offset: 2px;
}

.mega-menu-nav__tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dn-tile-size);
  height: var(--dn-tile-size);
  border-radius: var(--dn-tile-r);
  background: var(--dn-tile-bg);
  color: var(--dn-tile-ink);
}

.mega-menu-nav__icon {
  display: block;
  width: var(--dn-icon-size);
  height: var(--dn-icon-size);
}

.mega-menu-nav__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--dn-card-text-gap);
  min-width: 0;
}

.mega-menu-nav__card-title {
  font-size: 1.018em;
  font-weight: var(--dn-weight-strong);
  color: var(--dn-ink-title);
}

.mega-menu-nav__card-desc {
  font-size: var(--dn-size-small);
  font-weight: var(--dn-weight-body);
  line-height: 1.35;
  color: var(--dn-ink-muted);
}

/* ==========================================================================
   7. Open / close motion
   --------------------------------------------------------------------------
   <details> removes its content from the box tree the instant `open` is
   dropped, so an exit transition needs the script: it holds `open` until the
   transition ends, tagged with data-dn-closing.

   The entry needs the script too, for a reason that is easy to miss. Closing a
   <details> does not un-render its contents — the browser hides them with
   content-visibility. As far as CSS is concerned the panel is still there, so
   @starting-style, which only fires when an element is rendered for the first
   time, never fires again after the page's first opening. Measured: opening a
   second time animates nothing at all, and a keyframe animation behaves the
   same way. So the script puts the starting state back by hand, for one frame,
   under data-dn-opening.

   @starting-style is kept all the same: without JavaScript it is what gives
   the first opening its entrance. The following ones arrive plainly.
   ========================================================================== */

.mega-menu-nav__panel {
  transition: opacity var(--dn-duration) var(--dn-ease),
    transform var(--dn-duration) var(--dn-ease);
}

@supports (transition-behavior: allow-discrete) {
  .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel {
      opacity: 0;
      transform: translateY(-0.5em);
    }
  }
}

.mega-menu-nav__disclosure[data-dn-closing] > .mega-menu-nav__panel {
  opacity: 0;
  transform: translateY(-0.5em);
  pointer-events: none;
}

/* --- the contents arrive in a wave ---------------------------------------
   The panel lands as one surface; what is inside follows, left to right and
   top to bottom. Each block's delay comes from its rank, and CSS cannot count
   its own siblings, so the ranks are written out. Past the twelfth item
   everything leaves on the last delay rather than trailing forever.
   The wave is a reconstruction: a still image cannot show timing. Three
   tokens tune it, and it costs nothing to set --dn-stagger-step to 0. */

.mega-menu-nav__panel-head,
.mega-menu-nav__grid > * {
  --dn-delay: calc(
    var(--dn-stagger-base) + var(--dn-rank, 12) * var(--dn-stagger-step)
  );
  transition: opacity var(--dn-duration) var(--dn-ease) var(--dn-delay),
    transform var(--dn-duration) var(--dn-ease) var(--dn-delay);
}

.mega-menu-nav__panel-head { --dn-rank: 0; }
.mega-menu-nav__grid > :nth-child(1) { --dn-rank: 1; }
.mega-menu-nav__grid > :nth-child(2) { --dn-rank: 2; }
.mega-menu-nav__grid > :nth-child(3) { --dn-rank: 3; }
.mega-menu-nav__grid > :nth-child(4) { --dn-rank: 4; }
.mega-menu-nav__grid > :nth-child(5) { --dn-rank: 5; }
.mega-menu-nav__grid > :nth-child(6) { --dn-rank: 6; }
.mega-menu-nav__grid > :nth-child(7) { --dn-rank: 7; }
.mega-menu-nav__grid > :nth-child(8) { --dn-rank: 8; }
.mega-menu-nav__grid > :nth-child(9) { --dn-rank: 9; }
.mega-menu-nav__grid > :nth-child(10) { --dn-rank: 10; }
.mega-menu-nav__grid > :nth-child(11) { --dn-rank: 11; }

@supports (transition-behavior: allow-discrete) {
  .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel .mega-menu-nav__panel-head,
  .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel .mega-menu-nav__grid > * {
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel .mega-menu-nav__panel-head,
    .mega-menu-nav__disclosure[open] > .mega-menu-nav__panel .mega-menu-nav__grid > * {
      opacity: 0;
      transform: translateY(var(--dn-stagger-rise));
    }
  }
}

/* On closing, the wave has no reason to exist: the panel leaves in one piece,
   and a delay on its children would only drag. */
.mega-menu-nav__disclosure[data-dn-closing] > .mega-menu-nav__panel .mega-menu-nav__panel-head,
.mega-menu-nav__disclosure[data-dn-closing] > .mega-menu-nav__panel .mega-menu-nav__grid > * {
  transition-delay: 0s;
}

/* --- the starting state, set by hand -------------------------------------
   The script sets this attribute for one frame on every opening, then removes
   it: it is the removal that triggers the transition. `transition: none` is
   essential here — without it, setting the starting state would itself be
   animated and you would watch the panel move back before moving forward. */

.mega-menu-nav__disclosure[data-dn-opening] > .mega-menu-nav__panel {
  opacity: 0;
  transform: translateY(-0.5em);
  transition: none;
}

.mega-menu-nav__disclosure[data-dn-opening] > .mega-menu-nav__panel .mega-menu-nav__panel-head,
.mega-menu-nav__disclosure[data-dn-opening] > .mega-menu-nav__panel .mega-menu-nav__grid > * {
  opacity: 0;
  transform: translateY(var(--dn-stagger-rise));
  transition: none;
}

/* ==========================================================================
   8. Variants
   ========================================================================== */

/* A real form-density navigation bar rather than the marketing-page one. */
.mega-menu-nav--compact {
  --dn-font-size: 0.875rem;
  --dn-bar-h: 3.6em;
  --dn-bar-r: 1em;
  --dn-btn-h: 2.6em;
  --dn-btn-h-ghost: 2.6em;
  --dn-pill-h: 2.2em;
  --dn-panel-pad-top: 1.4em;
  --dn-panel-pad-bottom: 1.4em;
  --dn-row-gap: 1.1em;
}

/* Light page. Only the tokens change; no rule is duplicated. */
.mega-menu-nav--light {
  --dn-tint: 15 23 42;
  --dn-surface: rgb(var(--dn-tint) / 0.05);
  --dn-surface-hover: rgb(var(--dn-tint) / 0.06);
  --dn-line: rgb(var(--dn-tint) / 0.1);
  --dn-ink: #0f172a;
  --dn-ink-title: #0f172a;
  --dn-ink-muted: #475569;
  --dn-ink-eyebrow: #64748b;
  --dn-tile-bg: #ede9fe;
}

/* ==========================================================================
   9. Narrow screens
   --------------------------------------------------------------------------
   The reference shows one desktop layout only, so this section is an addition,
   not a reproduction. It is deliberately minimal: the grid loses columns, and
   the link row scrolls sideways instead of overflowing the bar.
   ========================================================================== */

@media (max-width: 60em) {
  .mega-menu-nav {
    --dn-cols: 2;
  }

  .mega-menu-nav__links {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .mega-menu-nav__links::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 38em) {
  .mega-menu-nav {
    --dn-cols: 1;
    --dn-font-size: 0.9rem;
  }
}

/* Below about 30 em the two buttons no longer fit beside the links: measured,
   the bar overflowed by 10 px. So they move to a second line rather than being
   clipped or hidden. */
@media (max-width: 30em) {
  .mega-menu-nav__bar {
    flex-wrap: wrap;
    row-gap: var(--dn-btn-gap);
  }

  .mega-menu-nav__links {
    flex: 1 1 100%;
  }

  .mega-menu-nav__actions {
    flex: 1 1 100%;
  }

  .mega-menu-nav__button {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   10. Fallbacks
   ========================================================================== */

/* Without backdrop-filter the veil would sit on whatever is behind it and read
   as muddy, so fall back to the composite the reference produces over black. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mega-menu-nav__bar,
  .mega-menu-nav__panel {
    background: #1c1c1c;
  }

  .mega-menu-nav--light .mega-menu-nav__bar,
  .mega-menu-nav--light .mega-menu-nav__panel {
    background: #f1f5f9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu-nav *,
  .mega-menu-nav *::before,
  .mega-menu-nav *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    /* Without this the stagger would remain: nothing would move any more, but
       you would still have to wait half a beat before the panel was readable. A
       delay is movement spread over time. */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

@media (forced-colors: active) {
  .mega-menu-nav__bar,
  .mega-menu-nav__panel,
  .mega-menu-nav__button--ghost {
    border: 1px solid CanvasText;
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mega-menu-nav__button--primary,
  .mega-menu-nav__disclosure[open] > .mega-menu-nav__trigger {
    border: 1px solid CanvasText;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .mega-menu-nav__tile {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .mega-menu-nav__trigger:focus-visible,
  .mega-menu-nav__button:focus-visible,
  .mega-menu-nav__card:focus-visible,
  .mega-menu-nav__more:focus-visible {
    outline: 2px solid CanvasText;
  }
}