/* ==========================================================================
   site-nav.css — the single site header, shared by every page.

   The home page and the case study pages are built on different foundations
   (hand-written CSS vs. captured Tailwind markup), so the header used to be
   implemented twice and drifted: the case study nav sat on 16px mobile
   gutters against the home page's 24px, which shifted the logo and the three
   icon links by 8px on every navigation.

   This file is the one source of truth. It is deliberately self-contained —
   every token has a literal fallback and every property the two resets
   disagree on (img height, svg display, button chrome) is stated outright —
   so it renders identically whether or not style.css or Tailwind preflight
   is also on the page. Both sides use the same markup; see index.html.
   ========================================================================== */

.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-height, 80px);
  background: var(--color-white, #ffffff);
  z-index: 50;
  transition: box-shadow 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              background 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.site-nav.is-scrolled { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05); }

/* Gutters are baked in rather than borrowed from .container so the case
   study pages, which have no .container, land on the same 24/32px. */
.nav-inner {
  width: 100%;
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding-inline: 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 768px) { .nav-inner { padding-inline: 2rem; } }

/* Rendered as a <button> on the home page (scrolls to top) and an <a> on the
   case study pages (back to the case study list). Reset both to the same box. */
.logo-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-charcoal, #252525);
  display: inline-flex;
  align-items: center;
  transition: color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.logo-btn:hover { color: var(--color-accent, #6D8768); }
.logo-btn:focus-visible {
  outline: 2px solid var(--color-accent, #6D8768);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Explicit height beats Tailwind preflight's `img { height: auto }`. */
.logo-img { display: block; height: 48px; width: auto; max-width: 100%; }
@media (min-width: 768px) { .logo-img { height: 64px; } }

.nav-actions { display: flex; align-items: stretch; gap: 0.25rem; }
@media (min-width: 768px) { .nav-actions { gap: 0.5rem; } }

/* Nav links show the icon with a visible text label stacked beneath it, so
   the meaning is always readable, including on touch devices and for
   screen-magnifier users. The padding is an invisible hit zone (kept past the
   44px touch minimum); on hover the icon and label simply animate between
   charcoal and the sage accent, with no background pill. */
.icon-link {
  position: relative;
  color: var(--color-charcoal, #252525);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.375rem 0.5rem;
  text-decoration: none;
  transition: color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.icon-link svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.icon-link-label {
  font-family: var(--font-sans, "Montserrat", system-ui, sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: inherit;
}
.icon-link:hover,
.icon-link:focus-visible { color: var(--color-accent, #6D8768); }
/* Keyboard focus keeps a visible ring for accessibility; pointer hover
   does not (that's the :focus-visible contract). */
.icon-link:focus-visible {
  outline: 2px solid var(--color-accent, #6D8768);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .icon-link { padding: 0.5rem 0.75rem; gap: 0.3125rem; }
  .icon-link svg { width: 24px; height: 24px; }
  .icon-link-label { font-size: 0.75rem; }
}

/* ==========================================================================
   Custom cursor — shared by every page.

   Two parts: a dot that tracks the pointer exactly, and a ring that lerps
   after it, so the pointer reads as instrumented rather than glued on. It
   replaces the reticle that used to live in the flight section alone, which
   meant the cursor changed character halfway down the home page.

   Lives here rather than in style.css because this is the only stylesheet
   every page loads. Same rule as the rest of this file: every token carries
   a literal fallback, since the case study pages do not load style.css and
   would otherwise resolve these to nothing.

   Fine pointers only, and the script does not run under reduced motion, so
   the native cursor stays for anyone who asked for less movement.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor summary,
  html.has-custom-cursor input,
  html.has-custom-cursor select,
  html.has-custom-cursor textarea,
  html.has-custom-cursor [role="button"] { cursor: none; }
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Hidden until the first mousemove, otherwise both park at 0,0 and a stray
     ring sits in the top-left corner until the pointer is used. */
  opacity: 0;
}
html.cursor-ready .cursor-dot,
html.cursor-ready .cursor-ring { opacity: 1; }
html.cursor-out .cursor-dot,
html.cursor-out .cursor-ring { opacity: 0; }

.cursor-dot {
  width: 6px; height: 6px;
  background: var(--color-charcoal, #252525);
  transition: background-color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity 0.2s ease;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--color-charcoal, #252525);
  transition: width 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              height 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              border-color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              background-color 0.25s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
              opacity 0.2s ease;
}
/* Over anything clickable the ring swells and fills sage. The fill is
   translucent but the border stays solid — dropping the whole ring to 10%
   opacity, as the reference does, loses the edge exactly when the ring is
   largest and needs it most. rgba literal rather than color-mix so this
   holds up without style.css present; the value is --color-accent #6D8768. */
.cursor-ring.is-hovering {
  width: 60px; height: 60px;
  background-color: rgba(109, 135, 104, 0.18);
  border-color: var(--color-accent, #6D8768);
}

/* Charcoal sections would swallow a charcoal cursor whole, so over anything
   marked data-cursor="light" both parts flip to the warm white the type on
   those surfaces already uses, and the hover state moves to the lifted sage
   that the icons there use (--color-accent-on-dark #9DBE95). */
html.cursor-on-dark .cursor-dot { background: var(--color-warm, #f5f5f0); }
html.cursor-on-dark .cursor-ring { border-color: var(--color-warm, #f5f5f0); }
html.cursor-on-dark .cursor-ring.is-hovering {
  background-color: rgba(157, 190, 149, 0.22);
  border-color: var(--color-accent-on-dark, #9DBE95);
}