/* ==========================================================================
   Woodruff Technologies: company site
   Plain CSS, no build step. Tokens first, then base, layout, components.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blue (Stephen's pick). 700 on white = 6.7:1, 800 on white = 8.7:1 */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-950: #0b1a3d;

  /* Neutrals (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;

  --color-bg: #ffffff;
  --color-surface: var(--slate-50);
  --color-text: var(--slate-900);
  --color-text-muted: var(--slate-600);
  --color-border: var(--slate-200);
  --color-brand: var(--blue-700);
  --color-brand-hover: var(--blue-800);
  --color-focus: var(--blue-600);

  /* Type: system stack (fast, no web-font request). Matches app's Inter/system. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --text-hero: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);

  /* Space (4-pt scale), radius, elevation, motion */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4rem, 3rem + 4vw, 6.5rem);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-1: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-2: 0 1px 3px rgb(15 23 42 / 0.06), 0 8px 24px -8px rgb(15 23 42 / 0.12);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 180ms;

  --container: 72rem;
  --header-h: 4rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }

a { color: var(--color-brand); text-underline-offset: 0.2em; }
a:hover { color: var(--color-brand-hover); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: var(--color-text); }
.brand img { border-radius: 8px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--slate-700);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.nav-list a:hover { background: var(--slate-100); color: var(--color-text); }

.nav-list .nav-cta { color: var(--color-brand); font-weight: 600; }
.nav-list .nav-cta:hover { background: var(--blue-50); color: var(--color-brand-hover); }

/* On small screens keep only the brand and Contact link. */
@media (max-width: 47.99rem) {
  .nav-list li:not(:last-child) { display: none; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.button:active { transform: translateY(1px); }

.button-primary { background: var(--color-brand); color: #fff; box-shadow: var(--shadow-1); }
.button-primary:hover { background: var(--color-brand-hover); color: #fff; }

.button-secondary { background: #fff; color: var(--color-text); border-color: var(--slate-300); }
.button-secondary:hover { background: var(--slate-50); border-color: var(--slate-500); color: var(--color-text); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--blue-100), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, var(--blue-50), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.hero-inner { max-width: 52rem; }

.eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero h1 { font-size: var(--text-hero); font-weight: 750; letter-spacing: -0.03em; }

.lede {
  max-width: 40rem;
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section-tinted {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.section-header { max-width: 42rem; margin-bottom: var(--space-12); }
.section-header h2 { font-size: var(--text-2xl); font-weight: 700; }
.section-intro { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-lg); }

/* ---------- Cards (What we build) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-6);
}

.card {
  padding: var(--space-8);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card h3 { margin-top: var(--space-6); font-size: var(--text-xl); }
.card p { margin-top: var(--space-2); color: var(--color-text-muted); }

.card-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Roadmap ---------- */
/* One column on phones, 2 x 2 from tablet up. Rows share one height so the
   cards line up; each card is copy on the left, a small yeti on the right. */
.roadmap {
  --art: 4.5rem;          /* 72px yeti on phones */
  --art-sm: 3.5rem;       /* 56px for the busier "More sports" yeti */
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .roadmap {
    --art: 6rem;          /* 96px */
    --art-sm: 4.75rem;    /* 76px */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.roadmap-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--art);
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 40rem) {
  .roadmap-step { column-gap: var(--space-6); padding: var(--space-8); }
}
.roadmap-copy { min-width: 0; }
.roadmap-step h3 { margin-top: var(--space-4); font-size: var(--text-xl); }
.roadmap-step p { margin-top: var(--space-2); color: var(--color-text-muted); }

.roadmap-art {
  display: grid;
  place-items: center;
  width: var(--art);
  height: var(--art);
}
.roadmap-art img { width: 100%; height: 100%; object-fit: contain; }
.roadmap-art-sm img { width: var(--art-sm); height: var(--art-sm); }

.roadmap-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 0.8125rem;
  font-weight: 600;
}

.roadmap-step.is-current {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand), var(--shadow-2);
}
.roadmap-step.is-current .roadmap-badge { background: var(--color-brand); color: #fff; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3) !important;
}
.tag-list li {
  padding: 2px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--slate-700);
  font-size: var(--text-sm);
}

/* ---------- Golf feature panel ---------- */
.feature-panel {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--space-12);
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--blue-950) 0%, #13275a 100%);
  color: #fff;
  overflow: hidden;
}

.feature-copy h2 { margin-top: var(--space-4); font-size: var(--text-2xl); }
.feature-copy p { margin-top: var(--space-4); max-width: 34rem; color: var(--blue-100); font-size: var(--text-lg); }
.feature-copy .button { margin-top: var(--space-8); }

/* Lighter blue on the dark panel keeps the focus ring and button visible. */
.feature-panel .button-primary { background: var(--blue-600); }
.feature-panel .button-primary:hover { background: var(--blue-500); }
.feature-panel :focus-visible { outline-color: var(--blue-200); }

.status-pill {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0 !important;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(191 219 254 / 0.35);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: #fff !important;
  font-size: var(--text-sm) !important;
  font-weight: 600;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgb(96 165 250 / 0.25);
}

/* ---------- Yeti mascot ---------- */
.mascot { margin: 0; }
.mascot img { width: 100%; height: auto; }

.feature-art img { max-width: 14rem; margin-inline: auto; }

/* Small, friendly hover bounce (skipped when reduced motion is requested). */
@media (prefers-reduced-motion: no-preference) {
  .mascot img { transition: transform 260ms var(--ease); transform-origin: 50% 100%; }
  .mascot:hover img { transform: translateY(-6px) rotate(-1.5deg); }
}

@media (max-width: 47.99rem) {
  .feature-panel { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature-art { order: -1; }
  .feature-art img { max-width: 8.5rem; margin-inline: auto; }
}

/* ---------- Footer / contact ---------- */
.site-footer {
  padding-block: var(--space-section) var(--space-12);
  background: var(--slate-900);
  color: var(--slate-300);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-12);
}

.site-footer h2 { color: #fff; font-size: var(--text-2xl); }
.site-footer p { margin-top: var(--space-3); max-width: 32rem; }

.footer-email {
  display: inline-block;
  margin-top: var(--space-6);
  color: #fff;
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 600;
  text-decoration-color: var(--blue-500);
  text-decoration-thickness: 2px;
  word-break: break-word;
}
.footer-email:hover { color: var(--blue-200); }
.site-footer :focus-visible { outline-color: var(--blue-200); }

.footer-meta { text-align: right; }
.brand-inverse, .brand-inverse:hover { color: #fff; }
.copyright { margin-top: var(--space-3) !important; font-size: var(--text-sm); color: var(--slate-500); }
.site-footer .copyright { color: #94a3b8; }

@media (max-width: 47.99rem) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-meta { text-align: left; padding-top: var(--space-8); border-top: 1px solid var(--slate-700); }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}