/*
 * Predicta FC marketing/content site styles.
 *
 * Mirrors the in-app "retro broadcast" design system (lib/app/theme):
 *   - Space Grotesk headings + Public Sans body (same Google Fonts the app uses).
 *   - Pitch blue (#185CA5) / broadcast blue (#0047A8) / stoppage red (#BB000C) /
 *     trophy gold (#FFD709) palette.
 *   - Square corners, 2px black borders and hard offset shadows (4px 4px 0, no blur).
 *   - Blue header bars with gold italic uppercase titles; red accent underline.
 */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: light;

  --pitch-blue: #185CA5;
  --pitch-blue-container: #4D7FBC;
  --broadcast-blue: #0047A8;
  --red: #BB000C;
  --red-light: #E03E42;
  --gold: #FFD709;
  --yellow: #F5D400;
  --green: #0E8F4E;

  --ink: #0A1B3F;
  --ink-black: #111722;
  --muted: #3E4A5C;
  --surface: #F2F5FA;
  --surface-low: #E8EEF6;
  --table-header: #E8EEF8;
  --white: #FFFFFF;
  --outline: #5E6D82;

  --border: 2px solid #000000;
  --shadow: 4px 4px 0 #000000;
  --shadow-sm: 2px 2px 0 #000000;

  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Space Grotesk', system-ui, 'Segoe UI', Arial, sans-serif;

  --content-width: 820px;
  --wide-width: 980px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.6;
  background: var(--surface);
  color: var(--ink-black);
}

/* --- Header / navigation --- */
header.site {
  background: var(--pitch-blue);
  color: var(--white);
  border-bottom: 4px solid var(--red);
}

nav.site {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

nav.site a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

nav.site a:hover { color: var(--gold); }

nav.site .brand {
  margin-right: auto;
  color: var(--gold);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.5px;
}

nav.site .brand:hover { color: var(--gold); }

/* --- Hero --- */
.hero {
  background: linear-gradient(135deg, var(--pitch-blue) 0%, var(--pitch-blue-container) 100%);
  color: var(--white);
  text-align: center;
  padding: 60px 24px 68px;
  border-bottom: 6px solid var(--gold);
}

.hero h1 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.04;
  margin: 0 auto 18px;
  max-width: 820px;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  color: var(--white);
  text-transform: uppercase;
}

.hero p {
  margin: 0 auto 30px;
  font-size: 1.12rem;
  max-width: 640px;
  color: #EAF1FB;
}

.hero .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Buttons / CTAs --- */
.cta {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border: var(--border);
  border-radius: 0;
  background: var(--pitch-blue);
  color: var(--white);
  box-shadow: var(--shadow);
  transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.15s ease;
}

.cta:hover { background: #14508f; }
.cta:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sm); }

.cta.primary { background: var(--red); color: var(--white); }
.cta.primary:hover { background: #9c000a; }

.cta.secondary { background: var(--white); color: var(--pitch-blue); }
.cta.secondary:hover { background: var(--gold); color: var(--ink-black); }

.midcta { text-align: center; margin: 36px 0 8px; }

/* --- Main content containers --- */
main {
  max-width: var(--content-width);
  margin: 36px auto;
  padding: 28px 32px 34px;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
}

main.wide {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 8px 24px 24px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

section { margin-top: 42px; }
main.wide > section:first-of-type { margin-top: 40px; }

/* --- Typography --- */
h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  margin-top: 0;
}

h1 { font-weight: 700; letter-spacing: -0.8px; font-size: 1.9rem; line-height: 1.1; }

h2 {
  font-weight: 700;
  letter-spacing: -0.3px;
  font-size: 1.45rem;
  margin: 28px 0 12px;
  padding-left: 14px;
  border-left: 6px solid var(--red);
}

h3 { font-weight: 700; letter-spacing: -0.2px; font-size: 1.12rem; margin: 20px 0 6px; }

p, li { font-size: 1rem; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 4px; }

a { color: var(--pitch-blue); font-weight: 600; }
a:hover { color: var(--red); }

.lede {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--muted);
}

.meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 6px solid var(--gold);
  background: var(--surface-low);
  color: var(--ink);
  font-style: italic;
}

/* --- Card grid --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  background: var(--white);
  border: var(--border);
  border-top: 5px solid var(--gold);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--muted); font-weight: 500; }
.card a { text-decoration: none; }

/* --- Tables (leaderboard-style) --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow);
}

th, td {
  border: 1.5px solid #000000;
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--broadcast-blue);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

tbody tr:nth-child(even) { background: var(--table-header); }

/* --- Lists --- */
ol.steps { padding-left: 22px; }
ol.steps li { margin-bottom: 10px; }

.article-list { list-style: none; padding: 0; }
.article-list li { padding: 20px 0; border-bottom: 2px solid var(--surface-low); }
.article-list li:last-child { border-bottom: none; }
.article-list h2 {
  font-size: 1.2rem;
  margin: 0 0 6px;
  padding-left: 0;
  border-left: 0;
}
.article-list p { margin: 0; color: var(--muted); }

/* --- Footer --- */
footer.site {
  max-width: var(--wide-width);
  margin: 40px auto 56px;
  padding: 0 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

footer.site a { color: var(--pitch-blue); }
footer.site a:hover { color: var(--red); }

/* --- Responsive --- */
@media (max-width: 640px) {
  main { padding: 22px 20px 26px; margin: 20px auto; }
  .hero { padding: 44px 20px 50px; }
  nav.site { gap: 12px; }
}