/*
 * Mega menu panels for the product menu. Enqueued after the child style.css
 * so it can reshape the plain drop-down that stylesheet defines: the
 * top-level .sub-menu becomes a wide panel of columns instead of a narrow
 * list. Several rules below match style.css selector-for-selector, so that
 * load order is what decides them — see the enqueue in functions.php.
 */

/* The panel is positioned against the menu list, not against the item or the
   header: against the item it could only be as wide as one word, and against
   the header its offset would depend on the header's padding. The list's
   bottom edge is the item's bottom edge, so the gap below the links is set
   here and nowhere else. ::before then covers that gap — see below. */
.header ul.menu {
  position: relative;
}

.header ul.menu > li.mega-item {
  position: static;
}

.header ul.menu .mega-panel {
  top: calc(100% + 20px);
  left: 50%;
  right: auto;
  width: min(1140px, calc(100vw - 30px));
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 56px;
  padding: 34px 15px 40px;
  border-left: 0;
  border-right: 0;
  transform: translate(-50%, 6px);
  /* Closing waits a moment, so clipping a corner of the panel on the way in
     doesn't shut it. Opening is immediate. */
  transition-delay: 0.15s;
}

/* Covers the gap the offset above opens up. Without it the pointer leaves the
   item on the way down, hover goes false and the panel closes under the
   cursor. It belongs to the panel, so it is only hoverable while the panel is
   open and never blocks the links above it. */
.header ul.menu .mega-panel::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.header ul.menu > li.mega-item:hover > .mega-panel,
.header ul.menu > li.mega-item:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.header ul.menu .mega-panel > li.mega-col {
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 230px;
}

.header ul.menu .mega-col__title {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 8px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.header ul.menu a.mega-col__title:hover {
  color: var(--primary);
}

.header ul.menu .mega-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Undo the padded drop-down link styling inherited from .sub-menu a. */
.header ul.menu .mega-panel a {
  padding: 0;
  white-space: normal;
}

.header ul.menu .mega-list a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--gray);
}

.header ul.menu .mega-list a:hover {
  background: none;
  color: var(--primary);
}

/* Colour column: a swatch grid, two names per row. */
.header ul.menu .mega-col--color {
  min-width: 230px;
  max-width: 260px;
}

.header ul.menu .mega-swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.header ul.menu .mega-swatches li {
  display: block;
}

.header ul.menu .mega-swatches a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: none;
  white-space: nowrap;
  color: var(--gray);
}

.header ul.menu .mega-swatches a:hover {
  background: none;
  color: var(--primary);
}

/* display and flex-basis are both set: the swatch is an empty span, so as an
   inline box it would collapse to the width of its own borders. */
.header ul.menu .mega-swatch {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.header ul.menu .mega-swatches a:hover .mega-swatch {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary);
}

/* Narrower desktops: let the columns wrap rather than squeeze. */
@media (max-width: 1200px) {
  .header ul.menu .mega-panel {
    flex-wrap: wrap;
    gap: 30px 40px;
  }
}

/* The accordion takes over below 900px, matching style.css. This file loads
   after it, so the panel has to be put back in flow here. */
@media (max-width: 900px) {
  .header ul.menu .mega-panel::before {
    display: none;
  }

  .header ul.menu .mega-panel {
    position: static;
    display: block;
    width: auto;
    padding: 0 0 0 18px;
    transform: none;
    transition-delay: 0s;
  }

  .header ul.menu .mega-panel > li.mega-col {
    display: block;
    min-width: 0;
    max-width: none;
    padding: 6px 0 12px;
  }

  .header ul.menu .mega-col__title {
    margin-bottom: 4px;
    padding: 8px 0 6px;
    font-size: 12px;
  }

  .header ul.menu .mega-swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .header ul.menu .mega-list li {
    display: block;
  }
}