/* ============================================================================
   Steeplejack Robotics — shared chrome
   ----------------------------------------------------------------------------
   The header, footer and buttons, which appear on all three pages. Landing-page
   sections live in main.css; the document pages use doc.css. Anything added
   here shows up everywhere, so keep it to things that genuinely should.

   The header markup is duplicated into each page rather than templated, because
   the site is served as plain files with no build step. scripts/check.js
   compares the three copies and fails if they drift apart.
   ============================================================================ */

:root {
  --header-h: 4.75rem;
}

html {
  scroll-behavior: smooth;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.6rem var(--gutter);
  background: rgb(252 252 253 / 0.94);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(12px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast);
}

/* Headers without the static marker can still opt into a reveal transition.
   The current site marks every page static so navigation is available from the
   first viewport, including over the landing-page hero. */
.js .site-header:not([data-header-static]) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
}

.js .site-header[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* The brand lockup is set in live type rather than shipped as artwork, so it
   stays sharp and matches the hero. Only the mark is an image. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--navy);
  text-decoration: none;
}

.brand__mark {
  width: auto;
  height: clamp(1.9rem, 3.4vw, 2.5rem);
}

.brand__text {
  display: block;
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.82rem, 1.5vw, 1.02rem);
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.brand__sub {
  display: block;
  margin-top: 0.18em;
  color: var(--orange-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.5rem, 0.92vw, 0.62rem);
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2.25rem);
}

.site-nav a {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: 0.2rem;
  background: var(--orange);
  transition: width var(--dur-fast);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current='page']::after {
  width: 100%;
}

.site-nav a[aria-current='page'] {
  color: var(--orange-ink);
}

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  color: var(--navy);
  font: 700 0.75rem var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Buttons ------------------------------------------------------------- */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-l);
}

.button {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--navy);
  color: var(--navy);
  font: 700 0.75rem var(--font-display);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.button:hover {
  transform: translateY(-2px);
}

.button--primary {
  background: var(--navy);
  color: white;
}

.button--primary:hover {
  background: #0d315b;
}

.button--ghost:hover {
  background: var(--navy);
  color: white;
}

.button--light {
  border-color: white;
  color: white;
}

.button--light:hover {
  background: white;
  color: var(--navy);
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  min-height: 15rem;
  padding: var(--space-xl) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: var(--space-l);
  border-top: 5px solid var(--orange);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--navy);
  font: 800 0.9rem/1.05 var(--font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-brand img {
  width: 3.5rem;
  height: 4rem;
  object-fit: contain;
}

.site-footer > p {
  color: var(--ink-soft);
}

.site-footer > p:last-child {
  text-align: right;
}

.site-footer a {
  font-weight: 600;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0;
    cursor: pointer;
  }

  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    display: block;
    width: 1.4rem;
    height: 2px;
    background: currentColor;
    content: '';
    transition: transform var(--dur-fast);
  }

  .nav-toggle__icon {
    position: relative;
  }

  .nav-toggle__icon::before {
    position: absolute;
    transform: translateY(-6px);
  }

  .nav-toggle__icon::after {
    position: absolute;
    transform: translateY(6px);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon {
    background: transparent;
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon::before {
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] .nav-toggle__icon::after {
    transform: rotate(-45deg);
  }

  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 auto;
    padding: var(--space-m) var(--gutter) var(--space-l);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-m);
    flex-direction: column;
    align-items: flex-start;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
  }

  .site-nav[data-open] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .site-nav a {
    width: 100%;
    padding: 0.5rem 0;
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .site-header {
    gap: 1rem;
  }

  .brand {
    flex: 0 1 auto;
  }

  .nav-toggle {
    flex: 0 0 auto;
  }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer > p:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .button {
    forced-color-adjust: none;
  }
}

@media print {
  .site-header,
  .nav-toggle {
    display: none;
  }
}