/* --------------------------------------------------------------------------
   wYrks Mega Menu
   Renders a fixed bar AND a full-screen overlay from one component. Both the
   position and the z-index live on :host — styles inside a shadow root cannot
   lift the host above other elements on the page.
   -------------------------------------------------------------------------- */

:host {
  position: fixed;
  inset: 0;
  z-index: 2000;
  /* The host covers the viewport so the overlay has somewhere to live, but it
     must not swallow clicks on the page while the menu is closed. Children
     re-enable pointer events for themselves. */
  pointer-events: none;
}

.mm {
  --mm-eerie-black: #1e2019;
  --mm-cool-gray: #929db5;
  --mm-ice-blue: #f0f6fa;
  --mm-alice-blue: #e0edf5;
  --mm-carolina-blue: #84bcda;
  --mm-celestial-blue: #469dc8;
  --mm-polynesian-blue: #0e4c92;
  --mm-ice-white: #fcfcfc;
  --mm-oxford-blue: #07274b;
  --mm-syracuse-orange: #d34e24;
  --mm-paynes-gray: #4c5870;

  --mm-font: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-bar-h: 120px;
  --mm-item-size: 16px;
  --mm-panel-gap: 60px;
  --mm-panel-pad-x: 40px;
  --mm-hairline: rgba(132, 188, 218, 0.5);

  /* Mirrors the :host rules. In Shadow DOM the host already carries these, but
     :host does not exist when the component is rendered without a shadow root
     (the local preview), and the bar must be fixed either way. */
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  font-family: var(--mm-font);
}

.mm *,
.mm *::before,
.mm *::after {
  box-sizing: border-box;
}

/* ---------- Fixed bar ---------- */

.mm-bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mm-bar-h);
  padding: 0 2svw;
  background: rgba(240, 246, 250, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--mm-hairline);
  pointer-events: auto;
}

.mm-logo {
  display: flex;
  align-items: center;
  flex: none;
}

.mm-logo img {
  display: block;
  height: 60px;
  width: auto;
}

.mm-nav {
  display: flex;
  align-items: center;
  /* Take the width left over by the logo and distribute the items across it,
     rather than letting them bunch up against the right edge. */
  flex: 1 1 auto;
  justify-content: space-evenly;
  gap: 0;
}

/* ---------- Nav items ---------- */

.mm-item {
  display: block;
  padding: 8px 20px;
  border: 0;
  background: none;
  font-family: var(--mm-font);
  font-weight: 600;
  font-size: var(--mm-item-size);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mm-oxford-blue);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Guarded: a tap on a touch screen applies :hover and leaves it stuck until
   the user taps elsewhere, which latched menu items and the Back chevron
   orange. `hover: hover` limits these to real pointers. */
@media (hover: hover) {
  .mm-item:hover {
    color: var(--mm-syracuse-orange);
  }
}

/* Current page. Outranks the dimmed state below: knowing where you are matters
   more than which menu happens to be open. */
.mm-item.is-current {
  color: var(--mm-syracuse-orange);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* A panel is open and this is not the one being explored. */
.mm-item.is-dimmed:not(.is-current) {
  color: var(--mm-cool-gray);
}

.mm-item:focus-visible {
  outline: 3px solid var(--mm-celestial-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Overlay ---------- */

.mm-overlay {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--mm-bar-h) 0 0 0;
  background: rgba(240, 246, 250, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* ---------- Panels ---------- */

.mm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 25vw;
  min-width: 300px;
  max-width: 800px;
  height: 100%;
  padding: 0;
  background: var(--mm-ice-white);
  border-right: 2px solid var(--mm-hairline);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Absolute so it neither scrolls with the list nor eats flow height (which
   would push the vertically centred list off-centre). */
.mm-panel-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 76px;
  /* Masks list items scrolling underneath the Back / Close controls.
     `inherit` picks up whichever panel colour applies at this depth. */
  background: inherit;
  pointer-events: none;
}

.mm-panel-head > * {
  pointer-events: auto;
}

/* The scroll container. Long lists (Process Services is 10 items) scroll here. */
.mm-panel-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Top padding clears the floating head, which paints the panel colour to
     mask items scrolling under the controls — without it the first item sits
     behind that mask. Symmetric so `margin-block: auto` still centres truly. */
  padding: 76px var(--mm-panel-pad-x);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Native bar hidden in favour of .mm-scrollbar: iOS uses transient overlay
     scrollbars that fade out and cannot be made persistent with CSS, so a long
     list looked like it ended at the fold. */
  scrollbar-width: none;
}

.mm-panel-scroll::-webkit-scrollbar {
  display: none;
}

/* Rendered only while the list actually overflows. */
.mm-scrollbar {
  position: absolute;
  top: 76px;
  right: 8px;
  bottom: 24px;
  z-index: 3;
  width: 4px;
  border-radius: 100px;
  background: rgba(76, 88, 112, 0.15);
  pointer-events: none;
}

.mm-scrollbar-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 24px;
  border-radius: 100px;
  background: var(--mm-cool-gray);
}

/* Depth 1 = Sub_Menu, depth 2 = Super_Sub_Menu. The deeper panel sits at a
   LOWER z-index so it stays behind and grows out from underneath. */
.mm-panel--d0 { z-index: 1200; }
.mm-panel--d1 { z-index: 1200; }
.mm-panel--d2 { z-index: 1100; background: var(--mm-alice-blue); }

/* Centred when it fits, top-aligned and scrollable when it does not.
   `justify-content: center` cannot do this — an overflowing centred flex child
   spills past BOTH edges and the top becomes unreachable by scrolling. Auto
   margins absorb free space when there is any and collapse to 0 when there is
   not, which is exactly the behaviour wanted, with no breakpoint or JS. */
.mm-panel-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mm-panel-gap);
  margin-block: auto;
  width: 100%;
}

.mm-panel-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mm-font);
  font-weight: 600;
  font-size: var(--mm-item-size);
  line-height: 1.3;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  color: var(--mm-oxford-blue);
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .mm-panel-item:hover {
    color: var(--mm-syracuse-orange);
  }
}

.mm-panel-item.is-current {
  color: var(--mm-syracuse-orange);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mm-panel-item:focus-visible {
  outline: 3px solid var(--mm-celestial-blue);
  outline-offset: 3px;
}

/* ---------- Close / back ---------- */

.mm-close,
.mm-back {
  position: absolute;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mm-paynes-gray);
  cursor: pointer;
  transition: color 0.2s ease;
}

.mm-close { right: 24px; }
.mm-back { left: 12px; }

@media (hover: hover) {
  .mm-close:hover,
  .mm-back:hover {
    color: var(--mm-syracuse-orange);
  }
}

.mm-close svg,
.mm-back svg {
  display: block;
  width: 28px;
  height: 28px;
}

.mm-close:focus-visible,
.mm-back:focus-visible {
  outline: 3px solid var(--mm-celestial-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Hamburger (mobile only) ---------- */

.mm-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}

.mm-burger span {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 2px;
  margin-left: -15px;
  background: var(--mm-oxford-blue);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Two bars, matching the mock. */
.mm-burger span:nth-child(1) { top: 18px; }
.mm-burger span:nth-child(2) { top: 26px; }

.mm-burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.mm-burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mm-burger:focus-visible {
  outline: 3px solid var(--mm-celestial-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Mobile ---------- */

@media (max-width: 1100px) {
  .mm-bar { padding: 0 4svw; }
  .mm-nav { display: none; }
  .mm-burger { display: block; }

  .mm-overlay {
    /* One full-screen panel at a time; levels replace each other rather than
       sitting side by side. */
    display: block;
  }

  .mm-panel {
    position: absolute;
    /* NOT `inset: 0`: an absolutely positioned box resolves its offsets against
       the containing block's padding box, so `top: 0` would ignore the
       overlay's 120px top padding and slide the panel under the fixed bar —
       taking the Back button with it. Offset by the bar height explicitly.
       (Desktop panels are flex children, which do respect the padding.) */
    inset: var(--mm-bar-h) 0 0 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    /* Height comes from the top/bottom offsets; `100%` would measure the
       padding box and overshoot by the bar height. */
    height: auto;
    padding: 0;
    border-right: 0;
    box-shadow: none;
  }

  .mm-panel-scroll {
    /* Clears the Back / Close row, which floats above this box. */
    padding: 76px 6svw;
  }

  .mm-panel--d0,
  .mm-panel--d1 { background: var(--mm-ice-white); }

  .mm-close { top: 16px; right: 4svw; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .mm-item,
  .mm-panel-item,
  .mm-close,
  .mm-back,
  .mm-burger span {
    transition: none;
  }
}