/* Openline marketing site: the header and navigation, shared by every page.
   72px header; the nav sits on the white page and turns into a frosted
   floating bar once the page scrolls (experience.js adds .scrolled).
   Desktop disclosures are native <details>; under 861px the links become a
   menu card that is visibility: hidden while closed. */

/* ---------- header + nav: 72px, white; a frosted bar once scrolled ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  padding: 10px 0;
}

/* legal pages have no scroll script: keep a solid bar there */
body:not(.marketing-home) .site-header {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  width: calc(var(--container) + 24px);
  height: 52px;
  margin: 0 auto;
  padding: 0 12px;
  border-radius: 12px;
  transition:
    background-color 260ms var(--ease),
    box-shadow 260ms var(--ease);
}

.site-header.scrolled .nav,
.site-header.menu-open .nav {
  background: var(--header-glass);
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px -16px rgba(0, 18, 46, 0.24);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.logo-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

.nav-links > li > a,
.nav-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-btn);
  color: var(--ink);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: -0.05em;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease);
}

.nav-group > summary::-webkit-details-marker {
  display: none;
}

.nav-group > summary svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.6;
  transition: transform 220ms var(--ease-out);
}

.nav-group[open] > summary svg {
  transform: rotate(180deg);
}

.nav-group {
  position: relative;
}

.nav-group[open] > summary,
.nav-group.is-current > summary,
.nav-links > li > a[aria-current="location"] {
  background: var(--surface);
}

@media (hover: hover) {
  .nav-links > li > a:hover,
  .nav-group > summary:hover {
    background: var(--surface);
  }
}

.nav-panel {
  position: absolute;
  left: -8px;
  top: calc(100% + 18px);
  width: 340px;
  padding: 10px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-pop);
}

.nav-panel-label {
  padding: 8px 10px 10px;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--accent);
}

.nav-panel a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 200ms var(--ease);
}

.nav-panel a > svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
}

.nav-panel b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
}

.nav-panel small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--muted);
}

.nav-panel .nav-panel-footer {
  justify-content: space-between;
  min-height: 40px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  font-size: var(--fs-micro);
  font-weight: 500;
}

.nav-product {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 640px;
}

.nav-product a {
  align-items: start;
  min-height: 68px;
}

.nav-product .nav-panel-footer {
  grid-column: 1 / -1;
  align-items: center;
}

.nav-panel a[aria-current="location"] {
  background: var(--surface);
}

@media (hover: hover) {
  .nav-panel a:hover {
    background: var(--surface);
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--btn2-bg);
  color: var(--ink);
  cursor: pointer;
}

.mobile-only,
.mobile-nav-cta {
  display: none;
}

@media (max-width: 860px) {
  .js .nav-toggle {
    display: inline-grid;
  }

  .nav {
    gap: 12px;
  }

  .js .nav-links {
    position: absolute;
    top: calc(100% - 4px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - 96px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity 180ms var(--ease),
      transform 240ms var(--ease-out),
      visibility 0s linear 240ms;
  }

  .js .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .js .mobile-only,
  .js .mobile-nav-cta {
    display: block;
  }

  .js .nav-links > li > a,
  .js .nav-group > summary {
    justify-content: space-between;
    height: auto;
    min-height: 48px;
    padding: 12px 10px;
    font-size: var(--fs-body);
    letter-spacing: -0.03em;
  }

  .js .nav-links .mobile-nav-cta > a {
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
    color: var(--btn-ink);
    background: var(--btn-bg);
    font-size: var(--fs-sm);
  }

  .nav-panel,
  .nav-product {
    position: static;
    width: 100%;
    margin: 2px 0 8px;
    padding: 6px;
    background: var(--surface);
    box-shadow: none;
  }

  .nav-product {
    grid-template-columns: 1fr;
  }

  .nav-product-group + .nav-product-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .nav-panel a {
    min-height: 56px;
  }

  .nav-see {
    display: none;
  }

  html:not(.js) .site-header {
    position: relative;
    height: auto;
  }

  html:not(.js) .nav {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 12px;
  }

  html:not(.js) .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }

  html:not(.js) .nav-panel {
    position: static;
  }
}

@media (max-width: 380px) {
  .logo {
    font-size: 1.5rem;
  }

  .nav-actions {
    gap: 6px;
  }
}

/* ---------- homepage: nav floats over the black hero (deployed look) ----------
   With JS on the homepage, the header is fixed and transparent over the hero
   (both follow the page theme). Once scrolled (or with the mobile menu open)
   it becomes the frosted bar.
   Without JS it stays the plain sticky bar. */

.js .marketing-home .site-header {
  position: fixed;
  top: var(--inset);
  left: 0;
  right: 0;
}

.js .marketing-home .hero {
  padding-top: var(--inset);
}

.js .marketing-home .hero-panel {
  padding-top: var(--header-h);
}

/* text and buttons ease with the glass */
.js .marketing-home .site-header .logo,
.js .marketing-home .site-header .nav-links > li > a,
.js .marketing-home .site-header .nav-group > summary,
.js .marketing-home .site-header .nav-actions .btn,
.js .marketing-home .site-header .theme-toggle,
.js .marketing-home .site-header .nav-toggle {
  transition:
    color 260ms var(--ease),
    background-color 260ms var(--ease),
    border-color 260ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .marketing-home .site-header .nav,
  .js .marketing-home .site-header .logo,
  .js .marketing-home .site-header .nav-links > li > a,
  .js .marketing-home .site-header .nav-group > summary,
  .js .marketing-home .site-header .nav-actions .btn,
  .js .marketing-home .site-header .theme-toggle,
  .js .marketing-home .site-header .nav-toggle {
    transition: none;
  }
}