/* ============================================================
   Mega menus  (css/nav-mega.css)
   Layered AFTER nav-modern.css. Turns the Services / Industries /
   About / Contact dropdowns into wide, guided panels: a multi-column
   link grid with one-line descriptors, plus a brand "featured rail"
   that calls out a proof point and a next-step CTA. This is Spirk's
   idea from the site-review call, use the nav itself to guide the
   customer toward the goal, not just list links.

   Keeps nav-modern.css's liquid-glass panel (background, blur, radius,
   shadow) and only adds the internal layout. Bootstrap still toggles
   the panel open/closed on .open > .dropdown-menu, so the grid lives on
   an inner wrapper and the panel keeps display:none/block.
   ============================================================ */

nav .dropdown-menu.mega-menu{
  width:min(680px,94vw);
  padding:0;
  overflow:hidden;
}
nav .dropdown-menu.mega-menu.mega--feat{ width:min(860px,96vw); }

/* DESKTOP: pin every mega panel CENTERED under the floating nav instead of
   anchoring it to its trigger, so a right-side menu (About / Contact) never
   runs off the screen edge. The panel is position:fixed, but because the nav
   carries transform:translateX(-50%) it is the panel's containing block, so
   `top` is measured from the NAV's top edge, not the viewport. Geometry at
   1440x900: nav top 14px / bottom 98px (normal), top 8px / bottom 68px
   (shrunk). The panel's viewport top works out to navTop + top + 1px border,
   so `top` is chosen to land the panel ~8px below the pill in BOTH states.
   margin:0 overrides nav-modern's base .dropdown-menu margin-top:12px so the
   offset stays exact. (Mobile keeps the stacked inline behavior below.) */
@media (min-width:992px){
  nav .dropdown-menu.mega-menu{
    position:fixed;
    /* top:100% = the NAV's own bottom edge. The nav is this fixed panel's
       containing block (it carries transform:translateX(-50%)), so a percentage
       top is measured against the nav's box and AUTO-TRACKS the normal AND
       shrunk pill heights, no magic px to drift. margin-top is the gap below
       the pill. This replaces the old hardcoded 91px/67px that sat too low in
       the shrunk state (owner flagged 2026-06-30). */
    top:100%;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    margin:2px 0 0;     /* a hairline below the pill so the panel reads as attached
                           to the nav (owner flagged the old ~8px gap, both states);
                           overrides .dropdown-menu margin-top:12px */
  }
}

nav .mega-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 20px;
  padding:16px;
}
nav .dropdown-menu.mega-menu.mega--feat .mega-inner{
  grid-template-columns:1fr 1fr 1.12fr;
}

/* a column of links */
nav .mega-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }

/* a link item: bold title + muted one-line descriptor */
nav .mega-menu .mega-link{
  display:block; padding:9px 12px; border-radius:12px;
  color:var(--wa-navy,#0b2a3a); text-decoration:none;
  transition:background .15s ease;
}
nav .mega-menu .mega-link:hover,
nav .mega-menu .mega-link:focus{ background:rgba(0,66,95,.08); text-decoration:none; }
nav .mega-link b{
  display:block; font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:15px; line-height:1.2; color:inherit;
}
nav .mega-link span{
  display:block; font-size:12.5px; line-height:1.35; color:#5a636c; margin-top:2px;
}

/* the featured rail: brand-red proof + CTA, 3rd column */
nav .mega-feat{
  background:linear-gradient(160deg,#e50a2d 0%,#b00722 100%);
  color:#fff; border-radius:16px; padding:18px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 14px 30px rgba(176,7,34,.30);
}
nav .mega-feat .k{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; opacity:.92; }
nav .mega-feat .h{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:19px; line-height:1.14; margin:7px 0 8px; color:#fff; }
nav .mega-feat p{ font-size:13px; line-height:1.45; opacity:.96; margin:0 0 13px; }
nav .mega-feat .mega-cta{
  display:inline-block; align-self:flex-start;
  background:#fff; color:#b00722; font-weight:800; font-size:13px;
  padding:9px 15px; border-radius:999px; text-decoration:none;
  transition:transform .15s ease, background .15s ease;
}
nav .mega-feat .mega-cta:hover{ background:#ffe7eb; transform:translateY(-1px); text-decoration:none; }

/* footer strip inside the panel: "see all" + a small reassurance */
nav .mega-foot{
  grid-column:1 / -1;
  border-top:1px solid rgba(0,40,60,.10);
  margin-top:8px; padding:11px 12px 3px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
nav .mega-foot a{ font-weight:800; color:var(--wa-red,#e50a2d); font-size:13px; text-decoration:none; }
nav .mega-foot a:hover{ text-decoration:underline; }
nav .mega-foot .note{ font-size:12px; color:#6a727b; }
/* social icons row (Contact mega) */
nav .mega-social{ display:inline-flex; gap:14px; align-items:center; }
nav .mega-social a{ color:var(--wa-navy,#0b2a3a); font-size:18px; }
nav .mega-social a:hover{ color:var(--wa-red,#e50a2d); }

/* In the collapsed (mobile) navbar, drop the floating-panel chrome and render a
   clean, flat, full-width list (the desktop fixed-centering rule above is gated
   to >=992px, so it never applies here). */
@media (max-width:991px){
  nav .dropdown-menu.mega-menu,
  nav .dropdown-menu.mega-menu.mega--feat{
    position:static; width:auto; float:none;
    background:transparent; border:0; box-shadow:none; border-radius:0;
    margin:0; padding:0; overflow:visible;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  nav .mega-inner,
  nav .dropdown-menu.mega-menu.mega--feat .mega-inner{
    display:block; padding:2px 0 8px;
  }
  nav .mega-col{ display:block; }
  nav .mega-menu .mega-link{ padding:11px 16px; border-radius:10px; }
  nav .mega-link b{ font-size:15px; }
  nav .mega-link span{ display:none; }   /* titles only on phones, keeps it compact */
  nav .mega-feat{ display:none; }        /* the red callout is desktop-only */
  nav .mega-foot{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:14px; margin:4px 0 2px; padding:10px 16px 2px;
  }
  nav .mega-foot .note{ display:none; }
}

/* ============================================================
   NAV SITE SEARCH  (the magnifier dropdown + live result cards)
   The panel reuses the .mega-menu centered-fixed positioning, so it
   tracks the nav in both the normal and shrunk states. Only the
   internal layout is defined here.
   ============================================================ */
nav .wb-nav-search-toggle{ font-size:17px; }
nav .wb-nav-search-toggle .glyphicon{ top:2px; }
nav .dropdown-menu.wb-search-menu{ width:min(540px,94vw); }

.wb-search-drop{ padding:16px; }
.wb-nav-search-form{ position:relative; }
.wb-nav-search-ico{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:#8a929b; font-size:15px; pointer-events:none;
}
.wb-nav-search-input{
  width:100%; box-sizing:border-box;
  padding:13px 16px 13px 42px;
  font-family:'Inter',sans-serif; font-size:16px; color:var(--wa-navy,#0b2a3a);
  background:#fff; border:2px solid rgba(0,40,60,.14); border-radius:14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.wb-nav-search-input:focus{
  border-color:var(--wa-red,#e50a2d);
  box-shadow:0 0 0 4px rgba(229,10,45,.12);
}
.wb-nav-search-input::placeholder{ color:#9aa1a9; }

.wb-nav-search-results{ margin-top:6px; max-height:60vh; overflow-y:auto; }
.wb-nav-search-results.is-open{ margin-top:10px; }

a.wb-nsr-card{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none;
  color:var(--wa-navy,#0b2a3a); transition:background .14s ease;
}
.wb-nsr-img{ flex:0 0 auto; width:54px; height:40px; object-fit:cover; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.wb-nsr-body{ min-width:0; display:block; }
a.wb-nsr-card:hover,
a.wb-nsr-card:focus{ background:rgba(0,66,95,.07); text-decoration:none; }
.wb-nsr-cat{
  display:inline-block; font-family:'Montserrat',sans-serif; font-weight:800;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wa-red,#e50a2d); margin-bottom:2px;
}
.wb-nsr-t{
  display:block; font-family:'Montserrat',sans-serif; font-weight:700;
  font-size:15px; line-height:1.25; color:inherit;
}
.wb-nsr-s{
  display:block; font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.4;
  color:#5a636c; margin-top:2px;
}
.wb-nsr-s mark{ background:rgba(229,10,45,.16); color:inherit; padding:0 1px; border-radius:2px; }
a.wb-nsr-all{
  display:block; margin-top:6px; padding:11px 12px; border-top:1px solid rgba(0,40,60,.10);
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px;
  color:var(--wa-red,#e50a2d); text-decoration:none;
}
a.wb-nsr-all:hover{ text-decoration:underline; }
.wb-nsr-empty{ padding:10px 12px; font-size:13.5px; line-height:1.5; color:#5a636c; }
.wb-nsr-empty a{ color:var(--wa-red,#e50a2d); font-weight:700; }

.wb-nav-search-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,40,60,.10);
}
.wb-nav-search-hint{ font-size:12px; color:#6a727b; }
.wb-nav-search-foot .wb-nav-search-all{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:13px;
  color:var(--wa-red,#e50a2d); text-decoration:none; white-space:nowrap;
}
.wb-nav-search-foot .wb-nav-search-all:hover{ text-decoration:underline; }

/* Mobile: the magnifier dropdown is desktop-only; phones use the flat
   "Search" link at the top of the collapsed menu, which goes to /search/. */
.wb-nav-search-mobile .glyphicon{ margin-right:6px; }