/* ===========================================================================
   The tab row (002 FR-001 to FR-005, research R3 and R4).

   One link per page, in a single row, with NOTHING behind it. 001 gave the
   navigation a cream bar so it would stay legible while fixed over every kind
   of artwork; the couple asked for the bar to go, so the row now:

   - scrolls with the page (position: absolute, not fixed), so it only ever sits
     over its OWN page's first background, which is light on every page: pale
     sky on Home, pale garden on RSVP, pink watercolour on the FAQ;
   - sets its labels at WCAG large-text size (19 px, bold), in ink, so the 3:1
     large-text threshold applies and the gate measures it against the worst
     pixel behind every label at five widths;
   - has no menu, no button and no script. Three short labels fit on one line at
     320 px, so nothing collapses into a cream box (FR-005).

   Current page is indicated by a full-strength UNDERLINE RULE in the label's own
   colour, never by colour alone (FR-003, FR-117), and is set in the markup at
   build time. Every label is already at the heaviest weight the site ships
   (600, requested as 700 so it counts as bold large text), so weight cannot
   carry a second signal; the rule is the signal and hover shows a faint one.

   Legibility aids that are NOT a fill: a soft halo on the letters (the contrast
   gate strips it before measuring, so it can only help). If a page's artwork
   ever makes a label fail, the allowed fallbacks are in tasks T049, in order:
   move the row down onto calmer artwork, switch that page to light labels, then
   deepen the ink. The first two were measured against this hero and both made
   it worse, so the ink is what carries it (--ink-deep, tokens.css).
   A band, a fade or a pseudo-element fill is never one of them (visual-rules V1).
   =========================================================================== */

.site-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2xs);
  padding-inline: var(--gutter);
  /* No background, no border, no shadow. */
}

/* --- The list ------------------------------------------------------------ */

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px of tappable height and width (FR-114). */
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding-inline: var(--space-3xs);
  /* Large text: 19 px at weight 700 (>= 18.66 px bold), so 3:1 is the bar. */
  font-size: max(1.1875rem, var(--fs-sm));
  font-weight: 700;
  font-variant-caps: small-caps;
  font-feature-settings: 'smcp' 1, 'c2sc' 1;
  letter-spacing: var(--tracking-smallcaps);
  text-decoration: none;
  /* A soft halo on the letters only, as a helper: the gate ignores it. */
  text-shadow: 0 0 0.6em color-mix(in srgb, var(--ground-cream) 70%, transparent);
  /* The rule that marks the current item is always present, just transparent,
     so becoming current changes no layout and shifts nothing. */
  border-block-end: var(--rule-strong) solid transparent;
}

.site-nav--ink .nav-link {
  /* One step deeper than body ink, and only here: see the --ink-deep note in
     tokens.css for the measurement that forced it. */
  color: var(--ink-deep);
}

.site-nav--reversed .nav-link {
  color: var(--ink-reversed);
  text-shadow: 0 0 0.6em color-mix(in srgb, #000 55%, transparent);
}

.nav-link:hover {
  border-block-end-color: color-mix(in srgb, currentcolor 45%, transparent);
}

/* The current page: underscored at full strength. A rule, not a colour, so it
   survives both a colour-blind reading and a greyscale print. */
.nav-link[aria-current='page'] {
  border-block-end-color: currentcolor;
}

.rsvp-link__external {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* --- The footer, which shares the navigation's quiet voice -------------- */

.site-footer {
  background: var(--ground-olive-deep);
  color: var(--ink-reversed);
  padding: var(--space-xl) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
}

.site-footer__names {
  font-family: var(--font-script);
  font-size: var(--fs-xl);
  line-height: 1.3;
  padding-block-end: 0.1em;
  margin: 0;
  max-width: none;
}

.site-footer__where {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  max-width: none;
  color: var(--ink-reversed);
}

.site-footer__dates {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

.site-footer__rsvp {
  margin-block-start: var(--space-sm);
  max-width: none;
}

.rsvp-link--footer {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--touch-target);
  color: var(--ink-reversed);
  text-decoration-color: var(--accent-butter);
  text-decoration-thickness: var(--rule-strong);
  text-underline-offset: 0.2em;
}