/* ==========================================================================
   nav.css — .wf-nav sticky header (PLAN §3.4, §6.2)
   Sticky, condenses on scroll (nav.js toggles .is-condensed). Mobile hamburger
   toggles .wf-nav__menu; RSVP CTA + language switcher stay visible outside the
   collapsed menu.
   ========================================================================== */

/* The banner <header> wraps only the nav, so it's exactly nav-height tall. That
   made position:sticky useless — the nav's containing block (the header) scrolled
   out of view immediately, taking the nav with it. display:contents removes the
   header's box so the nav's containing block becomes <body> (full page height) and
   sticky actually sticks. Modern browsers keep the banner landmark/role. */
body > header[role="banner"] {
  display: contents;
}

.wf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--c-parchment) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-block-end: 1px solid var(--c-parchment-line);
  /* Smooth slide for the auto-hide-on-scroll behaviour (nav.js toggles
     .wf-nav--hidden). The global reduced-motion guard neutralises the
     transition for users who ask for less motion. */
  transition: transform 0.3s ease;
}

/* Auto-hide: bar slid up out of view (scroll-down); nav.js removes this to
   reveal it again on scroll-up / near the top / while the menu is open. */
.wf-nav--hidden {
  transform: translateY(-100%);
}

.wf-nav__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--wf-header-h);
  transition: min-height 0.2s ease;
}

/* Condensed state set by nav.js after the page scrolls. */
.wf-nav.is-condensed .wf-nav__bar {
  min-height: var(--wf-header-h-condensed);
}
.wf-nav.is-condensed {
  box-shadow: var(--shadow-soft);
}

/* Brand lockup — refined serif "F & A" monogram (Cormorant), echoing the hero
   names' serif feel. NOT script (the couple disliked the swashy display face). */
.wf-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                /* BRIEF §8: >=44px tap target */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: 0.06em;
  color: var(--c-burgundy);
  text-decoration: none;
  line-height: 1.3;
  margin-inline-end: auto;        /* push the rest to the right */
  white-space: nowrap;
}

/* Brand ampersand in serif italic to match the hero "&". */
.wf-nav__amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0;
  vertical-align: 0.02em;
}

/* Hamburger toggle — visible at ALL widths (menu is a dropdown everywhere). */
.wf-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;       /* tap target */
  color: var(--c-sepia);
  border-radius: var(--radius-sm);
}
.wf-nav__toggle-bars,
.wf-nav__toggle-bars::before,
.wf-nav__toggle-bars::after {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wf-nav__toggle-bars::before { position: absolute; top: -7px; left: 0; }
.wf-nav__toggle-bars::after  { position: absolute; top:  7px; left: 0; }
/* Animate to an X when open. */
.wf-nav__toggle[aria-expanded="true"] .wf-nav__toggle-bars { background: transparent; }
.wf-nav__toggle[aria-expanded="true"] .wf-nav__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.wf-nav__toggle[aria-expanded="true"] .wf-nav__toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* Collapsible menu (anchor links). */
.wf-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.wf-nav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  font-size: var(--step-0);
  color: var(--c-sepia);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.wf-nav__link:hover,
.wf-nav__link[aria-current="true"] {
  color: var(--c-terracotta-dk);
  background-color: var(--c-parchment-deep);
}

/* Right-hand cluster: CTA + language switcher — always visible. */
.wf-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-inline-start: auto;
}

/* --- Dropdown panel at ALL widths ----------------------------------------
   The toggle (☰) opens/closes this panel on every screen size; nav.js manages
   [hidden]. On wide screens the panel anchors to the right edge instead of
   spanning full width, so it reads as a tidy menu rather than a full-width bar. */
.wf-nav__menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--c-parchment);
  border-block-end: 1px solid var(--c-parchment-line);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 48rem) {
  .wf-nav__menu {
    inset-inline: auto 0;             /* anchor to the right edge */
    inline-size: min(20rem, 90vw);
    border: 1px solid var(--c-parchment-line);
    border-block-start: 0;
    border-end-start-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
  }
}

/* --- Mobile compaction: brand row + a dedicated actions row ------------------
   Phones: brand ("F & A") alone on row 1, the CTA/lang/☰ cluster on its own
   row 2, right-aligned (flex-basis: 100% forces the split unconditionally,
   rather than relying on flex-wrap to decide per translation string length —
   simpler to reason about and verify than a fit calculation across 3
   languages × many phone widths). .wf-nav__bar's flex-wrap above is what lets
   .wf-nav__actions actually drop to that second line. */
@media (max-width: 40rem) {
  .wf-nav__bar { row-gap: var(--space-2xs); }
  .wf-nav__actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-inline-start: 0;
    gap: var(--space-2xs);
  }
  .wf-nav__actions .wf-btn {
    /* height (not just min-height/padding) pins this to exactly 44px even if
       a slow-loading web font's fallback line-height would otherwise grow
       it taller than the lang chips/toggle next to it, which is what made
       it look oversized and misaligned against them on a real phone. */
    height: 44px;
    padding-block: 0;
    padding-inline: var(--space-sm);
    font-size: var(--step--1);
    line-height: 1;
  }
  .wf-nav__brand { font-size: var(--step-1); letter-spacing: 0.02em; margin-inline-end: 0; }
}