/* ============================================================
   Signature Homeworx — Mega Menu widget.
   Brand tokens below; every adjustable value arrives as a
   --shxmm-* custom property written onto the wrapper by
   Elementor-generated CSS from the widget controls.

   Motion: the panel/drawer open+close transition is gated by a
   JS-added `.shx-mm-motion` class (only added when motion is
   allowed — see mega-menu.js `prefersReduced()`); the final
   open/closed visual state itself (`.is-open` / `[hidden]`) is
   always applied regardless of motion, so the widget still works,
   it just snaps instead of animating. Purely CSS-hover-driven
   effects (tile zoom, chevron rotation, CTA hover) are separately
   disabled by the prefers-reduced-motion media query at the
   bottom of this file.
   ============================================================ */
.shx-mm {
  --shxmm-navy: #0D0040;
  --shxmm-navy-hover: #251a5e;
  --shxmm-font: 'Outfit', system-ui, sans-serif;
  --shxmm-speed: 200ms;

  position: relative;
  font-family: var(--shxmm-font);
}
.shx-mm, .shx-mm * { box-sizing: border-box; }

.shx-mm .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Bar ---- */
.shx-mm__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--shxmm-bar-height, 76px);
  padding: var(--shxmm-bar-padding, 14px 32px);
  background: var(--shxmm-bar-bg, #ffffff);
}

.shx-mm__items {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 24px 0 0;
  padding: 0;
  flex: 1 1 auto;
  /* No logo in this widget — it's meant to sit in a header column beside
     an existing site logo. items_align (--shxmm-items-justify) lets the
     user tune how the list fits that leftover space; flex-start (its
     default) keeps items flush with whatever sits to the widget's left. */
  justify-content: var(--shxmm-items-justify, flex-start);
}
.shx-mm__item { position: relative; }

.shx-mm__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--shxmm-link-color, var(--shxmm-navy));
  transition: color var(--shxmm-speed) ease;
}
.shx-mm__link:hover,
.shx-mm__link.is-open {
  color: var(--shxmm-link-hover, var(--shxmm-navy-hover));
}
.shx-mm__link:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: 2px;
  border-radius: 4px;
}

.shx-mm__chevron {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--shxmm-speed) ease;
}
.shx-mm__link--btn.is-open .shx-mm__chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.shx-mm__indicator {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--shxmm-accent, #3D68D9);
  opacity: 0;
  transform: scaleX(0.6) translateY(2px);
  transform-origin: center;
  pointer-events: none;
  transition: opacity var(--shxmm-speed) ease, transform var(--shxmm-speed) ease;
}
.shx-mm__link.is-open .shx-mm__indicator {
  opacity: 1;
  transform: scaleX(1) translateY(0);
}

/* ---- Burger (hidden on desktop; shown per breakpoint below) ---- */
.shx-mm__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  order: 3;
}
.shx-mm__burger:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: 2px;
}
.shx-mm__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--shxmm-navy);
  transition: transform var(--shxmm-speed) ease, opacity var(--shxmm-speed) ease;
}
.shx-mm__burger[aria-expanded="true"] .shx-mm__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.shx-mm__burger[aria-expanded="true"] .shx-mm__burger-bar:nth-child(2) { opacity: 0; }
.shx-mm__burger[aria-expanded="true"] .shx-mm__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- CTA (single element, same label at every width — see cta_label control) ---- */
.shx-mm__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  background: var(--shxmm-cta-bg, #3D68D9);
  color: var(--shxmm-cta-text, #ffffff);
  border-radius: var(--shxmm-cta-radius, 999px);
  transition: background var(--shxmm-speed) ease, color var(--shxmm-speed) ease;
}
.shx-mm__cta:hover {
  background: var(--shxmm-cta-bg-hover, #2F52B8);
  color: var(--shxmm-cta-text-hover, #ffffff);
}
.shx-mm__cta:focus-visible {
  outline: 3px solid var(--shxmm-navy);
  outline-offset: 2px;
}
.shx-mm__cta-icon {
  flex: 0 0 auto;
  display: block;
}

/* ---- Panels (each nests inside its trigger button's own .shx-mm__item,
   which is already position:relative — see the JS comment on Tab order) ---- */
.shx-mm__panel {
  /* left/width are set in JS on every open (see positionPanel() in
     mega-menu.js) from the trigger <li>'s getBoundingClientRect(), not
     hardcoded here: left:50%/-50vw would resolve against this panel's own
     positioned ancestor (its <li>), not the viewport, so it would misalign
     off-center from the bar and can overflow the page horizontally. */
  position: absolute;
  top: 100%;
  z-index: 5;
  background: var(--shxmm-panel-bg, #ffffff);
  box-shadow: 0 24px 48px rgba(13, 0, 64, 0.16);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.shx-mm__panel[hidden] { display: none; }
.shx-mm__panel.shx-mm-motion {
  transition: opacity var(--shxmm-speed) ease, transform var(--shxmm-speed) ease;
}
.shx-mm__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.shx-mm__panel-inner {
  /* 848px matches the columns_max_width control's default in widget.php.
     border-box padding is 32px each side (64 total); 4 tile tracks at the
     180px minimum need 4*180 + 3*20 gaps = 780px of content — 840px (the
     old default) only left 776px, one column short. */
  max-width: var(--shxmm-columns-max-width, 848px);
  margin: 0 auto;
  padding: 32px;
  /* A featured panel can run tall enough to extend below the viewport with
     no way to reach the lower tiles (measured 869px bottom at 1280x800).
     Cap the panel to the space under the bar and let it scroll internally
     instead of the page. --shxmm-bar-height is the same custom property
     .shx-mm__bar's min-height reads (set by the Bar Minimum Height
     control); the extra 24px covers the panel's box-shadow plus a hair of
     breathing room below the bar. 32px of padding on every side keeps this
     well clear of the tile hover ring (translateY(-3px) + a 3px
     focus-visible outline, offset 3px) and this scrolls vertically only —
     it never introduces horizontal overflow. */
  max-height: calc(100vh - var(--shxmm-bar-height, 72px) - 24px);
  overflow-y: auto;
}
.shx-mm__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

/* ---- Featured (large) tile + small-tile grid split — only present when
   the panel's top-level entry has a featured child (see shx_mm_group_items()
   in menu-lib.php); without one, .shx-mm__panel-inner holds a bare
   .shx-mm__tiles grid exactly as before, unchanged. ---- */
.shx-mm__panel-body--featured {
  display: flex;
  align-items: stretch;
  gap: 20px;
  min-height: 260px;
}
.shx-mm__panel-body--featured .shx-mm__tiles {
  /* auto flex-basis (not a %) so the grid's own natural width — driven by
     however many minmax(180px, 1fr) tracks fit its share of the row — sets
     how much space it claims, instead of the featured tile's leftover
     flex-grow swallowing it down to a single column. */
  flex: 1 1 auto;
  min-width: 380px; /* keeps at least 2 tile columns at the 180px minimum */
}
.shx-mm__tile--featured {
  /* A fixed (no-grow, no-shrink) share, not flex:1, so it can't expand
     into the grid's share of the row the way flex-grow:1 vs. auto would
     let it — that was collapsing the small-tile grid to one column. */
  flex: 0 0 38%;
  min-width: 220px;
  /* Every .shx-mm__tile child (media/scrim/label) is absolutely
     positioned, so a tile has no natural height of its own — the base
     rule below relies on aspect-ratio for that. Here we drop the fixed
     ratio instead, so the featured tile has no hypothetical height of
     its own; flexbox's default align-items: stretch then expands it to
     match its flex sibling's — the small-tile grid's own content height —
     which is exactly "spans the full panel height" without hardcoding a
     pixel value that would drift out of sync with the grid. */
  aspect-ratio: auto;
}
.shx-mm__tile--featured .shx-mm__tile-label {
  font-size: 22px;
  padding: 22px 24px;
}

.shx-mm__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--shxmm-tile-radius, 12px);
  background: var(--shxmm-navy);
  text-decoration: none;
  transition: transform var(--shxmm-speed) ease;
}
.shx-mm__tile:hover,
.shx-mm__tile:focus-visible {
  transform: translateY(-3px);
}
.shx-mm__tile:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: 3px;
}
.shx-mm__tile-media { position: absolute; inset: 0; }
.shx-mm__tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--shxmm-speed) ease;
}
.shx-mm__tile:hover .shx-mm__tile-media img,
.shx-mm__tile:focus-visible .shx-mm__tile-media img {
  transform: scale(1.06);
}
.shx-mm__tile-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(13, 0, 64, var(--shxmm-scrim-opacity, 0.65)), transparent);
  transition: opacity var(--shxmm-speed) ease;
}
.shx-mm__tile:hover .shx-mm__tile-scrim,
.shx-mm__tile:focus-visible .shx-mm__tile-scrim {
  opacity: 0.85;
}
.shx-mm__tile-label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 16px;
  color: var(--shxmm-tile-label-color, #ffffff);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

/* ---- Scrim (drawer backdrop) ---- */
.shx-mm__scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(13, 0, 64, 0.45);
}
.shx-mm__scrim[hidden] { display: none; }

/* ---- Drawer (mobile) ---- */
.shx-mm__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--shxmm-drawer-bg, #ffffff);
  box-shadow: -12px 0 32px rgba(13, 0, 64, 0.18);
  transform: translateX(100%);
}
.shx-mm__drawer[hidden] { display: none; }
.shx-mm__drawer.shx-mm-motion {
  transition: transform var(--shxmm-speed) ease;
}
.shx-mm__drawer.is-open {
  transform: translateX(0);
}

.shx-mm__drawer-head {
  display: flex;
  align-items: center;
  /* No logo left in the head (removed with the widget's logo controls) —
     .shx-mm__drawer-title stays but is visually-hidden (position:absolute,
     so it doesn't take part in this flex layout), leaving the close
     button as the only visible child; flex-end pins it top-right. */
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--shxmm-drawer-divider, #e4e2ef);
}
.shx-mm__drawer-close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 6px 10px;
  color: var(--shxmm-navy);
}
.shx-mm__drawer-close:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: 2px;
}

.shx-mm__drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}

.shx-mm__orphan-warning {
  margin: 8px 20px;
  padding: 10px 14px;
  border: 1px dashed #b3261e;
  border-radius: 8px;
  background: #fdecea;
  color: #b3261e;
  font-size: 13px;
}

.shx-mm__drawer-group { border-bottom: 1px solid var(--shxmm-drawer-divider, #e4e2ef); }
.shx-mm__drawer-cat {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--shxmm-drawer-link-color, var(--shxmm-navy));
}
.shx-mm__drawer-cat:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: -3px;
}
.shx-mm__drawer-cat .shx-mm__chevron { transition: transform var(--shxmm-speed) ease; }
.shx-mm__drawer-cat[aria-expanded="true"] .shx-mm__chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.shx-mm__drawer-panel[hidden] { display: none; }
.shx-mm__drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px 16px;
}
.shx-mm__drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 4px 0;
}
.shx-mm__drawer-row:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: 2px;
}
.shx-mm__drawer-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--shxmm-navy);
}
.shx-mm__drawer-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shx-mm__drawer-row-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--shxmm-drawer-link-color, var(--shxmm-navy));
}
/* Featured child: first accordion row, same row mechanics (thumb + label),
   just visually distinguished with a bolder/larger label. */
.shx-mm__drawer-row--featured .shx-mm__drawer-row-label {
  font-weight: 800;
  font-size: 16px;
}
.shx-mm__drawer-link {
  display: block;
  padding: 16px 20px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--shxmm-drawer-link-color, var(--shxmm-navy));
  border-bottom: 1px solid var(--shxmm-drawer-divider, #e4e2ef);
}
.shx-mm__drawer-link:focus-visible {
  outline: 3px solid var(--shxmm-accent, #3D68D9);
  outline-offset: -3px;
}

.shx-mm__drawer-foot { padding: 14px 20px 20px; }
.shx-mm__drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  font-size: 17px;
  padding: 16px;
  background: var(--shxmm-cta-bg, #3D68D9);
  color: var(--shxmm-cta-text, #ffffff);
  border-radius: var(--shxmm-cta-radius, 999px);
  transition: background var(--shxmm-speed) ease, color var(--shxmm-speed) ease;
}
.shx-mm__drawer-cta:hover {
  background: var(--shxmm-cta-bg-hover, #2F52B8);
  color: var(--shxmm-cta-text-hover, #ffffff);
}
.shx-mm__drawer-cta:focus-visible {
  outline: 3px solid var(--shxmm-navy);
  outline-offset: 2px;
}

/* ---- Body scroll lock while the drawer is open (global, not scoped to .shx-mm) ---- */
html.shx-mm-lock,
body.shx-mm-lock {
  overflow: hidden;
}

/* ---- Breakpoints: bar collapses to burger + drawer; the single CTA stays
   visible at every width (it no longer has separate desktop/mobile
   variants — see cta_label in widget.php). ---- */
@media (max-width: 768px) {
  .shx-mm--bp-768 .shx-mm__items { display: none; }
  .shx-mm--bp-768 .shx-mm__burger { display: flex; }
}
@media (max-width: 1024px) {
  .shx-mm--bp-1024 .shx-mm__items { display: none; }
  .shx-mm--bp-1024 .shx-mm__burger { display: flex; }
}
@media (max-width: 1280px) {
  .shx-mm--bp-1280 .shx-mm__items { display: none; }
  .shx-mm--bp-1280 .shx-mm__burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .shx-mm__panel,
  .shx-mm__drawer,
  .shx-mm__tile,
  .shx-mm__tile-media img,
  .shx-mm__tile-scrim,
  .shx-mm__burger-bar,
  .shx-mm__chevron,
  .shx-mm__indicator,
  .shx-mm__cta,
  .shx-mm__drawer-cta,
  .shx-mm__link {
    transition: none !important;
  }
  /* transition:none above stops the tile hover from animating, but the
     transform/opacity themselves still apply instantly on :hover — that's
     still motion the user asked to avoid, so neutralize the end states too. */
  .shx-mm__tile:hover,
  .shx-mm__tile:focus-visible {
    transform: none !important;
  }
  .shx-mm__tile:hover .shx-mm__tile-media img,
  .shx-mm__tile:focus-visible .shx-mm__tile-media img {
    transform: none !important;
  }
  .shx-mm__tile:hover .shx-mm__tile-scrim,
  .shx-mm__tile:focus-visible .shx-mm__tile-scrim {
    opacity: 1 !important;
  }
}