.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
}

/* Top announcement bar matches larridin.com header__top-announcement. */
.header-announcement {
  background: #3f46d8;
  color: #eee;
}

.header-announcement__inner {
  padding-inline: 16px;
}

.header-announcement__wrapper {
  display: flex;
  align-items: center;
  min-height: 51px;
}

.header-announcement__nav {
  flex: 1;
  padding: 16px 10px;
  text-align: center;
}

.header-announcement__link {
  display: inline;
  color: #fff;
  font-size: var(--text-secondary);
  font-weight: 500;
  line-height: var(--leading-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.header-announcement__link:hover,
.header-announcement__link:focus {
  color: #fff;
  text-decoration: underline;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-5);
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-gray-950);
}

.navbar__logo-img {
  display: block;
  width: 149px;
  height: auto;
  max-height: 29px;
}

.navbar__end {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.navbar__nav--desktop {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navbar__item {
  position: relative;
}

.navbar__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: var(--text-ui);
  letter-spacing: -0.28px;
  color: var(--color-gray-950);
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: var(--leading-ui);
}

.navbar__trigger:hover,
.navbar__item--open .navbar__trigger {
  background: var(--color-gray-25);
}

.navbar__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-gray-950);
  transition: transform 0.15s ease;
}

.navbar__item--open .navbar__chevron {
  transform: rotate(180deg);
}

.navbar__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 36, 44, 0.12);
  z-index: 110;
}

.navbar__submenu[hidden] {
  display: none;
}

.navbar__item--open .navbar__submenu:not([hidden]) {
  display: block;
}

.navbar__item:focus-within .navbar__submenu:not([hidden]) {
  display: block;
}

.navbar__submenu-link {
  display: block;
  padding: 10px 16px;
  font-size: var(--text-ui);
  letter-spacing: -0.28px;
  color: var(--color-gray-950);
  white-space: nowrap;
}

.navbar__submenu-link:hover,
.navbar__submenu-link:focus {
  color: #7971ff;
  background: var(--color-white);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.navbar__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-gray-950);
  cursor: pointer;
  border-radius: 6px;
}

.navbar__menu-toggle:hover {
  background: var(--color-gray-25);
}

.navbar__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 15, 15, 0.4);
}

.navbar__backdrop:not([hidden]) {
  display: block;
}

.navbar__drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  width: min(100%, 360px);
  height: 100%;
  background: var(--color-white);
  box-shadow: -8px 0 32px rgba(27, 36, 44, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}

.navbar__drawer:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.site-header.navbar--drawer-open .navbar__drawer {
  transform: translateX(0);
}

.navbar__drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 16px 16px 0;
  flex-shrink: 0;
}

.navbar__drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-gray-950);
  cursor: pointer;
  border-radius: 6px;
}

.navbar__drawer-close:hover {
  background: var(--color-gray-25);
}

.navbar__nav--mobile {
  flex: 1;
  padding: 8px 0 24px;
}

.navbar__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__mobile-item {
  border-bottom: 1px solid var(--color-gray-100);
}

.navbar__mobile-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: -0.32px;
  color: var(--color-gray-950);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.navbar__mobile-trigger:hover {
  color: #7971ff;
}

.navbar__mobile-chevron {
  flex-shrink: 0;
  color: currentColor;
}

.navbar__mobile-stage[hidden] {
  display: none;
}

.navbar__mobile-stage--sub {
  padding-bottom: 8px;
}

.navbar__mobile-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--color-gray-950);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.navbar__mobile-back:hover {
  color: #7971ff;
}

.navbar__mobile-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__mobile-link {
  display: block;
  padding: 12px 20px 12px 32px;
  font-size: var(--text-ui);
  letter-spacing: -0.32px;
  color: var(--color-gray-950);
}

.navbar__mobile-link:hover,
.navbar__mobile-link:focus {
  color: #7971ff;
}

.navbar__drawer-cta {
  padding: 16px 20px 32px;
  margin-top: auto;
}

.navbar__drawer-cta .btn {
  width: 100%;
  justify-content: center;
}

body.navbar--menu-open {
  overflow: hidden;
}

/* -- Mega menu (Developers) --------------------------------------------------- */

.navbar__submenu--mega {
  left: 50%;
  width: 640px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 24px 60px rgba(10, 13, 40, 0.28), 0 0 0 1px rgba(27, 36, 44, 0.06);
}

.navbar__item--open .navbar__submenu--mega:not([hidden]),
.navbar__item:focus-within .navbar__submenu--mega:not([hidden]) {
  display: flex;
}

.navbar__mega-header,
.navbar__mega-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--color-gray-950);
}

.navbar__mega-header {
  justify-content: space-between;
  background: #f3f2ff;
}

.navbar__mega-header:hover {
  background: #eae8ff;
}

.navbar__mega-header-label {
  display: block;
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  font-weight: 500;
}

.navbar__mega-header-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: #3b359a;
}

.navbar__mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.navbar__mega-col {
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  border: 1px solid #eef1f5;
  border-radius: 6px;
}

.navbar__mega-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.navbar__mega-dot {
  width: 8px;
  height: 8px;
}

.navbar__mega-dot--green {
  background: var(--color-green-400);
}

.navbar__mega-dot--accent {
  background: #4c45c0;
}

.navbar__mega-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--color-gray-950);
}

.navbar__mega-item:hover,
.navbar__mega-item:focus-visible {
  background: var(--color-section-muted);
}

.navbar__mega-name {
  display: block;
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  font-weight: 500;
}

.navbar__mega-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-gray-500);
}

.navbar__mega-arrow {
  flex: none;
  margin-top: 2px;
  color: #4c45c0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.navbar__mega-arrow svg {
  display: block;
}

.navbar__mega-item:hover .navbar__mega-arrow,
.navbar__mega-arrow--on {
  opacity: 1;
}

.navbar__mega-arrow--end {
  margin-left: auto;
}

.navbar__mega-promo {
  margin: 8px 8px 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f3f2ff;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: #3b359a;
}

.navbar__mega-footer {
  background: var(--color-section-muted);
  color: #4c45c0;
}

.navbar__mega-footer:hover {
  background: #eef1f7;
}

.navbar__mega-footer-label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--color-gray-950);
}

.navbar__mega-footer-text {
  font-size: var(--text-secondary);
  line-height: var(--leading-secondary);
  color: var(--color-gray-700);
}

@media (max-width: 1100px) {
  .navbar__submenu--mega {
    width: 560px;
  }
}

@media (max-width: 900px) {
  .navbar__nav--desktop {
    display: none;
  }

  .navbar__cta--desktop {
    display: none;
  }

  .navbar__menu-toggle {
    display: flex;
  }
}

@media (min-width: 901px) {
  .navbar__backdrop,
  .navbar__drawer {
    display: none !important;
  }
}