/* /training/assets/style.css - shared design system for the training hub */
@font-face {
  font-family: 'BrownBeige';
  src: url('/brown_beige.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LeagueSpartan';
  src: url('/leaguespartan-variablefont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --yellow: #F5E642;
  --black: #0a1840;
  --white: #FAFAF8;
  --ink: var(--black);
  --paper: var(--white);
  --muted: #5B5B54;
  --line: rgba(10,10,10,0.12);
  --radius: 20px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'LeagueSpartan', sans-serif;
  line-height: 1.6;
}
h1, h2, h3 { font-family: 'BrownBeige', serif; font-weight: 400; line-height: 1.1; text-wrap: balance; color: var(--black); }
.tr-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.tr-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.tr-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.tr-breadcrumb { font-size: 12px; color: var(--muted); margin: 20px 0 8px; }
.tr-breadcrumb a { color: var(--muted); text-decoration: underline; }
.tr-hero { padding: 40px 0 16px; }
.tr-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px; }
.tr-hero p { font-size: 17px; color: var(--muted); max-width: 60ch; }
.tr-cta-card {
  background: var(--black); color: var(--white);
  padding: 28px 24px; margin: 40px 0; text-align: center;
  border-radius: var(--radius);
}
.tr-cta-card h3 { color: var(--white); font-size: 1.4rem; margin: 0 0 8px; }
.tr-cta-card p { color: rgba(250,250,248,0.75); margin: 0 0 18px; }
.tr-cta-card a.btn {
  display: inline-block; background: var(--yellow); color: var(--black);
  padding: 12px 28px; font-weight: 700; text-decoration: none;
  letter-spacing: 0.02em; font-size: 14px;
  border-radius: var(--radius);
}
.tr-faq { margin: 32px 0; }
.tr-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.tr-faq summary { font-weight: 700; cursor: pointer; font-size: 15.5px; }
.tr-faq p { color: var(--muted); margin: 10px 0 0; }
.tr-footer { border-top: 1px solid var(--line); margin-top: 60px; padding: 24px; text-align: center; font-size: 12px; color: var(--muted); }
.tr-related { display: grid; gap: 12px; margin: 24px 0; }
.tr-related a { display: block; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: var(--radius); }
.tr-related a span.desc { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 4px; }
.tr-lede { color: var(--muted); max-width: 60ch; }
.tr-subgroup-label {
  font-family: 'LeagueSpartan', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 8px;
}
.tr-table-wrap { overflow-x: auto; margin: 20px 0 28px; border: 1px solid var(--line); border-radius: var(--radius); }
.tr-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tr-table th, .tr-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tr-table th { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.tr-table tr.tr-deload td, .tr-table tr.tr-raceweek td, .tr-table tr.tr-taper td { background: rgba(245,230,66,0.18); }
.tr-table td.tr-phase { font-weight: 700; white-space: nowrap; }