/* Geneva Guardians shared design system, approved August 2026. */
@font-face {
  font-display: swap;
  font-family: "Porcine Heavy";
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/porcine-heavy.ttf") format("truetype");
}

:root {
  --ink: #000127;
  --dark-blue: #000127;
  --blue: #1d2765;
  --red: #a31916;
  --yellow: #ffd31a;
  --paper: #fafafa;
  --site-header-height: 5rem;
  --font-display: "Porcine Heavy", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

body { background: var(--paper); }

h1,
h2 {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-weight: 900;
  /* Override negative tracking tuned for the previous sans-serif display face. */
  letter-spacing: .015em !important;
  text-transform: uppercase;
}

.site-header {
  background: var(--dark-blue);
  min-height: var(--site-header-height);
  padding-block: .7rem;
}

.site-header .brand-logo {
  height: auto;
  width: clamp(8rem, 11vw, 9.5rem);
}

.header-social {
  border-radius: 999px;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.header-social span { display: none; }

.primary-navigation .nav-cta {
  border-radius: 999px;
  margin-left: .45rem;
  padding-inline: 1.35rem;
}

.button { border-radius: 999px; }

.skip-link {
  background: var(--yellow);
  border-radius: 999px;
  color: var(--blue);
  font-size: .875rem;
  font-weight: 850;
  left: 1rem;
  padding: .8rem 1rem;
  position: fixed;
  top: 1rem;
  transform: translateY(calc(-100% - 2rem));
  transition: transform .18s ease;
  z-index: 100;
}

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

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

/* A visible fallback for page families that do not define a stronger local
   focus treatment. Current color keeps the ring legible on light and dark
   sections without imposing one accent color on every background. */
:where(main, footer) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* Keep supporting labels and controls readable across the legacy page styles. */
nav,
.header-social,
.language-switcher a,
.button,
.eyebrow,
.card-kicker,
.training-status,
.proof-strip span,
.team-photo figcaption span,
.values-grid span,
.values-grid p,
.affiliation-card > span,
.text-link,
.membership-card > span,
.membership-card small,
.footer-legal p,
.footer-legal small,
.footer-links,
.history-stats span,
.formation-direction,
.formation-row-labels li,
.formation-figure figcaption,
.positions-jump-nav > span,
.trip-hero-cta span,
.trip-feature-image figcaption,
.figure-card-caption,
.trip-page-nav a,
.trip-status-grid span,
.trip-actions-note,
.trip-cta,
.trip-cta small,
.trip-facts span,
.programme-item time,
.rate-table th,
.registration-fallback,
.flight-note,
.accommodation-property span,
.accommodation-process p,
.accommodation-policy,
.accommodation-secondary,
.updates-list time,
.club-number,
.club-name span,
.option-label,
.join-training-card .card-kicker,
.card-actions .text-link,
.equipment-status,
.members-status,
.members-trip-date,
.members-resource-label,
.coach-status,
.person-role,
.contact-topic span,
.contribution-grid article > span {
  font-size: .875rem;
}

footer { background: var(--dark-blue); }
.footer-brand .brand-logo {
  height: auto;
  width: clamp(9rem, 13vw, 11rem);
}

/* Carry the reviewed component language through every secondary page. */
.trip-feature-image,
.figure-card,
.trip-page-nav,
.trip-status,
.trip-callout,
.registration-note,
.registration-form,
.logistics-card,
.accommodation-deposit,
.accommodation-warning,
.packing-grid section,
.faq-list details,
.members-hub-trip-card,
.members-resource-card,
.equipment-section-nav,
.equipment-quick-check,
.equipment-principle,
.equipment-card,
.equipment-source-block,
.formation-figure,
.positions-jump-nav,
.positions-intro,
.position-card,
.comparison-table-wrap,
.training-callout,
.starter-facts,
.prepare-grid > div,
.join-after,
.join-option-card,
.trial-layout,
.join-training-card,
.membership-copy,
.membership-price-card,
.practical-card,
.benefits-block,
.history-hero-card,
.history-photo,
.history-stats,
.timeline-item,
.recognition-list,
.person-card,
.governance-note,
.coach-card,
.contact-grid,
.contribution-grid,
.small-help,
.positions-legend {
  border-radius: 20px;
}

.trip-feature-image,
.figure-card,
.trip-status,
.members-hub-trip-card,
.members-resource-card,
.equipment-card,
.formation-figure,
.position-card,
.comparison-table-wrap,
.person-card,
.coach-card,
.contact-grid,
.contribution-grid,
.positions-legend {
  overflow: hidden;
}

.trip-feature-image figcaption { border-radius: 20px 0 0; }

.trip-status-grid,
.trip-facts,
.programme-list,
.equipment-grid,
.position-grid,
.members-resource-list,
.members-hub-trip-grid {
  gap: 1rem;
}

.trip-status-grid > div,
.trip-facts > div,
.programme-item {
  border-radius: 16px;
}

.trip-cta,
.registration-cta,
.members-card-cta,
.equipment-status,
.positions-jump-nav a,
.equipment-section-nav a {
  border-radius: 999px;
}

.members-hub .trip-hero h1,
.equipment-page .trip-hero h1,
.trip-hero h1 {
  letter-spacing: .015em !important;
}

.members-hub .members-section-heading h2,
.equipment-page .trip-section-heading h2,
.trip-section-heading h2,
.join-page h2,
.committee-page h2 {
  line-height: .98;
}

@media (width <= 1100px) {
  :root { --site-header-height: 5rem; }
  .site-header .brand-logo { height: auto; width: 8rem; }
}

@media (width <= 900px) {
  .home-page .committee-section { grid-template-columns: 1fr; }
  .home-page .committee-grid { grid-column: auto; }
}

@media (width <= 560px) {
  :root { --site-header-height: 4.75rem; }
  .site-header .brand-logo { height: auto; max-width: none; width: 7rem; }
  .home-page .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .home-page .team-photo figcaption { border-radius: 0; }
  .home-page .programme-card h3 { font-size: 1.75rem; }
}

@media (width <= 360px) {
  :root { --site-header-height: 4.5rem; }
  .site-header .brand-logo { height: auto; max-width: none; width: 6.25rem; }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}