/* Header · Firebird kit · components/chrome/header
   The fixed site header: Menu on the left, the wordmark in the centre, Contact with its glass dropdown on
   the right. Transparent, mono and quiet. Each part takes the theme of what is beneath it (header.js sets
   data-theme on .header__slot) and its colours ease over. It sits above the menu overlay. Tokens only. */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--z-overlay) + 1); /* above the menu overlay, which keeps it usable while open */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-page);
  pointer-events: none; /* the bar is transparent: only its controls take clicks */
}

.header__slot {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-standard);
}
/* Theme changes through setTheme() (the menu's reveal, frame by frame) turn quickly, with the circle's edge. */
.header.is-tracking .header__slot {
  transition-duration: calc(var(--dur-fast) * 0.5);
}
.header__slot--centre {
  justify-content: center;
}
.header__slot--end {
  position: relative;
  justify-content: flex-end;
  gap: var(--space-6);
}

.header__menu,
.header__link,
.header__contact,
.header__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.header__menu:focus-visible,
.header__link:focus-visible,
.header__contact:focus-visible,
.header__wordmark:focus-visible {
  outline-offset: 6px;
}

/* A gold underline grows from the left on hover, as in the frame's navigation. */
.header__menu-label,
.header__link-label,
.header__contact-label,
.header__wordmark-text {
  position: relative;
}
.header__menu-label::after,
.header__link-label::after,
.header__contact-label::after,
.header__wordmark-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.header__menu:hover .header__menu-label::after,
.header__link:hover .header__link-label::after,
.header__contact:hover .header__contact-label::after,
.header__contact[aria-expanded='true'] .header__contact-label::after,
.header__wordmark:hover .header__wordmark-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Menu: two hairlines, the lower one shorter; open, they cross into a close mark. */
.header__menu-icon {
  position: relative;
  width: 18px;
  height: 7px;
}
.header__menu-icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-slow) var(--ease-out-expo), width var(--dur-slow) var(--ease-out-expo);
}
.header__menu-icon i:first-child {
  top: 0;
}
.header__menu-icon i:last-child {
  bottom: 0;
  width: 62%;
}
.header__menu:hover .header__menu-icon i:last-child {
  width: 100%;
}
.header.is-menu-open .header__menu-icon i:first-child {
  transform: translateY(2.75px) rotate(45deg);
}
.header.is-menu-open .header__menu-icon i:last-child {
  width: 100%;
  transform: translateY(-2.75px) rotate(-45deg);
}

.header__caret {
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.header__contact[aria-expanded='true'] .header__caret {
  transform: rotate(180deg);
}

/* ── Contact dropdown ── */

.header__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(360px, calc(100vw - 2 * var(--space-page)));
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--ink);
  pointer-events: auto;
  transform-origin: top right;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  filter: blur(4px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    filter var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast),
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.header__slot--end.is-open .header__dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity calc(var(--dur-base) * 0.75) var(--ease-out-expo),
    transform calc(var(--dur-base) * 0.75) var(--ease-out-expo),
    filter calc(var(--dur-base) * 0.75) var(--ease-out-expo),
    visibility 0s,
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.header__topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--space-4);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.header__topic + .header__topic {
  margin-top: 2px;
}
.header__topic-label {
  font-family: var(--font-display);
  font-size: calc(var(--text-body) * 1.25); /* 20 px */
  line-height: 1.2;
  letter-spacing: var(--tracking-title);
  transition: color var(--dur-base) var(--ease-standard);
}
.header__topic-hint {
  grid-column: 1;
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--ink-muted);
  transition: color var(--dur-base) var(--ease-standard);
}
.header__topic .glyph {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out-expo);
}
.header__topic:hover,
.header__topic:focus-visible {
  background: var(--accent-soft);
}
.header__topic:hover .header__topic-label,
.header__topic:focus-visible .header__topic-label {
  color: var(--accent-strong);
  font-style: italic;
}
.header__topic:hover .glyph,
.header__topic:focus-visible .glyph {
  opacity: 1;
  transform: none;
}
.header__topic:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.header__slot--end.is-open .header__topic {
  animation: header-topic-in var(--dur-slow) var(--ease-out-expo) both;
}
.header__slot--end.is-open .header__topic:nth-child(2) {
  animation-delay: 40ms;
}
.header__slot--end.is-open .header__topic:nth-child(3) {
  animation-delay: 80ms;
}
@keyframes header-topic-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* ── Phones: the same three parts; the wordmark shortens to "Firebird" ── */

@media (max-width: 599.98px) {
  .header {
    gap: var(--space-3);
  }
  .header__wordmark-rest {
    display: none;
  }
  .header__slot--end {
    gap: var(--space-4);
  }
  /* With extra links (Jobs) there is no room for the wordmark between Menu and Contact: it steps aside. */
  .header--links {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .header--links .header__slot--centre {
    display: none;
  }
}

/* Reduced motion: the dropdown simply appears, the marker swaps without turning, colours switch at once.
   base.css shortens transitions to 0.01 ms, but on nested elements those still chain frame by frame (a
   deep label would trail its slot by a few frames), so the header turns them off outright. */
@media (prefers-reduced-motion: reduce) {
  .header *,
  .header *::before,
  .header *::after {
    transition: none !important;
  }
}