/*
 style.css - shared look and feel for every page of the Twilight Golf Comp site.

 HOW IT WAS CREATED: Written by Claude (Anthropic) in the claude.ai Project
 "Twilight Golf Comp", Step 9c, 8 Nov 2026.
 WHERE TO MAKE CHANGES: Ask Claude in that Project, or edit this file on the
 'bundy' Pi (/opt/twilight-golf/static/style.css). To change the colours, edit
 the variables just below: nothing else needs touching.
 DEPENDENCIES: loaded by templates/base.html. Phone-first layout.
*/
:root {
  --brand: #002a3a;        /* main theme colour: header, buttons, headings */
  --brand-light: #0d4a63;  /* lighter shade: hover states and links */
  --accent: #f0b429;       /* gold, used sparingly (matches the logo flag) */
  --bg: #f2f6f7;           /* page background */
  --card: #ffffff;         /* panels */
  --text: #12262e;
  --muted: #5b7078;
  --border: #d5e0e4;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
/* Top bar: logo and title on the left, links on the right */
.site-header {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
}
.logo { width: 40px; height: 40px; }
.site-header nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  padding: .4rem 0;
  opacity: .9;
}
.site-header nav a:hover { opacity: 1; text-decoration: underline; }
/* Page body */
.container { max-width: 720px; margin: 0 auto; padding: 1rem; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
h1, h2 { color: var(--brand); margin-top: 0; line-height: 1.2; }
a { color: var(--brand-light); }
/* Buttons: at least 44px tall so they are easy to tap on a phone */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: .65rem 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--brand-light); }
.btn-accent { background: var(--accent); color: var(--brand); }
/* Forms: 16px text stops iPhones zooming in when a field is tapped */
label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
input, select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .75rem;
  font-size: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
/* Tables (player list, leaderboards) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.muted { color: var(--muted); font-size: .9rem; }
.site-footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.5rem 1rem 2rem; }
/* Success and error message boxes (added in Step 9d-2) */
.alert { padding: .75rem 1rem; border-radius: 8px; margin: 0 0 1rem; border: 1px solid; }
.alert-error { background: #fdecea; border-color: #f1b0a8; color: #7a1f14; }
.alert-ok { background: #e6f4ea; border-color: #a7d5b3; color: #14532d; }
/* Footer link (added in Step 9e-1) */
.site-footer a { color: var(--muted); }