/* site-header.css — the one global header, shared by /science, /blog and
   /case-studies.
   ──────────────────────────────────────────────────────────────────────────
   Why this file exists. Those three sections each grew their own header, and by
   September 2026 there were three different navs, three link sets, two CTA
   labels and no logo on any of them. A visitor moving from the landing page to
   the methodology had to relearn the site. One stylesheet and one markup block
   is the fix; see includes/site_header.php for the markup.

   The rules this follows, all from docs/DESIGN.md:
     - Logo file follows the ground. These headers sit on near-white, so it is
       tellstone-logo.svg (Glow stones, Ink wordmark). Section 4.
     - Header lockup 34px tall, 28px below 576px. Section 4, Sizing.
     - Geist for everything that is not display type. Section 2.
     - Colour comes from brand-tokens.css and nowhere else. Section 9.

   Load AFTER the page's own stylesheet and BEFORE brand-tokens.css, which every
   page loads last. */

.ts-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--ts-cloud-rgb), 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Only once it has something to separate itself from. Set by the tiny scroll
   listener in the markup. */
.ts-header.is-stuck {
  border-bottom-color: var(--ts-line);
  box-shadow: 0 1px 3px rgba(var(--ts-slate-rgb), 0.06);
}

.ts-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.75rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* The lockup is roughly 5.2:1, so 34px tall is about 176px wide. Width is left
   to the SVG so it can never be squashed. */
.ts-header-logo { display: flex; align-items: center; margin-right: auto; flex: 0 0 auto; }
.ts-header-logo img { height: 34px; width: auto; display: block; }

.ts-header-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.ts-header-nav a {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ts-slate);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.ts-header-nav a:hover { color: var(--ts-glow); }
/* The section you are in. Named rather than merely coloured, because colour
   alone is not an accessible way to say "you are here". */
.ts-header-nav a[aria-current="page"] { color: var(--ts-glow); font-weight: 600; }

.ts-header-nav a.ts-header-signin { color: var(--ts-muted-dark); }
.ts-header-nav a.ts-header-signin:hover { color: var(--ts-glow); }

/* One solid action, same label and same colour as the landing page. */
.ts-header-cta {
  background: var(--ts-glow);
  color: var(--ts-cloud) !important;
  padding: 9px 22px;
  border-radius: 50px;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(var(--ts-slate-rgb), 0.08);
  transition: background-color .2s ease, transform .15s ease;
}
.ts-header-cta:hover {
  background: var(--ts-glow-dark);
  color: var(--ts-cloud) !important;
  transform: translateY(-1px);
}

/* Page links float in the middle, Sign In and Start Free sit on the right. */
@media (min-width: 961px) {
  .ts-header-nav { flex: 1; }
  .ts-header-nav > a:first-child { margin-left: auto; }
  .ts-header-nav a.ts-header-signin { margin-left: auto; }
}

.ts-header-toggle {
  display: none;
  background: none;
  border: none;
  padding: 4px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ts-slate);
  cursor: pointer;
}

@media (max-width: 960px) {
  .ts-header-toggle { display: block; margin-left: auto; }
  .ts-header-logo { margin-right: 0; }
  .ts-header-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.4rem 1rem;
    background: var(--ts-cloud);
    border-bottom: 1px solid var(--ts-line);
  }
  .ts-header.is-open .ts-header-nav { display: flex; }
  .ts-header-nav a { padding: 0.7rem 0; }
  .ts-header-cta { text-align: center; margin-top: 0.5rem; }
}

@media (max-width: 576px) {
  .ts-header-logo img { height: 28px; }
  .ts-header-inner { padding: 0.65rem 1rem; }
}