/* Marketing-site header. Same design as the klintoz site header: a fixed bar that is transparent over the dark hero
 * and gets a solid, blurred ground once the page scrolls; a slide-in menu on small screens; dropdown menus.
 * Loaded after app.css, which styles the older navy bar this replaces. */
:root { --hdr-navy: #0f2a55; --hdr-blue: #1f5eb8; --header-h: 84px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1030; color: #fff; background: transparent; border-bottom: 0;
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease; }
#mainNav { background: transparent; box-shadow: none; padding: 0; }
#mainNav .nav-wrap { height: 84px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
#mainNav .navbar-brand { display: flex; align-items: center; margin: 0; padding: 0; flex-shrink: 0; }
#mainNav .navbar-brand img { height: 34px; width: auto; }
#mainNav .brand-dark { display: none; }
.site-header.is-stuck .brand-light { display: none; }
.site-header.is-stuck .brand-dark { display: block; }

#mainNav .navbar-nav { gap: 30px; align-items: center; }
#mainNav .nav-link { padding: 0 !important; font-size: .92rem; font-weight: 600; white-space: nowrap; background: transparent !important;
  color: rgba(255,255,255,.82) !important; }
#mainNav .nav-link:hover, #mainNav .nav-link.active, #mainNav .nav-link[aria-current="page"], #mainNav .nav-link.show { color: #fff !important; }

#mainNav .dropdown-toggle::after { display: inline-block; border: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; margin-left: .4rem; vertical-align: middle; transition: transform .22s ease; opacity: .65; }
#mainNav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); opacity: 1; }
#mainNav .dropdown-menu { border: none; border-top: 3px solid var(--hdr-blue); border-radius: 14px; padding: .6rem; margin-top: 14px; min-width: 240px;
  box-shadow: 0 8px 40px rgba(15,42,85,.16); }
#mainNav .dropdown-item { display: flex; align-items: center; gap: .5rem; border-radius: 8px; padding: .55rem 1rem; font-size: .875rem; font-weight: 500; color: #2d3748; }
#mainNav .dropdown-item i { width: 18px; color: var(--hdr-blue); }
#mainNav .dropdown-item:hover { background: #f0f5fb; color: var(--hdr-blue); }
#mainNav .dropdown-item.active, #mainNav .dropdown-item:active { background: var(--hdr-blue); color: #fff; }
#mainNav .dropdown-item.active i, #mainNav .dropdown-item:active i { color: #fff; }

#mainNav .nav-item-cta .btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 10px 20px !important;
  border-radius: 12px; font-size: .95rem !important; font-weight: 700; white-space: nowrap; }

.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: #fff; }
.menu-toggle span { display: block; height: 2px; margin: 6px 0; background: currentColor; }

/* scrolled (or a page without a dark hero): translucent white ground, dark text */
.site-header.is-stuck { background: rgba(255,255,255,.96); box-shadow: 0 6px 26px rgba(15,42,85,.14); }
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .site-header.is-stuck { background: rgba(255,255,255,.85); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); }
}
.site-header.is-stuck .menu-toggle { color: #0d1f3c; }
body.menu-open .site-header .menu-toggle { color: #fff; }
@media (min-width: 992px) {
  .site-header.is-stuck #mainNav .nav-link { color: #0d1f3c !important; }
  .site-header.is-stuck #mainNav .nav-link:hover, .site-header.is-stuck #mainNav .nav-link.active,
  .site-header.is-stuck #mainNav .nav-link[aria-current="page"], .site-header.is-stuck #mainNav .nav-link.show { color: var(--hdr-blue) !important; }
}
.site-header.is-stuck #mainNav .nav-wrap { height: 70px; }

body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: rgba(33,37,41,.97); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .site-header .brand-light { display: block; }
body.menu-open .site-header .brand-dark { display: none; }

/* the bar is fixed, so the first block makes room for it */
.hero { padding-top: calc(var(--header-h) + 1.5rem) !important; }
.site-header.is-solid + main { margin-top: var(--header-h); }

@media (max-width: 991.98px) {
  .menu-toggle { display: block; position: relative; z-index: 2; }
  #mainNav .nav-panel { position: fixed; inset: 0 0 0 25%; display: flex; flex-direction: column; align-items: stretch; padding: 105px 30px 30px;
    transform: translateX(100%); visibility: hidden; background: var(--hdr-navy); transition: transform .25s, visibility .25s; overflow-y: auto; }
  #mainNav .nav-panel.open { transform: none; visibility: visible; }
  #mainNav .navbar-nav { flex-direction: column; align-items: stretch; gap: 22px; margin: 0 !important; }
  #mainNav .nav-link { font-size: 1rem; white-space: normal; }
  #mainNav .dropdown-menu { position: static; float: none; min-width: 0; margin: 12px 0 0; padding: .25rem; border: 0; border-radius: 12px; box-shadow: none; background: rgba(255,255,255,.06); }
  #mainNav .dropdown-item { color: rgba(255,255,255,.82); white-space: normal; }
  #mainNav .dropdown-item i { color: rgba(255,255,255,.7); }
  #mainNav .dropdown-item:hover, #mainNav .dropdown-item:focus { background: rgba(255,255,255,.1); color: #fff; }
  #mainNav .nav-item-cta .btn { width: 100%; }
}
@media (max-width: 620px) {
  :root { --header-h: 72px; }
  #mainNav .nav-wrap { height: 72px; }
  #mainNav .nav-panel { left: 12%; }
  .site-header.is-stuck #mainNav .nav-wrap { height: 64px; }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header *, #mainNav .nav-panel { transition: none !important; } }