/* ==========================================================================
   Barely Artificial Training (BAT): theme layer on top of the shared
   barelyartificial.com stylesheet (style.css, loaded first, untouched).
   Same components, same type scale, same spacing, just re-primaried from
   --mid-blue to --bat-teal, the way the "arm-training" card accent already
   works on the main site, just applied site-wide here since this domain
   *is* the training arm rather than one card mentioning it.
   ========================================================================== */

:root {
  --mid-blue: #0d9488;   /* was #0284c7: primary interactive colour, teal */
  --deep-navy: #0f2a27;  /* was #0c4a6e: heading colour, teal-shifted */
  --sky-cyan: #2dd4bf;   /* was #38bdf8: accent used in eyebrows, network */
  --light-blue: #5eead4; /* was #7dd3fc: network node fill */
}

/* Logo lockup: same brand wordmark as the main site, plus a small badge
   identifying this as the training arm, since the domain itself already
   says "training" but the badge keeps the header legible on its own. */
.brand-tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--bat-teal);
  border: 1px solid var(--bat-teal);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 2px;
  align-self: center;
}

.back-to-ba {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Format cards on "how training happens" reuse .arm-card's top-border
   treatment at a smaller scale, cycling through the brand accent set so
   four formats read as distinct without introducing new colours. */
.format-card { border-top: 4px solid var(--bat-teal); padding-top: 22px; }
.format-card.format-b { border-top-color: var(--services-amber); }
.format-card.format-c { border-top-color: var(--sky-cyan); }
.format-card.format-d { border-top-color: var(--deep-navy); }
.format-card .format-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 12px;
}

/* Course spotlight card: the one place this page gets to look different,
   a terminal-dark panel around the link to the demo course so it reads as
   the single most important click on the page. */
.course-spotlight {
  background: var(--near-black);
  border-radius: 8px;
  padding: 48px;
  color: var(--white);
}
.course-spotlight h2, .course-spotlight p { color: var(--white); }
.course-spotlight p.small { color: #a1a1aa; }
.course-spotlight .eyebrow { color: var(--bat-teal); }