/* Shared site header. Colours come from theme.css. */

:root {
  --header-height: 64px;
  --header-max-width: 1120px;
  --header-padding: 24px;
  --header-link-gap: 26px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  width: min(var(--header-max-width), calc(100% - 48px));
  min-height: var(--header-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}

.site-brand:hover {
  color: var(--text);
  text-decoration: none;
}

.site-brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.site-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-link-gap);
  margin-left: auto;
  min-width: 0;
}

.site-nav-link {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}

.site-nav-link:hover {
  color: var(--text);
}

.site-nav-button {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 9px 18px;
  text-decoration: none;
  transition: transform .12s, background .15s, border-color .15s;
  white-space: nowrap;
}

.site-nav-button--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.site-nav-button--ghost:hover {
  border-color: var(--muted);
  color: var(--text);
}

.site-nav-button--primary {
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
}

.site-nav-button--primary:hover {
  background: var(--action-hover);
  color: var(--on-action);
  transform: translateY(-1px);
}

.site-nav-button--primary:active {
  background: var(--action-active);
  color: var(--on-action);
  transform: translateY(0);
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Light / Dark control ---------- */

/* The control needs JavaScript, so it stays hidden until header.js marks
   <html> with .theme-js (before first paint, so nothing shifts). */
.theme-switch,
.nav-menu-theme {
  display: none;
}

.theme-js .theme-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.theme-option svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.theme-option:hover {
  color: var(--text);
}

.theme-option[aria-pressed="true"] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--field-line);
  color: var(--text);
}

.site-header .theme-option:focus-visible {
  outline-offset: 2px;
}

/* ---------- mobile menu (880 px and below) ---------- */

.nav-menu {
  display: none;
  position: static;
}

.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: transparent;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary:hover {
  border-color: var(--muted);
}

.nav-menu-icon {
  width: 16px;
  height: 12px;
  position: relative;
}

.nav-menu-icon::before,
.nav-menu-icon::after,
.nav-menu-icon span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-menu-icon::before {
  top: 0;
}

.nav-menu-icon span {
  top: 5px;
}

.nav-menu-icon::after {
  bottom: 0;
}

.nav-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Never taller than the space below the sticky header, and scrollable, so
     every item stays reachable in short (landscape) viewports. header.js
     tightens this to the measured space when the menu opens. */
  box-sizing: border-box;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--header-padding) 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px var(--shadow-strong);
}

.nav-menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.theme-js .nav-menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 14px;
}

.nav-menu-theme-label {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.nav-menu-theme .theme-option {
  min-height: 42px;
  padding: 0 16px;
  font-size: 15px;
}

@media (max-width: 1180px) {
  /* Keep the bar on one line between the mobile breakpoint and full width;
     the labels stay available to assistive technology. */
  .site-nav-links > .theme-switch .theme-option {
    padding: 0 9px;
  }

  .site-nav-links > .theme-switch .theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 880px) {
  .site-header-inner {
    gap: 10px;
  }

  .site-nav-links {
    gap: 12px;
  }

  .site-nav-link {
    display: none;
  }

  .theme-js .site-nav-links > .theme-switch {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  .site-nav-button--ghost {
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
  }

  .site-nav-button--ghost:hover {
    border: 0;
    color: var(--text);
  }

  .site-nav-button--primary {
    padding: 8px 13px;
    font-size: 13.5px;
  }
}

@media (max-width: 520px) {
  :root {
    --header-padding: 18px;
  }

  .site-header-inner {
    width: min(100% - 36px, var(--header-max-width));
  }
}

@media (max-width: 480px) {
  /* Sign in moves into the menu so the bar fits at 360 px. */
  .site-nav-button--ghost {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header * {
    animation: none !important;
    transition: none !important;
  }
}