/* ==========================================================================
   Bigmate site navigation: 2026 redesign
   Imported from Claude Design project "Mining Solutions navbar redesign".
   Self-contained: does not depend on bootstrap.min.css / style.css, and every
   --hp-* token it borrows from home-2026.css carries its value as a fallback,
   so it renders the same on pages that do not load that file. Pages still on
   the Bootstrap theme also load site-nav-2026-legacy.css.
   Prefix: nv-
   ========================================================================== */

.nv {
  --nv-shell: 1302px;
  --nv-h: 80px;
  --nv-ink: #041349;
  --nv-muted: #65676b;
  --nv-faint: #999;
  --nv-blue: #076EE8;
  --nv-cyan: #1ACEE1;
  --nv-surface: #f5f8fa;
  --nv-line: #d8d8d8;
  /* Row hover and the neutral fill behind preview tiles and badges. Tokens
     rather than literals so the whole component can change scheme at once. */
  --nv-hover: #fff;
  --nv-fill: #e4e6ea;
  --nv-edge: rgba(0, 0, 0, 0.08);
  --nv-shadow: 0 18px 34px rgba(4, 19, 73, 0.16);

  /* Sticky rather than fixed: it keeps its space in the flow, so locking it
     costs no layout jump. It stays put for the whole page - it does not hide on
     scroll-down. */
  position: sticky;
  top: 0;
  z-index: 99;
  background: var(--nv-surface);
  border-bottom: 1px solid var(--nv-edge);
  transition: background-color 0.35s ease, border-color 0.35s ease;
  /* Its own base type rather than the page's: the Bootstrap pages set body
     to 18px on a taller line, and every size below is tuned against this. */
  color: #4b5563;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
}

.nv__shell {
  width: 100%;
  max-width: var(--nv-shell);
  margin-inline: auto;
  padding: 0 12px;
}

.nv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nv__lead {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

.nv__brand {
  display: flex;
  flex: 0 0 auto;
  height: var(--nv-h);
  align-items: center;
}

.nv__brand img {
  display: block;
  height: 45px;
  width: auto;
  max-width: none;
}

.nv__nav {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: clamp(10px, 1.6vw, 24px);
}

.nv__list {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv__item {
  position: relative;
}

.nv__link {
  display: block;
  height: var(--nv-h);
  line-height: var(--nv-h);
  padding: 0 clamp(5px, 0.85vw, 14px);
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--nv-muted);
  text-decoration: none;
  transition: color 0.3s;
}

.nv__link:hover,
.nv__item.is-open > .nv__link {
  color: var(--nv-ink);
}

/* --- Login pill ---------------------------------------------------------- */

.nv__tail {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
}

.nv__login {
  position: relative;
}

.nv__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--hp-btn-h-sm, 44px);
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--hp-radius-pill, 100px);
  background: linear-gradient(95deg, #041349 15%, #1ACEE1 45%, #4648cf 75%, #076EE8 100%) 95% / 200% 100%;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.3s;
}

.nv__login-btn:hover,
.nv__login.is-open .nv__login-btn {
  filter: brightness(125%);
  color: #fff;
}

.nv__login-caret {
  display: inline-block;
  transition: transform 0.3s;
}

.nv__login.is-open .nv__login-caret {
  transform: rotate(180deg);
}

.nv__login-menu {
  position: absolute;
  top: 90%;
  right: 0;
  z-index: 90;
  min-width: 264px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  border-radius: var(--hp-radius, 18px);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.nv__login.is-open .nv__login-menu {
  top: calc(100% + 8px);
  opacity: 1;
  visibility: visible;
}

.nv__login-menu a {
  display: block;
  margin: 0 10px;
  padding: 8px 16px;
  border-radius: var(--hp-radius-sm, 10px);
  font-size: 14px;
  font-weight: 500;
  color: var(--nv-muted);
  text-decoration: none;
  transition: 0.2s;
}

.nv__login-menu a:hover {
  background: var(--nv-hover);
  color: var(--nv-ink);
}

.nv__login-menu span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--nv-faint);
  opacity: 0.7;
}

/* --- Shared dropdown chrome ---------------------------------------------- */

.nv__panel {
  position: absolute;
  top: 90%;
  left: 0;
  z-index: 90;
  border-radius: 0 0 var(--hp-radius, 18px) var(--hp-radius, 18px);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: 0.3s;
}

.nv__item.is-open > .nv__panel {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

/* --- Mining mega panel --------------------------------------------------- */

.nv__panel--mining {
  width: min(640px, calc(100vw - 250px));
}

.nv__panel--mining[data-mode="vehicle"] {
  width: min(812px, calc(100vw - 250px));
}

.nv__tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--nv-line);
}

.nv__tab {
  padding: 0 2px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--nv-muted);
  box-shadow: inset 0 -2px 0 0 transparent;
  cursor: pointer;
  transition: 0.3s;
}

.nv__tab[aria-selected="true"] {
  color: var(--nv-ink);
  box-shadow: inset 0 -2px 0 0 var(--nv-cyan);
}

.nv__tabs-spacer {
  flex: 1 1 auto;
}

.nv__tabs-all {
  padding: 0 2px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nv-blue);
  text-decoration: none;
}

.nv__grid {
  display: grid;
  grid-template-columns: minmax(0, 318px) minmax(0, 1fr);
  align-items: stretch;
}

.nv__panel--mining[data-mode="vehicle"] .nv__grid {
  grid-template-columns: minmax(0, 208px) minmax(0, 268px) minmax(0, 1fr);
}

.nv__col {
  margin: 0;
  padding: 16px 10px;
  list-style: none;
  border-right: 1px solid var(--nv-line);
}

.nv__col--two {
  display: none;
}

.nv__panel--mining[data-mode="vehicle"] .nv__col--two {
  display: block;
}

.nv__col-label {
  margin: 0 20px 8px;
  font-size: var(--hp-label, 11.5px);
  font-weight: 600;
  letter-spacing: var(--hp-label-track, 0.14em);
  text-transform: uppercase;
  color: var(--nv-faint);
}

.nv__sep {
  margin: 8px 20px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--nv-line);
  font-size: var(--hp-label, 11.5px);
  font-weight: 600;
  letter-spacing: var(--hp-label-track, 0.14em);
  text-transform: uppercase;
  color: var(--nv-faint);
}

.nv__empty {
  margin: 0 20px;
  padding: 8px 14px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--nv-faint);
  text-wrap: pretty;
}

.nv__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px;
  padding: 8px 14px;
  border-radius: var(--hp-radius-sm, 10px);
  font-size: 15px;
  font-weight: 500;
  color: var(--nv-muted);
  text-decoration: none;
  background: transparent;
  transition: 0.3s;
}

.nv__row.is-active,
.nv__row:hover {
  background: var(--nv-hover);
  color: var(--nv-ink);
}

.nv__row-main {
  flex: 1 1 auto;
}

.nv__row-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--nv-faint);
  opacity: 0.7;
}

.nv__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--hp-radius-pill, 100px);
  background: var(--nv-fill);
  font-size: var(--hp-label-xs, 10px);
  font-weight: 600;
  letter-spacing: var(--hp-label-track, 0.14em);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nv-muted);
}

.nv__chev {
  flex: 0 0 auto;
  color: var(--nv-blue);
  font-size: 15px;
}

/* Preview pane */

.nv__preview {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 20px 24px;
}

.nv__preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--hp-radius-sm, 10px);
  background: var(--nv-fill);
  overflow: hidden;
}

/* Generated plates are labelled, per the site rule that an image the camera
   did not take says so. Hidden until the panel shows one. */
.nv__preview-tag {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(4, 19, 73, 0.72);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nv__preview-media[data-illustration="true"] .nv__preview-tag {
  display: block;
}

.nv__preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nv__preview-title {
  margin: 0;
  color: #0d1526;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.nv__preview-blurb {
  margin: 0;
  color: var(--nv-muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.nv__preview-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--nv-blue);
  text-decoration: none;
}

/* --- Simple list dropdown (Industrial Solutions, Company) ---------------- */

.nv__panel--list {
  min-width: 300px;
  padding: 12px 0;
}

.nv__panel--list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv__flat {
  display: block;
  margin: 0 10px;
  padding: 6px 20px;
  border-radius: var(--hp-radius-sm, 10px);
  font-size: 14px;
  font-weight: 500;
  color: var(--nv-muted);
  text-decoration: none;
  transition: 0.2s;
}

.nv__flat:hover,
.nv__sub-toggle.is-open .nv__flat {
  background: var(--nv-hover);
  color: var(--nv-ink);
}

.nv__flat span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--nv-faint);
  opacity: 0.7;
}

.nv__flat--branch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nv__flat--branch > span:first-child {
  flex: 1 1 auto;
  margin-top: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  opacity: 1;
}

.nv__flat--branch .nv__chev {
  transition: transform 0.3s;
}

.nv__sub-toggle.is-open .nv__flat--branch .nv__chev {
  transform: rotate(90deg);
}

.nv__panel--list .nv__sublist {
  max-height: 0;
  overflow: hidden;
  margin: 0 10px 0 26px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--nv-line);
  transition: max-height 0.3s;
}

.nv__panel--list .nv__sub-toggle.is-open .nv__sublist {
  max-height: 320px;
}

.nv__sublist a {
  display: block;
  padding: 6px 16px;
  border-radius: var(--hp-radius-sm, 10px);
  font-size: 14px;
  font-weight: 500;
  color: var(--nv-muted);
  text-decoration: none;
  transition: 0.2s;
}

.nv__sublist a:hover {
  background: var(--nv-hover);
  color: var(--nv-ink);
}

.nv__sublist span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--nv-faint);
  opacity: 0.7;
}

/* --- Mobile -------------------------------------------------------------- */

/* The burger's "Menu" label. home-2026.css defines this class too; the copy
   here is for pages that do not load it. */
.nv .hp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nv__burger {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  border: 1px solid var(--nv-line);
  border-radius: var(--hp-radius-sm, 10px);
  background: transparent;
  color: var(--nv-ink);
  cursor: pointer;
}

.nv__burger-bars,
.nv__burger-bars::before,
.nv__burger-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.2s;
}

.nv__burger-bars::before,
.nv__burger-bars::after {
  content: "";
  position: relative;
}

.nv__burger-bars::before { top: -6px; }
.nv__burger-bars::after { top: 4px; }

.nv[data-mobile-open="true"] .nv__burger-bars { background: transparent; }
.nv[data-mobile-open="true"] .nv__burger-bars::before { transform: translateY(6px) rotate(45deg); }
.nv[data-mobile-open="true"] .nv__burger-bars::after { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nv__burger { display: flex; }

  .nv__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    display: none;
    max-height: calc(100vh - var(--nv-h));
    margin-left: 0;
    padding: 8px 12px 24px;
    overflow-y: auto;
    background: var(--nv-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 34px rgba(4, 19, 73, 0.14);
  }

  .nv[data-mobile-open="true"] .nv__nav { display: block; }

  .nv__list {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .nv__item {
    border-bottom: 1px solid rgba(4, 19, 73, 0.08);
  }

  .nv__link {
    height: auto;
    line-height: 1.4;
    padding: 16px 4px;
    font-size: 16px;
  }

  /* Panels flow inline on mobile rather than floating */
  .nv__panel {
    position: static;
    display: none;
    width: auto !important;
    padding: 0 0 12px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  .nv__item.is-open > .nv__panel { display: block; }

  .nv__grid,
  .nv__panel--mining[data-mode="vehicle"] .nv__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nv__col { border-right: 0; padding: 4px 0 12px; }
  .nv__tabs { padding: 0 4px; }
  .nv__preview { display: none; }
  .nv__row { margin: 0; }
  .nv__flat { margin: 0; padding: 10px 4px; }
  .nv__panel--list .nv__sublist { margin: 0 0 0 14px; }

  /* Stays out of flow at every width. As a static block it still contributed
     its own intrinsic width (245px) to the bar even collapsed to max-height 0,
     which squeezed .nv__lead to 41px and pushed the wordmark out underneath
     the LOGIN pill on every phone. */
  .nv__login-menu {
    right: 0;
    min-width: 208px;
  }
}

@media (max-width: 575px) {
  .nv__brand img { height: 34px; }
  .nv__login-btn { height: 36px; padding: 0 14px; font-size: 13px; }
}


/* ------------------------------------------------ scheme over the hero ---- */

/* Every surface in this component - bar, panels, rows, sub-labels, separators,
   badges, preview tiles, the login menu, the mobile sheet - resolves from the
   token set above. So the dark state is a palette swap, not a pile of
   per-surface overrides: redefine the tokens once and the whole nav follows.

   That is what stops a hover repainting the bar. The panel arrives in the
   scheme it is already in, so opening one changes nothing else. */
.nv[data-over-hero="true"] {
  --nv-surface: rgba(4, 20, 52, 0.94);
  --nv-ink: #fff;
  --nv-muted: rgba(255, 255, 255, 0.84);
  /* The sub-labels carry an extra opacity: 0.7 of their own, so 0.5 here would
     land at 0.35 effective - about 3:1 on this ground, under AA at 10px. 0.75
     lands at 0.53 effective, which measures 5.7:1. */
  --nv-faint: rgba(255, 255, 255, 0.75);
  --nv-line: rgba(255, 255, 255, 0.14);
  --nv-hover: rgba(255, 255, 255, 0.09);
  --nv-fill: rgba(255, 255, 255, 0.1);
  --nv-edge: transparent;
  --nv-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);

  /* The bar alone opts out of the surface: the hero shows through it. */
  background: transparent;
}

/* Dark glass rather than flat navy, so the hero still reads underneath and the
   panel belongs to the block it is sitting on. */
.nv[data-over-hero="true"] .nv__panel,
.nv[data-over-hero="true"] .nv__login-menu {
  border: 1px solid rgba(143, 230, 245, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nv[data-over-hero="true"] .nv__panel { border-top: 0; }

/* The wordmark is navy artwork, so it needs knocking out on the dark. */
.nv[data-over-hero="true"] .nv__brand img { filter: brightness(0) invert(1); }

/* On mobile the panels flow inline and drop their own background, so the bar
   has to become the surface to hold them. */
.nv[data-over-hero="true"][data-mobile-open="true"] { background: var(--nv-surface); }

.nv__brand img,
.nv__link { transition: color 0.35s ease, filter 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .nv,
  .nv__brand img,
  .nv__link { transition: none; }
}