/* ==========================================================================
   STEP St. John's — Sport Tourism Event Partnership
   Shared design system
   Brand palette preserved from the original site (deep red / navy / orange)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --red-900: #6d141a;
  --red-800: #8b1a1a;
  --red-700: #ac162e; /* primary brand red */
  --red-600: #c41e39;
  --red-050: #fdf1f3;

  --navy-900: #152538;
  --navy-800: #1a365d;
  --navy-700: #223248;
  --navy-600: #2c4a6e;

  --orange: #f97316;
  --orange-600: #ea6a0b;

  --ink: #16202e;
  --body: #4a5568;
  --muted: #718096;
  --line: #e3e8ef;
  --bg: #f7f8fa;
  --white: #ffffff;

  --ok: #15803d;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 3px rgba(16, 26, 40, 0.06), 0 1px 2px rgba(16, 26, 40, 0.04);
  --shadow: 0 4px 16px rgba(16, 26, 40, 0.08);
  --shadow-md: 0 10px 30px rgba(16, 26, 40, 0.1);
  --shadow-lg: 0 20px 50px rgba(16, 26, 40, 0.16);

  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Montserrat", "Inter", system-ui, sans-serif;

  --maxw: 1200px;
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keeps anchor targets (e.g. venues.html#indoor) clear of the sticky
     header instead of landing underneath it. */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* The `hidden` attribute must always win. Card components set their own
   `display` (e.g. .venue-card is display:flex), which would otherwise
   override the browser default and leave filtered-out cards on screen. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--red-700);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  text-decoration: none;
}

.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;
}

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

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 84px 0;
}

.section--tight {
  padding: 60px 0;
}

.section--white {
  background: var(--white);
}

.section--navy {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-800) 100%);
  color: rgba(255, 255, 255, 0.86);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: #fff;
}

.grid {
  display: grid;
  gap: 26px;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- Section heading ---------- */
.section-head {
  max-width: 720px;
  margin: 0 auto 46px;
  text-align: center;
}

.section-head--left {
  margin-left: 0;
  text-align: left;
}

.section-head p {
  font-size: 1.06rem;
  margin-bottom: 0;
  color: var(--body);
}

.section--navy .section-head p {
  color: rgba(255, 255, 255, 0.78);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-700);
  margin-bottom: 14px;
}

.section--navy .eyebrow {
  color: var(--orange);
}

.accent-bar {
  width: 74px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--red-700) 0%, var(--orange) 100%);
  margin: 0 0 22px;
}

.section-head .accent-bar {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

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

.btn-primary {
  background: var(--red-700);
  color: #fff;
  box-shadow: 0 8px 20px rgba(172, 22, 46, 0.28);
}

.btn-primary:hover {
  background: var(--red-600);
  color: #fff;
}

.btn-navy {
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 8px 20px rgba(26, 54, 93, 0.26);
}

.btn-navy:hover {
  background: var(--navy-600);
  color: #fff;
}

.btn-light {
  background: #fff;
  color: var(--red-700);
  border-color: #fff;
}

.btn-light:hover {
  background: #f3f4f6;
  color: var(--red-800);
}

.btn-outline {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--line);
}

.btn-outline:hover {
  border-color: var(--navy-800);
  color: var(--navy-900);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.86rem;
}

.btn-lg {
  padding: 16px 34px;
  font-size: 1.02rem;
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-row--center {
  justify-content: center;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--red-700);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.3);
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  height: 54px;
  width: auto;
  border-radius: 6px;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  margin: 0 auto;
  transition: transform 0.25s ease, opacity 0.2s ease;
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Navigation ---------- */
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav-link:hover,
.nav-item.is-open > .nav-link {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  text-decoration: none;
}

.nav-link i {
  font-size: 0.66rem;
  opacity: 0.75;
  transition: transform 0.22s ease;
}

.nav-item.is-open > .nav-link i {
  transform: rotate(180deg);
}

.nav-link[aria-current="page"] {
  background: rgba(0, 0, 0, 0.22);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-item {
  position: relative;
}

/* Dropdown panels */
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 9px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.nav-item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background 0.14s ease;
}

.dropdown-link:hover {
  background: var(--red-050);
  text-decoration: none;
}

.dropdown-link i {
  color: var(--red-700);
  font-size: 1rem;
  width: 20px;
  text-align: center;
  margin-top: 3px;
  flex-shrink: 0;
}

.dropdown-link span {
  display: block;
}

.dl-title {
  font-weight: 600;
  font-size: 0.93rem;
  line-height: 1.3;
}

.dl-sub {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 1px;
}

.dropdown-wide {
  min-width: 620px;
  right: 0;
  left: auto;
  padding: 0;
  overflow: hidden;
}

.dw-head {
  background: var(--navy-800);
  color: #fff;
  padding: 15px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dw-head h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.dw-head span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}

.dw-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dw-col {
  padding: 18px 20px 20px;
}

.dw-col + .dw-col {
  border-left: 1px solid var(--line);
}

.dw-label {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-700);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.dw-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 11px;
  margin-bottom: 6px;
  border: 1px solid #eef1f5;
  border-radius: var(--radius-sm);
  background: #fafbfc;
  color: var(--ink);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.dw-item:last-child {
  margin-bottom: 0;
}

.dw-item:hover {
  background: var(--red-050);
  border-color: #e5c3c9;
  text-decoration: none;
}

.dw-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--red-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.dw-name {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.dw-desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.3;
}

.dw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: #f6f7f9;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
}

.dw-foot a {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dw-foot .dw-note {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background: var(--navy-900);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(109, 20, 26, 0.94) 0%,
    rgba(139, 26, 26, 0.88) 34%,
    rgba(21, 37, 56, 0.9) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 92px 0 88px;
  max-width: 780px;
}

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.hero h1 .hl {
  background: linear-gradient(100deg, #ffd9a0 0%, var(--orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin-bottom: 30px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* ---------- Stat strip ---------- */
.stat-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  padding: 22px 20px;
  backdrop-filter: blur(8px);
  text-align: center;
}

.stat-card .stat-num {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.stat-card .stat-label {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 6px;
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card-pad {
  padding: 28px;
}

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

.feature-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red-700);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--red-700) 0%, var(--red-900) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.28rem;
  margin-bottom: 18px;
}

.feature-icon--navy {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
}

.feature-card h3 {
  margin-bottom: 10px;
}

.feature-card p {
  margin-bottom: 0;
  color: var(--body);
  font-size: 0.96rem;
}

/* Icon list rows */
.icon-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 22px;
}

.icon-row:last-child {
  margin-bottom: 0;
}

.icon-row .ic {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--red-050);
  color: var(--red-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.icon-row h4 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.icon-row p {
  margin: 0;
  font-size: 0.93rem;
}

/* ---------- Split media section ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}

.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.split-media--stack {
  display: grid;
  gap: 20px;
}

.media-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  color: #fff;
}

.media-figure figcaption strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  margin-bottom: 3px;
}

.media-figure figcaption span {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  color: #fff;
  background: linear-gradient(120deg, var(--red-900) 0%, var(--red-700) 48%, var(--navy-900) 100%);
  overflow: hidden;
}

.page-hero.has-photo .page-hero-bg {
  position: absolute;
  inset: 0;
}

.page-hero.has-photo .page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero.has-photo .page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(109, 20, 26, 0.93) 0%,
    rgba(139, 26, 26, 0.85) 45%,
    rgba(21, 37, 56, 0.9) 100%
  );
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 66px 0 62px;
  max-width: 860px;
}

.page-hero h1 {
  color: #fff;
  margin-bottom: 14px;
}

.page-hero p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 16px;
  list-style: none;
  padding: 0;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 9px;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Filters / chips ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--body);
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.chip:hover {
  border-color: var(--red-700);
  color: var(--red-700);
}

.chip[aria-pressed="true"] {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
  box-shadow: 0 6px 16px rgba(172, 22, 46, 0.26);
}

.chip--navy[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  box-shadow: 0 6px 16px rgba(26, 54, 93, 0.26);
}

.result-count {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 22px;
}

.result-count strong {
  color: var(--ink);
}

/* ---------- Venue cards ---------- */
.venue-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.venue-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.venue-thumb {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
}

.venue-thumb--red {
  background: linear-gradient(135deg, var(--red-700) 0%, var(--red-900) 100%);
}

.venue-thumb i {
  font-size: 2.4rem;
  opacity: 0.92;
}

/* Venue photo — sits over the icon panel when a file exists at the
   venue's "photo" path. The icon underneath is the fallback, so a
   missing file simply leaves the branded panel in place.
   Starts transparent and fades in from the onload handler. It is NOT
   hidden with `hidden`: that would give a lazy image no layout box, so it
   would never be fetched and could never load. */
.venue-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .venue-photo,
  .event-photo {
    transition: none;
  }
}

/* "has-photo" is added by js/venues.js once the image really loads,
   so the tag styling never changes for a venue that has no photo. */
.venue-card.has-photo .venue-tag {
  z-index: 2;
  background: rgba(172, 22, 46, 0.94);
  color: #fff;
}

.venue-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--red-800);
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}

.venue-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.venue-body h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.venue-desc {
  font-size: 0.9rem;
  color: var(--body);
  margin-bottom: 14px;
  flex: 1;
}

.venue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 0;
}

/* Booking note — sits under the sport pills, separated by a hairline */
.venue-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

.venue-note i {
  color: var(--red-700);
  font-size: 0.8rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- Venue card contact block ----------
   Shows a venue's own phone / email / website when js/venues.js has them,
   and falls back to the STEP enquiry button when it doesn't. */
.venue-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* The booking note already draws a hairline — don't stack a second one. */
.venue-note ~ .venue-contact {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

/* Only rendered when a venue has a named contact (e.g. a bookings desk) */
.venue-contact-name {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.venue-contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
  transition: color 0.18s ease;
}

.venue-contact-line:hover {
  color: var(--red-700);
  text-decoration: none;
}

.venue-contact-line i {
  width: 14px;
  font-size: 0.8rem;
  color: var(--red-700);
  text-align: center;
  flex-shrink: 0;
}

/* Fallback button: asks STEP's team about a venue with no listed contact */
.venue-ask {
  width: 100%;
  margin-top: 0;
  padding: 10px 14px;
  font-size: 0.82rem;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1f3f7;
  color: var(--body);
}

.pill--red {
  background: var(--red-050);
  color: var(--red-800);
}

.pill--navy {
  background: #eaeff6;
  color: var(--navy-800);
}

/* Empty state */
.empty-state {
  padding: 54px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.empty-state i {
  font-size: 2rem;
  color: var(--line);
  margin-bottom: 14px;
}

/* ---------- Event cards ---------- */
.event-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 30px;
}

.event-card__main {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.event-figure {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--red-700) 0%, var(--navy-900) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 22px;
  text-align: center;
  min-height: 210px;
}

/* Event photo — fills the figure panel once the file exists. The
   gradient panel with its icon and sport label is the fallback.
   Starts transparent and fades in from the onload handler; see
   .venue-photo for why `hidden` must not be used here. */
.event-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Scrim so the sport label stays readable over any photo */
.event-card.has-photo .event-figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top, rgba(10, 20, 35, 0.82), rgba(10, 20, 35, 0));
  z-index: 1;
  pointer-events: none;
}

.event-figure i,
.event-figure .ef-label {
  position: relative;
  z-index: 2;
}

.event-figure i {
  font-size: 2.6rem;
}

/* With a real photo the icon is redundant, so it steps aside */
.event-card.has-photo .event-figure {
  justify-content: flex-end;
}

.event-card.has-photo .event-figure i {
  display: none;
}

.event-figure .ef-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.event-card.has-photo .ef-label {
  background: rgba(172, 22, 46, 0.94);
  color: #fff;
  padding: 6px 13px;
  border-radius: 999px;
}

.event-body {
  padding: 28px 30px;
}

.event-body h2,
.event-body h3 {
  font-size: 1.42rem;
  margin-bottom: 12px;
}

.event-body p {
  font-size: 0.97rem;
}

.event-contact {
  border-top: 1px solid var(--line);
  background: #fafbfc;
  padding: 22px 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.event-contact h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.event-contact p {
  margin: 0 0 5px;
  font-size: 0.92rem;
}

.event-contact strong {
  color: var(--ink);
}

.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--body);
  font-size: 0.92rem;
}

.contact-line i {
  color: var(--red-700);
  width: 16px;
  text-align: center;
}

.contact-line:hover {
  color: var(--red-700);
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  padding: 10px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--red-700) 0%, var(--navy-800) 100%);
}

.timeline-item {
  position: relative;
  padding-left: 56px;
  margin-bottom: 26px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--navy-800);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--red-700);
}

.timeline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red-700);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

.timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.timeline-year {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(120deg, var(--red-700) 0%, var(--navy-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.timeline-events {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.timeline-events li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.94rem;
  color: var(--body);
}

.timeline-events li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.38rem;
  color: var(--navy-800);
  margin-top: 8px;
  flex-shrink: 0;
}

.timeline-count {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  color: var(--muted);
}

.timeline-count i {
  color: var(--red-700);
  margin-right: 7px;
}

/* ---------- Contact / directory cards ---------- */
.search-field {
  position: relative;
  max-width: 620px;
  margin: 0 auto 40px;
}

.search-field input {
  width: 100%;
  padding: 15px 46px 15px 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.search-field input:focus {
  outline: none;
  border-color: var(--red-700);
  box-shadow: 0 0 0 3px rgba(172, 22, 46, 0.12);
}

.search-field > i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}

.search-field .search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  display: none;
}

.search-field .search-clear:hover {
  background: #f1f3f7;
  color: var(--ink);
}

.search-field.has-value .search-clear {
  display: block;
}

.person-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.person-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.person-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--red-700) 0%, var(--red-900) 100%);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Org-logo variant of the avatar (see js/members.js "orgLogo").
   White chip so a dark monochrome mark keeps its contrast against the
   navy/red circle, and the mark is inset so it never touches the edge. */
.avatar--logo {
  background: #fff;
  border: 1px solid var(--line);
}

.avatar--logo img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
}

/* Wordmark variant (see js/members.js "orgLogoWide").
   Some organizations have no square emblem at all — their only logo is a
   wide horizontal lockup carrying two lines of text (Destination St. John's
   is one). Squeezed into the 50px circle that text renders at roughly 8px a
   line and is unreadable, so the avatar becomes a wide rounded panel instead
   and the mark gets the horizontal room it was drawn for. */
.avatar--wordmark {
  width: 132px;
  height: 50px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.avatar--wordmark img {
  width: 86%;
  height: 76%;
  object-fit: contain;
  display: block;
}

/* In the single-column layout the card is wide and the name no longer needs
   the space the row layout reserved, so the wordmark can breathe. */
@media (max-width: 900px) {
  .avatar--wordmark {
    width: 168px;
  }
}

.person-card h3 {
  font-size: 1.05rem;
  margin: 0 0 3px;
}

.person-role {
  font-size: 0.85rem;
  color: var(--body);
  margin: 0 0 8px;
  line-height: 1.4;
}

.org-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: #f1f3f7;
  color: var(--navy-800);
}

.person-lines {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
}

.person-lines .contact-line {
  font-size: 0.88rem;
  word-break: break-word;
}

.person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--navy-800);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}

.mini-btn:hover {
  border-color: var(--red-700);
  color: var(--red-700);
  text-decoration: none;
}

.mini-btn.is-copied {
  border-color: var(--ok);
  color: var(--ok);
}

/* ---------- Partner cards ----------
   our-partners.html shows all eight organizations in ONE uniform grid of compact
   cards, using the shared .card .card-pad .card--lift shell plus the .tile-mark
   logo panel below. There is no longer a "core partners" wide-card list or a
   separate municipal row, so the old two-column .partner-card / .partner-mark /
   .partner-main / .partner-contact rules were removed along with that markup
   (.partner-sub and .partner-crop survived the change and are still in use).
   The previous two-section layout remains in git history if it is ever wanted back. */

/* ---------- Compact partner tile ----------
   The logo or icon panel at the top of each partner card. The card shell itself
   comes from .card .card-pad .card--lift, so this only styles the panel. */
/* Height is set high enough for the tallest mark on the page (the square
   SJSEL lockup at 92px + 28px padding = 120px) so all eight panels match. Wide
   wordmarks stay at their 56px cap and simply centre in the extra room. */
.tile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: #f6f7f9;
  border: 1px solid var(--line);
  text-align: center;
}

/* Logos are contained, never stretched: three of the files are wide wordmarks
   and the Government of NL file is padded (see .partner-crop below). */
.tile-mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 56px;
  object-fit: contain;
}

/* The padded Government of NL canvas keeps its crop wrapper. Width is capped so
   the crop box (ratio 540/269) lands near the other marks' 56px height instead
   of making this one panel taller than its neighbours. */
.tile-mark .partner-crop {
  max-width: 112px;
}

.tile-mark i {
  font-size: 1.6rem;
  color: var(--red-700);
}

/* St. John's Sports & Entertainment (200x200 JPG) — a square lockup carrying
   BOTH venue marks (Mary Brown's Centre top-left, SJCC bottom-right) on a
   teal/white diagonal. It is the organization's only published brand asset;
   there is no standalone SJSEL symbol.

   Two consequences:

   1. SIZE. Being square, it is height-limited inside the tile, so at the
      generic 56px cap each of the two venue wordmarks landed at roughly a
      third of that — illegible. Measured: at 56px neither name reads, at 76px
      only "mB CENTRE" reads, by ~92px both do. This modifier lifts the cap for
      this one logo only; the other marks keep their 56px cap.

   2. BACKGROUND. The JPEG has no alpha, but its two halves are teal and white
      rather than a flat backdrop, so no single blend mode can dissolve it
      (multiply muddies the teal). It keeps the tile's light panel, which reads
      as a mounting plate behind the square mark and keeps this card visually
      consistent with the other seven. */
/* NOTE the `.tile-mark img` prefix: the shared rule above is (0,1,1) and would
   otherwise beat a bare `.tile-logo--tall` at (0,1,0), quietly clamping this
   logo back to 56px — which is exactly the size at which it cannot be read.

   90px rather than 92px on purpose: 90 + 28px padding + 2px border = the tile's
   120px min-height exactly. At 92px this one panel stood 2px taller than the
   other seven. */
.tile-mark img.tile-logo--tall {
  max-width: 90px;
  max-height: 90px;
}

/* --- Municipal logos that arrived flattened onto a solid background -------
   Two of the three municipal files have no alpha channel, so the background
   colour is painted into the pixels and has to be dissolved into the panel.

   City of Mount Pearl (310x148 PNG) — opaque WHITE background, tightly
   cropped. multiply drops the white to whatever is behind it, so it reads as
   the tile's own #f6f7f9. This is the same treatment the Government of NL
   mark uses (.partner-crop). The white negative space *inside* the emblem
   (the slit through the cyan ring, the halo around the orange diamond) lands
   on the same colour the tile already is, so it stays invisible. */
.tile-logo--multiply {
  mix-blend-mode: multiply;
}

/* Town of Conception Bay South (800x453 JPG) — a DARK slate-blue wordmark baked
   onto a solid BLACK background, on a light panel. Left alone the lettering is
   near-invisible and the black shows as a block, so the image is inverted and
   the blend does the rest:

     invert(1)            black background -> white (multiply then drops it
                          into the panel's own colour); slate letters -> a warm
                          sand tone
     hue-rotate(180deg)   swings that warm tone back round to blue
     multiply             dissolves the now-white background into #f6f7f9

   A navy panel with `lighten` was tried first and rejected: `lighten` preserves
   the artwork exactly, but dark slate on dark navy has almost no contrast. This
   treatment trades an exact brand-colour match for legibility. See the README
   note — a transparent PNG of this wordmark would beat both.

   The JPG also carries ~115px of dead black padding on every side, which
   squashed the wordmark to roughly 30px tall at tile size. This box crops to
   the artwork band (measured 611x245 in the file) so the type fills the tile.
   object-fit: cover centres the crop, and the content band sits well inside
   the trimmed area, so no part of the wordmark is cut. */
.tile-crop {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 611 / 245;
}

.tile-crop img {
  display: block;
  width: 100%;
  height: 100%;
  /* Override the tile's own contain-and-cap rules (.tile-mark img), which would
     otherwise re-impose max-height and fight this box's crop. */
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: multiply;
}

/* Even card heights: push each "Visit website" button to the foot of its card
   so the buttons line up across a row regardless of description length. */
.grid--3 > .card--lift {
  display: flex;
  flex-direction: column;
}

.grid--3 > .card--lift > .btn:last-child {
  margin-top: auto;
}

/* --- Logo files that carry their own padding -------------------------------
   Some supplied logo files are not tightly cropped. The Government of
   Newfoundland and Labrador file (images/newfoundland-labrador-logo.png) is a
   600x600 canvas whose artwork occupies only a centred 540x269 band, with 165px
   of empty white above and below it. Used directly the mark renders far too
   small for whatever box it is given, and inside the avatar it is unreadable.

   .logo-crop gives such an image a box with the ARTWORK's own aspect ratio and
   lets object-fit: cover trim the surrounding padding, so the mark fills the
   space. Set the ratio per person via the optional "logoCrop" field in
   js/members.js, e.g. logoCrop: "540/269". A tightly cropped file needs none of
   this — omit "logoCrop" and it is sized directly, as the DSJ and Sport NL
   marks are. */
.logo-crop {
  display: block;
  overflow: hidden;
}

/* More specific than the avatar's own img rule (86%/76% contain), which would
   otherwise shrink the whole un-cropped canvas. */
.logo-crop img,
.avatar--wordmark .logo-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* In the wide avatar the crop fills the panel's height; the ratio then sets its
   width and the avatar's flex centring places it. */
.avatar--wordmark .logo-crop {
  height: 100%;
}

/* Partner-card version of the same thing, written directly into the HTML.
   The ratio is the Government of NL artwork's own (540 x 269).
   That file also sits on opaque white, so multiply blends it into the panel
   colour and no white rectangle shows. Safe on a light .tile-mark panel only —
   multiply against a dark background would darken the mark. */
.partner-crop {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 540 / 269;
}

.partner-crop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Organization line under a partner card's name ("Department of Community
   Services" etc.). Still used by three of the eight cards. */
.partner-sub {
  font-size: 0.86rem;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ---------- Info / note blocks ---------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--red-050);
  border-left: 4px solid var(--red-700);
  font-size: 0.94rem;
}

.note i {
  color: var(--red-700);
  margin-top: 3px;
}

.note p {
  margin: 0;
}

.note--navy {
  background: #eef2f8;
  border-left-color: var(--navy-800);
}

.note--navy i {
  color: var(--navy-800);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--red-800) 0%, var(--red-700) 45%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  top: -180px;
  right: -120px;
}

.cta-inner {
  position: relative;
  z-index: 2;
  padding: 72px 0;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.cta-inner h2 {
  color: #fff;
}

.cta-inner p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 28px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.8);
  border-top: 4px solid var(--red-800);
  padding: 56px 0 26px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 34px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.footer-brand img {
  height: 46px;
  width: auto;
  border-radius: 6px;
}

.footer-brand strong {
  display: block;
  font-family: var(--font-head);
  color: #fff;
  font-size: 1.05rem;
}

.footer-brand span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer p {
  font-size: 0.92rem;
}

.footer-heading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(172, 22, 46, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  padding: 9px 14px;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 4px;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.91rem;
  transition: background 0.16s ease, color 0.16s ease;
}

.footer-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.footer-links i {
  width: 17px;
  text-align: center;
  color: #ff6b74;
  flex-shrink: 0;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
  font-size: 0.9rem;
}

.footer-contact i {
  width: 17px;
  text-align: center;
  color: #ff6b74;
  margin-top: 4px;
  flex-shrink: 0;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.84);
}

.footer-contact a:hover {
  color: #fff;
}

/* Footer contact actions — "Email us" (mailto) + "Get involved".
   Inline-flex so they sit side by side when there is room and wrap
   onto separate lines in the narrower footer column. */
.footer-email-btn {
  margin: 0 8px 10px 0;
}

.social-row {
  display: flex;
  gap: 10px;
}

.social-row a {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(172, 22, 46, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: transform 0.18s ease, background 0.18s ease;
}

.social-row a:hover {
  transform: translateY(-2px);
  background: var(--red-600);
  text-decoration: none;
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.66);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.76);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.16s ease;
}

.footer-legal a:hover {
  color: #fff;
  background: rgba(172, 22, 46, 0.3);
  border-color: rgba(172, 22, 46, 0.5);
  text-decoration: none;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}

.field .req {
  color: var(--red-700);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-base);
  font-size: 0.96rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 138px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red-700);
  box-shadow: 0 0 0 3px rgba(172, 22, 46, 0.12);
}

.field-hint {
  font-size: 0.8rem;
  color: var(--muted);
}

.form-status {
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-ok {
  background: #e9f7ef;
  border: 1px solid #b7e2c8;
  color: #14632f;
}

.form-status.is-error {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #8f1d1d;
}

/* ---------- Email popup ----------
   A dialog around the "Email us" / "Contact our team" links, so a visitor
   gets a real message form instead of a bare mailto: link.
   z-index 1000 sits above the sticky header (999) and everything else.
   Visibility is driven by opacity + visibility rather than [hidden], so it
   can transition both ways while staying unfocusable when closed. */
.email-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 17, 31, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.email-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.email-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(8, 17, 31, 0.4);
  padding: 30px 30px 26px;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.22s ease;
}

.email-modal.is-open .email-dialog {
  transform: none;
}

.email-dialog h2 {
  margin-bottom: 8px;
}

.email-dialog > p {
  font-size: 0.93rem;
  color: var(--body);
  margin-bottom: 20px;
}

.email-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.email-close:hover {
  background: var(--red-700);
  border-color: var(--red-700);
  color: #fff;
}

.email-dialog .field textarea {
  min-height: 122px;
  /* The dialog's Message box is a fixed-height panel, so drop the drag handle.
     `resize: vertical` (the shared .field rule) draws a native diagonal grip in
     the bottom-right corner that reads as a stray artifact inside the modal. */
  resize: none;
}

/* Direct-address fallback under the buttons was removed on request —
   the dialog now ends at the Send message / Cancel row. The .email-direct
   rules that lived here went with it. */

/* Stops the page behind the dialog from scrolling */
body.email-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .email-modal {
    padding: 12px;
  }

  .email-dialog {
    padding: 24px 20px 22px;
    max-height: calc(100vh - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .email-modal,
  .email-dialog {
    transition: none;
  }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Utilities ---------- */
.text-center {
  text-align: center;
}

.text-white {
  color: #fff;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 16px;
}

.mt-3 {
  margin-top: 26px;
}

.mt-4 {
  margin-top: 40px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 8px;
}

.mb-2 {
  margin-bottom: 16px;
}

.mb-3 {
  margin-bottom: 26px;
}

.mb-4 {
  margin-bottom: 40px;
}

.lead {
  font-size: 1.1rem;
}

.prose p {
  font-size: 1.02rem;
}

.prose h2 {
  margin-top: 34px;
}

.prose h3 {
  margin-top: 26px;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 40px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  /* Mobile navigation */
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--red-800);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.32);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 14px 22px;
  }

  .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .nav-item:last-child {
    border-bottom: 0;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 16px 8px;
    font-size: 1rem;
    border-radius: 0;
  }

  .dropdown,
  .dropdown-wide {
    position: static;
    min-width: 0;
    right: auto;
    left: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.16);
    padding: 4px 8px 14px;
    display: none;
  }

  .nav-item.is-open > .dropdown {
    display: block;
  }

  .dropdown-link {
    color: rgba(255, 255, 255, 0.92);
  }

  .dropdown-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .dropdown-link i {
    color: #ff8891;
  }

  .dl-sub {
    color: rgba(255, 255, 255, 0.62);
  }

  .dw-head {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 8px;
  }

  .dw-cols {
    grid-template-columns: 1fr;
  }

  .dw-col + .dw-col {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .dw-item {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .dw-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.28);
  }

  .dw-name {
    color: #fff;
  }

  .dw-desc {
    color: rgba(255, 255, 255, 0.62);
  }

  .dw-foot {
    background: rgba(0, 0, 0, 0.2);
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  .dw-note {
    color: rgba(255, 255, 255, 0.62) !important;
  }

  .nav-item-cta {
    padding: 16px 0 0;
    border-bottom: 0;
  }

  .nav-item-cta .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .section {
    padding: 60px 0;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .split-media--order-first {
    order: -1;
  }

  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .event-card__main {
    grid-template-columns: 1fr;
  }

  .event-figure {
    padding: 30px 20px;
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Stacked layout: the photo becomes a banner strip across the top */
  .event-card.has-photo .event-figure {
    min-height: 180px;
    align-items: flex-end;
  }

  .event-contact {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    padding: 64px 0 60px;
  }

  .page-hero-inner {
    padding: 48px 0 46px;
  }

  .timeline::before {
    left: 12px;
  }

  .timeline-item {
    padding-left: 42px;
  }

  .timeline-item::before {
    left: 5px;
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 18px;
  }

  .grid--4,
  .stat-strip {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-logo {
    height: 44px;
  }

  .header-inner {
    padding: 0 16px;
  }

  .btn {
    width: 100%;
  }

  .btn-row {
    gap: 10px;
  }

  .event-body,
  .event-contact {
    padding: 22px 20px;
  }

  .partner-card {
    padding: 22px;
  }

  .chip {
    font-size: 0.8rem;
    padding: 8px 14px;
  }
}

@media (max-width: 420px) {
  .stat-card {
    padding: 18px 14px;
  }

  .timeline-card {
    padding: 18px 18px;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .filter-bar,
  .search-field {
    display: none !important;
  }

  body {
    background: #fff;
  }
}