/*
 * cm.css — Catermonkey clean-page styles
 *
 * Minimal, dependency-free CSS for new (post-Divi) pages built via
 * site/_templates/clean-page.html. Brand values from docs/branding.md.
 *
 * Only loaded by pages that opt in (via the cm-page body class). The
 * surrounding nav + footer (still Divi-rendered) keep their own styles.
 *
 * Class prefix: cm- (Catermonkey). Don't mix with et_pb_ ordinal classes.
 */

:root {
  --cm-accent:    #2ea3f2;
  --cm-text:      #154c52;
  --cm-muted:     #6b7a7c;
  --cm-border:    #bbbbbb;
  --cm-bg-soft:   #e8f1ec;
  --cm-bg:        #ffffff;
  --cm-radius:    8px;
  --cm-content-w: 720px;
}

/* --- Page container ------------------------------------------------------ */

main.cm-page {
  max-width: var(--cm-content-w);
  margin: 0 auto;
  padding: 64px 24px 96px;
  color: var(--cm-text);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* --- Prose --------------------------------------------------------------- */

.cm-prose h1,
.cm-prose h2,
.cm-prose h3 {
  color: var(--cm-text);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 1.6em 0 0.6em;
}
.cm-prose h1 { font-size: 40px; margin-top: 0; }
.cm-prose h2 { font-size: 28px; }
.cm-prose h3 { font-size: 22px; }

.cm-prose p { margin: 0 0 1.2em; }
.cm-prose a { color: var(--cm-accent); text-decoration: underline; text-underline-offset: 3px; }
.cm-prose a:hover { text-decoration: none; }

.cm-prose ul, .cm-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.cm-prose li { margin: 0.3em 0; }

.cm-intro { font-size: 19px; color: var(--cm-text); margin-bottom: 2em; }

/* --- Components ---------------------------------------------------------- */

.cm-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--cm-accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.cm-cta:hover { opacity: 0.85; text-decoration: none; }

.cm-card {
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  padding: 24px;
  margin: 1em 0;
}

.cm-back {
  display: inline-block;
  margin-bottom: 1.5em;
  color: var(--cm-text);
  text-decoration: none;
  font-size: 14px;
}
.cm-back:hover { text-decoration: underline; }
.cm-back::before { content: "← "; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
  main.cm-page { padding: 40px 20px 64px; }
  .cm-prose h1 { font-size: 32px; }
  .cm-prose h2 { font-size: 24px; }
  .cm-intro    { font-size: 17px; }
}
@media (max-width: 480px) {
  main.cm-page { padding: 32px 16px 48px; }
  .cm-prose h1 { font-size: 28px; }
}