/*
 * Shared public navigation.
 * This file styles only .lp-nav and is loaded by every logged-out public page.
 */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #e4f1fa;
  box-shadow: 0 2px 10px rgba(61, 128, 171, .04);
}

.lp-nav .lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

.lp-nav .lp-nav-logo img {
  display: block;
  width: auto;
  height: 38px;
}

.lp-nav .lp-nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lp-nav .lp-nav-menu a,
.lp-nav .lp-nav-login {
  color: #667f95 !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11.6px !important;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 14px;
  border-radius: 9px;
  text-decoration: none;
  transition: color .15s, background .15s;
}

.lp-nav .lp-nav-menu a:hover,
.lp-nav .lp-nav-menu a:focus,
.lp-nav .lp-nav-login:hover,
.lp-nav .lp-nav-login:focus {
  color: #2875a8 !important;
  background: #eef8ff;
  outline: none;
}

.lp-nav .lp-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-nav .lp-nav-cta .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #65b5e7 0%, #438fc8 100%);
  color: #fff !important;
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 7px 18px -7px rgba(75, 157, 211, .4);
}

.lp-nav .lp-nav-cta .lp-btn:hover,
.lp-nav .lp-nav-cta .lp-btn:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #56a7dd 0%, #397fba 100%);
  outline: none;
}

.lp-nav .lp-burger {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lp-nav .lp-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: #18324a;
}

@media (max-width: 860px) {
  .lp-nav .lp-nav-inner {
    flex-wrap: wrap;
    min-height: 70px;
  }

  .lp-nav .lp-nav-logo {
    order: 1;
  }

  .lp-nav .lp-burger {
    display: block;
    order: 2;
  }

  .lp-nav .lp-nav-menu,
  .lp-nav .lp-nav-cta {
    display: none;
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .lp-nav.lp-nav-open .lp-nav-menu,
  .lp-nav.lp-nav-open .lp-nav-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .lp-nav.lp-nav-open .lp-nav-menu {
    padding: 6px 0 4px;
    margin-top: 6px;
    border-top: 1px solid #dcecf8;
  }

  .lp-nav.lp-nav-open .lp-nav-cta {
    padding: 0 0 12px;
  }

  .lp-nav .lp-nav-menu a,
  .lp-nav .lp-nav-login {
    padding: 12px;
  }

  .lp-nav .lp-nav-login {
    text-align: center;
  }

  .lp-nav .lp-nav-cta .lp-btn {
    width: 100%;
    text-align: center;
  }
}

/* Homepage mobile navigation: left drawer at half the viewport width. */
@media (max-width: 860px) {
  body.lp-home-v2.lp-drawer-open {
    overflow: hidden;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open {
    z-index: 1100;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(24, 50, 74, .28);
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-inner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
    width: 50vw;
    height: 100vh;
    min-height: 100vh;
    padding: 16px 14px 22px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 8px 0 28px rgba(24, 50, 74, .16);
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-logo {
    flex: 0 0 auto;
    margin: 4px 42px 10px 4px;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-logo img {
    max-width: 100%;
    height: auto;
    max-height: 38px;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-burger {
    position: absolute;
    top: 12px;
    right: 10px;
    margin: 0;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-menu,
  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-cta {
    position: static;
    display: flex;
    flex: 0 0 auto;
    width: 100%;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-menu {
    padding: 10px 0 6px;
    margin: 0;
    border-top: 1px solid #dcecf8;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-cta {
    padding: 8px 0 0;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-menu a,
  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-login {
    padding: 11px 8px;
    font-size: 11.6px !important;
    text-align: left;
  }

  body.lp-home-v2 .lp-nav.lp-nav-open .lp-nav-cta .lp-btn {
    width: 100%;
  }
}

/* ============================================================
 * Dark/light switch in the public header. Shared by the home page and the
 * login / register pages, so it lives here rather than in homepage-v2.css.
 * ============================================================ */
.lp-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #5b6b80;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.lp-theme-btn:hover,
.lp-theme-btn:focus {
  color: #21688f;
  background: #eef8ff;
  outline: none;
}

.lp-theme-btn svg {
  width: 17px;
  height: 17px;
}

.lp-theme-btn .lp-theme-sun,
html.sp-dark .lp-theme-btn .lp-theme-moon {
  display: none;
}

html.sp-dark .lp-theme-btn svg.lp-theme-sun {
  display: block;
}

.lp-theme-label {
  display: none;
}

@media (max-width: 860px) {
  .lp-nav.lp-nav-open .lp-theme-btn {
    width: auto;
    height: auto;
    justify-content: flex-start;
    gap: 9px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
  }

  /* Only the label for the mode you would switch to, matching the icon. */
  .lp-nav.lp-nav-open .lp-theme-btn span.lp-theme-label.lp-theme-moon {
    display: inline;
  }

  html.sp-dark .lp-nav.lp-nav-open .lp-theme-btn span.lp-theme-label.lp-theme-moon {
    display: none;
  }

  html.sp-dark .lp-nav.lp-nav-open .lp-theme-btn span.lp-theme-label.lp-theme-sun {
    display: inline;
  }
}

html.sp-dark .lp-theme-btn {
  color: #b9c6d6;
}

html.sp-dark .lp-theme-btn:hover,
html.sp-dark .lp-theme-btn:focus {
  color: #7cc6f2;
  background: #263140;
}

/* Dark mode for the header on the login / register pages. The home page has its
 * own copy of these in homepage-v2.css; Services, API Guide and Blog have no
 * dark palette yet, so this stays scoped to the pages that do. */
html.sp-dark body.lp-auth .lp-nav {
  background: rgba(20, 24, 33, .93);
  border-bottom-color: #27313f;
}

html.sp-dark body.lp-auth .lp-nav-menu a,
html.sp-dark body.lp-auth .lp-nav-login {
  color: #a3b3c6;
}

html.sp-dark body.lp-auth .lp-nav-menu a:hover,
html.sp-dark body.lp-auth .lp-nav-menu a:focus,
html.sp-dark body.lp-auth .lp-nav-login:hover,
html.sp-dark body.lp-auth .lp-nav-login:focus {
  color: #7cc6f2;
  background: #263140;
}

html.sp-dark body.lp-auth .lp-nav .lp-burger span {
  background: #cdd8e5;
}