/* ==========================================================================
   Cape Cod Bass — base stylesheet
   Palette: Moss & tackle
   ========================================================================== */

:root {
  /* Color */
  --color-bg:          #F5F1E6;
  --color-bg-alt:      #ECE6D4;
  --color-primary:     #4B5D3A;   /* headings, nav, primary buttons */
  --color-primary-dark:#37452A;   /* hover states */
  --color-moss:        #8A9A5B;   /* secondary accents, borders */
  --color-accent:      #B5502F;   /* CTAs, highlights, badges */
  --color-text:        #2B2B22;
  --color-text-muted:  #6B6B58;
  --color-border:      #D8D0B8;
  --color-white:       #FFFFFF;

  /* Type */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Scale */
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: 2.5rem;
  --step-4: 3.5rem;

  /* Layout */
  --max-width: 1100px;
  --radius: 3px;
  --border-width: 1px;
}

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
img { max-width: 100%; display: block; }

/* ---- Base ---- */
html { font-size: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.text-muted { color: var(--color-text-muted); }

/* ---- Layout ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-header {
  background: var(--color-primary);
  border-bottom: 4px solid var(--color-accent);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-header .logo {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.main-nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  padding: 0;
}
.main-nav a {
  color: var(--color-bg);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.main-nav a:hover { color: var(--color-accent); }

/* ---- Hero ---- */
.hero {
  padding: var(--step-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.hero h1 { max-width: 20ch; }
.hero p.lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-top: 1rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover { background: #963f24; color: var(--color-white); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* ---- Tables (results / scoreboard) ---- */
table.scoreboard {
  width: 100%;
  border-collapse: collapse;
}
table.scoreboard th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}
table.scoreboard td {
  padding: 0.75rem 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
table.scoreboard td.weight {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-bg);
  margin-top: var(--step-4);
  padding: var(--step-2) 0;
}
.site-footer a { color: var(--color-bg); }
.site-footer a:hover { color: var(--color-accent); }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .site-header .container { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .main-nav ul { flex-wrap: wrap; gap: 1rem; }
  h1 { font-size: var(--step-3); }
}

/* ---- Section rhythm ---- */
.home-page {
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
  padding: var(--step-3) 0;
}
.home-section h2 {
  margin-bottom: var(--step-1);
}
.home-section h3 {
  font-size: var(--step-1);
  margin-bottom: 0.75rem;
}

/* ---- Latest News ---- */
.home-news {
  display: grid;
  gap: 1.5rem;
}
.news-item {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.news-item h3 {
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0.25rem;
}
.news-item h3 a { color: var(--color-primary); }
.news-item h3 a:hover { color: var(--color-accent); }
.news-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.news-description {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
}

/* ---- Standings ---- */
.standings-top3 {
  list-style: none;
  padding: 0;
  counter-reset: standing;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.standings-top3 li {
  counter-increment: standing;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.standings-top3 li:last-child { border-bottom: none; }
.standings-top3 li::before {
  content: counter(standing);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent);
  margin-right: 0.75rem;
}
.standing-angler { flex: 1; font-weight: 600; }
.standing-points {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.standings-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.featured-stat {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.featured-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.featured-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--color-accent);
  font-weight: 600;
}
.featured-angler {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600;
}

/* ---- Upcoming Tournaments ---- */
.upcoming-list {
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.upcoming-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: var(--border-width) solid var(--color-border);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
  min-width: 4.5rem;
}
.upcoming-item a {
  font-weight: 600;
  color: var(--color-primary);
}
.upcoming-item a:hover { color: var(--color-accent); }
.upcoming-location {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---- "See all" links, shared across sections ---- */
.see-all-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}
.see-all-link:hover { color: var(--color-accent); }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .home-page { gap: var(--step-3); }
  .upcoming-item { flex-wrap: wrap; }
  .upcoming-location { margin-left: 0; }
}