/* Republic Golf Co. base styles
   Font loading, reset, typography, spacing primitives, focus, motion prefs.
   Component styles live in components.css. Colors and scale live in tokens.css. */

/* Outfit is a variable font. One latin woff2 covers 400, 500 and 700. */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so text set in Arial before Outfit arrives occupies
   the same space, which keeps the font swap from shifting layout.
   size-adjust measured on real copy per weight: Outfit 400 and 500 match Arial,
   Outfit 700 is 95.5 percent of Arial Bold. */
/* Allison (SIL Open Font License), self-hosted. Decorative script for the
   handwritten line beside the FAQ index. Referenced only above 1100px. */
@font-face {
  font-family: "Allison";
  src: url("../assets/fonts/allison-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 100 600;
  size-adjust: 98.5%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  font-weight: 700 900;
  size-adjust: 95.5%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  min-height: 100dvh;
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--on-cream);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; }
address { font-style: normal; }
hr { border: 0; border-top: var(--hairline) solid var(--rule); }

/* Typography */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--green);
  text-wrap: balance;
  letter-spacing: var(--ls-tight);
}
h1, .h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-xl); }
h3, .h3 { font-size: var(--fs-lg); }
h4, .h4 { font-size: var(--fs-md); font-weight: var(--w-medium); }
p { max-width: 65ch; text-wrap: pretty; }
.lead { font-size: var(--fs-md); color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
strong, b { font-weight: var(--w-medium); }

/* Small caps label used above headings. Green text with a gold hairline on
   cream, because brand gold as text on cream is 1.95:1. On green surfaces the
   label itself turns gold, where it measures 5.5:1. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold-text);
}
/* rule on both sides, for centred section heads; these stay green */
.kicker--rules { color: var(--green); }
.kicker--rules::before,
.kicker--rules::after { content: ""; width: 5rem; height: var(--hairline); background: var(--gold); flex: 0 0 auto; }
.kicker--muted { color: var(--muted); }
.surface-green .kicker { color: var(--gold); }

/* Display headline, uppercase like the old site's about page */
.display {
  font-size: var(--fs-hero);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Layout primitives */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--flush-top { padding-top: 0; }

/* Vertical rhythm: children get space between them, not around them */
.flow > * + * { margin-top: var(--flow, var(--s-5)); }
.flow--tight { --flow: var(--s-3); }
.flow--loose { --flow: var(--s-7); }

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s-3)); align-items: center; }

/* Surfaces */
.surface-green { background: var(--green); color: var(--on-green); }
.surface-green h1, .surface-green h2, .surface-green h3, .surface-green h4 { color: var(--cream); }
.surface-green .lead { color: var(--gold-60); }
.surface-green .muted { color: var(--green-20); }
.surface-cream-deep { background: var(--cream-deep); }
.surface-blue { background: var(--blue-20); }

/* Gold hairline, the brand's signature rule */
.rule {
  border: 0;
  height: var(--hairline);
  background: var(--gold);
  width: 100%;
}
.rule--short { width: 3rem; }
.rule--center { margin-inline: auto; }

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.surface-green :focus-visible { outline-color: var(--gold); }
.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;
  top: var(--s-2); left: var(--s-2);
  z-index: 1000;
  padding: var(--s-2) var(--s-4);
  background: var(--green);
  color: var(--cream);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

::selection { background: var(--gold); color: var(--green); }

/* Motion preferences. Hero and components respect this too. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print: keep it readable, drop chrome */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .hero { display: none !important; }
}