/* ABOUTME: Molo Site Header styles: 96px navy bar, inline nav on desktop (tighter below 1280px),
   ABOUTME: disclosure panel under 1100px. */
.molo-site-header {
  position: relative;
  z-index: 50;
}
.molo-site-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--molo-max-width);
  min-height: 96px;
  margin-inline: auto;
  padding-inline: var(--molo-pad-inline);
}
.molo-site-header__brand { display: flex; align-items: center; }
.molo-site-header__logo { display: block; height: 38px; width: auto; }

.molo-site-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-family: var(--ml-font-heading);
  font-size: .9375rem;
  font-weight: 600;
}
.molo-site-header__menu {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.molo-site-header__item { position: relative; }
.molo-site-header__cta { white-space: nowrap; }
.molo-site-header__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--molo-paper);
  text-decoration: none;
}
.molo-site-header__menu a:hover,
.molo-site-header__menu a:focus-visible { color: var(--molo-sage); }
.molo-site-header__parent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  white-space: nowrap;
  padding: 0;
  background: none;
  border: 0;
  color: var(--molo-paper);
  font: inherit;
  cursor: pointer;
}
.molo-site-header__parent::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.molo-site-header__item.is-open .molo-site-header__parent::after { transform: rotate(225deg); margin-top: 4px; }
.molo-site-header__parent:hover,
.molo-site-header__parent:focus-visible { color: var(--molo-sage); }

.molo-site-header__submenu {
  position: absolute;
  top: 100%;
  left: -20px;
  width: max-content;
  min-width: 240px;
  max-width: 340px;
  margin: 0;
  padding: 12px 20px;
  list-style: none;
  background: var(--molo-navy-raised);
  border: 1px solid var(--molo-navy-border);
  border-radius: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease;
}
.molo-site-header__item.has-children:hover .molo-site-header__submenu,
.molo-site-header__item.has-children:focus-within .molo-site-header__submenu,
.molo-site-header__item.is-open .molo-site-header__submenu {
  visibility: visible;
  opacity: 1;
}
.molo-site-header__submenu a { min-height: 40px; padding-block: 6px; box-sizing: border-box; font-weight: 500; line-height: 1.3; }

.molo-site-header__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--molo-paper);
  font-family: var(--ml-font-mono);
  font-size: var(--molo-fs-kicker);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.molo-site-header__toggle-bars,
.molo-site-header__toggle-bars::before,
.molo-site-header__toggle-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.molo-site-header__toggle-bars { position: relative; }
.molo-site-header__toggle-bars::before,
.molo-site-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.molo-site-header__toggle-bars::before { top: -7px; }
.molo-site-header__toggle-bars::after { top: 7px; }

@media (max-width: 1280px) {
  .molo-site-header__nav,
  .molo-site-header__menu { gap: 28px; }
}
@media (max-width: 1100px) {
  .molo-site-header__inner { flex-wrap: wrap; min-height: 72px; }
  .molo-site-header__logo { height: 30px; }
  .molo-site-header__toggle { display: inline-flex; }
  .molo-site-header__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
  }
  .molo-site-header.is-open .molo-site-header__nav { display: flex; }
  .molo-site-header__menu { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .molo-site-header__parent::after { display: none; }
  .molo-site-header__submenu {
    position: static;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0 0 0 16px;
    background: none;
    border: 0;
    visibility: visible;
    opacity: 1;
  }
}