/* ── COMMON SITE-WIDE HEADER & FOOTER STYLES ───────────────────────────────── */
:root {
  --v-navy: #07172d;
  --v-line: #dce7f0;
}

/* Topbar: 100% edge-to-edge background */
.topbar, .top, .vmx-topbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: #041126 !important;
  color: #cbd8e8 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  box-sizing: border-box !important;
}
.topbar .container, .top .container, .vmx-topbar .vmx-tbin, .vmx-tbin {
  max-width: 1360px !important;
  width: min(1360px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}
@media (max-width: 620px) {
  .topbar, .top, .vmx-topbar { display: none !important; }
}

/* Nav: 100% edge-to-edge white bar, NO dark side margins */
nav.nav, .nav, nav.vmx-nav, .vmx-nav {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #dce7f0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
.nav .container.navin, .navin, .vmx-nav .vmx-navin, .vmx-navin {
  max-width: 1360px !important;
  width: min(1360px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  min-height: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.navin .logo-link, .vmx-navin .vmx-logolink {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.navin .logo, .vmx-navin .vmx-logo, nav img.logo {
  max-width: 145px !important;
  width: 145px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.navlinks, .vmx-navlinks {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #40536a !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;
}
.navlinks a, .vmx-navlinks a {
  color: #40536a !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.navlinks a:hover, .vmx-navlinks a:hover {
  color: #178faa !important;
}

/* Dropdown */
.navlinks .dropdown, .vmx-navlinks .vmx-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.navlinks .dropdown .dropbtn, .vmx-navlinks .vmx-dropdown .vmx-dropbtn {
  color: #40536a !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.navlinks .dropdown .dropdown-content, .vmx-navlinks .vmx-dropdown .vmx-dropdown-content {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  min-width: 260px !important;
  box-shadow: 0 18px 50px rgba(14, 44, 76, 0.14) !important;
  border-radius: 12px !important;
  z-index: 1100 !important;
  padding: 8px 0 !important;
  border: 1px solid #dce7f0 !important;
}
.navlinks .dropdown:hover .dropdown-content, .vmx-navlinks .vmx-dropdown:hover .vmx-dropdown-content {
  display: block !important;
}
.navlinks .dropdown-content a, .vmx-navlinks .vmx-dropdown-content a {
  color: #14263d !important;
  padding: 10px 16px !important;
  text-decoration: none !important;
  display: block !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  white-space: normal !important;
  text-align: left !important;
}
.navlinks .dropdown-content a:last-child, .vmx-navlinks .vmx-dropdown-content a:last-child {
  border-bottom: none !important;
}
.navlinks .dropdown-content a:hover, .vmx-navlinks .vmx-dropdown-content a:hover {
  background-color: #f7fafc !important;
  color: #178faa !important;
}

/* Nav CTA Buttons */
.navcta, .vmx-navcta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.navcta .btn, .vmx-navcta .vmx-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.navcta .btn.dark, .vmx-navcta .vmx-btn.dark {
  background: #07172d !important;
  color: #ffffff !important;
  border: 1px solid #07172d !important;
}
.navcta .btn.dark:hover, .vmx-navcta .vmx-btn.dark:hover {
  background: #0d284f !important;
  color: #ffffff !important;
}
.navcta .btn.primary, .vmx-navcta .vmx-btn.primary {
  background: linear-gradient(135deg, #178faa, #19b9d7) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(25, 185, 215, 0.3) !important;
}
.navcta .btn.primary:hover, .vmx-navcta .vmx-btn.primary:hover {
  opacity: 0.95 !important;
  box-shadow: 0 6px 18px rgba(25, 185, 215, 0.4) !important;
}

/* Mobile Hamburger Menu */
.mobilemenu, .vmx-mobilemenu {
  display: none;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #dce7f0 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.mobilemenu:before, .vmx-mobilemenu:before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 2px !important;
  background: #07172d !important;
  box-shadow: 0 -5px 0 #07172d, 0 5px 0 #07172d !important;
}

/* Breakpoint for hamburger: when viewport width < 1120px, collapse to hamburger */
@media (max-width: 1120px) {
  .mobilemenu, .vmx-mobilemenu {
    display: inline-flex !important;
  }
  .navcta .btn.dark, .vmx-navcta .vmx-btn.dark {
    display: none !important;
  }
  .navlinks, .vmx-navlinks {
    display: none !important;
  }
  .navlinks.open, .vmx-navlinks.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    padding: 18px 20px 22px !important;
    box-shadow: 0 18px 40px rgba(8, 28, 57, 0.14) !important;
    border-bottom: 1px solid #dce7f0 !important;
    z-index: 1200 !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
  }
  .navlinks.open a, .vmx-navlinks.open a {
    white-space: normal !important;
  }
  .navlinks.open .dropdown, .vmx-navlinks.open .vmx-dropdown {
    width: 100% !important;
    display: block !important;
  }
  .navlinks.open .dropdown-content, .vmx-navlinks.open .vmx-dropdown-content {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 6px 0 0 14px !important;
    min-width: 0 !important;
  }
}

/* ── COMMON SITE-WIDE FOOTER STYLES ────────────────────────────────────────── */
footer.site-footer, footer, footer.vmx-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: #041126 !important;
  color: #a9bbcf !important;
  padding: 14px 0 !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
footer .container.foot, footer .foot, footer .vmx-foot {
  max-width: 1360px !important;
  width: min(1360px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}
footer .footer-vmatic-logo {
  width: 155px !important;
  max-width: 155px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)) !important;
  display: block !important;
  opacity: 1 !important;
}
footer .foot-small {
  flex: 1 !important;
  font-size: 12px !important;
  color: #a9bbcf !important;
  text-align: center !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
footer .foot-spacer {
  width: 160px !important;
  flex-shrink: 0 !important;
}
@media (max-width: 850px) {
  footer .container.foot, footer .foot, footer .vmx-foot {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
  footer .foot-spacer {
    display: none !important;
  }
}