/* =========================================================
   BCWGA — Boulder City Women's Golf Association
   Shared stylesheet for every page.

   DIRECTION
   THESIS: a municipal golf scorecard, not a marketing template —
   ruled boxes and tabular rows instead of shadowed rounded cards,
   because this club's real object is the card you fill out on the
   first tee, not a SaaS dashboard.
   OWN-WORLD: one accent (fairway green) on a sun-bleached desert-
   sand ground; ruled 1-2px borders stand in for shadows; no card-
   grid-of-icons, no colored border-left bars, no emoji as icons —
   small line-drawn marks instead.
   STORY: a member or prospective member finds what she needs
   (when to play, how to join, what to download) in seconds, in
   comfortably large, unmistakably legible type.
   FIRST VIEWPORT: hero with faint mown-fairway stripe texture,
   left-set headline over a deep-green field, one clear next step.
   FORM: single typeface throughout (Atkinson Hyperlegible — built
   for low-vision readability, which is this audience's #1 need)
   sets both headings and body; no second display face.

   DESIGN SYSTEM
   - Colors, fonts, and spacing are defined once below as CSS
     variables. Change a value here and it updates everywhere.
   - Built senior-friendly first: large text, high contrast,
     big obvious buttons, no tiny tap targets.
   ========================================================= */

:root {
  /* --- Colors: one accent (fairway green) + desert-sand neutrals --- */
  --ink: #232b1c;                 /* body text */
  --text-muted: #4c6b48;          /* secondary text — tinted from the accent hue, never plain gray */
  --fairway-deep: #1f3a20;        /* headings */
  --fairway-accent: #2f7a3d;      /* the one accent: buttons, nav-active, links, focus — brighter, more alive */
  --fairway-accent-hover: #235c2e;
  --fairway-mid: #4d7a49;         /* decorative only (icon strokes, thin rules) — not for text-on-fill */
  --sand: #f3ead7;                /* page background — sun-bleached desert ground */
  --card: #fffdf7;                /* warm surface for boxes, distinct from page ground without a shadow */
  --border: rgba(35, 43, 28, 0.18);      /* ruled line, scorecard-grid weight */
  --border-strong: rgba(35, 43, 28, 0.38);
  --white: #ffffff;

  /* Second accent — the "marked in gold pen" moment (special
     events, badges), now used more freely for a livelier feel */
  --gold: #8f5f1a;                /* text-safe gold (tags, marks) */
  --gold-hover: #714a14;
  --gold-soft: rgba(143, 95, 26, 0.12);
  --gold-tint: #e3b876;           /* light gold — text/links on dark surfaces only */
  --gold-bright: #e0a530;         /* decorative only (bunting, confetti, badge fills) — not for text */

  /* Third accent — a desert-wildflower blush, the "women's club"
     identity color, now shown a bit more (badges, bunting, confetti) */
  --blush: #b5697a;
  --blush-soft: rgba(181, 105, 122, 0.16);
  --blush-bright: #d1637f;        /* decorative only — not for text */

  /* Form validation only — a distinct clay red, never used for
     anything but "this needs your attention" */
  --error: #a3342a;
  --error-soft: rgba(163, 52, 42, 0.08);

  /* Hover-only depth: a shadow that appears on interaction reads as
     feedback, not the resting "soft-shadow card" default */
  --lift-shadow: 0 10px 24px -8px rgba(35, 43, 28, 0.28);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Type: one accessible typeface carries headings and body --- */
  --font: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --font-display: "Fredoka", "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --font-size-base: 19px;

  /* --- Spacing --- */
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* --- Shape: soft, rounded — gentle corners throughout, plus a
     full pill radius for buttons/badges. --- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Gentle resting depth on boxes/cards — soft, not heavy */
  --shadow-soft: 0 6px 20px -6px rgba(35, 43, 28, 0.16);
  --shadow-softer: 0 3px 10px -3px rgba(35, 43, 28, 0.12);
}

/* ---------- Reset & base ---------- */
* {
  box-sizing: border-box;
}

/* ---------- Golf-themed cursor ----------
   A small golf ball for browsing, a golf flag for anything
   clickable. Falls back to the normal arrow/pointer automatically
   (the second value after the comma) if the image can't load, and
   has no effect at all on touch devices. Text fields keep the
   standard text cursor so it's always clear where you're typing. */
body {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI5IiBmaWxsPSIjZmZmZGY3IiBzdHJva2U9IiMyMzM2MWYiIHN0cm9rZS13aWR0aD0iMiIvPgogIDxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSIxIiBmaWxsPSIjMjMzNjFmIi8+CiAgPGNpcmNsZSBjeD0iMTMiIGN5PSI3LjUiIHI9IjEiIGZpbGw9IiMyMzM2MWYiLz4KICA8Y2lyY2xlIGN4PSI5IiBjeT0iMTMiIHI9IjEiIGZpbGw9IiMyMzM2MWYiLz4KICA8Y2lyY2xlIGN4PSIxNCIgY3k9IjEyLjUiIHI9IjEiIGZpbGw9IiMyMzM2MWYiLz4KICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjE1IiByPSIxIiBmaWxsPSIjMjMzNjFmIi8+Cjwvc3ZnPgo=") 11 11, auto;
}

a,
button,
.btn,
[role="button"],
select,
summary {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI0IDI2Ij4KICA8ZWxsaXBzZSBjeD0iNSIgY3k9IjIzIiByeD0iNSIgcnk9IjEuNiIgZmlsbD0iIzIzMzYxZiIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CiAgPGxpbmUgeDE9IjUiIHkxPSIyMyIgeDI9IjUiIHkyPSIzIiBzdHJva2U9IiMyMzM2MWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTUsMyBMMjAsOC41IEw1LDE0IFoiIGZpbGw9IiM4ZjVmMWEiLz4KPC9zdmc+Cg==") 5 3, pointer;
}

input,
textarea {
  cursor: text;
}

input[type="submit"],
input[type="checkbox"],
input[type="radio"] {
  cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNiIgdmlld0JveD0iMCAwIDI0IDI2Ij4KICA8ZWxsaXBzZSBjeD0iNSIgY3k9IjIzIiByeD0iNSIgcnk9IjEuNiIgZmlsbD0iIzIzMzYxZiIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CiAgPGxpbmUgeDE9IjUiIHkxPSIyMyIgeDI9IjUiIHkyPSIzIiBzdHJva2U9IiMyMzM2MWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTUsMyBMMjAsOC41IEw1LDE0IFoiIGZpbGw9IiM4ZjVmMWEiLz4KPC9zdmc+Cg==") 5 3, pointer;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--sand);
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--fairway-deep);
  line-height: 1.2;
  margin-top: 0;
  text-wrap: balance;
}

/* The one flourish: big headlines get a bold, rounded display face
   for personality. Body copy, labels, nav, and buttons all stay in
   Atkinson Hyperlegible — where readability matters most. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1rem 0; max-width: 68ch; }

a {
  color: var(--fairway-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--fairway-accent-hover);
}

img {
  max-width: 100%;
  display: block;
}

/* Visible focus outline everywhere — important for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--fairway-accent);
  outline-offset: 3px;
}

/* Skip-to-content link, only visible when focused (keyboard users).
   Hidden with a vertical transform (never a large negative "left")
   so it can never cause horizontal page overflow. */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-150%);
  background: var(--fairway-deep);
  color: var(--white);
  padding: 1rem 1.5rem;
  z-index: 1000;
  font-size: 1.1rem;
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ---------- Icons ----------
   One line-icon grammar, always inline SVG with currentColor —
   no emoji, no icon tiles with a colored background circle. */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Header / Navigation ---------- */
.site-header {
  background-color: var(--card);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 2px 10px rgba(35, 43, 28, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.success-mark {
  position: relative;
}

.confetti-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: confetti-pop 0.9s var(--ease-out) both;
}

@keyframes confetti-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti-dot {
    display: none;
  }
}

.who-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 800px) {
  .who-grid {
    grid-template-columns: 1fr;
  }
}

/* A little framed snapshot — real course photos, a touch of scrapbook
   charm (a slight tilt), used a few places across the site */
.photo-card {
  max-width: 320px;
  margin: 0 auto;
  border: 6px solid var(--card);
  outline: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-card.tilt-left {
  transform: rotate(-2.5deg);
}

.photo-card.tilt-right {
  transform: rotate(2.5deg);
}

.photo-card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: var(--lift-shadow);
}

.badge-year {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--gold-bright);
  color: var(--fairway-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.badge-year .icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* Header greets you on load: brand first, then nav items in a
   quick left-to-right stagger */
@keyframes header-rise {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-brand,
.main-nav li {
  opacity: 0;
  animation: header-rise 0.5s var(--ease-out) both;
}

.main-nav li:nth-child(1) { animation-delay: 0.08s; }
.main-nav li:nth-child(2) { animation-delay: 0.14s; }
.main-nav li:nth-child(3) { animation-delay: 0.2s; }
.main-nav li:nth-child(4) { animation-delay: 0.26s; }
.main-nav li:nth-child(5) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .site-brand,
  .main-nav li {
    opacity: 1;
    animation: none;
  }
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--fairway-deep);
}

/* Monogram badge stands in for a logo mark — no emoji, no stock icon */
.site-brand .brand-mark {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 2px solid var(--fairway-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--fairway-accent);
}

/* A small blossom on the club mark — the one place the "women's
   golf" identity is spelled out visually, not just in the name */
.site-brand .brand-mark::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4KICA8ZyBmaWxsPSIjYjU2OTdhIj4KICAgIDxjaXJjbGUgY3g9IjciIGN5PSIzIiByPSIyLjQiLz4KICAgIDxjaXJjbGUgY3g9IjciIGN5PSIxMSIgcj0iMi40Ii8+CiAgICA8Y2lyY2xlIGN4PSIzIiBjeT0iNyIgcj0iMi40Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMSIgY3k9IjciIHI9IjIuNCIvPgogIDwvZz4KICA8Y2lyY2xlIGN4PSI3IiBjeT0iNyIgcj0iMiIgZmlsbD0iI2UzYjg3NiIvPgo8L3N2Zz4K");
  background-size: contain;
  background-repeat: no-repeat;
}

.site-brand .brand-text {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.15;
}

.site-brand .brand-text small {
  display: block;
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--text-muted);
}

/* Main nav: always fully visible, no hidden hamburger menu.
   Wraps to a new line on narrow screens instead of collapsing,
   so nothing is ever hidden behind a tap. */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.main-nav a {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.1rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--fairway-deep);
  text-decoration: none;
  border-radius: var(--radius);
  min-height: 44px;
  border: 1px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-color: var(--border-strong);
}

.main-nav a[aria-current="page"] {
  background-color: var(--fairway-accent);
  color: var(--white);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.9rem 1.9rem;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font);
  border-radius: var(--radius-pill);
  border: 2px solid var(--fairway-accent);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow);
}

.btn:active {
  transform: translateY(0) scale(0.97);
}

/* A slow, gentle "breathing" glow — used sparingly on exactly one
   button per page (the main call to action) to draw the eye */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51, 85, 47, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(51, 85, 47, 0); }
}

.btn-glow {
  animation: btn-glow 2.4s ease-out infinite;
}

.btn-glow:hover,
.btn-glow:focus-visible {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .btn-glow {
    animation: none;
  }
}

.btn-primary {
  background-color: var(--fairway-accent);
  color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--fairway-accent-hover);
  border-color: var(--fairway-accent-hover);
  color: var(--white);
}

.btn-secondary {
  background-color: transparent;
  color: var(--fairway-accent);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--fairway-accent);
  color: var(--white);
}

.btn-large {
  font-size: 1.3rem;
  padding: 1.1rem 2.4rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  background-color: var(--fairway-deep);

  /* The photo, then a solid fallback — if images/hero-boulder-muni.jpg
     is missing, the fallback gradient still reads as an intentional
     field, not a broken image. See images/README.txt for filenames. */
  background-image:
    linear-gradient(200deg, rgba(38, 30, 14, 0.42) 0%, rgba(20, 32, 18, 0.56) 100%),
    url("../images/hero-boulder-muni.jpg"),
    linear-gradient(160deg, #3a5c37 0%, #23361f 55%, #182615 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Gentle parallax: background scrolls slightly slower than page.
   Disabled entirely for users who prefer reduced motion. */
.hero {
  background-attachment: fixed;
}

@media (max-width: 768px) {
  /* background-attachment: fixed can jitter/misbehave on mobile browsers */
  .hero {
    background-attachment: scroll;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: var(--space-xl) var(--space-md);
  margin: 0 auto;
  width: 100%;
}

/* Rolling-fairway horizon, drawn once and reused on every hero —
   the front hill's fill matches the section that follows, so the
   illustration reads as ground the page sits on, not a banner. */
.hero-illustration {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 40%;
  min-height: 90px;
  z-index: 1;
  pointer-events: none;
}

.hero-illustration .hill-back {
  fill: rgba(0, 0, 0, 0.16);
}

.hero-illustration .hill-front {
  fill: var(--sand);
}

.hero-illustration .flag-mound {
  fill: rgba(0, 0, 0, 0.2);
}

.hero-illustration .flag-pole {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2;
}

.hero-illustration .flag-cloth {
  fill: var(--gold);
}

.hero-illustration .hero-bloom {
  fill: var(--blush);
  opacity: 0.85;
}

/* The hero flag never stops giving a small, gentle wave — the one
   idle/ambient animation on the page, kept slow and subtle */
@keyframes flag-idle-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
}

.hero-illustration .hero-flag {
  transform-origin: 0% 100%;
  animation: flag-idle-sway 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-illustration .hero-flag {
    animation: none;
  }
}

.hero h1 {
  color: var(--white);
  font-size: 3rem;
}

.hero p {
  font-size: 1.35rem;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero load-in ----------
   The one entrance every visitor sees: headline, then line, then
   button, arriving in a short authored sequence instead of all at
   once. Runs once on page load, not on scroll. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content > * {
  opacity: 0;
  animation: hero-rise 0.7s var(--ease-out) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > * {
    opacity: 1;
    animation: none;
  }
}

.hero-small {
  min-height: 30vh;
}

.hero-small h1 {
  font-size: 2.3rem;
}

/* ---------- Sections ---------- */
.section {
  padding: var(--space-xl) 0;
}

.section-tight {
  padding: var(--space-lg) 0;
}

.section-alt {
  background-color: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* A second dark field, like the hero, bookending the page instead
   of leaving the whole body on one flat sand tone. One per page. */
.band {
  background-color: var(--fairway-deep);
  color: var(--sand);
  padding: var(--space-xl) 0;
}

.band h2,
.band h3 {
  color: var(--white);
}

.band p {
  color: var(--sand);
}

.band a:not(.btn) {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.band a:not(.btn):hover,
.band a:not(.btn):focus {
  color: var(--gold-tint);
}

.band .btn-primary {
  background-color: var(--gold);
  border-color: var(--gold);
}

.band .btn-primary:hover,
.band .btn-primary:focus-visible {
  background-color: var(--gold-hover);
  border-color: var(--gold-hover);
}

.band .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}

.band .btn-secondary:hover,
.band .btn-secondary:focus-visible {
  background-color: var(--white);
  color: var(--fairway-deep);
}

/* ---------- Ruled boxes ----------
   The shared "scorecard" surface: a flat border, no drop shadow.
   Used for the callout, the application form, and the closing
   contact block. */
.box {
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--fairway-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow);
}

.box-center {
  text-align: center;
}

/* text-align only centers text within a box — a <p> has its own
   max-width (set in the base reset for readable line length), so
   without this, paragraphs inside a centered box stay pinned to
   its left edge instead of centering as a block. */
.box-center p {
  margin-left: auto;
  margin-right: auto;
}

/* "At a glance" — a plain ruled row list, not an icon-card grid */
.glance-list {
  list-style: none;
  margin: var(--space-md) 0 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.glance-list li {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.glance-list .glance-label {
  flex: 0 0 9rem;
  font-weight: 700;
  color: var(--fairway-deep);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding-top: 0.2rem;
}

.glance-list p {
  margin: 0;
}

/* Highlighted info box, e.g. league match time */
.callout {
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--fairway-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-md) var(--space-lg);
}

.callout .callout-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fairway-accent);
  margin-bottom: 0.6rem;
}

.callout .callout-label .icon {
  font-size: 1.3rem;
}

.callout h2,
.callout h3 {
  margin-bottom: 0.4rem;
}

.callout p {
  margin-bottom: 0;
  font-size: 1.15rem;
}

/* ---------- Forms ---------- */
form {
  max-width: 640px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.form-required-note {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.form-required-note .required-mark {
  color: var(--gold);
  font-weight: 700;
}

/* Section labels inside a longer form — the same uppercase-tracked
   label used for the callout and the at-a-glance list, so a form
   reads as one more scorecard row-group, not a separate widget */
.form-section {
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.form-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.form-section-label {
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fairway-accent);
  margin: 0 0 1rem 0;
}

.form-field {
  margin-bottom: var(--space-md);
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  color: var(--fairway-deep);
}

label .required-mark {
  color: var(--gold);
}

.field-hint {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0 0;
}

.field-error {
  font-size: 0.95rem;
  color: var(--error);
  font-weight: 700;
  margin: 0.4rem 0 0 0;
}

.field-error:empty {
  display: none;
}

input,
textarea {
  width: 100%;
  font-size: 1.1rem;
  font-family: var(--font);
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--ink);
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

input:focus,
textarea:focus {
  border-color: var(--fairway-accent);
  outline: none;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field.has-error input,
.form-field.has-error textarea {
  border-color: var(--error);
  background-color: var(--error-soft);
}

/* ---------- Application wizard ----------
   Added by JavaScript on top of the plain sectioned form. Without
   JavaScript, every section simply stays visible and stacked, so
   the form is never blocked — this only makes it easier to follow. */
.wizard-status {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fairway-deep);
  margin: 0 0 0.6rem 0;
}

.wizard-bar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-lg);
}

.wizard-bar-segment {
  flex: 1;
  height: 8px;
  background-color: var(--border-strong);
  transition: background-color 0.3s var(--ease-out);
}

.wizard-bar-segment.is-complete,
.wizard-bar-segment.is-current {
  background-color: var(--fairway-accent);
}

.wizard-nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.wizard-nav .btn {
  flex: 0 0 auto;
}

/* Steps slide in horizontally, a small directional cue that this
   is a sequence, not just content appearing/disappearing */
@keyframes step-enter {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.form-section.is-active-step {
  animation: step-enter 0.35s var(--ease-out);
}

.form-section.is-hidden-step {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .form-section.is-active-step {
    animation: none;
  }
}

.review-summary {
  list-style: none;
  margin: var(--space-md) 0 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.review-row {
  display: flex;
  gap: var(--space-md);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.review-row dt {
  flex: 0 0 9rem;
  font-weight: 700;
  color: var(--fairway-deep);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin: 0;
}

.review-row dd {
  margin: 0;
  color: var(--ink);
}

.review-row dd:empty::after {
  content: "Not provided";
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  .review-row {
    flex-direction: column;
    gap: 0.3rem;
  }

  .review-row dt {
    flex: none;
  }
}

.form-note {
  font-size: 1rem;
  color: var(--text-muted);
}

/* ---------- Submission success ---------- */
.success-box {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 4px solid var(--fairway-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  text-align: center;
}

.success-box p {
  margin-left: auto;
  margin-right: auto;
}

.success-box .success-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  border: 2px solid var(--fairway-accent);
  color: var(--fairway-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-box .success-mark .icon {
  width: 1.8rem;
  height: 1.8rem;
}

@keyframes success-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.success-box .success-mark {
  animation: success-pop 0.5s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .success-box .success-mark {
    animation: none;
  }
}

/* A small one-time "holed it" moment on the thank-you pages — the
   ball rolls in and drops, then the flag gives its one wave. Plays
   once, never loops. */
.celebration {
  max-width: 220px;
  margin: 0 auto var(--space-md);
}

.celebration svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes ball-roll {
  0% { transform: translateX(0) rotate(0deg); opacity: 1; }
  82% { transform: translateX(178px) rotate(650deg); opacity: 1; }
  100% { transform: translateX(182px) rotate(680deg) scale(0.35); opacity: 0; }
}

.celebration .golf-ball {
  animation: ball-roll 1.1s var(--ease-out) 0.3s both;
}

.celebration .cel-flag {
  transform-origin: 200px 44px;
  animation: flag-wave 0.6s var(--ease-out) 1.5s both;
}

@media (prefers-reduced-motion: reduce) {
  .celebration {
    display: none;
  }
}

/* ---------- Document list ---------- */
.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.doc-list li {
  border-bottom: 1px solid var(--border);
}

.doc-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.doc-list a .icon {
  font-size: 1.5rem;
  color: var(--fairway-accent);
}

.doc-list a:hover,
.doc-list a:focus-visible {
  color: var(--fairway-accent-hover);
}

.doc-meta {
  display: block;
  font-size: 0.95rem;
  font-weight: normal;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ---------- Numbered rules list (Standing Rules) ---------- */
.rules-list {
  margin: var(--space-md) 0 var(--space-lg);
  padding-left: 1.6rem;
}

.rules-list li {
  padding-left: 0.4rem;
  margin-bottom: var(--space-md);
  font-weight: 700;
}

.rules-list li p {
  margin: 0.3rem 0 0;
  font-weight: 400;
}

/* ---------- Rules / reference tables ---------- */
.rules-table-wrap {
  overflow-x: auto;
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.rules-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: 0.9rem 1rem 0;
}

.rules-table th,
.rules-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.rules-table thead th {
  background-color: var(--fairway-deep);
  color: var(--white);
  font-weight: 700;
}

.rules-table tbody tr:last-child td {
  border-bottom: none;
}

.rules-table tbody tr:nth-child(even) {
  background-color: var(--section-alt-bg, rgba(0, 0, 0, 0.02));
}

/* ---------- Calendar / events list ----------
   Rows read like a scorecard: a ruled date cell, no colored
   side-bar. "Special" events are marked with a text tag, not a
   different border color. */
.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.event-card {
  padding: 1.1rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

.event-date {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fairway-deep);
  padding: 0.5rem 0.9rem;
  text-align: center;
  min-width: 80px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.event-date .event-month {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.event-date .event-day {
  display: block;
  font-size: 1.7rem;
  line-height: 1.1;
}

.event-details h3 {
  margin-bottom: 0.2rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.event-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  background-color: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}

.event-details p {
  margin-bottom: 0;
  color: var(--text-muted);
}

.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-muted);
}

.is-hidden {
  display: none;
}

/* ---------- Toggle switch (Calendar: "Show past events") ---------- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: var(--space-md) 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.switch-track {
  position: absolute;
  inset: 0;
  background-color: var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s var(--ease-out);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--card);
  box-shadow: 0 1px 3px rgba(35, 43, 28, 0.35);
  transition: transform 0.2s var(--ease-out);
}

.switch input:checked + .switch-track {
  background-color: var(--fairway-accent);
}

.switch input:checked + .switch-track::after {
  transform: translateX(22px);
}

.switch input:focus-visible + .switch-track {
  outline: 3px solid var(--fairway-accent);
  outline-offset: 3px;
}

.switch-label {
  font-weight: 700;
  color: var(--fairway-deep);
  font-size: 1.05rem;
  cursor: pointer;
}

.event-card.is-past {
  opacity: 0.7;
}

.event-tag-past {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.6rem;
}

/* ---------- Search field (Club Documents) ---------- */
.search-field {
  position: relative;
  max-width: 420px;
  margin-bottom: var(--space-lg);
}

.search-field input {
  padding-left: 2.75rem;
}

.search-field .icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 1.2rem;
  height: 1.2rem;
}

/* ---------- Topic chips (Contact Us) ---------- */
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--space-lg);
}

.topic-chip {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font);
  color: var(--fairway-accent);
  background-color: transparent;
  border: 2px solid var(--fairway-accent);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.topic-chip:hover,
.topic-chip:focus-visible {
  background-color: var(--fairway-accent);
  color: var(--white);
}

.topic-chip.is-selected {
  background-color: var(--fairway-accent);
  color: var(--white);
}

/* ---------- Contact / mailto ---------- */
.contact-email {
  font-size: 1.4rem;
  font-weight: 700;
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--fairway-deep);
  color: var(--white);
  padding: var(--space-lg) 0;
  margin-top: var(--space-xl);
  text-align: center;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer a {
  color: var(--white);
  font-weight: 700;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.site-footer p {
  margin: 0.35rem 0;
  font-size: 1.05rem;
}

.admin-status {
  margin-top: var(--space-md) !important;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.9rem !important;
  color: var(--sand);
  opacity: 0.85;
}

.admin-status a {
  color: var(--gold-tint);
}

/* ---------- Scroll-in animation ----------
   A short fade/rise as content enters, requested in the brief.
   List rows (events, documents, the at-a-glance list) rise in a
   quick stagger — the sequence mirrors reading order, so the
   delay is information, not decoration. Respects reduced-motion. */
.fade-in-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Two more entrance directions, used to vary the rhythm as you
   scroll down a page instead of everything rising the same way */
.fade-in-left,
.fade-in-right {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-left {
  transform: translateX(-28px);
}

.fade-in-right {
  transform: translateX(28px);
}

.fade-in-left.is-visible,
.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.fade-in-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Row stagger for the three row-based lists — each row is a step
   later than the one above it, so a cascade reads even when several
   rows enter the viewport at once. */
.glance-list li:nth-child(1), .event-list > li:nth-child(1), .doc-list li:nth-child(1) { --stagger-index: 0; }
.glance-list li:nth-child(2), .event-list > li:nth-child(2), .doc-list li:nth-child(2) { --stagger-index: 1; }
.glance-list li:nth-child(3), .event-list > li:nth-child(3), .doc-list li:nth-child(3) { --stagger-index: 2; }
.glance-list li:nth-child(4), .event-list > li:nth-child(4), .doc-list li:nth-child(4) { --stagger-index: 3; }
.glance-list li:nth-child(5), .event-list > li:nth-child(5), .doc-list li:nth-child(5) { --stagger-index: 4; }
.glance-list li:nth-child(n+6), .event-list > li:nth-child(n+6), .doc-list li:nth-child(n+6) { --stagger-index: 5; }

/* ---------- 3D gallery slot (gallery-app bundle) ----------
   Hidden by default; js/gallery-app's mount script only adds
   .is-active when WebGL is available and the visitor hasn't asked
   for reduced motion. The plain photo grid below always works
   regardless, so nothing depends on this slot ever activating. */
.bcwga-gallery-slot {
  display: none;
}

.bcwga-gallery-slot.is-active {
  display: block;
}

/* ---------- Photo gallery ----------
   Flexbox + centered wrap, not CSS grid — with only a handful of
   photos, an auto-fill grid leaves empty ghost columns and the
   whole row reads as broken. Flex-wrap simply centers however many
   photos exist, so it looks intentional whether there are 2 or 50. */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-md);
  list-style: none;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
}

.gallery-item {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--radius);
  flex: 0 1 260px;
  max-width: 260px;
}

.gallery-item a,
.gallery-item button {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  border-radius: var(--radius);
}

.gallery-frame {
  display: block;
  border: 6px solid var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.gallery-item:hover .gallery-frame,
.gallery-item:focus-visible .gallery-frame {
  transform: scale(1.03);
  box-shadow: var(--lift-shadow);
}

.gallery-item:focus-visible {
  outline: 3px solid var(--fairway-accent);
  outline-offset: 3px;
}

.gallery-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}

.gallery-item:hover .gallery-frame img,
.gallery-item:focus-visible .gallery-frame img {
  transform: scale(1.08);
}

.gallery-caption {
  display: block;
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--fairway-deep);
  text-align: center;
}

/* ---------- Lightbox ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 26, 16, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}

.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-box {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.94);
  transition: transform 0.25s var(--ease-out);
}

.lightbox-overlay.is-open .lightbox-box {
  transform: scale(1);
}

.lightbox-box img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  box-shadow: var(--lift-shadow);
  display: block;
}

.lightbox-caption {
  color: var(--white);
  font-weight: 700;
  margin-top: var(--space-sm);
  text-align: center;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background-color: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  top: var(--space-md);
  right: var(--space-md);
}

.lightbox-prev {
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-close .icon,
.lightbox-prev .icon,
.lightbox-next .icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 640px) {
  .lightbox-prev { left: var(--space-sm); }
  .lightbox-next { right: var(--space-sm); }
  .lightbox-close { top: var(--space-sm); right: var(--space-sm); }
}

.gallery-item:nth-child(1) { --stagger-index: 0; }
.gallery-item:nth-child(2) { --stagger-index: 1; }
.gallery-item:nth-child(3) { --stagger-index: 2; }
.gallery-item:nth-child(4) { --stagger-index: 3; }
.gallery-item:nth-child(5) { --stagger-index: 4; }
.gallery-item:nth-child(n+6) { --stagger-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .gallery-frame,
  .gallery-frame img,
  .lightbox-overlay,
  .lightbox-box {
    transition: none;
  }
}

/* ---------- Interactive hover depth ----------
   Shadows appear only in response to interaction — feedback, not
   a resting decoration. */
.box,
.doc-list a,
.event-card {
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
}

.doc-list a:hover,
.doc-list a:focus-visible {
  background-color: var(--section-hover, rgba(51, 85, 47, 0.05));
}

.doc-list a:hover .icon,
.doc-list a:focus-visible .icon {
  transform: translateX(3px);
  transition: transform 0.2s var(--ease-out);
}

.event-card:hover {
  background-color: rgba(51, 85, 47, 0.04);
}

.event-card:hover .event-date {
  border-color: var(--fairway-accent);
  transition: border-color 0.2s var(--ease-out);
}

/* The callout flag gives a small, single wave the moment the box
   enters view — one signature gesture, not a looping animation */
@keyframes flag-wave {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(-8deg); }
  60% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

.callout.is-visible .callout-label .icon {
  animation: flag-wave 0.6s var(--ease-out) 0.5s;
  transform-origin: 20% 100%;
}

/* Nav links: the active/hover background sweeps in rather than
   snapping, and current-page state gets a small underline tick */
.main-nav a {
  position: relative;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero {
    background-attachment: scroll;
  }

  .btn:hover,
  .doc-list a:hover .icon {
    transform: none;
  }

  .callout.is-visible .callout-label .icon {
    animation: none;
  }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 600px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.5rem; }

  .hero h1 { font-size: 2.1rem; }
  .hero p { font-size: 1.15rem; }

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav ul {
    width: 100%;
  }

  .main-nav a {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .glance-list li {
    flex-direction: column;
    gap: 0.3rem;
  }

  .glance-list .glance-label {
    flex: none;
  }
}

/* ---------- Printable application (membership-print.html) ---------- */
.print-form {
  max-width: 720px;
}

.print-field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

.print-field label {
  flex: 0 0 auto;
  min-width: 9rem;
  font-weight: 700;
  color: var(--fairway-deep);
  margin-bottom: 0;
}

.print-field input {
  flex: 1 1 200px;
  min-width: 150px;
  border: none;
  border-bottom: 2px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  padding: 0.4rem 0.2rem;
}

.print-field input:focus {
  border-bottom-color: var(--fairway-accent);
  outline: none;
}

/* Printing any page: strip chrome and decoration, keep it legible
   on paper and light on ink. */
@media print {
  .no-print,
  .site-header,
  .site-footer,
  .hero,
  .skip-link,
  .celebration,
  .preview-banner {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }

  .box,
  .callout,
  .success-box {
    box-shadow: none;
    border: 1px solid #000000;
  }

  .print-field input {
    border-bottom-color: #000000;
  }
}