/* ══════════════════════════════════════════════════════════════
   TELL EQUIPMENT — MEGA MENU (2026-09-09)
   Color divide: Sales columns = blue, Repairs columns = red,
   Knowledge = navy/neutral. Desktop dropdowns + mobile-merged.
   ══════════════════════════════════════════════════════════════ */

/* wrapper around the existing desktop <nav> links */
nav{position:relative}
.mm-item{position:relative}
.mm-item > a{display:inline-flex;align-items:center;gap:5px}
.mm-item > a::after{
  content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .25s ease;
}
.mm-panel{
  position:absolute;top:100%;left:0;z-index:900;
  display:flex;gap:0;
  min-width:680px;max-width:min(92vw,860px);
  background:#fff;border:1px solid #d9dee8;border-top:3px solid var(--sales);
  border-radius:0 0 14px 14px;
  box-shadow:0 24px 60px -12px rgba(7,22,56,.35);
  padding:22px 24px 20px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.mm-panel.mm-repair{border-top-color:var(--repair)}
.mm-panel.mm-know{border-top-color:#071638}

/* ── Overflow fix, 2026-09-15 (v2 — corrected root cause) ─────────────────
   DIAGNOSIS (measured via CDP, not assumed):
   .mm-panel is position:absolute, and its containing block is .mm-item
   (position:relative). So `right:0` resolves to the ITEM's right edge, not
   the viewport — anchoring it right still overflowed (item at x808 + 680px
   panel = 1488px in a 1429px viewport).
   Compounding it: the panel lives inside <header position:sticky>, and the
   only `overflow-x:clip` ancestor sits BELOW that sticky header, so clipping
   never contained it. body{overflow-x:clip} already existed and did nothing.

   FIX: drop the panel out of .mm-item's containing block by making it
   position:fixed, anchored under the sticky header. Fixed elements resolve
   against the viewport, so it can never exceed it regardless of nav order,
   item position, or which panel is right-most.
   Guarded to >=1000px so the mobile off-canvas menu is untouched.          */
@media (min-width:1000px){
  .mm-item{position:relative;}

  .mm-panel{
    position:fixed;
    top:var(--mm-top,72px);
    left:auto;
    right:max(16px, calc(50vw - 714px));
    width:min(860px, calc(100vw - 32px));
    min-width:0;
    max-width:calc(100vw - 32px);
  }
}
/* Never let a menu panel create a page scrollbar (kept as a safety net). */
body{overflow-x:clip;}
.mm-item:hover .mm-panel,
.mm-item:focus-within .mm-panel{opacity:1;visibility:visible;transform:translateY(0)}

.mm-col{flex:1 1 0;min-width:150px;padding-right:22px}
.mm-col + .mm-col{border-left:1px solid #eceff5;padding-left:22px}
.mm-h{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--muted,#5b6472);margin:0 0 10px;
}
.mm-h .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;vertical-align:1px}
.mm-h.sales .dot{background:var(--sales)}
.mm-h.repair .dot{background:var(--repair)}
.mm-h.know .dot{background:#071638}

.mm-panel a.mm-link{
  display:block;padding:6px 8px;margin:1px -8px;border-radius:8px;
  color:#28303e;font-size:13.5px;line-height:1.35;text-decoration:none;
}
.mm-panel a.mm-link:hover{background:#f0f4fb;color:var(--sales)}
.mm-repair a.mm-link:hover{background:#fdf0f0;color:var(--repair)}
.mm-panel a.mm-link small{display:block;color:#8a92a0;font-size:11px;margin-top:1px}
.mm-panel a.mm-cta{
  display:inline-block;margin-top:12px;padding:8px 16px;border-radius:9px;
  font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;text-decoration:none;
}
.mm-cta.sales{background:var(--sales)}
.mm-cta.repair{background:var(--repair)}
.mm-cta.know{background:#071638}
.mm-note{margin-top:14px;font-size:11px;color:#98a0ad}

/* ── Mobile: mega panels collapse into the existing burger panel ── */
@media (max-width:1020px){
  .mm-panel{display:none}
  .mm-item > a::after{display:none}
}