/* ----------------------------------------------------------------------------
 * 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:
    radial-gradient(680px 150px at 94% 58%,rgba(229,245,56,.16),transparent 72%),
    radial-gradient(600px 150px at 4% 54%,rgba(229,245,56,.14),transparent 72%),
    radial-gradient(420px 120px at 72% 100%,rgba(229,245,56,.07),transparent 70%),
    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:#f9faf3;   /* light strip over the dark nav; every colour on it below is inverted to suit */
  border-bottom:1px solid var(--v3-rule);
  padding:0;
  transition:max-height .25s ease,opacity .2s ease;
  max-height:58px;overflow:hidden;   /* >= the row's own height, or the 12px padding clips */
}
.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:12px 0;margin:0;cursor:default;
  font-family:var(--v3-mono);font-size:11.5px;font-weight:400;
  letter-spacing:.07em;text-transform:uppercase;color:var(--v3-steel);
}
.v3-nav .header1 ul li i{color:var(--v3-olive);font-weight:400!important}
.v3-nav .header1 ul li a{
  color:var(--v3-ink-3)!important;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-olive)!important;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 #8b947e;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:var(--v3-ink-3)!important}
.v3-nav .header1 ul li a.v3-nav-demo{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--v3-ink);color:#fff!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;
  border:0;
  transition:background .15s ease;
}
.v3-nav .header1 ul li a.v3-nav-demo:hover{background:var(--v3-ink-3)}
.v3-nav .v3-nav-demo:hover{transform:translateY(-1px);color:#fff!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:14px 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}
  /* border-top removed 2026-10-09: the open panel now draws its own rule
     flush under the header bar, and this one sat 9px below it - measured
     at y=65 against the panel rule at y=56, which showed as a doubled
     line. The panel keeps the rule because it is the flush one. */
  .v3-nav .navbar-nav{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:10px;padding-bottom:10px}

@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){
  /* Bootstrap clearfixes this with ::before/::after; in a flex row they
     become flex items of their own, and space-between parks them at the
     edges - pushing the logo and the links ~125px inward. */
  .v3-nav .navbar-collapse::before,
  .v3-nav .navbar-collapse::after{display:none}
  .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}
}

/* ---------- container ----------
 * Bootstrap's .container is a fixed 1170/1200px; .v3-wrap - which every
 * v3 page body uses - is max-width:1240px with padding-inline:clamp(16px,
 * 4vw,40px). Matching them is what puts the logo on the same line as the
 * headline below it, and the last nav item on the same line as the right
 * edge of the content.
 */
/* body:has(.v3) because this stylesheet is also served to the ~143 legacy
   marketing pages, whose bodies do NOT use .v3-wrap - matching the header to
   a container those pages never use would misalign them. Only pages that
   wrap their content in .v3 get the new width.
   !important because the shared header markup carries an inline
   style="padding:0px" on this container, which no ordinary rule can beat. */
body:has(.v3) .v3-nav .container{width:auto;max-width:1240px;padding-inline:clamp(16px,4vw,40px)!important}
body:has(.v3) .v3-nav .container > .row{margin-left:0;margin-right:0}


/* ---------- phones: drop the top strip ----------
 * It cost 72px of an 844px screen - the nav was 118px before any content
 * started - and its phone and email are both repeated in the footer.
 *
 * Login was NOT repeated anywhere, so hiding this alone would have removed
 * sign-in from mobile entirely. The menu carries it instead (see the
 * .v3-nav-mlogin item in header.php), and that item is hidden on desktop,
 * where this strip is visible and already has it.
 */
@media (max-width:767px){
  .v3-nav .top-header{display:none}
}
.v3-nav .v3-nav-mlogin{display:none}
@media (max-width:767px){
  .v3-nav .v3-nav-mlogin{display:list-item}
}

/* ---------- legacy pages: the navbar-header overhang ----------
 * Bootstrap gives .navbar-header margin:0 -15px to cancel the 15px padding
 * of the .container it sits in. On the v3 pages the container has padding
 * (16px) so that cancels correctly. On the ~143 legacy pages the container
 * carries an inline padding:0, so the negative margins have nothing to
 * cancel and the header hangs 15px past each edge - which is the 15px of
 * horizontal page overflow every legacy page shows on a phone.
 *
 * Only the no-padding case is corrected, so the v3 header alignment that was
 * tuned earlier is untouched.
 */
body:not(:has(.v3)) .v3-nav .navbar-header{margin-left:0;margin-right:0}


/* ==========================================================================
   PHONES: the open menu  (added 2026-10-09)

   Until now there was no mobile menu - the desktop row simply wrapped.
   Seven links at their natural widths flowed into a ragged three-column
   grid ("About Us  Features  Industries" / "Resources  Pricing  Contact
   Us" / "Login"), with no alignment between the rows and nothing
   separating one target from the next.

   The three parents with submenus worked, but opened the DESKTOP
   dropdown: a 234px absolutely-positioned panel floating over the page
   from inside a 425px menu. On a phone a submenu should push the list
   down, not hover above it.

   One item per row, 48px tall, hairline between each. Submenus open
   inline and indented, so the whole thing is one scrollable column.
   Everything is inside the phone query - the desktop nav is untouched.
   ========================================================================== */
@media (max-width:767.98px){

  /* the panel itself - scrolls if a submenu makes it taller than the
     screen, which Industries does on its own (446px of links) */
  .v3-nav .navbar-collapse{
    max-height:calc(100vh - 70px);
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--v3-rule-dark);
    padding-bottom:8px;
  }

  /* one column */
  .v3-nav .navbar-collapse .navbar-nav{
    display:block;float:none;margin:0;width:100%;
  }
  .v3-nav .navbar-collapse .navbar-nav > li{
    display:block;float:none;width:100%;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .v3-nav .navbar-collapse .navbar-nav > li:last-child{border-bottom:0}

  .v3-nav .navbar-collapse .navbar-nav > li > a{
    display:flex;align-items:center;
    min-height:48px;padding:12px 4px!important;
    font-size:16px;line-height:1.3;
    width:100%;
  }

  /* the caret sits at the far right of its row rather than tucked
     against the word, so the whole row reads as one control */
  .v3-nav .navbar-collapse .navbar-nav > li.dropdown > a{justify-content:space-between;gap:10px}
  .v3-nav .navbar-collapse .navbar-nav > li.dropdown > a .caret{
    margin:0;flex:none;transition:transform .18s ease;
  }
  .v3-nav .navbar-collapse .navbar-nav > li.dropdown.open > a .caret{transform:rotate(180deg)}

  /* ---- submenus, inline ----
     position:static is the whole fix: it takes the panel out of the
     floating layer and lets it take part in the flow of the list. */
  /* #fixedsearch, not .v3-nav. landing2.php styles the DESKTOP dropdown
     panels with "#fixedsearch .dropdown-menu{position:absolute!important}"
     - an ID selector, so (1,1,0) with !important, which outranks a
     five-class rule carrying !important. Matching the ID is what lets the
     phone rules win; the desktop panel design is left exactly as it is. */
  #fixedsearch .navbar-collapse .navbar-nav > li.dropdown > .dropdown-menu{
    position:static!important;
    float:none!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    margin:0!important;padding:2px 0 10px!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;
    background:rgba(0,0,0,.22)!important;
    transform:none!important;
    right:auto!important;left:auto!important;
  }
  #fixedsearch .navbar-collapse .navbar-nav > li.dropdown > .dropdown-menu > li > a,
  #fixedsearch .navbar-collapse .navbar-nav > li.dropdown > .dropdown-menu li a{
    display:flex;align-items:center;
    min-height:44px;padding:10px 4px 10px 18px!important;
    font-size:15px;line-height:1.35;white-space:normal;
  }

  /* Login: the one item that is an action rather than a destination */
  .v3-nav .v3-nav-mlogin > a{font-weight:700}
}


/* ==========================================================================
   PHONES: the header bar itself  (added 2026-10-09)

   The bar is two Bootstrap-3 halves - a .col-xs-6 holding the logo and a
   .col-xs-6 holding the toggle - so the logo sat in the middle of its own
   half rather than against the left edge of the screen, and it drifted as
   the viewport changed. One flex row instead: logo hard left, toggle hard
   right, at every width.

   The toggle also gave no sign of its own state - the same three bars
   whether the menu was open or shut. Font Awesome draws its glyph with a
   ::before content code, so the open state can swap f0c9 (bars) for f00d
   (times) with no extra markup and no JS. BS3 keeps the .collapsed class
   on the button while the menu is shut, which is the hook.
   ========================================================================== */
@media (max-width:767.98px){

  .v3-nav .navbar-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-left:0;margin-right:0;
    /* width:100% is load-bearing. Left to auto the bar resolved to 262px
       inside a 425px screen and sat centred, which is why the logo looked
       centred no matter what was done to the logo itself - the whole bar
       was centred, not the mark inside it. Measured: auto gives 82..344,
       100% gives 16..409 against the container padding. */
    width:100%;
  }
  /* both halves stop being halves */
  .v3-nav .navbar-header > .visible-xs{
    flex:1 1 auto;width:auto;max-width:none;float:none;
    padding-left:0;padding-right:0;text-align:left;
  }
  .v3-nav .navbar-header > .visible-xs > a{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .v3-nav .navbar-header > .visible-xs img{
    width:150px;max-width:52vw;height:auto;margin:0;
  }
  .v3-nav .navbar-header > div:last-child{
    flex:0 0 auto;width:auto;max-width:none;float:none;
    padding-left:0;padding-right:0;
    display:flex;justify-content:flex-end;
  }
  .v3-nav .navbar-toggle{float:none;margin-right:0}

  /* open state: the bars become a cross */
  .v3-nav .navbar-toggle:not(.collapsed) .fa-bars::before{content:"\f00d"}
  /* A cross reads heavier than three bars at the same size, so the open
     state steps down. !important because the <i> carries an inline
     font-size:35px and nothing short of that outranks it. */
  .v3-nav .navbar-toggle:not(.collapsed) .fa-bars{font-size:25px!important}
  .v3-nav .navbar-toggle .fa-bars{transition:transform .18s ease}
  .v3-nav .navbar-toggle:not(.collapsed) .fa-bars{transform:rotate(90deg)}
}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .v3-nav .navbar-toggle .fa-bars{transition:none}
  .v3-nav .navbar-toggle:not(.collapsed) .fa-bars{transform:none}
}