/* ==========================================================================
   Preview — the page embedded in the frame of the component sheet.

   A plain dark background, the component open, nothing else: the framing is
   what advertises the component. No glow and no gradient — the bar's veil has
   to read for what it is, not for the colour it happens to catch.

   This page is not a site: it is a frame. The difference matters, and it
   explains everything that follows. On a site, "narrow screen" means "a phone",
   and the component is right to fold its mega menu away. Here, narrow means
   "small frame" — folding away would amount to showing something other than the
   component. So the original composition is kept and the scale is fitted to the
   space available.
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  /* Without this the body's padding adds to its 100% height: the component is
     centred in an area taller than the frame and ends up pushed down by the
     whole of the top padding. */
  box-sizing: border-box;
}

/* The icon sprite has to be in the document for <use> to resolve it, but it
   must never take up any space — otherwise it shifts the component. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  padding: 5vmin 4vmin;
  background: #050507;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mega-menu-nav {
  width: 100%;
  max-width: none;

  /* The scale follows the width of the frame, less the body padding. No cap,
     and that is the important point: at a constant width in em the layout is
     identical at every size — the same line breaks, therefore the same panel
     height. That is what allows the composition to be centred with a single
     constant, below. 68 em keeps the descriptions on one line; the bar, for its
     part, needs 57.5 em at the very least (measured). */
  --dn-font-size: calc((100vw - 8vmin) / 68);

  /* The panel is absolutely positioned: it weighs nothing in the layout.
     Without this margin, "centring" would only centre the bar and the mega menu
     would drop out of the bottom of the frame. So its space is given back to
     it: the bar→panel offset, plus the 16.17 em of height measured on the
     reference. */
  margin-bottom: calc(var(--dn-panel-offset) + 16.17em);
}

/* --------------------------------------------------------------------------
   The component's breakpoints, neutralised for the preview.

   This file is loaded after mega-menu-nav.css: at equal specificity these rules
   win over the ones in its media queries. That is deliberate, and it is the only
   place where we allow ourselves to contradict the component.
   -------------------------------------------------------------------------- */

.mega-menu-nav {
  --dn-cols: 3; /* never 2 or 1: the composition is what we are showing */
}

.mega-menu-nav__bar {
  flex-wrap: nowrap; /* the buttons do not move to a second line */
}

.mega-menu-nav__links {
  flex: 0 1 auto;
  overflow-x: visible; /* nothing to scroll: it all fits, by construction */
}

.mega-menu-nav__actions {
  flex: none;
}

.mega-menu-nav__button {
  flex: none;
}