/* NEXT Header widget. Colors + fonts come from the site brand kit (--next-* tokens). */
.nx-header {
  --nx-red: var(--next-red);
  --nx-cyan: var(--next-cyan);
  --nx-grey: var(--next-grey);
  --nx-ink: var(--next-panel);
  --nx-panel: #121214;
  --nx-muted: #B9B9BE;
  --nx-line: rgba(255, 255, 255, .12);
  --nx-gutter: clamp(16px, 4vw, 56px);
  --nx-font: var(--next-font-head);
  --nx-font-call: var(--next-font-call);

  position: relative;
  z-index: 100;
  padding: 28px var(--nx-gutter) 0;
  background: var(--nx-ink);
  font-family: var(--nx-font);
  box-sizing: border-box;
}
.nx-header *, .nx-header *::before, .nx-header *::after { box-sizing: border-box; }

/* Overlay mode: floats over a dark hero (home page) */
.nx-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
}
/* Position against the header's own wrapper, which already sits below the WP
   admin bar. (A separate admin-bar offset double-counted it inside Elementor.) */
:has(> .nx-header--overlay) { position: relative; }

/* ───────── Bar ───────── */
/* Square bar with a tapered right end at the same angle as the Request a Quote
   button (20px run over a 58px-tall button). The bar is 70px tall, so its run is
   70 × 20 / 58 ≈ 24px. The shape lives on ::before (not on the bar itself) so
   the dropdown menus are never clipped. */
.nx-bar {
  --nx-taper: 24px;
  --nx-bar-bg: rgba(20, 20, 22, .92);
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 16px;
  max-width: 1480px; margin: 0 auto;
  padding: 12px calc(var(--nx-taper) + 34px) 12px 28px; /* clear space between the menu button and the slant */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}
.nx-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--nx-bar-bg);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--nx-taper)) 100%, 0 100%);
}

.nx-logo { display: block; width: 132px; flex: none; line-height: 0; }
.nx-logo svg { display: block; width: 100%; height: auto; }

/* Menu: items drop off from the right as space runs out (see next-header.js) */
.nx-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; padding-inline: 8px; }
.nx-menu { display: flex; gap: clamp(14px, 1.7vw, 30px); width: max-content; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nx-menu li { position: relative; list-style: none; margin: 0; }
.nx-menu > li.nx-off { display: none; }
.nx-menu a {
  display: inline-block; padding: 8px 0;
  color: #fff; text-decoration: none;
  font: 500 13px/1 var(--nx-font); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.nx-menu > li > a:hover,
.nx-menu > li > a:focus-visible,
.nx-menu > li.current-menu-item > a,
.nx-menu > li.current-menu-ancestor > a { border-color: var(--nx-red); outline: none; }
.nx-menu .menu-item-has-children > a::after { content: " \25BE"; font-size: 10px; color: var(--nx-grey); }

/* Desktop dropdowns */
.nx-menu .sub-menu {
  position: absolute; top: calc(100% + 18px); left: -18px;
  min-width: 240px; margin: 0; padding: 8px;
  list-style: none; white-space: normal;
  background: #141416; border: 1px solid var(--nx-line); border-top: 2px solid var(--nx-red);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nx-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* hover bridge */
.nx-menu li:hover > .sub-menu,
.nx-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nx-menu .sub-menu a {
  display: block; padding: 11px 12px; border: 0;
  font-size: 13px; letter-spacing: .04em; color: #e9e9ec;
}
.nx-menu .sub-menu a:hover, .nx-menu .sub-menu a:focus-visible { background: color-mix(in srgb, var(--nx-red) 14%, transparent); color: #fff; outline: none; }
.nx-menu .sub-menu .menu-item-has-children > a::after { content: none; }

/* Square buttons (phone + menu) */
.nx-call { display: flex; align-items: center; gap: 12px; flex: none; color: #fff; text-decoration: none; }
.nx-sq {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  background: var(--nx-red); border: 0; border-radius: 0; cursor: pointer;
  transition: background .2s;
}
.nx-sq:hover { background: var(--next-red-hover); }
.nx-sq svg { width: 20px; height: 20px; fill: #fff; }
.nx-call small { display: block; font: 400 12px/1.2 var(--nx-font); color: var(--nx-muted); }
.nx-call b { display: block; font: 700 15px/1.3 var(--nx-font); letter-spacing: .02em; white-space: nowrap; }
.nx-call:focus-visible, .nx-burger:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 3px; }
.nx-header.nx-no-phone-text .nx-bar .nx-call-text { display: none; }
.nx-header.nx-no-phone .nx-bar .nx-call { display: none; }

.nx-burger { padding: 0 12px; flex-direction: column; justify-content: center; display: flex; gap: 5px; }
.nx-burger span { display: block; width: 22px; height: 2px; background: #fff; }
.nx-burger span:nth-child(2) { width: 15px; margin-left: auto; }

/* ───────── Slide-in menu panel (DigiPlus-style) ───────── */
.nx-panel { position: fixed; inset: 0; z-index: 99999; visibility: hidden; pointer-events: none; }
.nx-panel.is-open { visibility: visible; pointer-events: auto; }
.nx-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .4s ease;
}
.nx-panel.is-open .nx-backdrop { opacity: 1; }
.nx-panel-box {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--nx-panel); border-left: 2px solid var(--nx-red);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(101%);
  transition: transform .4s ease .15s;
}
.nx-panel.is-open .nx-panel-box { transform: none; }
.nx-panel-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px; }
.nx-panel-top .nx-logo { width: 120px; }
.nx-close { width: 42px; height: 42px; }
.nx-close svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.4; fill: none; }

.nx-panel-menu { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nx-line); }
.nx-panel-menu li { position: relative; list-style: none; margin: 0; border-bottom: 1px solid var(--nx-line); }
.nx-panel-menu a {
  display: block; padding: 13px 64px 13px 20px;
  color: #fff; text-decoration: none;
  font: 500 15px/1.4 var(--nx-font); letter-spacing: .04em; text-transform: uppercase;
  transition: color .2s, background .2s;
}
.nx-panel-menu a:hover, .nx-panel-menu a:focus-visible,
.nx-panel-menu .current-menu-item > a { color: var(--nx-red); outline: none; }
.nx-panel-menu a:focus-visible { background: rgba(255, 255, 255, .04); }
.nx-sub-toggle {
  position: absolute; top: 0; right: 0; width: 50px; height: 48px;
  display: grid; place-items: center;
  background: none; border: 0; border-left: 1px solid var(--nx-line); color: #fff; cursor: pointer;
}
.nx-sub-toggle svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .25s; }
.nx-sub-toggle[aria-expanded="true"] { color: var(--nx-red); }
.nx-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nx-sub-toggle:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: -2px; }
.nx-panel-menu .sub-menu { display: none; margin: 0; padding: 0; list-style: none; background: rgba(0, 0, 0, .25); }
.nx-panel-menu li.is-expanded > .sub-menu { display: block; }
.nx-panel-menu .sub-menu li { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.nx-panel-menu .sub-menu a { padding-left: 36px; font-size: 14px; text-transform: none; letter-spacing: .02em; color: var(--nx-muted); }

.nx-panel-contact { display: grid; gap: 18px; padding: 28px 20px 8px; }
.nx-panel-contact .nx-call small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nx-panel-contact .nx-call b { font-size: 17px; }

.nx-quote { display: inline-flex; align-items: stretch; height: 50px; text-decoration: none; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--nx-red) 25%, transparent)); }
.nx-quote-label {
  display: flex; align-items: center; padding: 0 34px 0 22px;
  background: var(--nx-red); color: var(--next-black);   /* black on red = 5.9:1, per the brand kit */
  font: 700 14px/1 var(--nx-font-call); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%); /* same angle as the hero button */
}
.nx-quote-arrow {
  width: 54px; margin-left: -12px; display: grid; place-items: center; padding-left: 12px;
  background: var(--nx-cyan);
  clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%);
}
.nx-quote-arrow svg { width: 14px; height: 14px; stroke: #000; stroke-width: 2.6; fill: none; }
.nx-quote:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 4px; }

.nx-social { display: flex; margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid var(--nx-line); }
.nx-social li { flex: 1; list-style: none; border-right: 1px solid var(--nx-line); }
.nx-social li:last-child { border-right: 0; }
.nx-social a { display: grid; place-items: center; height: 54px; color: #fff; transition: color .2s, background .2s; }
.nx-social a:hover, .nx-social a:focus-visible { color: var(--nx-red); background: rgba(255, 255, 255, .04); outline: none; }
.nx-social svg { width: 18px; height: 18px; fill: currentColor; }

html.nx-lock { overflow: hidden; }

/* Phones: just the phone button (a tel: link, so a tap offers to call); no label/number */
@media (max-width: 767px) {
  .nx-header .nx-bar .nx-call-text { display: none; }
}

@media (max-width: 560px) {
  .nx-header { padding-top: 16px; }
  .nx-bar { --nx-taper: 20px; padding: 8px calc(var(--nx-taper) + 20px) 8px 20px; gap: 10px; } /* 58px tall = same as the button */
  .nx-logo { width: 108px; }
  .nx-sq { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-menu .sub-menu, .nx-backdrop, .nx-panel-box, .nx-sub-toggle svg { transition: none; }
}

/* ───────── Light option: [next_header theme="light"] ───────── */
.nx-header--light { --nx-line: rgba(0, 0, 0, .1); --nx-muted: #5A5A60; --nx-panel: #FFFFFF; }
.nx-header--light:not(.nx-header--overlay) { background: #fff; }
.nx-header--light .nx-bar {
  --nx-bar-bg: rgba(255, 255, 255, .96);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .08)) drop-shadow(0 0 1px rgba(0, 0, 0, .35));
}
/* full-color lockup — the guide's default on white */
.nx-header--light .nx-logo path:nth-child(1) { fill: var(--next-black); }
.nx-header--light .nx-logo path:nth-child(2) { fill: var(--nx-red); }
.nx-header--light .nx-logo path:nth-child(3) { fill: var(--nx-cyan); }
.nx-header--light .nx-logo path:nth-child(4) { fill: var(--nx-grey); }
.nx-header--light .nx-logo path:nth-child(n+5) { fill: var(--next-black); }
.nx-header--light .nx-menu a { color: #111; }
.nx-header--light .nx-menu .menu-item-has-children > a::after { color: #8a8a90; }
.nx-header--light .nx-menu .sub-menu { background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.nx-header--light .nx-menu .sub-menu a { color: #2a2a2e; }
.nx-header--light .nx-menu .sub-menu a:hover, .nx-header--light .nx-menu .sub-menu a:focus-visible { color: #000; background: color-mix(in srgb, var(--nx-red) 10%, transparent); }
.nx-header--light .nx-call, .nx-header--light .nx-panel-menu a, .nx-header--light .nx-sub-toggle, .nx-header--light .nx-social a { color: #111; }
.nx-header--light .nx-backdrop { background: rgba(0, 0, 0, .45); }
.nx-header--light .nx-panel-menu .sub-menu { background: #F5F5F6; }
.nx-header--light .nx-panel-menu .sub-menu li { border-top-color: rgba(0, 0, 0, .06); }
.nx-header--light .nx-panel-menu a:hover, .nx-header--light .nx-panel-menu .current-menu-item > a,
.nx-header--light .nx-sub-toggle[aria-expanded="true"], .nx-header--light .nx-social a:hover { color: var(--nx-red); }
.nx-header--light .nx-social a:hover { background: rgba(0, 0, 0, .03); }