/* Site header, navigation and footer. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card); /* in the dark theme the shadow, not the near-equal navy, separates header and page */
}

.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--grad-brand);
}

.site-headerRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp2) var(--sp4);
  min-height: 64px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-ctl);
}

.site-brandImg {
  display: block;
  height: 28px;
  width: auto;
}

.nav-toggle,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  min-height: var(--h-ctl);
  padding: 0 var(--sp4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.nav-toggleBars {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
  position: relative;
}

.nav-toggleBars::before,
.nav-toggleBars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text-primary);
}

.nav-toggleBars::before { top: -6px; }
.nav-toggleBars::after { top: 6px; }

/* Phone: logo left, theme (icon only) and menu right, one 56px row. */
@media (max-width: 639.98px) {
  .site-headerRow {
    min-height: 56px;
    column-gap: var(--sp2);
  }

  .site-brand {
    margin-right: auto;
  }

  .theme-toggle {
    justify-content: center;
    width: var(--h-ctl);
    padding: 0;
  }

  .theme-toggle > span:last-child {
    font-size: 0;
  }
}

.site-nav {
  flex-basis: 100%;
  padding-bottom: var(--sp3);
}

.js .nav-toggle[aria-expanded="false"] + .site-nav {
  display: none;
}

.site-navList {
  display: flex;
  flex-direction: column;
  gap: var(--sp1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navLink {
  display: flex;
  align-items: center;
  min-height: var(--h-ctl);
  padding: 0 var(--sp3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-md);
}

.site-navLink:hover {
  background: var(--selection-bg);
  color: var(--text-primary);
}

/* Current section: underline on the top-level label. */
.site-navLink[aria-current="page"] {
  color: var(--accent-btn-hover);
  font-weight: 700;
  text-decoration: underline 2px var(--accent-btn);
  text-underline-offset: 6px;
}

.site-navGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.site-navGroup > .site-navLink {
  flex: 1 1 0;
  min-width: 0;
}

.site-navToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--h-ctl);
  height: var(--h-ctl);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.js .site-navToggle {
  display: inline-flex;
}

.site-navToggle:hover {
  background: var(--selection-bg);
}

.site-navCaret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.site-navToggle[aria-expanded="true"] .site-navCaret {
  transform: translateY(2px) rotate(225deg);
}

.site-navSub {
  flex-basis: 100%;
  margin: 0 0 var(--sp2) var(--sp4);
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--border);
}

@media (max-width: 1023.98px) {
  .js .site-navToggle[aria-expanded="false"] + .site-navSub {
    display: none;
  }
}

.site-navSubLink {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  width: 100%;
  min-height: var(--h-ctl);
  padding: 0 var(--sp3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  text-decoration: none;
}

a.site-navSubLink:hover,
.site-navSubButton:hover {
  background: var(--selection-bg);
  color: var(--text-primary);
  cursor: pointer;
}

.site-navSoon {
  color: var(--text-faint);
}

.site-navProduct {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp3);
  align-items: center;
  min-height: 56px;
  padding: var(--sp2) var(--sp3);
}

.site-navProductIcon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.site-navProductName {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp1) var(--sp2);
  font-weight: 700;
}

.site-navProductDesc {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.site-navSubDivider {
  margin: var(--sp1) var(--sp3);
  border-top: 1px solid var(--border);
}

.site-navSub form {
  margin: 0;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .nav-toggle[aria-expanded="false"] + .site-nav {
    display: block;
    flex-basis: auto;
    padding-bottom: 0;
  }

  .site-navList {
    flex-direction: row;
    align-items: center;
    gap: var(--sp1);
  }

  .site-navGroup > .site-navLink {
    flex: 0 0 auto;
    padding-right: var(--sp2);
  }

  .site-navToggle {
    width: 28px;
    margin-left: calc(var(--sp1) * -1);
  }

  .site-navSub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 220px;
    margin: 0;
    padding: var(--sp2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel-bg);
    box-shadow: var(--shadow-pop);
  }

  .site-navSub:has(.site-navProduct) {
    min-width: 340px;
  }

  .site-navSubWide {
    column-count: 2;
    column-gap: var(--sp2);
    width: 520px;
  }

  .site-navSubWide li {
    break-inside: avoid;
  }

  .site-navItem:last-child .site-navSub,
  .site-navItem:nth-last-child(2) .site-navSub {
    left: auto;
    right: 0;
  }

  .site-navItem:has(:focus-visible) > .site-navSub,
  .js .site-navToggle[aria-expanded="true"] + .site-navSub {
    display: block;
  }

  .js .site-navItem.is-dismissed > .site-navSub {
    display: none;
  }

  .site-navLink {
    font-size: var(--fs-sm);
  }

  .site-navGroup { border-radius: var(--radius-md); }
  .site-navGroup:has(:focus-visible),
  .site-navGroup:has(.site-navToggle[aria-expanded="true"]) {
    background: var(--selection-bg);
  }

  .site-navGroup:has(:focus-visible) > .site-navLink,
  .site-navGroup:has(:focus-visible) > .site-navToggle,
  .site-navGroup > .site-navToggle:hover {
    background: transparent;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-navGroup:hover {
    background: var(--selection-bg);
  }

  .site-navGroup:hover > .site-navLink,
  .site-navGroup:hover > .site-navToggle {
    background: transparent;
    color: var(--text-primary);
  }

  .site-navItem:hover > .site-navSub {
    display: block;
  }

  .js .site-navItem.is-dismissed:hover > .site-navSub {
    display: none;
  }

  .site-headerRow { column-gap: var(--sp3); }
  .site-navList { gap: var(--sp2); }
  .site-navLink { min-height: var(--h-bar); padding: 0 var(--sp2); }
  .site-navGroup > .site-navLink { padding-left: var(--sp2); padding-right: var(--sp1); }
  .site-navToggle { width: 24px; height: var(--h-bar); margin-left: 0; }
  .theme-toggle { min-height: var(--h-bar); padding: 0 var(--sp2); border-color: transparent; }
  .theme-toggle > span:last-child { font-size: 0; }
}

@media (min-width: 1280px) {
  .site-headerRow { column-gap: var(--sp5); }
  .site-navList { gap: var(--sp3); }
  .site-navLink { padding: 0 var(--sp3); }
  .site-navGroup > .site-navLink { padding-left: var(--sp3); padding-right: var(--sp2); }
  .theme-toggle { padding: 0 var(--sp3); }
  .theme-toggle > span:last-child { font-size: var(--fs-sm); }
}


.site-footer {
  margin-top: var(--sp6);
  padding: var(--sp8) 0 var(--sp6);
  background: var(--ink-900);
  color: var(--dim-on-dark);
  font-size: var(--fs-sm);
}

/* A dark band or the quiet last section runs straight into the footer: no ground between them. */
main:has(> :is(.cta-band, .section-dark, .section-quiet, .section-band):last-child) ~ .site-footer {
  margin-top: 0;
}

.site-footer a {
  color: var(--dim-on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--on-dark);
  text-decoration: underline;
}

.site-footerCols {
  display: grid;
  gap: var(--sp5) var(--sp6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: var(--sp6);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-footerColTitle {
  margin: 0 0 var(--sp2);
  color: var(--on-dark);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

.site-footerCol ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footerCol a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp2);
  min-height: 32px;
}

.site-footerGrid {
  display: grid;
  gap: var(--sp6);
  padding-top: var(--sp6);
}

@media (min-width: 1024px) {
  .site-footerGrid {
    grid-template-columns: 1.4fr 1fr;
  }
}

.site-footerBrandImg {
  display: block;
  height: 24px;
  width: auto;
  margin-bottom: var(--sp3);
}

.site-footerCompany {
  margin: 0;
}

.site-footerCompanyLine {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp2);
}

.site-footerCompany dt {
  color: var(--faint-on-dark);
}

.site-footerCompany dd {
  margin: 0;
}

.site-footerLinks {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--sp2) var(--sp5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footerLinks a {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-ctl);
}

.site-footerLinks .site-footerStrong a {
  font-weight: 700;
  color: var(--on-dark);
}

.site-footerCopy {
  margin: var(--sp5) 0 0;
  color: var(--faint-on-dark);
}

.breadcrumb {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  margin-block: 0;
  padding-block: var(--sp2);
  list-style: none;
}

.breadcrumb-item {
  color: var(--text-dim);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding-inline: var(--sp2);
  color: var(--text-faint);
}

.site-brandImg-light {
  display: var(--logo-light);
}

.site-brandImg-dark {
  display: var(--logo-dark);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggleIcon {
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
}

.theme-toggle[aria-pressed="true"] .theme-toggleIcon {
  background: var(--text-primary);
}

@media (min-width: 1024px) {
  .theme-toggle {
    order: 3;
  }
}