/* ==========================================================================
   nav-mega.css — Grouped multi-column Services mega menu
   Loaded globally after style.css. Upgrades the single-column
   .nav-dropdown-menu into a 4-column grouped panel so the full service
   list stays scannable without overflowing the viewport.
   Desktop only — below 1024px the mobile drawer takes over (style.css
   already sets .nav-dropdown-menu{display:none !important} there).
   ========================================================================== */

/* ---------- Shared breadcrumb ----------
   Rendered by includes/header.php from $page_meta['breadcrumb'].
   Defined here (globally loaded) so pages that do not load svc-extra.css
   still style it. svc-extra.css repeats these values for the new service
   pages — identical, so the duplication is harmless. */
.svc-crumb{background:#F8FAFF;border-bottom:1px solid #E8EEF6}
.svc-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:12px 0;font-size:.78rem;color:#6B7280}
.svc-crumb li{display:flex;align-items:center;gap:6px}
.svc-crumb li+li::before{content:'/';color:#C3CEDC}
.svc-crumb a{color:#1B6FD8;font-weight:600;text-decoration:none}
.svc-crumb a:hover{text-decoration:underline}
.svc-crumb [aria-current]{color:#0A1628;font-weight:700}
@media(max-width:768px){.svc-crumb ol{font-size:.74rem}}

/* The panel is far wider than the "Services" nav item, so it must not be
   positioned against it — that would push it off the left edge. .site-header
   is position:sticky, which makes it a containing block, so dropping the item
   to position:static lets the panel centre on the header (and the viewport). */
.nav-dropdown-mega{position:static}

.nav-dropdown-menu.nav-mega{
  left:50%;
  transform:translateX(-50%);
  min-width:0;
  width:min(1120px, calc(100vw - 48px));
  padding:22px 24px 18px;
  border-radius:18px;
  display:none;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:6px 22px;
  max-height:calc(100vh - var(--nav-h, 76px) - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav-dropdown:hover .nav-dropdown-menu.nav-mega,
.nav-dropdown:focus-within .nav-dropdown-menu.nav-mega{display:grid}

.nav-mega-group{list-style:none;margin:0;padding:0;min-width:0}
.nav-mega-title{
  display:block;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2EC4B6;
  padding:0 12px 8px;
  margin-bottom:4px;
  border-bottom:1px solid #EDF2F7;
}
.nav-mega-group li a{
  display:block;
  padding:8px 12px;
  font-size:.845rem;
  font-weight:500;
  color:#374151;
  line-height:1.35;
  text-decoration:none;
  border-radius:9px;
  transition:background .15s, color .15s;
}
.nav-mega-group li a:hover,
.nav-mega-group li a:focus-visible{background:#F0F6FF;color:#1B6FD8}
.nav-mega-group li a:focus-visible{outline:2px solid #1B6FD8;outline-offset:1px}

/* Emergency link stands out — it is the one people need in a hurry */
.nav-mega-urgent a{color:#DC2626 !important;font-weight:700}
.nav-mega-urgent a:hover,.nav-mega-urgent a:focus-visible{background:#FEF2F2 !important;color:#B91C1C !important}

/* Narrower desktops: drop to two columns before the mobile drawer kicks in */
@media(max-width:1200px){
  .nav-dropdown-menu.nav-mega{
    grid-template-columns:repeat(2, minmax(0,1fr));
    width:min(680px, calc(100vw - 32px));
  }
}

/* Mobile drawer: give the grouped headings some structure too */
.mobile-nav-submenu .mobile-mega-title{
  display:block;
  padding:14px 22px 6px 24px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2EC4B6;
  background:#F9FAFB;
}
.mobile-nav-submenu .mobile-nav-urgent a{color:#DC2626;font-weight:700}