/* ============================================================
   Wagner Meters — hardcoded primary nav (Chase_Nav_Redesign_v3)
   All selectors prefixed wm- to avoid collisions with the legacy
   style.css. Scoped desktop-only; existing #mobile-header /
   mobile-menu.php styling is untouched.
   ============================================================ */

/* The theme's global reset (style.css) sets font-family directly on a
   long list of bare tags (div, a, ul, li, h3, etc.) with its own
   specificity — inheriting Inter from .wm-primary-nav alone isn't enough
   to beat that, since inherited values lose to any explicit declaration
   on the element itself. Force it on every descendant explicitly. */
.wm-primary-nav,
.wm-primary-nav * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.wm-primary-nav {
  --wm-brand-blue: #0054a6;
  --wm-brand-blue-dark: #003e7a;
  --wm-ink-900: #0f172a;
  --wm-ink-700: #334155;
  --wm-ink-500: #64748b;
  --wm-ink-200: #e2e8f0;
  --wm-ink-100: #f1f5f9;
  --wm-ink-50:  #f8fafc;
  --wm-white:   #ffffff;
  --wm-radius: 6px;
  --wm-shadow-mega: 0 12px 28px -8px rgba(15, 23, 42, .15), 0 4px 8px -2px rgba(15, 23, 42, .08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
}

.wm-primary-nav .wm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.wm-nav-list {
  display: flex;
  gap: 4px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wm-nav-item { position: static; }

/* ------------------------------------------------------------
   Header layout: centers the nav between logo and Shop button,
   same technique as the mockup (equal flex on the two end columns
   so the middle column sits visually centered regardless of each
   end's actual content width). Scoped to #bot-header /
   #bot-header-transparent specifically -- .wrap is reused sitewide
   (breadcrumbs, other nav bars) so this must not be a global rule.
------------------------------------------------------------ */
#bot-header .wrap.wm-header-flex,
#bot-header-transparent .wrap.wm-header-flex {
  display: flex;
  align-items: center;
}
#bot-header-transparent .wrap.wm-header-flex {
  margin-top: 40px;
}
#bot-header .wrap.wm-header-flex > #logo,
#bot-header-transparent .wrap.wm-header-flex > #logo,
#bot-header .wrap.wm-header-flex > .wm-header-actions,
#bot-header-transparent .wrap.wm-header-flex > .wm-header-actions {
  flex: 1 1 0;
}
#bot-header .wrap.wm-header-flex > .wm-header-actions,
#bot-header-transparent .wrap.wm-header-flex > .wm-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* same fix as #main-menu: needs an explicit (non-auto) z-index to
     paint above homepage .large-section hero blocks, which requires
     position to be set to something other than static first. */
  position: relative;
  z-index: 100;
}
#bot-header .wrap.wm-header-flex > #main-menu,
#bot-header-transparent .wrap.wm-header-flex > #main-menu {
  flex: 0 1 auto;
}

.wm-btn-shop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 26px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  background: #f4a72b;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wm-btn-shop:hover { background: #d98e15; }

/* ------------------------------------------------------------
   Utility bar (Schedule a Consultation / Events / Distributor /
   Brand Ambassador / Account / Cart) -- background color stays
   whatever #top-header / #top-header-transparent already define;
   this only handles the new two-group flex layout and link styling.
------------------------------------------------------------ */
/* #top-header-transparent has no background by default (it's meant to
   overlay a hero image). Match it to #top-header's dark bar (#17181c)
   so the utility bar looks consistent across both header variants. */
/* Reduce the utility bar's vertical padding on both header variants.
   #top-header and #top-header-transparent both have their own ID-level
   "padding: 10px 0" rule in style.css -- an ID selector always beats a
   plain class selector regardless of load order, so the override has
   to match that specificity (ID + class) rather than just .wm-util-bar
   alone. */
#top-header.wm-util-bar,
#top-header-transparent.wm-util-bar {
  padding: 2px 0;
}

#top-header-transparent {
  background-color: #17181c;
  /* legacy rule sets margin: 0 80px 0 0 -- invisible against a
     transparent background, but shows as a right-edge gap now that
     this bar has a solid color. */
  margin-right: 0;
  width: 100%;
}

.wm-util-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.wm-util-left,
.wm-util-right {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
}
.wm-util-bar a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity .15s;
}
.wm-util-bar a:hover { opacity: .75; }
.wm-util-divider {
  color: rgba(255, 255, 255, .35);
  font-weight: 300;
}

.wm-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background: none;
  border: 0;
  border-radius: var(--wm-radius);
  cursor: pointer;
  position: relative;
  transition: color .15s, background .15s;
  height: 44px;
}
.wm-nav-trigger:hover,
.wm-nav-item.wm-open > .wm-nav-trigger {
  color: var(--wm-accent, #f4a72b);
}

.wm-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
  opacity: .6;
}
.wm-nav-item.wm-open > .wm-nav-trigger .wm-caret {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Mega panel — position: fixed, top set by JS on open (see
   wagner-nav-redesign.js). Deliberately NOT position:absolute: this
   theme's #main-menu needs position:relative + z-index:100 to stay
   above homepage .large-section hero blocks, but that same ancestor
   is only as wide as the nav's own content, so absolute positioning
   against it produces a panel that doesn't span the full header.
   Fixed positioning is viewport-relative and sidesteps both problems. */
.wm-mega-panel {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--wm-white);
  border-top: 1px solid var(--wm-ink-200);
  box-shadow: var(--wm-shadow-mega);
  padding: 36px 0 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility 0s linear .18s;
  z-index: 9999;
}
.wm-nav-item.wm-open .wm-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s, transform .18s, visibility 0s linear 0s;
}

.wm-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 40px;
}
.wm-mega-grid.wm-cols-5 { grid-template-columns: repeat(5, 1fr); }
.wm-mega-grid.wm-cols-6 { grid-template-columns: repeat(6, 1fr); }

.wm-mega-col { position: relative; }
.wm-mega-col::before {
  content: '';
  position: absolute;
  top: -20px; bottom: -20px; left: -20px; right: -20px;
  z-index: -1;
  border-radius: 8px;
}
.wm-mega-col:nth-child(even)::before { background: var(--wm-ink-50); }
.wm-mega-col h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--wm-ink-900);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wm-ink-200);
}
.wm-mega-links { display: flex; flex-direction: column; gap: 2px; }
.wm-mega-link {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  font-size: 14px;
  color: var(--wm-ink-700);
  text-decoration: none;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.wm-mega-link:hover { background: var(--wm-ink-100); color: var(--wm-brand-blue); }
.wm-mega-link .wm-meta {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: var(--wm-ink-500);
  margin-top: 2px;
}
.wm-mega-link strong {
  font-weight: 600;
  color: var(--wm-ink-900);
  /* long titles wrap to 2 lines (e.g. "True Remote Monitoring", "Compare
     Concrete Test / Rapid RH Products") -- without an explicit line-height
     the wrapped lines inherit a looser default and look double-spaced. */
  line-height: 1.25;
}
.wm-mega-link:hover strong { color: var(--wm-brand-blue); }

.wm-badge-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wm-white);
  background: var(--wm-brand-blue);
  border-radius: 999px;
  vertical-align: 2px;
}

.wm-mega-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--wm-ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
}
.wm-mega-footer-link {
  color: var(--wm-brand-blue);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.wm-mega-footer-link:hover { border-bottom-color: var(--wm-brand-blue); }
.wm-arrow { display: inline-block; margin-left: 4px; transition: transform .15s; }
.wm-mega-footer-link:hover .wm-arrow { transform: translateX(3px); }

/* Simple dropdown (Support / About Us) — left + top set by JS on open,
   same reasoning as .wm-mega-panel above. */
.wm-dropdown-panel {
  position: fixed;
  min-width: 240px;
  background: var(--wm-white);
  border: 1px solid var(--wm-ink-200);
  border-radius: var(--wm-radius);
  box-shadow: var(--wm-shadow-mega);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
  z-index: 9999;
}
.wm-nav-item.wm-open .wm-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s, transform .15s, visibility 0s linear 0s;
}
.wm-dropdown-panel a {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--wm-ink-700);
  text-decoration: none;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
.wm-dropdown-panel a:hover { background: var(--wm-ink-100); color: var(--wm-brand-blue); }
.wm-dropdown-divider { height: 1px; background: var(--wm-ink-200); margin: 6px 4px; }

/* ------------------------------------------------------------
   Focus-visible (keyboard navigation) -- outline color depends on
   what's behind each element: white/orange for things sitting on the
   dark header bar, brand-blue for things sitting on the white panels.
------------------------------------------------------------ */
.wm-nav-trigger:focus-visible {
  outline: 2px solid #f4a72b;
  outline-offset: 2px;
}
.wm-btn-shop:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}
.wm-util-bar a:focus-visible {
  outline: 2px solid #f4a72b;
  outline-offset: 2px;
}
.wm-mega-link:focus-visible,
.wm-dropdown-panel a:focus-visible {
  outline: 2px solid var(--wm-brand-blue);
  outline-offset: -2px;
}
.wm-mega-footer-link:focus-visible {
  outline: 2px solid var(--wm-brand-blue);
  outline-offset: 2px;
}

/* Only show desktop nav at the theme's existing 1147px breakpoint
   (matches Max Mega Menu's current data-breakpoint) — mobile drawer
   takes over below that, unchanged. */
@media (max-width: 1147px) {
  .wm-primary-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-primary-nav * {
    transition-duration: .01ms !important;
  }
}