/*
Theme Name: Cycling With Cancer
Theme URI: https://noblehousemedia.com
Author: Noble House Media Group
Author URI: https://noblehousemedia.com
Description: Custom theme for Cycling With Cancer, Frank Soltesz's fundraising site for the Closer to Free Ride, benefiting Smilow Cancer Research Center and Yale New Haven Hospital.
Version: 1.0.0
License: All Rights Reserved
Text Domain: cwc
*/

/* =========================================================
   Cycling With Cancer — stylesheet
   Contents:
   1. Fonts
   2. Custom properties
   3. Reset & base
   4. Layout helpers
   5. Buttons
   6. Header / navigation
   7. Hero
   8. Sections, cards, icons, stats
   9. Tables, sponsor tiers, FAQ, countdown
   10. Forms
   11. Footer
   12. Responsive
   ========================================================= */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/poppins-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter-700.woff2") format("woff2");
}

/* ---------- 2. Custom properties ---------- */
:root {
  --yellow: #FAD834;
  --green: #378D66;
  --green-dark: #2A6E4F;
  --green-darker: #163828;
  --orange: #E99137;
  --blue: #1E5EAE;
  --blue-dark: #164A8C;

  --ink: #17241D;
  --body: #445048;
  --muted: #6B766F;
  --bg: #FFFFFF;
  --bg-soft: #F7F5EC;
  --bg-green-tint: #EBF3EF;
  --border: #E3E1D3;
  --danger: #C6432E;

  --font-head: "Poppins", "Trebuchet MS", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1160px;
  --container-narrow: 800px;
  --radius: 1rem;
  --radius-sm: 0.6rem;
  --shadow: 0 1px 2px rgba(15, 35, 25, 0.05), 0 10px 30px rgba(15, 35, 25, 0.08);
  --shadow-hover: 0 6px 16px rgba(15, 35, 25, 0.08), 0 18px 40px rgba(15, 35, 25, 0.14);
  --transition: 0.25s ease;
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration-color: rgba(30, 94, 174, 0.35); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.5em; }
main { display: block; }
button { font-family: inherit; }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -3.5rem;
  background: var(--green-darker);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 200;
  transition: top var(--transition);
  font-weight: 600;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ---------- 4. Layout helpers ---------- */
.container {
  width: 92%;
  max-width: var(--container);
  margin-inline: auto;
}
.container--narrow {
  width: 92%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.section {
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
}
.section--alt { background: var(--bg-soft); }
.section--tint { background: var(--bg-green-tint); }
.section-head {
  max-width: 700px;
  margin-bottom: 2.75rem;
}
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--bg-green-tint);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.lede {
  font-size: 1.15rem;
  color: var(--body);
}

.grid { display: grid; gap: 1.75rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; box-shadow: var(--shadow-hover); }

.btn-accent { background: var(--yellow); color: var(--green-darker); }
.btn-accent:hover { background: #f5c400; color: var(--green-darker); box-shadow: var(--shadow-hover); }

.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); color: #fff; box-shadow: var(--shadow-hover); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--green);
  color: var(--green);
}
.btn-outline-dark:hover { background: var(--bg-green-tint); }

.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* ---------- 6. Header / navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FEFEFE;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(15, 35, 25, 0.08); }

.nav-inner {
  width: 94%;
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  height: 85px;
  width: auto;
}
@media (max-width: 1279px) {
  .brand img { height: 80px; width: auto; }
}
.brand span {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  height: 2px;
  background: var(--ink);
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle span { top: 1.2rem; }
.nav-toggle span::before { top: -0.55rem; }
.nav-toggle span::after { top: 0.55rem; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.nav-primary { display: flex; align-items: center; gap: 1.9rem; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--green);
  transition: width var(--transition);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--green); }
.nav-links a[aria-current="page"]::after { width: 100%; }

.nav-item--dropdown { position: relative; }
.nav-item--dropdown > button {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
  padding: 0.4rem 0;
}
.nav-item--dropdown > button::after {
  content: "";
  width: 0.45em; height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.2em;
  transition: transform var(--transition);
}
.nav-item--dropdown.is-open > button::after,
.nav-item--dropdown:hover > button::after { transform: rotate(-135deg); margin-top: 0.15em; }
.nav-item--dropdown:has(a[aria-current="page"]) > button { color: var(--green); }

/* Clickable parent variant (children have no Description) — real <a>, same
   caret as the button variant, replacing the inherited underline-on-hover. */
.nav-item--dropdown > a { display: flex; align-items: center; gap: 0.3rem; }
/* .nav-links a::after / :hover::after / [aria-current="page"]::after (the
   plain underline effect) share this same a::after hook at matching or
   higher specificity in various states (hover, current page), and would
   otherwise stretch/reposition this caret depending on which state is
   active. !important on the caret's own box locks it down regardless. */
.nav-item--dropdown > a::after {
  content: "";
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: 0.45em !important;
  height: 0.45em !important;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.2em;
  background: none !important;
  transition: transform var(--transition);
}
.nav-item--dropdown.is-open > a::after,
.nav-item--dropdown:hover > a::after { transform: rotate(-135deg); margin-top: 0.15em; }

/* Separate mobile-only tap target for the clickable-link dropdown variant —
   hidden on desktop, where hovering the link already reveals the dropdown. */
/* Scoped as ".nav-item--dropdown > .dropdown-toggle" (2 classes), not just
   ".dropdown-toggle" (1 class) — otherwise ".nav-item--dropdown > button"
   (which styles the Sweepstakes-style button, and also matches this element
   since it's a <button> too) wins on specificity and makes it visible. */
.nav-item--dropdown > .dropdown-toggle { display: none; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  min-width: 260px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item--dropdown:hover .dropdown-menu,
.nav-item--dropdown.is-open .dropdown-menu,
.nav-item--dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
}
.dropdown-menu a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
}
.dropdown-menu a:hover { background: var(--bg-green-tint); color: var(--green); }
.dropdown-menu a small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.nav-donate { margin-left: 0.25rem; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: var(--container);
  margin-inline: auto;
  padding-block: 3.5rem;
}
.hero--photo {
  background-size: cover;
  background-position: center;
  min-height: 62vh;
}
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 35, 25, 0.25) 0%, rgba(12, 30, 22, 0.92) 100%);
}
.hero--tall { min-height: 84vh; }
.hero--short { min-height: 48vh; }
.hero--brand {
  min-height: 34vh;
  background: linear-gradient(125deg, var(--green-darker) 0%, var(--green) 55%, var(--blue-dark) 100%);
  align-items: center;
}
.hero--brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(250, 216, 52, 0.16) 2px, transparent 2px);
  background-size: 28px 28px;
  opacity: 0.5;
}
.hero-crumb {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--yellow);
  margin-bottom: 0.75rem;
}
.hero h1 { color: #fff; margin-bottom: 0.45em; }
.hero p { color: rgba(255, 255, 255, 0.92); max-width: 640px; }
.hero .btn-row { margin-top: 2rem; }

.hero-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; justify-content: space-between; }
.hero-layout__main { flex: 1 1 420px; }
.fundraising-card {
  flex: 0 1 300px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  backdrop-filter: blur(6px);
}
.fundraising-card h3 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.fundraising-card__amount { font-size: 2.1rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.fundraising-card__goal { color: rgba(255, 255, 255, 0.85); margin: 0.4rem 0 1rem; max-width: none; }
.fundraising-card__bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; margin-bottom: 1rem; }
.fundraising-card__bar-fill { height: 100%; background: var(--yellow); border-radius: 999px; }
.fundraising-card a { color: #fff; font-weight: 600; text-decoration: underline; }
.fundraising-card a:hover { color: var(--yellow); }

/* ---------- 8. Sections, cards, icons, stats ---------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  height: 100%;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }
.card a.card-link { font-weight: 600; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}
.icon-badge svg { width: 1.6rem; height: 1.6rem; }
.icon-badge--green { background: var(--green); }
.icon-badge--blue { background: var(--blue); }
.icon-badge--orange { background: var(--orange); }
.icon-badge--yellow { background: var(--yellow); color: var(--green-darker); }

.stats {
  background: var(--green-darker);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  text-align: center;
}
.stats__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  color: var(--yellow);
}
.stats__label {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.cta-band {
  position: relative;
  background-size: cover;
  background-position: center top;
  color: #fff;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(22, 56, 40, 0.92), rgba(30, 94, 174, 0.82));
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.92); }
.cta-band .btn-row { justify-content: center; }

.list-check { list-style: none; padding-left: 0; }
.list-check li {
  position: relative;
  padding-left: 1.9rem;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1em; height: 1.1em;
  border-radius: 50%;
  background: var(--bg-green-tint);
  box-shadow: inset 0 0 0 1.5px var(--green);
}
.list-check li::after {
  content: "";
  position: absolute;
  left: 0.32em; top: 0.56em;
  width: 0.45em; height: 0.42em;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.quote-block {
  border-left: 4px solid var(--yellow);
  padding-left: 1.5rem;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink);
  font-weight: 600;
  margin: 2rem 0;
}

/* ---------- 9. Tables, sponsor tiers, FAQ, countdown ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.75rem 0;
}
table { width: 100%; border-collapse: collapse; min-width: 300px; }
table caption { text-align: left; padding: 1rem 1.25rem 0; font-weight: 600; color: var(--ink); }
th, td { padding: 0.85rem 1.25rem; text-align: left; }
thead th { background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--bg-soft); }
td, th { border-bottom: 1px solid var(--border); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
.num-cell { font-family: var(--font-head); font-weight: 700; color: var(--green); }

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 1.15rem 0;
}
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--bg-green-tint);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.faq details[open] summary::after { transform: rotate(135deg); background: var(--green); color: #fff; }
.faq .faq-answer { padding-top: 0.9rem; max-width: 68ch; }
.faq .faq-answer p:last-child { margin-bottom: 0; }

.countdown {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.countdown__item {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.15rem;
  min-width: 84px;
  text-align: center;
}
.countdown__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--yellow);
}
.countdown__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
.countdown-note { margin-top: 1rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); }

.callout {
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin: 2rem 0;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}
.callout--green { background: var(--bg-green-tint); border-color: rgba(55, 141, 102, 0.25); }
.callout h3 { margin-bottom: 0.5rem; }
.callout p:last-child { margin-bottom: 0; }

.entry-table td:first-child, .entry-table th:first-child { font-weight: 600; }

.legal ol { counter-reset: item; list-style: none; padding-left: 0; }
.legal > ol > li {
  counter-increment: item;
  margin-bottom: 2rem;
  padding-left: 2.6rem;
  position: relative;
}
.legal > ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--green);
  font-size: 1.15rem;
}
.legal > ol > li > strong {
  display: block;
  font-family: var(--font-head);
  color: var(--ink);
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}
.legal ul { margin-top: 0.5rem; }
.legal .meta-block {
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border);
}
.legal .meta-block dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0; }
@media (max-width: 1279px) {
  .legal .meta-block dl { grid-template-columns: auto; }
}
.legal .meta-block dt { font-weight: 700; color: var(--ink); }
.legal .meta-block dd { margin: 0; color: var(--body); }

/* ---------- 10. Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-grid .form-group--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.form-group .req { color: var(--orange); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group select{-webkit-appearance:none;}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(55, 141, 102, 0.15);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: var(--danger);
}
.form-group label.error {
  display: block;
  color: var(--danger);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note { font-size: 0.88rem; color: var(--muted); margin-top: 1rem; }
.form-status {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: var(--bg-green-tint); color: var(--green-dark); border: 1px solid rgba(55, 141, 102, 0.3); }
.form-status.is-error { background: #FBEAE6; color: var(--danger); border: 1px solid rgba(198, 67, 46, 0.3); }

.contact-panel {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--border);
}

.contact-details { font-size: 0.92rem; margin-top: 1.5rem; }
.contact-details p { margin-bottom: 0.6rem; }
.contact-details a { color: var(--green); font-weight: 600; text-decoration: none; }
.contact-details a:hover { color: var(--green-dark); text-decoration: underline; }

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info__portrait {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--green-darker);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; text-decoration: none; }
.footer-brand img { height: 2.75rem; width: auto; border-radius: 0.4rem; }
.footer-brand span { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.05rem; }
.site-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.65rem; }
.footer-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer-links a:hover { color: var(--yellow); }
.footer-contact { font-size: 0.92rem; }
.footer-contact p { margin-bottom: 0.6rem; }
.footer-contact a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer-contact a:hover { color: var(--yellow); }

.social-row { display: flex; gap: 0.65rem; margin-top: 1.1rem; }
.social-row a {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background var(--transition), transform var(--transition);
}
.social-row a:hover { background: var(--yellow); color: var(--green-darker); transform: translateY(-2px); }
.social-row svg { width: 1.15rem; height: 1.15rem; }
/* Strava's mark is taller than wide (viewBox 42x59) — sizing it to the same
   square box as the other icons would squash it, so it gets its own
   proportional size instead. Its fill is the brand's own orange rather than
   currentColor, so it stays legible on both the default and hover (yellow)
   background. */
.social-row a.social-strava svg { width: 0.82rem; height: 1.15rem; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; }
.footer-bottom a:hover { color: var(--yellow); }
.footer-disclaimer {
  max-width: var(--container);
  margin: 0 auto 1.75rem;
  padding-inline: 4%;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

/* ---------- 12. Responsive nav collapse ---------- */
@media (max-width: 980px) {

  .dropdown-menu a small {

width: 100%;
}
.nav-links a {
flex-wrap: wrap;
}
  .nav-toggle { display: block; }
  /* backdrop-filter makes .site-header a containing block for fixed-position
     descendants, which breaks the full-screen sizing of .nav-primary below. */
  .site-header { backdrop-filter: none; }
  .nav-primary {
    position: fixed;
    inset: 110px 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem 6% 2.5rem;
    gap: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
  }
  body.nav-open .nav-primary { transform: translateX(0); }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  /* display:flex here (not the default inline) so plain links compute the
     same effective row height as the dropdown button/link variants below,
     which are flex too — inline vs. flex boxes can size padding/line-height
     differently, which otherwise made dropdown rows visibly taller. */
  .nav-links a { display: flex; align-items: center; padding: 1rem 0; }
  .nav-links a::after { display: none; }
  .nav-item--dropdown {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* .dropdown-menu is also a direct child of the flex container above (it
     sits after the link and toggle button) — force it onto its own full
     row instead of sitting beside them as a third flex item. */
  .nav-item--dropdown > .dropdown-menu { flex: 1 1 100%; }
  .nav-item--dropdown > button { width: 100%; justify-content: space-between; padding: 1rem 0; }
  /* Clickable-link variant: link just takes the row (its own caret is
     already hidden by .nav-links a::after above) — the separate
     .dropdown-toggle button provides tap access to the dropdown instead,
     without hijacking the link's own tap target. */
  .nav-item--dropdown > a { flex: 1; width: auto; padding: 1rem 0; }
  .nav-item--dropdown > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    width: 2.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
  }
  .nav-item--dropdown > .dropdown-toggle::after {
    content: "";
    width: 0.5em; height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
  }
  .nav-item--dropdown.is-open > .dropdown-toggle::after { transform: rotate(-135deg); }
  .dropdown-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    box-shadow: none;
    border: none;
    background: var(--bg-soft);
    width: 100%;
    max-width: none;
    margin-bottom: 0.5rem;
  }
  .nav-item--dropdown.is-open .dropdown-menu { display: block; }
  .nav-donate { margin: 1.5rem 0 0; }
  .nav-donate .btn { width: 100%; }
}

/* ---------- 13. Blog (WordPress-only additions) ---------- */
.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__date {
  font-family: var(--font-head);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.blog-card__body h3 { margin-bottom: 0.6rem; }
.blog-card__body h3 a { color: var(--ink); text-decoration: none; }
.blog-card__body h3 a:hover { color: var(--green); }
.blog-card__body p { color: var(--muted); flex: 1; }
.blog-card__body .card-link { margin-top: 0.5rem; display: inline-block; }

.post-content { font-size: 1.05rem; }
.post-content h2 { margin-top: 2rem; }
.post-content h3 { margin-top: 1.5rem; }
.post-content img { border-radius: var(--radius); box-shadow: var(--shadow); }
.post-content blockquote {
  border-left: 4px solid var(--yellow);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink);
  font-weight: 600;
}
.post-content a { color: var(--green); font-weight: 600; }

/* ---------- 14. Gravity Forms theming ---------- */
/* Targets both the classic ("legacy") and current (2.5+ "Orbital") markup,
   since class names are stable tag-agnostic hooks either way (<li> or <div>
   fields, <ul> or <div> field lists).

   The Orbital theme sets its colors/radius via CSS custom properties
   declared in a per-form inline <style> block with high specificity
   (#gform_wrapper_N.gform-theme), which otherwise beats plain overrides in
   this stylesheet. Overriding those same variables here, with !important,
   is the reliable way to win regardless of form ID or load order. */
.gform_wrapper.gform-theme {
  --gf-ctrl-border-color: var(--border) !important;
  --gf-color-primary: var(--green) !important;
  --gf-color-primary-darker: var(--green-dark) !important;
  --gf-color-primary-contrast: #fff !important;
  --gf-color-in-ctrl-primary: var(--green) !important;
  --gf-color-in-ctrl-primary-darker: var(--green-dark) !important;
  --gf-ctrl-label-color-primary: var(--ink) !important;
  --gf-ctrl-label-color-secondary: var(--ink) !important;
  --gf-radius: var(--radius-sm) !important;
}

.gform_wrapper { max-width: none; }
.gform_wrapper .gform_heading { margin-bottom: 1.75rem; }
.gform_wrapper .gform_title {
  font-family: var(--font-head);
  color: var(--ink);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  margin: 0 0 0.4em;
}
.gform_wrapper .gform_description { color: var(--body); }
body select.gfield_select{
  height: 41px;
padding: 1px 14px !important;
font-size: 15px !important;
}
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 620px) {
  .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}
.gform_wrapper .gfield {
  grid-column: span 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 620px) {
  .gform_wrapper .gfield { grid-column: span 1 !important; }
}
.gform_wrapper .gfield--width-half,
.gform_wrapper .gf_left_half,
.gform_wrapper .gf_right_half { grid-column: span 1; }
.gform_wrapper .gfield_textarea,
.gform_wrapper .gfield--type-textarea { grid-column: span 2; }

.gform_wrapper .gfield_label,
.gform_wrapper label.gfield_label,
.gform_wrapper legend.gfield_label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gfield_required { color: var(--orange); margin-left: 0.25em; }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important;
  padding: 0.85rem 1rem !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gform_wrapper select,
.gform_wrapper .ginput_container_select select {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: light;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background-color: #fff !important;
}
.gform_wrapper select option {
  color: var(--ink);
  background: #fff;
}
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 4px rgba(55, 141, 102, 0.15) !important;
}
.gform_wrapper textarea { resize: vertical; min-height: 140px !important; }

.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: var(--danger);
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  display: block;
  color: var(--danger);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.gform_wrapper .gform_validation_errors {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  background: #FBEAE6;
  color: var(--danger);
  border: 1px solid rgba(198, 67, 46, 0.3);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 0.5rem;
  padding: 0;
}
.gform_wrapper .gform_button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100% !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  padding: 0.85rem 1.7rem !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  cursor: pointer;
  background: var(--green) !important;
  color: #fff !important;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.gform_wrapper .gform_button:hover {
  background: var(--green-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message {
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-weight: 600;
  background: var(--bg-green-tint);
  color: var(--green-dark);
  border: 1px solid rgba(55, 141, 102, 0.3);
}