/* Top nav: the footer's deep green and topo lines, a bit bigger (Rich, Nov 2).
   Loaded before styles.css, so every rule here is more specific than the old header rules. */
:root { --brand-green: #33502f; --nav-h: 4.375rem; --header-h: 4.375rem; --nav-gold: #FFE08A; --nav-fill: #f2b54a; }
@media (min-width: 48rem) { :root { --brand-green: #33502f; --nav-h: 4.375rem; --header-h: 4.375rem; } }

header.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; isolation: isolate;
  background: var(--brand-green); color: #fff; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* the footer's exact topo treatment: topo-footer.svg, white lines, 0.35 */
header.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("images/topo-footer.svg") center / max(100%, 1000px) auto no-repeat; opacity: 0.35;
}
.site-header .header-inner { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s3); min-height: var(--nav-h); padding-block: var(--s2); }

.site-header .wordmark { color: #fff; font-size: 1.375rem; min-height: 2.75rem; gap: var(--s2); }
.site-header .wordmark:hover { color: #fff; }
.site-header .wordmark-mark { width: 2.5rem; height: 1.75rem; fill: #fff; }
.site-header .wordmark-mark circle { fill: var(--nav-gold); }

.site-header .jump { flex: 0 1 auto; order: 0; }
.site-header .nav-links { gap: var(--s2); align-items: center; justify-content: flex-end; }
.site-header .nav-links a {
  min-height: 2.75rem; padding: 0 0.5rem; font-size: 1.125rem; letter-spacing: 0.04em;
  color: #fff; border: 1.5px solid transparent;
}
.site-header .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.site-header .nav-links a[aria-current="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* Get updates and other plain links: quiet white outline */
.site-header .nav-links a.nav-share {
  font-family: var(--sans); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.0625rem;
  padding-inline: 1rem; background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85);
}
.site-header .nav-links a.nav-share:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* RSVP: the one primary, warm gold with dark green text */
.site-header .nav-links a[href$="/rsvp"], .site-header .nav-links a[href="/rsvp"] {
  background: var(--nav-fill); color: var(--pine-deep); border-color: var(--nav-fill);
  font-family: var(--sans); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: 1.125rem; padding-inline: 1.25rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.site-header .nav-links a[href$="/rsvp"]:hover { background: var(--nav-gold); border-color: var(--nav-gold); color: var(--pine-deep); }
/* the small RSVP pill that joins the bar on scroll (site.js), same primary look */
.site-header .nav-rsvp { background: var(--nav-fill); color: var(--pine-deep); min-height: 2.75rem; padding-inline: 1.25rem; font-size: 1.125rem; }
.site-header .nav-rsvp:hover, .site-header .nav-rsvp:focus-visible { background: var(--nav-gold); color: var(--pine-deep); }

/* Organizer pages: owner name and link-buttons are plain white */
.site-header .ib-who { color: #fff; font-weight: 700; font-size: 1.0625rem; padding: 0 0.25rem; }
.site-header .link-button { color: #fff; font-size: 1.0625rem; min-height: 2.75rem; padding: 0 0.5rem; text-decoration-color: rgba(255, 255, 255, 0.7); text-underline-offset: 4px; }
.site-header .link-button:hover { color: #fff; background: rgba(255, 255, 255, 0.14); border-radius: 999px; }

/* Focus rings that show on green */
.site-header a:focus-visible, .site-header button:focus-visible { outline: 3px solid var(--nav-gold); outline-offset: 2px; border-radius: 999px; }
.site-header .wordmark:focus-visible { border-radius: 8px; }

/* Draft pages: the menu row sits inside the bar and lets the topo show through */
.site-header .draft-nav { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.site-header .draft-nav a { color: #fff; }
.site-header .draft-nav a:hover, .site-header .draft-nav a:focus-visible, .site-header .draft-nav a[aria-current="page"] { color: var(--nav-gold); }

/* Wider screens: bigger name and nav text than before */
@media (min-width: 48rem) {
  .site-header .wordmark { font-size: 1.625rem; }
  .site-header .wordmark-mark { width: 2.85rem; height: 2rem; }
  .site-header .nav-links { gap: var(--s3); }
  .site-header .nav-links a { font-size: 1.3125rem; padding-inline: 0.75rem; }
  .site-header .nav-links a.nav-share { font-size: 1.1875rem; padding-inline: 1.1rem; }
  .site-header .nav-links a[href$="/rsvp"] { font-size: 1.25rem; padding-inline: 1.4rem; }
  .site-header .ib-who, .site-header .link-button { font-size: 1.1875rem; }
}

/* Phones (390px): one row; smaller name and spacing, RSVP stays visible */
@media (max-width: 30rem) {
  .site-header .header-inner { gap: 0 var(--s2); }
  .site-header .wordmark { font-size: 1.125rem; gap: 0.4rem; }
  .site-header .wordmark-mark { width: 2.3rem; height: 1.6rem; }
  .site-header .nav-links { gap: 0.25rem; }
  .site-header .nav-links a, .site-header .link-button { font-size: 0.9375rem; padding-inline: 0.4rem; }
  .site-header .nav-links a.nav-share { font-size: 0.9375rem; padding-inline: 0.6rem; }
  .site-header .nav-links a[href$="/rsvp"] { font-size: 1rem; padding-inline: 0.9rem; }
  .site-header .ib-who { font-size: 0.9375rem; }
}
@media (max-width: 22.5rem) {
  .site-header .wordmark { font-size: 1rem; }
  .site-header .wordmark-mark { width: 2rem; height: 1.4rem; }
  .site-header .nav-links a.nav-share { padding-inline: 0.45rem; font-size: 0.875rem; }
  .site-header .nav-links a[href$="/rsvp"] { padding-inline: 0.75rem; }
}
@media (forced-colors: active) { header.site-header::before { display: none; } .site-header .nav-links a { border-color: ButtonText; } }

/* ---------- Footer: the Flatirons illustration (Rich, Nov 2) ----------
   The artwork is the footer-body background: footer-wide.jpg from 48rem up, footer-tall.jpg on phones. Its meadow is already
   the header green. A topo layer (::before, whole footer) is masked by the matching meadow mask, with the SAME size and position
   as the artwork, so crisp lines show on the meadow only, never on trail, trees, sky or rocks. Decorative: no <img>, no alt needed. */
.site-footer { margin-top: 0; }
.site-footer .footer-body {
  position: relative; overflow: hidden; color: #fff; margin-top: 0;
  background: var(--brand-green) url("images/footer-tall.jpg") 100% top / 100% auto no-repeat;
  min-height: 134vw; padding-block: 52vw 2rem;
}
.site-footer .footer-body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("images/topo-footer.svg") center top / 700px auto repeat; opacity: 0.28;
  -webkit-mask: url("images/footer-tall-meadow-mask.png") 100% top / 100% auto no-repeat;
          mask: url("images/footer-tall-meadow-mask.png") 100% top / 100% auto no-repeat;
}
.site-footer .footer-inner { position: relative; z-index: 1; }
.site-footer .footer-small { max-width: 44rem; }
.site-footer .footer-inner p { text-shadow: 0 1px 3px rgba(20, 32, 18, 0.55); }  /* keeps white text legible where it crosses the trail */
@media (min-width: 48rem) {
  /* height about viewport-width / 3.03 (the artwork's own ratio) but never shorter than the text needs; right-anchored so the Flatirons stay in view */
  .site-footer .footer-body {
    display: flex; align-items: flex-end;
    background-image: url("images/footer-wide.jpg"); background-position: 100% top; background-size: cover;
    min-height: max(33vw, calc(34rem - (100vw - 48rem) / 2)); padding-block: 2rem 1.5rem;
  }
  .site-footer .footer-body::before {
    background-size: 1400px auto;
    -webkit-mask-image: url("images/footer-wide-meadow-mask.png"); mask-image: url("images/footer-wide-meadow-mask.png");
    -webkit-mask-position: 100% top; mask-position: 100% top; -webkit-mask-size: cover; mask-size: cover;
  }
  .site-footer .footer-inner { width: 100%; }
  .site-footer .footer-mark { margin-bottom: var(--s1); }
  .site-footer .footer-988 { margin-top: var(--s3); padding-top: var(--s3); }
}
@media (min-width: 75rem) {
  .site-footer .footer-body { background-position: 60% top; }
  .site-footer .footer-body::before { -webkit-mask-position: 60% top; mask-position: 60% top; }
}

/* Optional nav edge (variant c): a low Flatirons trim hangs under the bar. Off by default; turn on with class "nav-edge" on header.site-header. */
header.site-header.nav-edge::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 8px; pointer-events: none;
  background: url("images/nav-edge.svg") left top / auto 8px repeat-x;
}