/* Standalone stylesheet for the static content pages (src/content/*) — the
   pillar guides, instructor directory, and learn articles. These pages ship
   no client JS bundle (see src/content/pageShell.ts), so this file carries
   the full visual weight on its own rather than layering on top of the
   app's theme.css/app.css, which assume React has mounted. Tokens below are
   deliberately copied from theme.css's :root block, not imported — these
   pages must render correctly even if the main app's stylesheets change
   shape later. */

:root {
  --river-blue: #1e3a5f;
  --river-dark: #142940;
  --moss-green: #3d6b4f;
  --amber: #b8860b;
  --amber-ink: #8a6608;
  --peat: #1c1917;

  --bg-warm: #faf8f5;
  --cream: #f5f0e8;
  --cream-border: #e8dfd3;

  --fg-1: #1c1917;
  --fg-2: #44403c;
  --fg-3: #78716c;
  --fg-4: #a8a29e;

  --surface-1: #ffffff;
  --amber-tint: #f5efd8;
  --amber-tint-border: #e6d9a8;
  --river-tint: #e4eaf2;
  --river-tint-border: #c4d2e4;

  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --shadow-card: 0 1px 3px rgba(28, 25, 23, 0.05), 0 1px 2px rgba(28, 25, 23, 0.03);
  --shadow-cta: 0 6px 18px rgba(30, 58, 95, 0.22);

  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg-warm);
  color: var(--fg-1);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* ── Header / footer chrome ─────────────────────────────────────────── */
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 24px 0;
}
.content-logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  color: var(--fg-1);
  text-decoration: none;
}
.content-cta-small {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--river-blue);
  padding: 9px 16px;
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--shadow-cta);
}
.content-footer {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 20px 24px 40px;
  border-top: 1px solid var(--cream-border);
  font-size: 12.5px;
  color: var(--fg-4);
}
.content-footer a {
  color: var(--fg-3);
}

/* ── Article body ────────────────────────────────────────────────────── */
.content-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px 0;
}
.content-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--fg-4);
}
.content-main h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  line-height: 1.15;
  color: var(--fg-1);
  margin: 6px 0 4px;
}
.content-dek {
  font-size: 17px;
  color: var(--fg-2);
  margin: 0 0 20px;
  line-height: 1.55;
}
.content-main h2 {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--fg-1);
  margin: 40px 0 12px;
}
.content-main p {
  font-size: 16px;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.content-main img {
  max-width: 100%;
  border-radius: var(--r-lg);
  display: block;
  margin: 8px 0 20px;
  background: #fff;
}
.content-main ul,
.content-main ol {
  padding-left: 22px;
  color: var(--fg-2);
  font-size: 16px;
}
.content-main li {
  margin-bottom: 6px;
}

/* Small brand mark — instructor pages/directory/glossary don't have a
   real per-page illustration (no photos of individual instructors), so
   this is an honest brand badge rather than a stretched hero image.
   width/height="56" attributes already cap the intrinsic size; this just
   tightens the margin the generic .content-main img rule sets. */
.content-main img.content-badge {
  margin: 0 auto 14px;
}

/* Responsive 16:9 video embed — plain iframe, no client JS required */
.content-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  margin: 4px 0 24px;
  box-shadow: var(--shadow-card);
}
.content-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Practice without water" callout — visually distinct from the step
   sections, since it's the app's actual differentiator */
.content-callout {
  background: var(--amber-tint);
  border: 1px solid var(--amber-tint-border);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  margin: 32px 0;
}
.content-callout h2 {
  margin-top: 0;
  color: var(--amber-ink);
}

/* Closing CTA band */
.content-cta-band {
  background: var(--river-blue);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 28px 26px;
  margin: 40px 0 8px;
  text-align: center;
}
.content-cta-band h2 {
  font-family: var(--font-serif);
  font-style: italic;
  color: #fff;
  margin: 0 0 8px;
  font-size: 22px;
}
.content-cta-band p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 18px;
  font-size: 14.5px;
}
.content-cta-band .content-cta-small {
  background: #fff;
  color: var(--river-blue);
}

/* ── Instructor directory ────────────────────────────────────────────── */
.content-instructor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 32px;
}
@media (min-width: 640px) {
  .content-instructor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.content-instructor-card {
  background: var(--surface-1);
  border: 1px solid var(--cream-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  display: block;
}
.content-instructor-card h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  margin: 0 0 3px;
  color: var(--fg-1);
}
.content-instructor-card .loc {
  font-size: 12.5px;
  color: var(--fg-3);
}
.content-instructor-card .cert {
  font-size: 11.5px;
  color: var(--moss-green);
  margin-top: 6px;
  font-weight: 600;
}
.content-region-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 4px;
}

/* ── Nearby venues (Rise Daisy cross-promo, instructor pages) ───────── */
.content-nearby-venues {
  background: var(--surface-1);
  border: 1px solid var(--cream-border);
  border-radius: var(--r-lg);
  padding: 20px 22px 4px;
  margin: 8px 0 28px;
}
.content-nearby-venues h2 {
  margin: 0 0 8px;
  font-size: 19px;
}
.content-nearby-venues ul {
  margin: 0;
  padding-left: 20px;
}
.content-nearby-venues a {
  color: var(--river-blue);
  font-weight: 600;
  text-decoration: none;
}
.content-nearby-venues a:hover {
  text-decoration: underline;
}

/* ── Glossary ─────────────────────────────────────────────────────── */
.glossary-entry {
  padding: 18px 0;
  border-top: 1px solid var(--cream-border);
}
.glossary-entry:first-of-type {
  border-top: none;
}
.glossary-entry h2 {
  margin: 0 0 8px;
  font-size: 19px;
}
.glossary-entry p:last-child {
  margin-bottom: 0;
  font-size: 14px;
}
.glossary-entry p:last-child a {
  color: var(--river-blue);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-warm: #1c1917;
    --cream: #26221e;
    --cream-border: #3a352f;
    --fg-1: #f5f0e8;
    --fg-2: #d6d0c8;
    --fg-3: #a8a29e;
    --fg-4: #78716c;
    --surface-1: #26221e;
  }
  .content-main img {
    background: #26221e;
  }
}