/* Tee Time Advisor: site-wide theme. A mown-fairway stripe background,
   a photo hero on the home page, and cream "scorecard" cards on top.
   Page-specific pieces live in golf.css (results) and loading.css. */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --green-950: #0b2414;
  --green-900: #10301b;
  --green-800: #174326;
  --stripe-a: #3d7a3a;
  --stripe-b: #468642;
  --card: rgba(252, 250, 243, 0.97);
  --card-line: rgba(255, 255, 255, 0.75);
  --ink: #1b2a1f;
  --ink-muted: #5a6a5e;
  --accent: #1f6b3a;
  --accent-hover: #175330;
  --flag: #d9412b;
  --sand: #efe4c8;
  --on-green: #ffffff;
}

* { box-sizing: border-box; }

html { background: var(--green-900); }

body.golf-page {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.5;
  background:
    linear-gradient(180deg, rgba(8, 30, 16, 0.55) 0, rgba(8, 30, 16, 0.2) 340px, rgba(8, 30, 16, 0.35) 100%),
    repeating-linear-gradient(90deg, var(--stripe-a) 0 90px, var(--stripe-b) 90px 180px);
  background-attachment: fixed;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

/* ---------- Top bar ---------- */

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

.topnav .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--on-green);
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.topnav .brand svg { width: 26px; height: 26px; }

.topnav-links { display: flex; gap: 4px; flex-wrap: wrap; }

.topnav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.topnav-links a:hover, .topnav-links a.active { background: rgba(255, 255, 255, 0.18); }

/* ---------- Home hero ---------- */

.home-hero {
  position: relative;
  margin: 0 -16px 28px;
  padding: 9vh 16px 64px;
  text-align: center;
  color: var(--on-green);
  background:
    linear-gradient(180deg, rgba(6, 24, 12, 0.35) 0%, rgba(6, 24, 12, 0.15) 45%, rgba(6, 24, 12, 0.55) 100%),
    url('img/fairway.jpg') center 60% / cover no-repeat;
  border-radius: 0 0 28px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

@media (min-width: 1112px) {
  .home-hero { margin: 0 0 28px; border-radius: 28px; }
}

.home-hero h1 {
  font-family: 'Spectral', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.tagline {
  margin: 0 auto 28px;
  max-width: 620px;
  font-size: 1.1rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ---------- Search pill ---------- */

.hero-search {
  display: flex;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-search.compact { margin-bottom: 20px; }

.hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}

.hero-search button {
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.hero-search button:hover { background: var(--accent-hover); }
.hero-search:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 10px 30px rgba(0, 0, 0, 0.25); }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.card-head h2 {
  font-family: 'Spectral', serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0;
}

.card-sub { color: var(--ink-muted); font-size: 0.85rem; }

.error-text { margin: 0; color: #b3261e; }

.site-footer {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(8, 28, 15, 0.6);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 28px;
  font-size: 0.8rem;
}

.site-footer a { color: #fff; }

@media (max-width: 560px) {
  .card { padding: 18px 16px; }
  .home-hero { padding-top: 6vh; }
}