/* Newtack site header. Generated by design/components/header/build_header.py.
   Do not edit; edit the generator. */

[data-nt-header-sentinel] { height: 1px; margin-bottom: -1px; }

.nt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nt-surface-page);
  border-block-end: var(--nt-p-border-hairline) solid transparent;
  transition: padding var(--nt-p-motion-duration-base) var(--nt-p-motion-easing-standard),
              border-color var(--nt-p-motion-duration-base) var(--nt-p-motion-easing-standard),
              box-shadow var(--nt-p-motion-duration-base) var(--nt-p-motion-easing-standard);
  padding-block: var(--nt-p-space-6);
}

/* Pinned: tighter, with a rule so content scrolling underneath has an edge. */
.nt-header[data-pinned="true"] {
  padding-block: var(--nt-p-space-3);
  border-block-end-color: var(--nt-rule-hairline);
}

.nt-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nt-p-space-4);
}

.nt-header__brand { display: flex; align-items: center; min-width: 0; }
.nt-header__brand a { display: block; line-height: 0; }

/* The lockup shrinks and stays a lockup. It never becomes the mark on scroll,
   because brand/README.md restricts the mark to contexts where the word is
   already present and a scrolled header is not reliably one. */
.nt-header__lockup {
  display: block;
  width: min(19rem, 60vw);
  height: auto;
  transition: width var(--nt-p-motion-duration-base) var(--nt-p-motion-easing-standard);
}
.nt-header[data-pinned="true"] .nt-header__lockup { width: min(12rem, 46vw); }

.nt-header__mark { display: none; width: 2rem; height: auto; }

/* Below the lockup's documented 150px minimum the mark takes over at
   its own 20px minimum. The brand rules set this breakpoint. */
@media (max-width: 26rem) {
  .nt-header[data-pinned="true"] .nt-header__lockup { display: none; }
  .nt-header[data-pinned="true"] .nt-header__mark { display: block; }
}

.nt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--nt-p-space-2);
  flex: none;
}

/* Navigation slot. Empty today by design: there is nothing to navigate to, and
   a menu button that opens an empty drawer is worse than no button. Adding
   items later is markup, not restructuring. */
.nt-header__nav:empty { display: none; }
.nt-header__nav { display: flex; align-items: center; gap: var(--nt-p-space-4); }
.nt-header__menu-button { display: none; }
@media (max-width: 48rem) {
  .nt-header__nav--wide { display: none; }
  .nt-header__nav:not(:empty) ~ .nt-header__menu-button { display: inline-flex; }
}

.nt-header .nt-theme-slot { position: static; inset: auto; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .nt-header, .nt-header__lockup { transition: none; }
}

@media print {
  .nt-header { position: static; border-block-end: none; }
  .nt-header__actions { display: none; }
}