/* DM Sans is already imported by home-styles.css on the homepage, but inner
   marketing pages load site.css instead, which never imports it -- so the
   header's `font-family: 'DM Sans'` was silently falling back to Arial there,
   producing visibly different nav typography. Importing it here guarantees
   it's available on every ax-public page regardless of which base stylesheet
   that page loads. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* Public marketing navigation only. Existing menu JavaScript is unchanged. */
body.ax-public { padding-bottom: 88px; }

/* Header: solid deep ANKOR navy on inner marketing pages (no hero behind the
   nav). The homepage overrides this back to a translucent overlay below. */
body.ax-public .ax-header {
  background: #0d151c;
  border-bottom: 1px solid rgba(213, 229, 241, .10);
  box-shadow: none;
  color: #f1f5f8;
}
body.ax-public.ank-home .ax-header {
  position: absolute; inset: 0 0 auto;
  background: rgba(18, 35, 49, .12);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
body.ax-public .ax-header-inner { min-height: 72px; gap: 26px; }
body.ax-public .ax-header .ax-nav { gap: 26px; }
body.ax-public .ax-header .ax-logo img { width: 144px !important; height: auto; }
body.ax-public .ax-header .ax-nav-toggle,
body.ax-public .ax-header .ax-nav-link {
  font-family: 'DM Sans', Arial, sans-serif !important;
  font-size: 13px; font-weight: 400; letter-spacing: .015em;
  color: #f1f5f8; line-height: 1.5;
}
body.ax-public .ax-header .ax-nav-toggle { padding: 24px 0; }
body.ax-public .ax-header .ax-nav-toggle span { display: none; }
body.ax-public .ax-header .ax-nav-toggle:hover,
body.ax-public .ax-header .ax-nav-link:hover { color: #bcd9f0; }

/* Dashboard Login: filled ANKOR blue, clearly more prominent than the plain
   nav links around it. Existing customers only -- never "Get Started". */
body.ax-public .ax-header .ax-login {
  margin-left: 2px; padding: 9px 16px;
  border: 1px solid transparent; border-radius: 5px;
  background: #285f96; color: #ffffff; font-weight: 600;
  transition: background-color .15s, box-shadow .15s;
}
body.ax-public .ax-header .ax-login:hover,
body.ax-public .ax-header .ax-login:focus-visible {
  background: #204e7b; color: #ffffff;
}

/* Use the existing ANKOR mark prepared for dark surfaces, without a backing plate. */
body.ax-public.ank-home .ax-header .ax-logo {
  padding: 0; border-radius: 0;
  background: transparent;
}

/* Marketing submenu panel: one shared design language across Products,
   Solutions, Compliance, Resources and Company. Medium width, structured
   name + short description, restrained border/shadow, no heavy animation. */
body.ax-public .ax-header .ax-dropdown {
  min-width: 300px;
  background: #ffffff; border: 1px solid #e2e8ee;
  border-radius: 10px; padding: 14px;
  box-shadow: 0 18px 40px rgba(13, 25, 36, .14), 0 2px 8px rgba(13, 25, 36, .06);
}
/* :not([hidden]) keeps the browser's native [hidden]{display:none} in force --
   without it, this rule's specificity overrides that UA rule and every panel
   stays visually shown regardless of the hidden attribute site.js toggles. */
body.ax-public .ax-header .ax-dropdown:not([hidden]) { display: flex; flex-direction: column; gap: 2px; }
body.ax-public .ax-header .ax-dropdown.ax-dropdown--cols2:not([hidden]) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
  width: 520px;
}
body.ax-public .ax-header .ax-dropdown.ax-dropdown--right {
  left: auto; right: -14px;
}
body.ax-public .ax-header .ax-dropdown .ax-dd-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 6px;
  text-decoration: none; transition: background-color .12s;
}
body.ax-public .ax-header .ax-dropdown .ax-dd-name {
  font: 600 13.5px/1.3 'DM Sans', Arial, sans-serif;
  color: #16222c;
}
body.ax-public .ax-header .ax-dropdown .ax-dd-desc {
  font: 400 12px/1.4 'DM Sans', Arial, sans-serif;
  color: #55697a;
}
body.ax-public .ax-header .ax-dropdown .ax-dd-item:hover,
body.ax-public .ax-header .ax-dropdown .ax-dd-item:focus-visible,
body.ax-public .ax-header .ax-dropdown .ax-dd-item[aria-current=page] { background: #eef3f7; }
body.ax-public .ax-header .ax-dropdown .ax-dd-item:hover .ax-dd-name,
body.ax-public .ax-header .ax-dropdown .ax-dd-item:focus-visible .ax-dd-name { color: #204e78; }

body.ax-public .ax-header :focus-visible,
body.ax-public .ax-floating-start:focus-visible { outline: 3px solid #9cc9eb; outline-offset: 4px; }
body.ax-public .ax-mobile-button {
  color: #f1f5f8; border: 1px solid #bed0df66; background: #ffffff08;
  border-radius: 5px; font-size: 12px; padding: 9px 11px;
}
/* Extend the photograph behind the header while retaining the text's page position. */
body.ax-public.ank-home .ank-hero { min-height: 863px; padding-top: 88px; }

/* Floating persistent CTA, distinct from the hero's own Get Started button. */
body.ax-public .ax-floating-start {
  position: fixed; left: auto; right: max(28px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom)); z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px; border: 1px solid #7899b8;
  border-radius: 6px; background: #285f96; color: #fff;
  font: 500 13px/1.4 'DM Sans', Arial, sans-serif; letter-spacing: .01em;
  text-decoration: none; box-shadow: 0 4px 16px #122c4533;
  transition: background-color .15s, box-shadow .15s;
}
body.ax-public .ax-floating-start:hover { background: #204e7b; box-shadow: 0 5px 18px #122c4544; }

@media (max-width: 1200px) and (min-width: 1101px) {
  body.ax-public .ax-header-inner, body.ax-public .ax-header .ax-nav { gap: 20px; }
  body.ax-public .ax-header .ax-dropdown.ax-dropdown--cols2 { width: 460px; }
}
@media (max-width: 1100px) {
  body.ax-public .ax-header-inner { min-height: 72px; padding-block: 10px; gap: 12px; }
  body.ax-public .ax-header .ax-logo { order: 0; }
  body.ax-public .ax-header .ax-login { order: 1; margin-left: auto; padding: 8px 12px; }
  body.ax-public .ax-mobile-button { order: 2; margin-left: 0; }
  body.ax-public .ax-header .ax-nav { order: 3; gap: 0; max-height: calc(100dvh - 100px); }
  body.ax-public .ax-header .ax-nav-toggle { padding: 15px 0; }
  body.ax-public .ax-header:has(.ax-nav.is-open) { background: #0d151c; }
  body.ax-public:has(.ax-nav.is-open) .ax-floating-start { visibility: hidden; }
  body.ax-public.ank-home .ank-hero { min-height: 851px; padding-top: 76px; }
  /* Dropdowns become static, full-width stacked panels within the mobile
     menu (position rules from assets/brand.css); collapse to one column
     and drop the desktop-only side offsets. */
  body.ax-public .ax-header .ax-dropdown.ax-dropdown--cols2:not([hidden]) {
    display: flex; flex-direction: column; width: auto;
  }
  body.ax-public .ax-header .ax-dropdown.ax-dropdown--right { right: auto; }
  body.ax-public .ax-header .ax-dropdown { box-shadow: none; }
}
@media (max-width: 760px) {
  body.ax-public .ax-header .ax-logo img { width: 120px !important; }
  body.ax-public.ank-home .ax-header .ax-logo { padding: 0; }
  body.ax-public .ax-header .ax-login { font-size: 12px; letter-spacing: 0; padding: 8px 12px; }
  body.ax-public.ank-home .ank-hero { min-height: 766px; padding-top: 142px; }
  body.ax-public .ax-floating-start { left: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); padding-inline: 16px; }
}
@media (max-width: 360px) {
  body.ax-public .ax-header .ax-logo img { width: 82px !important; }
  body.ax-public .ax-header-inner { gap: 8px; }
  body.ax-public .ax-header .ax-login { padding: 8px 6px; font-size: 11px; }
  body.ax-public .ax-mobile-button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ax-public .ax-floating-start { transition: none; }
  body.ax-public .ax-header .ax-dropdown .ax-dd-item { transition: none; }
}