/* ==========================================================================
   TUOIL — site header
   Fixed wordmark and burger, floating over whatever the page starts with.
   Two tones: ink on light pages, white over media (--on-media).
   ========================================================================== */

.c-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  pointer-events: none; /* over the hero the header is only its two controls */
  transition: background-color var(--dur-base) var(--ease-out);
}

/* Inner pages open on cream, so at rest the header takes a quiet green plate
   to stand apart from the page. The home page keeps floating over its video.
   Declared before the scrolled and menu-open states so both still win. */
.c-header:not(.c-header--on-media) { background: var(--c-surface-sage); }

/* Past the first screen the header takes a plate of its own. Floating white
   type over arbitrary page content would collide with it sooner or later. */
.c-header.is-solid {
  pointer-events: auto;
  background: rgba(31, 42, 19, 0.94);
  backdrop-filter: blur(10px);
}

.c-header.is-solid .logo,
.c-header.is-solid .c-burger { color: var(--c-on-dark); }

.c-header.is-solid .logo,
.c-header.is-solid .c-burger__box { filter: none; }

/* With the panel open the burger sits on the panel itself; a bar behind it
   would cut across the page. */
.c-header.is-menu-open {
  background: transparent;
  backdrop-filter: none;
}

.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--container-pad);
  transition: padding-block var(--dur-base) var(--ease-out);
}

.c-header.is-solid .c-header__inner { padding-block: var(--sp-2); }

.c-header__inner > * { pointer-events: auto; }

/* --- Wordmark ------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--c-ink);
}

.logo__word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  /* the tracking adds a trailing gap; pull the optical edge back */
  margin-right: calc(var(--ls-wider) * -1);
  line-height: 1;
}

/* Uploaded logo: letters drawn in currentColor follow the header tone,
   the leaf keeps its own green. */
.logo__svg,
.logo__img {
  display: block;
  height: 32px;
  width: auto;
}

.logo__svg svg {
  display: block;
  height: 100%;
  width: auto;
}

/* --- Burger ---------------------------------------------------------------- */
.c-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-right: -12px; /* optical alignment with the container edge */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

.c-burger__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 14px;
}

.c-burger__line {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}

.c-burger__line:nth-child(2) { width: 70%; }
.c-burger:hover .c-burger__line:nth-child(2) { width: 100%; }

/* --- Tone over media ------------------------------------------------------- */
.c-header--on-media .logo,
.c-header--on-media .c-burger {
  color: var(--c-on-dark);
}

.c-header--on-media .logo,
.c-header--on-media .c-burger__box {
  /* keeps both readable over a bright frame of the video */
  filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.45));
}

@media (max-width: 768px) {
  .c-header__inner { padding-block: var(--sp-3); }
  .logo__word { font-size: 1.25rem; }
  .logo__svg,
  .logo__img { height: 26px; }
}