/* ==========================================================================
   ScoutRank website styles

   Contents
    1. Design tokens (colours, fonts)
    2. Base styles
    3. Navigation
    4. Buttons
    5. Home page hero
    6. Live leaderboard
    7. Page sections
    8. Numbered steps
    9. Cards and grids
   10. Inner page hero (How it works, Fair play, etc.)
   11. About page
   12. Testimonials page
   13. Call to action
   14. Footer
   15. Reduced motion
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
  /* Colours */
  --color-background: #05081a;
  --color-surface: #0d1230;
  --color-border: #222a55;
  --color-text: #eef1fb;
  --color-text-muted: #9aa4c7;
  --color-purple: #8a3ffc;
  --color-blue: #4ea1ff;
  --color-gold: #ffc94d;
  --color-green: #3fd68f;
  --color-red: #ff6b7a;

  /* Fonts */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  color-scheme: dark;
}


/* 2. Base styles
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 400 17px/1.6 var(--font-body);
}

/* Centres page content and keeps it a readable width */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 20px;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Small uppercase label that sits above headings */
.eyebrow {
  color: var(--color-blue);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}


/* 3. Navigation
   ========================================================================== */
nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

nav .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
}

.logo {
  font: 900 24px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.logo b {
  color: var(--color-purple);
}

nav ul {
  display: flex;
  gap: 22px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-weight: 500;
}

nav ul a {
  padding-bottom: 4px;
  text-decoration: none;
}

nav ul a:hover {
  color: var(--color-text);
}

/* The link for the page you are currently on */
nav ul a.active {
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-purple);
}

/* On phones the links drop onto their own scrollable row */
@media (max-width: 720px) {
  nav .container {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  nav .btn {
    margin-left: auto;
    padding: 10px 14px;
  }

  nav ul {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 14px;
    padding-bottom: 2px;
    overflow-x: auto;
    font-size: 14px;
  }

  nav ul a {
    white-space: nowrap;
  }
}


/* 4. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 6px;
  background: var(--color-purple);
  color: #fff;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  transition: transform 0.15s;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Outlined version for secondary actions */
.btn-outline {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}


/* 5. Home page hero
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  padding-block: 72px 88px;
}

.hero h1 {
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 900;
}

.hero h1 span {
  display: block;
}

.hero-text {
  max-width: 30em;
  margin: 24px 0 32px;
  color: var(--color-text-muted);
  font-size: 19px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Purple-to-blue gradient used on highlighted headline words */
.hero h1 .accent,
.cta-section h2 em,
.page-hero h1 em {
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-block: 48px 64px;
  }
}


/* 6. Live leaderboard (home page)
   The rows are built by js/leaderboard.js
   ========================================================================== */
.leaderboard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Green pulsing "Live" label */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-green);
}

.live-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 44px 1fr auto 52px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.4s;
}

.leaderboard-row:last-child {
  border-bottom: 0;
}

/* Briefly highlights an athlete who has just joined the top 5 */
.leaderboard-row.is-new {
  background: color-mix(in srgb, var(--color-purple) 14%, transparent);
}

.rank {
  color: var(--color-text-muted);
  font: 900 30px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.leaderboard-row:first-child .rank {
  color: var(--color-gold);
}

.athlete {
  min-width: 0;
}

.athlete b {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athlete small {
  color: var(--color-text-muted);
  font-size: 13px;
}

.score {
  font: 500 18px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Arrow showing how many places an athlete has moved */
.move {
  font: 500 12px/1 var(--font-mono);
  text-align: right;
}

.move.up {
  color: var(--color-green);
}

.move.down {
  color: var(--color-red);
}

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

.leaderboard-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

/* "Loading" and "No athletes ranked yet" messages */
.leaderboard-message {
  padding: 36px 18px;
  color: var(--color-text-muted);
  font-size: 16px;
  text-align: center;
}

.leaderboard-message a {
  color: var(--color-blue);
  font-weight: 600;
}


/* 7. Page sections
   ========================================================================== */
section {
  padding-block: 88px;
  border-top: 1px solid var(--color-border);
}

.section-heading {
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin-bottom: 44px;
}

.section-heading h2 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 800;
}

.section-heading p {
  margin: 0;
  color: var(--color-text-muted);
}


/* 8. Numbered steps
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* Use for a row of three steps instead of four */
.steps--three {
  grid-template-columns: repeat(3, 1fr);
}

.step {
  min-width: 0;
  padding: 0 24px 0 20px;
  border-left: 2px solid var(--color-border);
}

.step-number {
  color: var(--color-purple);
  font: 900 56px/1 var(--font-display);
  opacity: 0.9;
}

.step h3 {
  margin: 14px 0 10px;
  font-size: 26px;
  font-weight: 800;
}

.step p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
}

@media (max-width: 880px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

@media (max-width: 600px) {
  .steps,
  .steps--three {
    grid-template-columns: 1fr;
  }
}


/* 9. Cards and grids
   ========================================================================== */

/* "Who it's for" cards on the home page */
.audience-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.audience-cards a {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}

.audience-cards a:hover {
  border-color: var(--color-purple);
  transform: translateY(-3px);
}

.audience-cards h3 {
  font-size: 32px;
  font-weight: 800;
}

.audience-cards p {
  margin: 0;
  color: var(--color-text-muted);
}

.audience-cards b {
  color: var(--color-blue);
  font-weight: 600;
}

/* Pill-shaped list of sports */
.sport-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sport-list span {
  padding: 12px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: 800 22px/1 var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Three-column list of features with a purple top line */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
}

.feature-grid > div {
  min-width: 0;
  padding-top: 18px;
  border-top: 2px solid var(--color-purple);
}

.feature-grid h3 {
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 800;
}

.feature-grid p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Row of tags listing the six Athlete DNA areas */
.dna-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.dna-tags span {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Warning, suspension and ban list on the Fair play page */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.consequence-list {
  display: grid;
  gap: 10px;
}

.consequence {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.consequence span {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.consequence p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Each level gets a stronger colour */
.consequence:nth-child(1) span {
  color: var(--color-gold);
}

.consequence:nth-child(2) span {
  color: #ff9f5a;
}

.consequence:nth-child(3) span {
  color: var(--color-red);
}

@media (max-width: 880px) {
  .audience-cards {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}


/* 10. Inner page hero
   ========================================================================== */
.page-hero {
  padding-block: 80px 72px;
}

.page-hero h1 {
  margin-top: 18px;
  font-size: clamp(52px, 8.5vw, 108px);
  font-weight: 900;
}

.page-hero h1 em {
  font-style: normal;
}

.page-hero .intro {
  max-width: 34em;
  margin: 24px 0 0;
  color: var(--color-text-muted);
  font-size: 19px;
}


/* 11. About page
   ========================================================================== */

/* Small label on the left, text on the right */
.two-column {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
}

.prose {
  min-width: 0;
  max-width: 62ch;
}

.prose p {
  margin: 0 0 18px;
  color: var(--color-text-muted);
}

/* Larger opening sentence of a block of text */
.prose p.lead-text {
  color: var(--color-text);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

/* "The problem" and "The road ahead" share the same three-column layout */
.problem-grid,
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.problem-grid > div,
.roadmap > div {
  min-width: 0;
  padding-top: 18px;
  border-top: 2px solid var(--color-purple);
}

.problem-grid h3,
.roadmap h3 {
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 800;
}

.problem-grid p,
.roadmap p {
  margin: 0;
  color: var(--color-text-muted);
}

.roadmap span {
  display: block;
  margin-bottom: 12px;
  color: var(--color-blue);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Line colour fades from purple to blue across the three stages */
.roadmap > div:nth-child(2) {
  border-color: color-mix(in srgb, var(--color-purple) 60%, var(--color-blue));
}

.roadmap > div:nth-child(3) {
  border-color: var(--color-blue);
}

/* Founder video (the video itself is added by js/video.js) */
.video {
  max-width: 880px;
  margin: 0;
}

.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  text-align: center;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.video-placeholder b {
  color: var(--color-text);
  font: 800 28px/1 var(--font-display);
  text-transform: uppercase;
}

.video figcaption {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
}

@media (max-width: 760px) {
  .two-column,
  .problem-grid,
  .roadmap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* 12. Testimonials page
   ========================================================================== */

/* Shown until there are real testimonials to display */
.coming-soon {
  max-width: 640px;
  padding: 36px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.coming-soon h3 {
  margin: 14px 0 12px;
  font-size: 34px;
  font-weight: 800;
}

.coming-soon p {
  margin: 0 0 22px;
  color: var(--color-text-muted);
}

/* Layout for real testimonials (see README for the HTML to use) */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.quotes blockquote {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.quotes blockquote p {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.5;
}

.quotes cite {
  color: var(--color-blue);
  font: 500 12px/1.4 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .quotes {
    grid-template-columns: 1fr;
  }
}


/* 13. Call to action
   ========================================================================== */
.cta-section {
  padding-block: 100px;
}

.cta-section h2 {
  margin-bottom: 28px;
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 900;
}

.cta-section h2 em {
  font-style: normal;
}


/* 14. Footer
   ========================================================================== */
footer {
  padding-block: 28px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
}

footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  color: var(--color-text);
}


/* 15. Reduced motion
   Turns off animations for visitors who ask for less movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}