/* ============================================================
   Vendasta global navigation — v3b (SVG icons)
   Home: /wp-content/themes/[child-theme]/nav.css
   Enqueued via functions.php ('vendasta-nav' handle) — currently
   gated to test page IDs; remove the gate to go site-wide.
   Every rule is scoped under .vnav3b so nothing leaks onto the
   page or the existing vnav24 navigation. The markup's three
   top-level blocks are wrapped in <div class="vnav3b">.
   Logic lives in nav.js.
   ============================================================ */
.vnav3b{
  --navy:#072337;--green:#3F9B63;--green-dark:#2E7655;
  --paper:#EDEFF1;--card:#FFFFFF;--card-border:#E0E0E0;--chip:#ECF5EF;--icon:#00695C;
  --ink:#072337;--muted:#666666;--faint:#9CA7AF;--ix-eyebrow: #9CA7AF;;
  --hero-sub:#C7D9E5;--util-ph:#83919B;--close-bg:#E2E6E9;--chip-mob:#E2E6E9;
  --Dark-Eucalyptus-Shade: #002F35;
  --r-btn:4px;--r-nav:6px;--r-card:16px;--r-tile:6px;
}
.vnav3b, .vnav3b *{box-sizing:border-box;}
/* removed prototype-only global: html,body margin/padding reset */
.vnav3b{font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
.vnav3b h1,.vnav3b h2,.vnav3b h3,.vnav3b h4{font-family:'Raleway',sans-serif;margin:0;}
.vnav3b a{color:inherit;text-decoration:none;}
.vnav3b button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* buttons fixed 4px */
.vnav3b .btn {font-weight:700;font-size:14px;border-radius:var(--r-btn);padding:12px 25px;white-space:nowrap;transition:.15s;line-height:1;}
.vnav3b .btn-green {background:var(--green);color:#fff;border:1.5px solid #3f9b63;}
.vnav3b .btn-green:hover {background: #2E7655;border:1.5px solid #2E7655;}
.vnav3b .btn-ghost-light {background:transparent;color:#3f9b63;border:1.5px solid #3f9b63;}
.vnav3b .btn-ghost-light:hover {border-color:#2E7655; background: #2E7655; color: #FFFFFF;}
.vnav3b .btn-ghost-dark {background:transparent;color:#3f9b63;border:1.5px solid #3f9b63;}
.vnav3b .btn-ghost-dark:hover {border-color:#2E7655; background: #2E7655; color: #FFFFFF;}
.vnav3b .btn-white {background:#fff;color:var(--green);}
.vnav3b .btn-white:hover {border-color:#2E7655;background:#2E7655;color:#fff;}

/* closed / default */
/*.vnav3b .hero {position:relative;background:var(--navy);}*/
/* transparent — page background shows through */
.vnav3b .hero {position:relative;background:transparent;}
.vnav3b .hero-top {max-width:1360px;margin:0 auto;padding:12px 20px 16px;}
.vnav3b .util-strip {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px 16px;font-size:13px;color:var(--util-ph);}
.vnav3b .util-strip .right {display:flex;align-items:center;gap:18px;}
.vnav3b .util-strip .right a {font-weight:600;}
.vnav3b .company-wrap {position:relative;}
.vnav3b .util-strip .company {color:#fff;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;padding:0;}
.vnav3b .util-strip .company .car {width:7px;height:7px;border-right:2px solid #8aa6b8;border-bottom:2px solid #8aa6b8;transform:rotate(45deg);margin-top:-3px;transition:transform .16s ease, margin-top .16s ease;}
.vnav3b .util-strip .company-wrap:hover .car, .vnav3b .company-wrap.open .car {transform:rotate(-135deg);margin-top:2px;}
.vnav3b .company-menu {position:absolute;top:calc(100% + 12px);right:0;background:#fff;border-radius:8px;
  box-shadow:0 14px 34px rgba(7,35,55,.20);padding:8px;min-width:184px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;z-index:60;}
.vnav3b .company-wrap:hover .company-menu, .vnav3b .company-wrap:focus-within .company-menu, .vnav3b .company-wrap.open .company-menu {opacity:1;visibility:visible;transform:none;transition:opacity .16s ease, transform .16s ease, visibility 0s;}
.vnav3b .company-menu a {display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;}
.vnav3b .company-menu a:hover {background:#eef4f1;color:var(--green-dark);}
.vnav3b .company-menu a svg {width:18px;height:18px;flex:none;fill:#00695C;}
.vnav3b .company-menu a img {width:18px;height:18px;flex:none;object-fit:contain;}
.vnav3b .company-menu a:hover svg {fill:var(--green-dark);}

/* FIXED: Bumping specificity for the sign in color so nav_item global classes don't overwrite it */
.vnav3b .util-strip a.signin {color:var(--green) !important;}
.vnav3b .util-strip a.signin:hover {color:#fff;}

.vnav3b .topbar {display:flex;align-items:center;gap:16px;background:#fff !important;border-radius:var(--r-nav);
  padding:12px 14px 12px 22px;box-shadow:0 6px 20px rgba(10,18,25,.12);width:100%;}
.vnav3b .tb-left {display:flex;align-items:center;gap:14px;flex:1 1 auto;}
.vnav3b .logo {display:flex;align-items:center;}
.vnav3b .logo svg {display:block;height:19px;width:auto;}
.vnav3b .navitems {display:flex;align-items:center;gap:2px;}
.vnav3b .navitem {display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:var(--r-nav);background:none;line-height:1;white-space:nowrap;transition:.15s;}
.vnav3b .navitem .car {width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--faint);border-bottom:0;transform:none;margin-top:1px;}
.vnav3b .navitem:hover {background:#eef4f1;border-radius:18px;color:var(--green-dark);}
.vnav3b .navitem:hover .car {border-top-color:var(--green-dark);}
.vnav3b .nav-pricing .parrow {display:inline-block;max-width:0;opacity:0;overflow:hidden;transform:translateX(-3px);margin-left:0;transition:max-width .18s ease,opacity .18s ease,transform .18s ease,margin-left .18s ease;}
.vnav3b .nav-pricing:hover .parrow {max-width:1.2em;opacity:1;transform:translateX(0);margin-left:4px;}
.vnav3b .silo-pricing .parrow {font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;display:inline-block;max-width:0;opacity:0;overflow:hidden;transform:translateX(-4px);margin-left:0;transition:max-width .18s ease,opacity .18s ease,transform .18s ease,margin-left .18s ease;vertical-align: middle;}
.vnav3b .silo-pricing:hover .parrow {max-width:1em;opacity:1;transform:translateX(0);margin-left:0px; vertical-align: middle;}
.vnav3b .tb-cta {display:flex;align-items:center;gap:10px;}
.vnav3b .hamburger {display:none;flex-direction:column;gap:5px;padding:10px;border-radius:var(--r-nav);}
.vnav3b .hamburger span {width:22px;height:2px;background:var(--ink);display:block;border-radius:2px;}


/* overlay */
.vnav3b .overlay {position:fixed;inset:0;background:var(--paper);z-index:100;overflow-y:auto;
  opacity:0;transform:translateY(30px);visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;}
.vnav3b .overlay.open {opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s;}
.vnav3b .ov-top {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 48px 8px;max-width:1360px;margin:0 auto;}
.vnav3b .ov-top .logo {color:var(--ink);}
.vnav3b .ov-util {display:flex;align-items:center;gap:10px;}
.vnav3b .close {width:42px;height:42px;border-radius:var(--r-nav);background:var(--close-bg);color:#2a2f33;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.vnav3b .close:hover {background:#d4d9dc;}
.vnav3b .ov-body {display:flex;gap:56px;max-width:1360px;margin:0 auto;padding:16px 48px 72px;}
.vnav3b .ov-index {flex:0 0 320px;}
.vnav3b .ix-eyebrow {font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ix-eyebrow);margin-bottom:20px;}
.vnav3b .silo {display:block;font-family:'Raleway';font-weight:700;font-size:28px;line-height:1.1;color:var(--faint)!important;padding:12px 16px;transition:.12s;cursor:pointer;}
.vnav3b a.silo.nav_item {color:var(--faint)!important;
}

.vnav3b .silo:hover {color:var(--green) !important;}
.vnav3b a.silo.nav_item.active {color:var(--green) !important;background:#F8F9FA;border-radius:8px;padding:8px 16px;}
.vnav3b .silo .tag {display:none;font-family:'Open Sans';font-weight:400;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.35;}
.vnav3b .silo.active .tag {display:block;}
.vnav3b .ov-content {flex:1;min-width:0;background:#F8F9FA;border-radius:20px;padding:20px;}
.vnav3b .section {margin-bottom:26px;}
.vnav3b .section h4 {font-family:'Raleway';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ix-eyebrow);margin-bottom:6px;}
/* auto-fit cards: reflow + fill viewport under 1200 */
.vnav3b .grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;}
.vnav3b .grid.cols4 {grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));}
.vnav3b .ccard {display:block;background:var(--card);border:1px solid var(--card-border);border-radius:var(--r-card);padding:13px;cursor:pointer;color:inherit;text-decoration:none;
  transition:border-color .15s ease, box-shadow .18s ease, transform .18s ease;}
.vnav3b .ccard:hover {border-color:var(--green);box-shadow:0 10px 24px rgba(7,35,55,.10);transform:translateY(-2px);}
.vnav3b .ccard:hover .tile {background:linear-gradient(142deg, var(--Hover-Green, #2E7655) 41.96%, var(--Dark-Eucalyptus-Shade, #002F35) 100%);color:#fff;}
.vnav3b .ccard:hover .ct {color:var(--green-dark);}
.vnav3b .crow {display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.vnav3b .tile {width:28px;height:28px;border-radius:var(--r-tile);background:linear-gradient(142deg, var(--chip, #ECF5EF) 41.96%, var(--vendasta-green-30, #C5E1D0) 100%);color:var(--icon);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s ease, color .15s ease;}
.vnav3b .tile.media {background:transparent;overflow:hidden;}
.vnav3b .tile.media img {width:28px;height:auto;object-fit:contain;display:block;}
.vnav3b .tile.avatar {border-radius:50%;}
.vnav3b .tile.avatar img {width:100%;height:100%;object-fit:cover;}
.vnav3b .tile svg {width:16px;height:16px;display:block;fill:var(--icon);transition:fill .15s ease;}
.vnav3b .ccard:hover .tile svg {fill:#fff;}
.vnav3b .ccard:hover .tile.media {background:transparent;}
.vnav3b .tile.glyph .gi {width:16px;height:16px;display:block;background-color:var(--icon);-webkit-mask:var(--gi) center/contain no-repeat;mask:var(--gi) center/contain no-repeat;transition:background-color .15s ease;}
.vnav3b .ccard:hover .tile.glyph .gi {background-color:#fff;}
.vnav3b .hamburger .hburg {width:24px;height:24px;display:block;background-color:var(--ink);-webkit-mask:var(--gi) center/contain no-repeat;mask:var(--gi) center/contain no-repeat;}
.vnav3b .close .cx {width:18px;height:18px;display:block;background-color:#2a2f33;-webkit-mask:var(--gi) center/contain no-repeat;mask:var(--gi) center/contain no-repeat;}
.vnav3b .ct {font-weight:600;font-size:13px;color:var(--ink);line-height:1.2;transition:color .15s ease;}
.vnav3b .cd {font-size:12px;color:var(--muted);line-height:1.45;}
.vnav3b .banner {display:flex;align-items:center;justify-content:space-between;gap:24px; background:var(--navy, #072337); border-radius:var(--r-card);padding:22px 28px;margin-top:8px;}
.vnav3b .banner .bt {font-family:'Raleway' !important;font-weight:700;font-size:18px;color:#fff;line-height:1.2;}
.vnav3b .banner .bd {font-size:13px;color:#e7f4ec;margin-top:4px;line-height:1.4;}

/* scrollability cues */
.vnav3b .scroll-fade {position:fixed;left:0;right:0;bottom:0;height:72px;pointer-events:none;z-index:110;
  background:linear-gradient(to bottom,rgba(237,239,241,0),var(--paper));
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;opacity:0;transition:opacity .2s;}
.vnav3b .scroll-fade.show {opacity:1;}
.vnav3b .scroll-pill {display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--card-border);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:600;color:var(--muted);box-shadow:0 4px 14px rgba(10,18,25,.12);}
.vnav3b .scroll-pill .dn {width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-3px;}

/* mobile silo picker */
.vnav3b .overlay.picker .ov-content, .vnav3b .overlay.picker .scroll-fade {display:none;}
.vnav3b .overlay.picker .ov-index {flex-direction:column;overflow:visible;width:100%;-webkit-mask-image:none;mask-image:none;}
.vnav3b .overlay.picker .ix-eyebrow {display:block;}
.vnav3b .overlay.picker .silo {font-size:30px;background:none;color:var(--faint);padding:10px 0;border-radius:0;white-space:normal;}
.vnav3b .overlay.picker .silo .tag {display:block;}

/* mobile stacked accordion menu (shown at the hamburger breakpoint) */
.vnav3b .ov-mobile {display:none;}
.vnav3b .m-acc {display:flex;flex-direction:column;max-width:1360px;margin:0 auto;padding:8px 20px 96px;}
.vnav3b .m-silo {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  font-family:'Raleway',sans-serif;font-weight:700;font-size:22px;color:var(--ink);line-height:1.15;
  padding:18px 6px;border-bottom:1px solid var(--card-border);background:none;}

/* FIXED: was `a..m-silo.nav_item` (double dot) — an invalid selector the browser
   dropped silently, so the resting color never applied. Single dot restores it:
   Pricing/Sign-in anchors now beat the live site's global a.nav_item color. */
.vnav3b a.m-silo.nav_item {
  color:var(--ink) !important;
}

.vnav3b .m-silo .m-car {flex:none;width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);margin-top:-3px;transition:transform .2s ease, border-color .2s ease;}
.vnav3b .m-silo[aria-expanded="true"] {color:var(--green);}
.vnav3b .m-silo[aria-expanded="true"] .m-car {transform:rotate(-135deg);margin-top:3px;border-color:var(--green);}
.vnav3b .m-silo:hover {color:var(--green);}
.vnav3b .m-silo:hover .m-car {border-color:var(--green);}
/* Pricing + Sign in are anchors; the live site's global a.nav_item color
   beats a plain .m-silo:hover, so win it with specificity + !important. */
.vnav3b a.m-silo.nav_item:hover {color:var(--green) !important;}
.vnav3b .m-silo .parrow {font-family:'Open Sans',system-ui,sans-serif;color:inherit;}
.vnav3b .m-panel {overflow:hidden;max-height:0;transition:max-height .25s ease;}
.vnav3b .m-panel-inner {padding:14px 0 20px;}
.vnav3b .m-panel-inner .section {margin-bottom:18px;}
.vnav3b .m-panel-inner .section:last-child {margin-bottom:0;}
/* Company links are rendered as real .ccard cards in buildMobile(), so their
   resting + hover states (border, icon tile, shadow, 2px lift) match the other
   cards automatically. No description, so the .crow bottom margin is zeroed. */
.vnav3b .m-company-links {display:flex;flex-direction:column;gap:12px;}
.vnav3b .m-company-links .ccard .crow {margin-bottom:0;}
.vnav3b .m-signin {display:block;padding:18px 6px 4px;font-family:'Raleway',sans-serif;font-weight:700;font-size:22px;color:var(--ink);}
/* ADDED: resting color for the mobile Sign in anchor, matching the m-silo fix
   above — without it the global a.nav_item color wins at rest. */
.vnav3b a.m-signin.nav_item {color:var(--ink) !important;}
.vnav3b a.m-signin.nav_item:hover {color:var(--green) !important;}

@media(max-width:1280px){
  .vnav3b .navitems, .vnav3b .util-strip .ph {display:none;}
  .vnav3b .hamburger {display:flex;}
  /* Company + Sign in now live inside the menu, so retire the top strip */
  .vnav3b .util-strip {display:none;}
  /* swap the desktop index+content layout for the stacked accordion */
  .vnav3b .ov-body {display:none;}
  .vnav3b .ov-mobile {display:block;}
}
@media(max-width:1100px){
  .vnav3b .ov-body {flex-direction:column;gap:22px;padding:18px 18px 64px;}
  .vnav3b .ov-top {padding:20px;}
  .vnav3b .ov-index {flex:none;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent);}
  .vnav3b .ix-eyebrow {display:none;}
  .vnav3b .silo {font-size:15px;line-height:1;white-space:nowrap;background:var(--chip-mob);color:var(--ink) !important;padding:9px 14px 6px 14px;border-radius:var(--r-nav);font-weight:700;}
  .vnav3b .silo.active {background:var(--green);color:#fff !important;padding:9px 14px 6px 14px;border-radius:var(--r-nav);}
  .vnav3b .silo .tag {display:none!important;}
}

@media(max-width:560px){
  /* Keep "Sign up free" inline, immediately left of the hamburger.
     .tb-left{flex:1 1 auto} pushes the CTA + hamburger to the right edge;
     tightened gap so logo + button + hamburger still fit narrow phones. */
  .vnav3b .topbar {gap:8px;}
  .vnav3b .tb-cta {gap:8px;}
  .vnav3b .tb-cta a {flex:0 0 auto;}
}

/**Larger features on large desktop*/
@media (min-width: 1650px) {
  .vnav3b .ct {
    font-size:14px;
  }
  .vnav3b .ov-body, .vnav3b .ov-top {
    max-width: 85%;
  }
}
/* Force 4-card rows into a 2x2 grid when they break at 1279px */
@media (max-width: 1279px) and (min-width: 641px) {
  .vnav3b .grid.cols4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:640px){
  .vnav3b .banner {flex-direction:column;align-items:flex-start;gap:14px;padding:20px 22px;}
  .vnav3b .banner a {display:block;max-width:100%;}
  .vnav3b .banner .btn {max-width:100%;white-space:normal;}
  .vnav3b .ov-util a {display:none;}
  .vnav3b .util-strip {padding:0 0 10px;justify-content: flex-end;}

  /* Force all grid variants to 1 column on mobile */
  .vnav3b .grid, .vnav3b .grid.cols4 {
    grid-template-columns: 1fr;
  }
  .vnav3b .grid, .vnav3b .grid.cols4 {
    grid-template-columns: 1fr;
  }
  .vnav3b .btn-ghost-light {
    display:none;
  }
}
@media (max-width: 350px) {
  .vnav3b .btn { padding: 12px 15px; }
}
.vnav3b .logo svg {
height: 15px;
}

@media (max-width: 320px) {
  .vnav3b .btn-side-mobile {
    padding: 12px 7px;
  }
}

@media (max-width: 400px) {
 .vnav3b .btn {
    padding: 10px 7px;
  }
  .vnav3b .btn {
  font-size: 12px !important;
  }
}