/* ----------------------------------------------------------------------------
 * Site header, v3.
 *
 * Replaces the previous treatment: a white utility strip stacked on a black nav
 * (three competing bands once the dark hero began), lime dropdown panels at
 * arbitrary percentage widths (25% / 16%), 18px Bootstrap nav links, no primary
 * CTA and no current-page indicator.
 *
 * Everything is scoped under .v3-nav, a class added to the single <nav> in
 * views/header.php. Scoping also settles specificity: the file's own
 * `.top-header{background:white}` is (0,1,0) and loses to `.v3-nav .top-header`
 * regardless of source order.
 *
 * Tokens come from v3-shell.css (:root), loaded by views/partials/v3_head.php,
 * which header.php now includes so every page gets the same header.
 * -------------------------------------------------------------------------- */

.v3-nav{
  background:var(--v3-ink);
  border:0;border-bottom:1px solid var(--v3-rule-dark);
  margin:0;border-radius:0;
  position:sticky;top:0;z-index:5555;
}
.v3-nav *,.v3-nav *::before,.v3-nav *::after{box-sizing:border-box}
.v3-nav a:focus-visible,.v3-nav button:focus-visible{outline:3px solid var(--v3-lime);outline-offset:2px}

/* ---------- utility strip ---------- */
.v3-nav .top-header{
  background:#262c1d;   /* was --v3-ink-2 (#171a12) — only 9 levels off the nav below it, so the two bands read as one slab */
  border-bottom:1px solid var(--v3-rule-dark);
  padding:0;
  transition:max-height .25s ease,opacity .2s ease;
  max-height:52px;overflow:hidden;
}
.v3-nav .header1{margin:0}
.v3-nav .header1 ul{
  display:flex!important;align-items:center;gap:4px 26px;flex-wrap:wrap;
  justify-content:flex-end;margin:0;padding:0;
}
.v3-nav .header1 ul li{
  list-style:none;padding:9px 0;margin:0;cursor:default;
  font-family:var(--v3-mono);font-size:11.5px;font-weight:400;
  letter-spacing:.07em;text-transform:uppercase;color:#aeb7a2;
}
.v3-nav .header1 ul li i{color:var(--v3-lime);font-weight:400!important}
.v3-nav .header1 ul li a{
  color:#aeb7a2;text-decoration:none;padding:0;min-height:0;line-height:inherit;
  display:inline;transition:color .15s ease;
}
.v3-nav .header1 ul li a:hover{color:var(--v3-lime);text-decoration:none}

/* Login stays a quiet secondary action; the demo button is the primary one. */
.v3-nav .header1 ul li.signIn-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid #4a5340;border-radius:20px;
  padding:0 14px;height:30px;margin-left:4px;justify-content:center;
}
.v3-nav .header1 ul li.signIn-btn:hover{border-color:var(--v3-steel)}
.v3-nav .header1 ul li.signIn-btn a{color:#e8ecdf!important}
.v3-nav .header1 ul li a.v3-nav-demo{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--v3-lime);color:var(--v3-ink)!important;
  font-family:var(--v3-body);font-weight:700;font-size:12.5px;letter-spacing:.02em;
  text-transform:none;padding:0 16px;height:30px;border-radius:20px;text-decoration:none;
  transition:background .15s ease;
}
.v3-nav .header1 ul li a.v3-nav-demo:hover{background:#eefb5a}
.v3-nav .v3-nav-demo:hover{transform:translateY(-1px);color:var(--v3-ink)!important;text-decoration:none}

/* ---------- main bar ---------- */
.v3-nav .erpnavfont{padding:0}
.v3-nav .navbar-collapse{padding-left:0;padding-right:0;border-top:0;box-shadow:none}
.v3-nav .navbar-nav{margin:0}
.v3-nav .navbar-nav > li > a.nav-link,
.v3-nav .navbar-nav > li > a.erpnavlink{
  position:relative;
  font-family:var(--v3-body);font-weight:600;font-size:15.5px;letter-spacing:.005em;
  color:#e8ecdf!important;padding:26px 15px;background:transparent;
  transition:color .15s ease;
}
.v3-nav .navbar-nav > li > a.nav-link:hover,
.v3-nav .navbar-nav > li > a.nav-link:focus{color:#fff!important;background:transparent}
/* One lime rule marks hover and the open dropdown. It sits at the very foot of
   the bar so that when a panel is open it reads as a single mark joining the
   tab to its panel — previously it floated 16px higher and at a narrower width
   than the panel's own lime border-top, so the two showed as a broken pair. */
.v3-nav .navbar-nav > li > a.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--v3-lime);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.v3-nav .navbar-nav > li > a.nav-link:hover::after,
.v3-nav .navbar-nav > li.open > a.nav-link::after{transform:scaleX(1)}
.v3-nav .nav .open > a,
.v3-nav .nav .open > a:hover,
.v3-nav .nav .open > a:focus{background-color:transparent!important;border-color:transparent!important}
.v3-nav .navbar-nav > li > a .caret{margin-left:6px;opacity:.65}

/* logo */
.v3-nav .navbar-collapse > div:first-child img,
.v3-nav .navbar-header img{max-width:186px;width:100%;height:auto}

/* ---------- dropdown panels ---------- */
/* were: lime fill, 20px radius, width:25% / 16% of the viewport */
.v3-nav .navbar-nav .dropdown-menu,
.v3-nav .navbar-nav > li > .dropdown-menu,
.v3-nav .sub-menu.dropdown-menu{
  /* style.css and the header block both set widths/radii with !important on
     .sub-menu / .sub-menu2 (20%, 16%, 60%, 200px, radius 20px), so these have
     to be forced rather than won on specificity. */
  width:auto!important;min-width:250px!important;max-width:340px;
  background:#1b1f14!important;
  border:1px solid var(--v3-rule-dark);border-top:0;   /* the open tab's lime rule above is the accent; a second one here doubled it */
  border-radius:0 0 4px 4px!important;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  padding:8px;margin-top:0;
}
.v3-nav .dropdown-menu > li > a,
.v3-nav .sub-menu.dropdown-menu li a{
  color:#d5dbc9!important;font-family:var(--v3-body);font-weight:500!important;font-size:14.5px;
  padding:9px 12px;border-radius:6px;white-space:normal;
  transition:background .15s ease,color .15s ease;
}
.v3-nav .dropdown-menu > li > a:hover,
.v3-nav .sub-menu.dropdown-menu li a:hover{
  background:rgba(229,245,56,.10);color:var(--v3-lime)!important;text-decoration:none;
}
.v3-nav .dropdown-submenu > a.test{font-weight:700!important;color:#fff!important}
.v3-nav .dropdown-menu .link-menu h3{
  font-family:var(--v3-display);font-weight:800;text-transform:uppercase;
  font-size:19px;color:var(--v3-lime);margin:6px 0 4px;
}

/* ---------- mobile ---------- */
.v3-nav .navbar-toggle{margin:12px 0;border:0;background:transparent}
.v3-nav .navbar-toggle i{color:#e8ecdf!important}
@media (max-width:767px){
  .v3-nav{position:static}
  /* The strip wraps to two rows here; the desktop collapse clamp would clip the
     second one. The header is not sticky on mobile, so the clamp is not needed. */
  .v3-nav .top-header{max-height:none;overflow:visible}
  .v3-nav.is-compact .top-header{max-height:none;opacity:1;border-bottom-color:var(--v3-rule-dark)}
  .v3-nav .header1 ul{justify-content:center;gap:6px 16px;padding:4px 0}
  .v3-nav .header1 ul li{font-size:10.5px;letter-spacing:.05em;padding:4px 0}
  .v3-nav .navbar-nav > li > a.nav-link,
  .v3-nav .navbar-nav > li > a.erpnavlink{padding:13px 12px}
  .v3-nav .navbar-nav > li > a.nav-link::after{display:none}
  .v3-nav .navbar-nav{border-top:1px solid var(--v3-rule-dark);padding-top:6px}
  .v3-nav .navbar-nav .dropdown-menu{box-shadow:none;border:0;border-left:2px solid var(--v3-lime);border-radius:0;background:transparent!important}
}

/* compact state once the page scrolls: the utility strip folds away */
.v3-nav.is-compact .top-header{max-height:0;opacity:0;border-bottom-color:transparent}
.v3-nav.is-compact .navbar-nav > li > a.nav-link,
.v3-nav.is-compact .navbar-nav > li > a.erpnavlink{padding-top:18px;padding-bottom:18px}

@media (prefers-reduced-motion:reduce){
  .v3-nav *,.v3-nav .top-header{transition:none!important}
}

/* ---------- desktop bar alignment ----------
 * The logo sat in a floated col-sm-2 while the links got their height from
 * their own padding, so the logo's centre landed ~17px above the links'.
 * Making the bar a flex row centres them against each other and keeps them
 * aligned in the compact state too, where the link padding changes.
 * Scoped to >=768px so Bootstrap's mobile collapse still toggles display.
 */
@media (min-width:768px){
  .v3-nav .navbar-collapse{
    display:flex!important;align-items:center;justify-content:space-between;
    gap:24px;height:auto!important;
  }
  .v3-nav .navbar-collapse > div:first-child{
    float:none;width:auto;padding:0;display:flex;align-items:center;flex:none;
  }
  .v3-nav .navbar-nav{float:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .v3-nav .navbar-nav > li{float:none}
}