/*
 * Header.module.css → the site chrome's header.
 *
 * Ported by scripts/port-css.mjs. Class names are prefixed to survive being
 * flattened out of CSS Modules; design tokens are rewritten to the custom
 * properties theme.json emits. Edit this file, not the original.
 */

.px-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--wp--custom--z--header);
  color: var(--wp--preset--color--bone);
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
    border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out),
    color var(--wp--custom--duration--base) var(--wp--custom--ease--out);
  border-bottom: 1px solid transparent;
}

/* Scrim behind the transparent header. The hero image runs underneath it and
   can be bright anywhere along its width, so the nav needs its own contrast
   floor rather than relying on whatever happens to be behind it. */
.px-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgb(11 11 11 / 55%), rgb(11 11 11 / 0%));
  opacity: 1;
  transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
  pointer-events: none;
}

/* Once scrolled, the solid background takes over and the scrim is redundant. */
.px-header[data-scrolled='true']::before {
  opacity: 0;
}

/* On a light hero the type is dark, so a dark scrim would fight it. */
.px-header[data-tone='light']::before {
  background: linear-gradient(to bottom, rgb(242 240 236 / 65%), rgb(242 240 236 / 0%));
}

/* Condensed state once the page has scrolled past the hero. */
.px-header[data-scrolled='true'] {
  background: rgb(11 11 11 / 82%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

/* Pages that open on a light surface need dark header type at the top. */
.px-header[data-tone='light'][data-scrolled='false'] {
  color: var(--wp--preset--color--ink);
}

.px-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--lg);
  width: 100%;
  max-width: var(--wp--custom--container);
  margin-inline: auto;
  padding: 0 var(--wp--custom--gutter);
  height: var(--wp--custom--header-height);
}

/* ---- Logo ---- */

.px-header__logo {
  display: grid;
  gap: 0.1rem;
  line-height: 1;
  flex: none;
}

.px-header__logo-mark {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.px-header__logo-word {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---- Desktop nav ---- */

.px-header__nav {
  display: none;
}

@media (min-width: 1000px) {
  .px-header__nav {
    display: block;
  }
}

/* wp_nav_menu() wraps the links in a list, so the row lives on the list and
   the <nav> only decides whether there is a row at all. */
.px-header__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.px-header__nav-link {
  position: relative;
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.5rem;
  opacity: 0.78;
  transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-header__nav-link:hover,
.px-header__nav-link[data-active='true'] {
  opacity: 1;
}

.px-header__nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.px-header__nav-link:hover::after,
.px-header__nav-link[data-active='true']::after {
  transform: scaleX(1);
}

/* ---- Right cluster ---- */

.px-header__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--lg);
  flex: none;
}

/* ---- Book CTA ----
   The only action in the header, and the one element allowed to be solid.
   Everything else up here is type on a scrim, so filling this shape is what
   makes it read as a button rather than a fourth nav link. */

.px-header__book-cta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--wp--preset--color--bone);
  color: var(--wp--preset--color--ink);
  transition:
    background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
    color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
    transform var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

@media (min-width: 600px) {
  .px-header__book-cta {
    padding: 0.7rem 1.35rem;
  }
}

.px-header__book-cta:hover {
  background: var(--wp--preset--color--sage);
  transform: translateY(-1px);
}

.px-header__book-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* On a light hero the header type is dark, so the filled pill has to invert
   with it or it disappears into the background it is sitting on. */
.px-header[data-tone='light'][data-scrolled='false'] .px-header__book-cta {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--bone);
}

.px-header[data-tone='light'][data-scrolled='false'] .px-header__book-cta:hover {
  background: var(--wp--preset--color--sage-deep);
}

@media (prefers-reduced-motion: reduce) {
  .px-header__book-cta:hover {
    transform: none;
  }
}

/* ---- Menu toggle ---- */

.px-header__toggle {
  display: grid;
  gap: 5px;
  width: 30px;
  padding: 8px 0;
  cursor: pointer;
}

.px-header__toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--wp--custom--duration--base) var(--wp--custom--ease--out),
    opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
  transform-origin: center;
}

.px-header__toggle[aria-expanded='true'] .px-header__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.px-header__toggle[aria-expanded='true'] .px-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.px-header__toggle[aria-expanded='true'] .px-header__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Language switch ----
 * Not from a module: the original site was English-only and had nothing to
 * switch. Built from the nav's own type so it reads as part of the same row
 * rather than as a control bolted onto it.
 */

.px-lang {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.px-lang__option {
  opacity: 0.6;
  padding-block: 0.5rem;
  transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-lang__option:hover {
  opacity: 1;
}

/* The current language is a label, not an invitation — it stays legible and
   stops reacting to the pointer. */
.px-lang__option[data-active='true'] {
  opacity: 1;
  cursor: default;
}

.px-lang__sep {
  opacity: 0.3;
}

/* Below the breakpoint where the nav appears there is no room beside the CTA,
   and the overlay carries its own copy. */
@media (max-width: 599px) {
  .px-header__actions .px-lang {
    display: none;
  }
}

.px-lang--menu {
  font-size: var(--wp--preset--font-size--sm);
  gap: 0.75em;
}