.mega-menu {
  --mm-rule: #d9d9d6;
  --mm-surface: #f0f0ef;

  --mm-bar-height: 90px;
  --mm-gutter: 28px;
  --mm-inset: var(--mm-gutter);
  --mm-gutter-end: var(--mm-gutter);
  --mm-content-top: 28px;
  --mm-content-bottom: 28px;
  --mm-search-width: 337px;
  --mm-search-shift: 0px;
  --mm-service-size: 24px;
  --mm-panel-size: 16px;
  --mm-bar-color: var(--mp-black);
  --mm-primary-width: 517px;
  --mm-panel-step: 0px;

  /* page content carries z-index up to 99, so the whole nav needs its own layer above that */
  position: relative;
  z-index: 900;
}

/* the panels are decoration until Alpine says otherwise */
.mega-menu__overlay {
  display: none;
}

/* a column so the Close control can sit at the bottom whatever the open panel's height */
.mega-menu__overlay[data-open='true'] {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------------ search */

/* 44px tap target around a 20px icon */
.mega-menu__search-toggle {
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mega-menu__search-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.mega-menu .mega-menu__search-toggle,
.mega-menu .mega-menu__search-toggle:is(:hover, :focus, :focus-visible, :active) {
  color: var(--mp-black);
}

.mega-menu .mega-menu__search-toggle.is-open,
.mega-menu .mega-menu__search-toggle:is(:hover, :focus-visible) {
  color: var(--mp-red);
}

.mega-menu__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(var(--mm-search-width), 100%);
  height: 48px;
  padding-inline: 16px;
  border: 1px solid var(--mm-rule);
  border-radius: 4px;
  margin-left: var(--mm-search-shift);
}

.mega-menu .mega-menu__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--mp-black);
}

.mega-menu .mega-menu__search-input:focus {
  outline: none;
}

.mega-menu__search:focus-within {
  border-color: var(--mp-red);
}

.mega-menu .mega-menu__search-submit {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--mp-gray);
  display: flex;
}

/* always on show, unlike the drill-down columns, so quick links land in the same slot as column two */
.mega-menu__overlay--search .menu-panels__column {
  display: block;
}

/* --------------------------------------------------------------------- the bar */

.mega-menu__drawer {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 24px);
}

.mega-menu__bar-list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

.mega-menu .mega-menu__bar-trigger,
.mega-menu .mega-menu__bar-link {
  font-size: 17px;
  line-height: 1.35;
  white-space: nowrap;
}

/* only :focus-visible turns red, so x-trap moving focus into the drawer can't repaint the first item */
.mega-menu :is(.mega-menu__bar-trigger, .mega-menu__bar-link),
.mega-menu :is(.mega-menu__bar-trigger, .mega-menu__bar-link):is(:hover, :focus, :focus-visible, :active) {
  color: var(--mm-bar-color);
}

.mega-menu .mega-menu__bar-trigger.is-open,
.mega-menu .mega-menu__bar-trigger.is-current-branch,
.mega-menu .mega-menu__bar-link[aria-current='page'] {
  color: var(--mp-maroon);
}

.mega-menu :is(.mega-menu__bar-trigger, .mega-menu__bar-link):is(:hover, :focus-visible) {
  color: var(--mp-red);
}

/* ----------------------------------------------------------------- the overlay */

/* --mm-offset-top is measured from the real header, --mm-bar-height is the pre-JS fallback */
.mega-menu__overlay {
  position: fixed;
  inset: var(--mm-offset-top, var(--mm-bar-height)) 0 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mm-surface);
  padding: var(--mm-gutter);
  padding-inline: var(--mm-inset) var(--mm-gutter-end);
}

.mega-menu__overlay .menu-panels__column[data-depth='1'] > .menu-panels__list {
  color: var(--mp-black);
}

.mega-menu__overlay .menu-panels__column[data-depth='1'] > .menu-panels__list > .menu-panels__item > * {
  font-size: var(--mm-service-size);
  font-weight: 600;
  line-height: 1.27;
  letter-spacing: -0.03em;
  padding: 4px 0;
}

.mega-menu__overlay .menu-panels__column:not([data-depth='1']) > .menu-panels__list > .menu-panels__item > * {
  font-size: var(--mm-panel-size);
}

.mega-menu__overlay .menu-panels__figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 65%;
}

/* scoped to outrank the shared reset, whose color/font inherit would otherwise win */
.mega-menu .mega-menu__close,
.mega-menu .mega-menu__close:is(:hover, :focus, :focus-visible) {
  color: var(--mp-red);
}

/* center the icon in a 44px click target */
.mega-menu .mega-menu__close {
  position: absolute;
  inset: var(--mm-content-top) var(--mm-search-inset-end, var(--mm-gutter-end)) auto auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.mega-menu__close-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* ------------------------------------------------ drawer: mobile and tablet (< 1024px) */

/* 25x16 three-bar icon from the design, centered in a 44px tap target */
.mega-menu__toggle {
  position: relative;
  width: 44px;
  height: 44px;
}

.mega-menu__toggle-bars,
.mega-menu__toggle-bars::before,
.mega-menu__toggle-bars::after {
  position: absolute;
  left: 0;
  width: 25px;
  height: 2px;
  background: var(--mp-black);
  transition: transform 150ms ease, opacity 150ms ease;
}

.mega-menu__toggle-bars {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mega-menu__toggle-bars::before,
.mega-menu__toggle-bars::after {
  content: '';
}

.mega-menu__toggle-bars::before {
  top: -7px;
}

.mega-menu__toggle-bars::after {
  top: 7px;
}

.mega-menu__toggle.is-open .mega-menu__toggle-bars {
  background: none;
}

.mega-menu__toggle.is-open .mega-menu__toggle-bars::before,
.mega-menu__toggle.is-open .mega-menu__toggle-bars::after {
  top: 0;
  background: var(--mp-maroon);
}

.mega-menu__toggle.is-open .mega-menu__toggle-bars::before {
  transform: rotate(45deg);
}

.mega-menu__toggle.is-open .mega-menu__toggle-bars::after {
  transform: rotate(-45deg);
}

@media (max-width: 1023px) {
  /* the bar list is the first drawer panel, so it lives inside the drawer rather than beside it */
  .mega-menu__drawer {
    position: fixed;
    inset: var(--mm-offset-top, var(--mm-bar-height)) 0 0;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--mm-surface);
    padding: var(--mm-gutter);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .mega-menu[data-drawer-open='true'] .mega-menu__drawer {
    display: flex;
  }

  /* the search control follows whichever panel is on screen */
  .mega-menu__search-toggle {
    order: 99;
    margin-top: 24px;
    margin-left: -12px;
  }

  .mega-menu__overlay--search .mega-menu__column--quick-links {
    margin-top: 32px;
  }

  .mega-menu__bar-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .mega-menu {
    --mm-bar-color: var(--mp-maroon);
    --mm-service-size: 17px;
  }

  .mega-menu .mega-menu__bar-trigger,
  .mega-menu .mega-menu__bar-link {
    font-size: 31px;
    font-weight: 600;
    line-height: 1.27;
    letter-spacing: -0.03em;
  }

  /* drilling in, or opening search, replaces the level you came from */
  .mega-menu[data-open-depth]:not([data-open-depth='0']) .mega-menu__bar-list,
  .mega-menu[data-search-open='true'] .mega-menu__bar-list {
    display: none;
  }

  .mega-menu__overlay {
    position: static;
    inset: auto;
    padding: 0;
    overflow: visible;
  }

  .mega-menu__overlay-title {
    margin: 0 0 16px;
    color: var(--mp-maroon);
    font-size: 31px;
    font-weight: 600;
    line-height: 1.27;
    letter-spacing: -0.03em;
  }

  .mega-menu__overlay .menu-panels__figure,
  .mega-menu__close {
    display: none !important;
  }
}

/* the drawer keeps the roomier gutter a tablet can afford */
@media (min-width: 768px) and (max-width: 1023px) {
  .mega-menu {
    --mm-gutter: 47px;
  }
}

/* ----------------------------------------------------- tablet (1024px - 1199px) */

@media (min-width: 1024px) {
  /* the end gutter is tighter than the start so the second column lands at 510, per the design */
  .mega-menu {
    --mm-bar-height: 74px;
    --mm-gutter: 47px;
    --mm-inset: calc(var(--mm-logo-inset, var(--mm-gutter)) + var(--mp-bracket-offset));
    --mm-gutter-end: 32px;
    --mm-content-top: 70px;
    --mm-content-bottom: 58px;
    --mm-search-width: 360px;
    --mm-primary-width: min(517px, 40vw);
    --mm-panel-size: 17px;
    /* the search bar lines up with the corner bracket, not the indented list */
    --mm-search-shift: calc(var(--mp-bracket-offset) * -1);
  }

  .mega-menu__toggle,
  .mega-menu__overlay-title {
    display: none;
  }

  /* fixed, not flexible, so opening a third panel can't pull the second one left */
  .mega-menu__overlay .menu-panels__column[data-depth='1'] {
    flex: 0 0 var(--mm-primary-width);
    margin-right: var(--mm-panel-step);
  }

  .mega-menu__overlay[data-photo] {
    --mm-surface: rgba(240, 240, 239, 0.95);
    left: auto;
    right: var(--mm-search-inset-end);
    bottom: auto;
    --mm-service-size: clamp(17px, 1.4vw, 25px);
    width: min(1100px, 72vw);
    height: var(--mm-branch-height, min(740px, 70dvh));
    max-height: calc(100dvh - var(--mm-offset-top) - 24px);
    padding: 48px clamp(28px, 3vw, 48px) 24px;
  }

  .mega-menu__overlay[data-photo='false'] {
    height: auto;
  }

  .mega-menu__overlay[data-photo='false'] .menu-panels__column[data-depth='1'] {
    display: block;
    flex-basis: 55%;
    margin-right: 0;
  }

  .mega-menu__overlay[data-photo='false'] .menu-panels__column[data-depth='2'] {
    flex: 1;
  }

  .mega-menu__overlay[data-photo] .mega-menu__close {
    position: fixed;
    top: calc(var(--mm-offset-top) + 8px);
    right: calc(var(--mm-search-inset-end) + 8px);
  }

  /* nothing opens beside this one, so the list takes what the photo leaves */
  .mega-menu__overlay[data-photo='true'] .menu-panels__columns {
    max-width: 45%;
  }

  .mega-menu__overlay[data-photo='true'] .menu-panels__column[data-depth='1'] {
    flex: 1 1 auto;
    max-width: var(--mm-primary-width);
    margin-right: 0;
  }

  .mega-menu__overlay {
    padding-block: var(--mm-content-top) var(--mm-content-bottom);
  }

  .mega-menu__overlay--search {
    padding-inline: var(--mm-inset);
  }

  .mega-menu__container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
}

/* ----------------------------------------------------- desktop (>= 1200px) */

@media (min-width: 1200px) {
  .mega-menu {
    --mm-gutter: clamp(48px, 5vw, 74px);
    --mm-bar-height: 80px;
    /* tighter than the start gutter so three open columns fit without squeezing the services list */
    --mm-gutter-end: 53px;
    --mm-service-size: 25px;
    --mm-content-top: 50px;
    --mm-search-width: 449px;
    --mm-primary-width: clamp(400px, 34vw, 517px);
    --mm-panel-step: clamp(48px, 8vw, 153px);
  }
}