/* Styles for simplegitcourse
 *
 * Brand carried over from the original Express site
 * (simplegitcourse/public/stylesheets/style.css): Open Sans, with the crimson
 * link/button pair #a6165c / #bf1158.
 *
 * This file only overrides the shared design tokens declared in
 * courses/shared.css — layout and components come from there, so the course
 * stays visually consistent with the rest of the platform while keeping its
 * own typography and accent colour.
 */

:root {
  /* Declared once and referenced explicitly everywhere, rather than leaning on
     inherit — shared.css sets Inter on body and Tailwind sets its own default
     on html, so an explicit reference makes the winner obvious when inspecting. */
  --font-body: "Open Sans", ui-sans-serif, system-ui, sans-serif;

  --color-link: #a6165c;
  --color-accent: #bf1158;
  /* The original site left headings at the UA default (black) rather than the
     platform's slate. */
  --color-heading: #000000;
}

html.dark {
  /* #a6165c fails contrast on the dark surface, so lift it toward pink while
     keeping the same hue family. */
  --color-link: #f472b6;
  --color-accent: #f472b6;
}

/* ─── Typography ─────────────────────────────────────────────────
   The original site set only a 15px/1.5 body and an em-based heading scale,
   letting the UA supply bold weight and 0.67em/0.83em/1em/1.33em margins.
   Both shared.css and the Tailwind preflight flatten that, so the whole scale
   is restated here in em against the 15px base — the same arithmetic the
   browser was doing (h2: 1.25em = 18.75px, 0.83em margins = 15.5625px). */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 800px) {
  body { font-size: 14px; }
}

/* One complete rule per level — font-family restated rather than inherited so
   each heading is legible as a single block in devtools. */
h1 {
  font-family: var(--font-body);
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0.67em 0;
  color: var(--color-heading);
}

h2 {
  font-family: var(--font-body);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5;
  margin: 0.83em 0;
  color: var(--color-heading);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.5;
  margin: 1em 0;
  color: var(--color-heading);
}

h4 {
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.5;
  margin: 1.33em 0;
  color: var(--color-heading);
}

/* The wordmark is black-on-transparent (the opaque white backdrop was stripped
   from the SVG), so invert it on dark surfaces to keep it visible. Scoped to
   this course — other courses have colour logos that must not be inverted. */
html.dark .course-logo {
  filter: invert(1);
}

/* Full wordmark: homepage only, above the hero. 350px on the original site. */
.sgc-logo-full {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  margin: 0.5rem 0 1rem;
}

/* Compact mark: nav, inner pages only. 60px / 40px on the original site. */
.sgc-logo-mark {
  width: 60px;
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  .sgc-logo-full { max-width: 260px; }
  .sgc-logo-mark { width: 40px; }
}

/* ─── Lists ──────────────────────────────────────────────────────
   shared.css (and the Tailwind preflight) strip list markers so that chrome
   lists render clean. Article copy needs them back, so restore markers for
   everything inside <main>; the chrome lists that live there are built from
   divs and links, not <li>. */
main ul,
main ol {
  list-style-position: outside;
  padding-left: 1.25rem;
}

main ul     { list-style-type: disc; }
main ol     { list-style-type: decimal; }
main ul ul  { list-style-type: circle; }

main li {
  padding-left: 0.25rem;
  margin-bottom: 0.25rem;
}

/* ─── Buttons ────────────────────────────────────────────────────
   Matches the original site's `.button a`: brand crimson, 15px/25px padding,
   5px radius, body font at body weight — not the platform's Inter/semibold
   pill. `.button` is the block wrapper that carried the 50px vertical rhythm. */
.button {
  margin: 50px 0;
}

.btn {
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  padding: 15px 25px;
  border-radius: 5px;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background-color: #a6165c;
  color: #fff;
}

html.dark .btn-primary {
  /* --color-accent lifts to pink on dark for link contrast; the button keeps
     the brand crimson, which reads fine against white text. */
  background-color: #bf1158;
}

html.dark .btn-primary:hover {
  background-color: #a6165c;
}

/* ─── Homepage hero (courses/simplegitcourse/show) ───────────── */
.sgc-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 1rem 0 2.5rem;
}

.sgc-hero > div { flex: 1 1 0; min-width: 0; }

.sgc-hero-lead {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.75rem;
}

.sgc-hero-points {
  padding-left: 1.25rem;
  color: var(--color-body);
}

.sgc-hero-image {
  width: 100%;
  height: auto;
  max-width: 340px;
  margin-left: auto;
  display: block;
}

@media (max-width: 720px) {
  .sgc-hero { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
  .sgc-hero-image { max-width: 240px; margin: 0; }
}