/* Copyright 2026 John G Stroh. All rights reserved. */
/* primer.css — Governance Course primer slideshow (PLAN_COURSE_PRIMER_SLIDESHOW P3). */
:root {
  --primer-ink: #1a2e2c;
  --primer-teal: #01696f;
  --primer-teal-dk: #014b4f;
  --primer-bg: #f7faf9;
  --primer-card: #ffffff;
  --primer-border: #d6e2e0;
  --primer-muted: #4b5d5a;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  color: var(--primer-ink);
  background: var(--primer-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.primer-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.25rem; background: var(--primer-teal-dk); color: #fff;
}
.primer-topbar a { color: #d6f3f0; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.primer-topbar a:hover, .primer-topbar a:focus-visible { color: #fff; text-decoration: underline; }
.primer-progress { font-size: 0.85rem; font-variant-numeric: tabular-nums; opacity: 0.92; }

.primer-main { flex: 1; display: flex; align-items: stretch; }
.primer-slide {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; min-height: 60vh; outline: none;
}
.primer-slide:focus-visible { box-shadow: inset 0 0 0 3px var(--primer-teal); }
.primer-inner { max-width: 760px; width: 100%; position: relative; z-index: 2; }

.primer-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 700; color: var(--primer-teal); margin: 0 0 0.75rem; }
.primer-h { font-size: 1.9rem; line-height: 1.25; margin: 0 0 1.1rem; color: var(--primer-ink); }
.primer-sub { font-size: 1.1rem; color: var(--primer-muted); line-height: 1.6; margin: 0; }
.primer-body { font-size: 1.12rem; line-height: 1.7; color: var(--primer-ink); margin: 0; }
.primer-lead { font-size: 1.05rem; font-style: italic; color: var(--primer-muted); margin: 0 0 1.25rem; }

/* term cards */
.primer-terms { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.primer-term-card { background: var(--primer-card); border: 1px solid var(--primer-border); border-left: 4px solid var(--primer-teal); border-radius: 0 10px 10px 0; padding: 1.1rem 1.3rem; }
.primer-term-word { font-size: 1.25rem; font-weight: 700; color: var(--primer-teal-dk); }
.primer-term-reo { font-size: 0.95rem; font-style: italic; color: var(--primer-teal); margin-top: 0.1rem; }
.primer-term-meaning { font-size: 1.02rem; line-height: 1.55; margin-top: 0.45rem; color: var(--primer-ink); }
.primer-term-eg { font-size: 0.92rem; color: var(--primer-muted); margin-top: 0.5rem; border-top: 1px dashed var(--primer-border); padding-top: 0.5rem; }
.primer-term-eg::before { content: "e.g. "; font-weight: 700; color: var(--primer-teal); }

/* reflection */
.primer-recall .primer-inner { text-align: center; }
.primer-recall-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 700; color: var(--primer-teal); margin: 0 0 1rem; }
.primer-recall-q { font-size: 1.55rem; }

/* close CTAs */
.primer-close-ctas { margin-top: 1.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.primer-cta-primary { display: inline-block; background: var(--primer-teal); color: #fff; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 700; text-decoration: none; }
.primer-cta-primary:hover, .primer-cta-primary:focus-visible { background: var(--primer-teal-dk); }
.primer-cta-secondary { background: #fff; color: var(--primer-teal); border: 1px solid var(--primer-teal); padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 0.95rem; }

/* photo slides (title / reflection / close) — full-bleed bg + darkening overlay + watermark */
.primer-slide.has-photo { color: #fff; background-image: var(--primer-photo); background-size: cover; background-position: center; }
.primer-slide.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1,75,79,0.55) 0%, rgba(1,30,32,0.78) 100%); }
.primer-slide.has-photo::after { content: "Village · governance-course — CC BY 4.0"; position: absolute; right: 0.9rem; bottom: 0.7rem; z-index: 2; font-size: 0.68rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.6); }
.primer-slide.has-photo .primer-h, .primer-slide.has-photo .primer-sub, .primer-slide.has-photo .primer-body, .primer-slide.has-photo .primer-recall-q { color: #fff; }
.primer-slide.has-photo .primer-eyebrow, .primer-slide.has-photo .primer-recall-label { color: #9ef0ea; }
.primer-slide.has-photo .primer-sub { color: rgba(255,255,255,0.9); }

/* nav */
.primer-nav { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem 1.75rem; max-width: 900px; margin: 0 auto; width: 100%; }
.primer-btn { font-family: inherit; font-size: 1rem; font-weight: 700; padding: 0.7rem 1.6rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--primer-teal); }
.primer-btn-prev { background: #fff; color: var(--primer-teal); }
.primer-btn-next { background: var(--primer-teal); color: #fff; }
.primer-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.primer-btn:focus-visible { outline: 3px solid var(--primer-teal); outline-offset: 2px; }

@media (min-width: 620px) { .primer-terms { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .primer-h { font-size: 2.1rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }