/* ============================================================
   NR THEME — SITE HEADER
   Sticky 3-column header (brand · nav · availability), two states:
     - default (interior pages): solid paper, dark text, hairline
     - .nr-site-header--over-hero (front page): transparent, light text
   Transparent at top; .is-scrolled (paper fill + drop shadow) once scrolled,
   plus a 2px reading-progress bar — both driven by assets/js/nr-header.js.
   Mobile: collapses behind .nr-nav-toggle.
   Tokens come from nr-type.css; --gutter/--ease-out fall back inline
   (they're only defined in nr-landing.css, which is front-page-only).
   ============================================================ */

.nr-site-header {
  position: sticky;
  top: 0;
  z-index: 900;                       /* above all page content, below the WP admin bar (99999) */
  background: transparent;            /* default before scroll: transparent */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Menu canvas — only ever shown behind the open mobile menu (rules in the
   max-width:760px block). Hard-hidden everywhere else so the empty <canvas>
   never takes layout on desktop / interior pages. */
.nr-menu__canvas { display: none; }

/* Offset below the WordPress admin bar when logged in (it's fixed over the top). */
.admin-bar .nr-site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .nr-site-header { top: 46px; }
}

/* On scroll: fill with the site background + a subtle drop shadow
   (mirrors the live site's av_minimal_header_shadow). Toggled by nr-header.js. */
.nr-site-header.is-scrolled {
  background: var(--colour-paper);
  box-shadow: 0 1px 2px rgba(14, 13, 11, 0.04), 0 8px 24px rgba(14, 13, 11, 0.07);
}

.nr-site-header__inner {
  /* Full-width with the same gutter as the hero/landing content, so the brand
     aligns to the left content edge and availability to the right edge. */
  padding: clamp(14px, 2vw, 22px) var(--gutter, clamp(20px, 4vw, 64px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* brand | nav (centred) | availability */
  align-items: center;
  gap: 1.5rem;
}

/* Brand — Fraunces display */
.nr-site-header__brand {
  justify-self: start;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--colour-ink);
  text-decoration: none;
}

/* Primary nav (wp_nav_menu <ul class="nr-site-nav">) */
.nr-site-nav {
  justify-self: center;
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nr-site-nav li { margin: 0; padding: 0; }

.nr-site-nav a {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.694rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-mid);
  text-decoration: none;
  /* Animated underline (same technique as .nr-link): grows from the left on hover. */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 3px;
  transition: color 0.3s ease, background-size 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nr-site-nav a:hover,
.nr-site-nav a:focus-visible {
  color: var(--colour-ink);
  background-size: 100% 1px;
}

/* Availability indicator — pulsing dot + label.
   Dot/ring use currentColor so they adapt to each header state. */
.nr-avail--header {
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colour-mid);
  white-space: nowrap;
}
.nr-avail__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.nr-avail__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transform: translate(-50%, -50%);
  animation: nr-avail-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes nr-avail-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0;    }
}

/* Reading progress bar — 1px, fills left→right with scroll. nr-header.js sets
   --nr-progress (0–1) on the header; the bar scaleX's to match. */
.nr-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
}
.nr-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--colour-ink);
  transform: scaleX(var(--nr-progress, 0));
  transform-origin: left center;
}

/* ------------------------------------------------------------
   Mobile menu toggle (hidden on desktop)
   ------------------------------------------------------------ */
.nr-nav-toggle {
  display: none;
  justify-self: end;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--colour-ink);
  cursor: pointer;
}
.nr-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ------------------------------------------------------------
   FRONT-PAGE STATE — transparent overlay over the hero.
   Text stays the default dark (ink/mid) so the menu is visible over the
   light hero at the top with a transparent background; the .is-scrolled
   paper fill + shadow then sits behind that same dark text on scroll.
   ------------------------------------------------------------ */
.nr-site-header--over-hero {
  /* Front page: overlay the hero (out of flow) so the hero starts at the very
     top — its canvas lines sit high, matching the standalone landing — and page
     content scrolls beneath the header. (Interior pages stay sticky, in-flow.) */
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
}

/* ------------------------------------------------------------
   MOBILE — collapse nav + availability behind the toggle
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .nr-site-header__inner {
    grid-template-columns: 1fr auto;   /* brand | toggle */
    row-gap: 0;
  }
  .nr-site-header__brand { grid-column: 1; }
  .nr-nav-toggle { display: inline-flex; grid-column: 2; }

  .nr-site-nav,
  .nr-avail--header {
    grid-column: 1 / -1;
    justify-self: start;
    display: none;
  }

  /* Open-menu layers (within the header's stacking context):
       z0 — dark backdrop (::before, full-screen ink)
       z1 — menu canvas (light line-field, painted over the ink)
       z2 — nav links + availability + brand/toggle (legible on top)
     The dark fill moves OFF the nav onto a dedicated backdrop so the canvas can
     sit between the dark field and the links. */
  .nr-site-header.is-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    background: var(--colour-ink);
  }

  /* Menu canvas — full-screen line-field above the dark backdrop, below links.
     Display:none until the menu opens. Non-interactive. */
  .nr-site-header.is-open .nr-menu__canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 1;
    pointer-events: none;
  }

  /* Open menu — full-screen dark overlay with centred display-type links.
     The nav sits at z-index 2 inside the header's stacking context, above the
     backdrop and canvas. The brand shares that level (it only needs to be
     visible), while the toggle is lifted to 3 further down so the close (X)
     stays clickable rather than being covered by the fixed overlay. */
  .nr-site-header.is-open .nr-site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;   /* fill the dynamic viewport on mobile */
    z-index: 2;       /* above the dark backdrop (::before, z0) + canvas (z1) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 2.75rem);
    margin: 0;
    padding: 0;
    background: transparent;   /* dark fill lives on .is-open::before so the canvas shows through */
  }
  .nr-site-header.is-open .nr-site-nav a {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: clamp(1.9rem, 8vw, 2.75rem);
    font-weight: 300;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--colour-paper);
    background-image: none;   /* drop the tiny uppercase underline-grow link style */
    padding-bottom: 0;
  }
  .nr-site-header.is-open .nr-site-nav a:hover,
  .nr-site-header.is-open .nr-site-nav a:focus-visible { color: var(--colour-mid); }

  /* Availability pinned near the foot of the overlay */
  .nr-site-header.is-open .nr-avail--header {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);   /* centre the shrink-wrapped indicator */
    bottom: clamp(2rem, 6vh, 3.5rem);
    z-index: 2;       /* above the dark backdrop + canvas */
    display: inline-flex;
    color: var(--colour-paper);
  }

  /* Header bar goes transparent so the dark overlay reads as one full screen;
     brand + toggle ride on top in paper. */
  /* The scroll lock (html.nr-menu-open { overflow: hidden }) takes away the
     scrolling context that position: sticky relies on, so a sticky header would
     drop back to the top of the document and carry the brand and close button
     off-screen whenever the menu is opened below the fold. Pin it while open. */
  .nr-site-header.is-open {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .nr-site-header.is-open .nr-site-header__brand,
  .nr-site-header.is-open .nr-nav-toggle {
    position: relative;
    z-index: 2;
    color: var(--colour-paper);
  }
  /* The open nav is also z-index 2 and, being fixed, paints last, so it would
     swallow taps on the close button. Lift the toggle one level clear of it. */
  .nr-site-header.is-open .nr-nav-toggle {
    z-index: 3;
  }

  /* Hamburger → X when open */
  .nr-site-header.is-open .nr-nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nr-site-header.is-open .nr-nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nr-site-header.is-open .nr-nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* Lock page scroll behind the open full-screen menu (class set by nr-header.js) */
html.nr-menu-open,
html.nr-menu-open body { overflow: hidden; background: var(--colour-ink); }

/* ------------------------------------------------------------
   Reduced motion — no pulse, no transitions
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .nr-avail__dot::after { animation: none; }
  .nr-site-header,
  .nr-site-nav a,
  .nr-nav-toggle__bar { transition: none; }
}