/* =====================================================================
   Columban — ContentPage2026
   Used by: ContentPage2026 template
   Upload to: assets/css/contentpage2026.css

   Styles ONLY the rich text area (<div id="content" class="cm-content">).
   Selectors start with #content so they outrank the site's #main / #content rules.
   Header, footer, breadcrumbs, left nav and right modules are untouched.
   No font-family is set: h1–h6 and p inherit the global site fonts.
   Grids respond to the width of the content column (container queries),
   so components work in the narrow centre column and on phones.

   Palette (only these colours; lighter shades are the same colours at
   reduced opacity):
     Green   #3a6a0e   headings, panels
     Blue    #1e82c9   links, blue accents
     Orange  #ff7b14   buttons, accent bars
     Maroon  #822146   labels, badges
     Lime    #abc449   highlights, pills
   ===================================================================== */

#content.cm-content {
  --cm-green: #3a6a0e;
  --cm-blue: #1e82c9;
  --cm-orange: #ff7b14;
  --cm-maroon: #822146;
  --cm-lime: #abc449;

  --cm-green-tint: rgba(58, 106, 14, .07);
  --cm-blue-tint: rgba(30, 130, 201, .08);
  --cm-orange-tint: rgba(255, 123, 20, .1);
  --cm-maroon-tint: rgba(130, 33, 70, .08);
  --cm-lime-tint: rgba(171, 196, 73, .22);
  --cm-border: rgba(58, 106, 14, .14);

  --cm-radius: 14px;
  --cm-radius-sm: 10px;
  --cm-shadow: 0 1px 2px rgba(58, 106, 14, .06), 0 6px 18px rgba(58, 106, 14, .08);
  --cm-shadow-lg: 0 2px 4px rgba(58, 106, 14, .07), 0 14px 34px rgba(58, 106, 14, .14);
  container-type: inline-size;
  container-name: cm;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   Base typography
   --------------------------------------------------------------------- */
#content.cm-content::after { content: ""; display: table; clear: both; }
#content.cm-content > :first-child { margin-top: 0; }
#content.cm-content p { margin: 0 0 1em; line-height: 1.7; }
#content.cm-content h2 {
  position: relative;
  margin: 2.25em 0 .75em;
  padding-top: .9em;
}
#content.cm-content h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 4px;
  border-radius: 4px;
  background: var(--cm-orange);
}
#content.cm-content h3 { color: var(--cm-green); margin: 1.75em 0 .6em; }
#content.cm-content h4,
#content.cm-content h5,
#content.cm-content h6 { margin: 1.5em 0 .5em; }
#content.cm-content a:not(.cm-btn) { color: var(--cm-blue); }
#content.cm-content img { max-width: 100%; height: auto; border-radius: var(--cm-radius-sm); }
#content.cm-content iframe { max-width: 100%; }

/* Embedded video becomes responsive 16:9 automatically */
#content.cm-content iframe[src*="youtube"],
#content.cm-content iframe[src*="youtu.be"],
#content.cm-content iframe[src*="vimeo"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-lg);
}
#content.cm-content blockquote {
  margin: 1.75em 0;
  padding: .25em 0 .25em 1.25em;
  border-left: 4px solid var(--cm-maroon);
  color: var(--cm-maroon);
}
#content.cm-content table { width: 100%; margin-bottom: 1.5em; border-collapse: collapse; }
#content.cm-content th,
#content.cm-content td { padding: .6em .75em; border-bottom: 1px solid var(--cm-border); text-align: left; }
#content.cm-content th { background: var(--cm-green-tint); }

/* ---------------------------------------------------------------------
   Components (add the class in the editor's source view)
   --------------------------------------------------------------------- */

/* Small label above a heading:  <p class="cm-eyebrow">…</p> */
#content.cm-content .cm-eyebrow {
  margin: 0 0 .4em;
  color: var(--cm-maroon);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#content.cm-content .cm-eyebrow + h2 { margin-top: 0; padding-top: 0; }
#content.cm-content .cm-eyebrow + h2::before { display: none; }
#content.cm-content * + .cm-eyebrow { margin-top: 2.75em; }

/* Larger intro paragraph:  <p class="cm-lead">…</p> */
#content.cm-content .cm-lead {
  font-size: 1.15em;
  line-height: 1.6;
}

/* Buttons (all orange):  <p class="cm-actions"><a class="cm-btn" …>…</a></p>
   Variants: cm-btn--outline (orange outline), cm-btn--ghost (white outline,
   for use on the green cm-cta panel). */
#content.cm-content .cm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25em 0 1.75em;
}
#content.cm-content a.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .7em 1.3em;
  border: 2px solid var(--cm-orange);
  border-radius: 999px;
  background: var(--cm-orange);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s, filter .2s;
}
#content.cm-content a.cm-btn:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(.94);
  box-shadow: 0 6px 16px rgba(255, 123, 20, .35);
}
#content.cm-content a.cm-btn:focus-visible { outline: 3px solid rgba(255, 123, 20, .45); outline-offset: 2px; }
#content.cm-content a.cm-btn--outline { background: transparent; color: var(--cm-orange); }
#content.cm-content a.cm-btn--outline:hover { background: var(--cm-orange); color: #fff; filter: none; }
#content.cm-content a.cm-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
#content.cm-content a.cm-btn--ghost:hover { background: var(--cm-orange); border-color: var(--cm-orange); filter: none; }

/* Image with rounded corners + shadow:  <p class="cm-figure"><img …></p> */
#content.cm-content .cm-figure { margin: 1.5em 0; }
#content.cm-content .cm-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow-lg);
}

/* Grids:  <div class="cm-grid cm-grid--2"> … </div>  (--2, --3, --4)
   Columns are added as the CONTENT COLUMN gets wider, not the screen. */
#content.cm-content .cm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25em 0 1.75em;
}
@container cm (min-width: 400px) {
  #content.cm-content .cm-grid--2,
  #content.cm-content .cm-grid--3,
  #content.cm-content .cm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cm (min-width: 640px) {
  #content.cm-content .cm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container cm (min-width: 820px) {
  #content.cm-content .cm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* A lone last card in a 2-column grid spans the full row */
@container cm (min-width: 400px) and (max-width: 639.98px) {
  #content.cm-content .cm-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Cards:  <div class="cm-card"><h3>…</h3><p>…</p></div>
   Coloured top edge: cm-card--green / --blue / --orange / --maroon / --lime */
#content.cm-content .cm-card {
  position: relative;
  padding: 1.25rem 1.25rem 1.3rem;
  background: #fff;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
  transition: transform .2s, box-shadow .2s;
}
#content.cm-content .cm-card:hover { transform: translateY(-2px); box-shadow: var(--cm-shadow-lg); }
#content.cm-content .cm-card h3,
#content.cm-content .cm-card h4 { margin: 0 0 .35em; }
#content.cm-content .cm-card p { line-height: 1.55; }
#content.cm-content .cm-card > :last-child { margin-bottom: 0; }
#content.cm-content .cm-card--green  { border-top: 4px solid var(--cm-green); }
#content.cm-content .cm-card--blue   { border-top: 4px solid var(--cm-blue); }
#content.cm-content .cm-card--orange { border-top: 4px solid var(--cm-orange); }
#content.cm-content .cm-card--maroon { border-top: 4px solid var(--cm-maroon); }
#content.cm-content .cm-card--lime   { border-top: 4px solid var(--cm-lime); }
#content.cm-content .cm-card--tint { background: var(--cm-green-tint); border-color: transparent; box-shadow: none; }
#content.cm-content .cm-card--tint:hover { transform: none; box-shadow: none; }

/* Auto-numbered cards:  <div class="cm-grid cm-grid--2 cm-numbered"> … */
#content.cm-content .cm-numbered { counter-reset: cm-num; }
#content.cm-content .cm-numbered > * { counter-increment: cm-num; border-left: 4px solid var(--cm-lime); }
#content.cm-content .cm-numbered > *::before {
  content: counter(cm-num, decimal-leading-zero);
  display: block;
  margin-bottom: .5em;
  color: var(--cm-maroon);
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .06em;
}

/* Pills:  <ul class="cm-chips"><li>…</li></ul> */
#content.cm-content ul.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: .75em 0 1.5em;
  padding: 0;
}
#content.cm-content ul.cm-chips li {
  margin: 0;
  padding: .35em .9em;
  border-radius: 999px;
  background: var(--cm-lime-tint);
  color: var(--cm-green);
  font-size: .9em;
  font-weight: 600;
  line-height: 1.4;
}

/* Tick list:  <ul class="cm-checklist"><li>…</li></ul> */
#content.cm-content ul.cm-checklist { list-style: none; margin: .75em 0 1.5em; padding: 0; }
#content.cm-content ul.cm-checklist li { position: relative; margin-bottom: .6em; padding-left: 2em; }
#content.cm-content ul.cm-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .25em;
  width: 1.25em; height: 1.25em;
  border-radius: 50%;
  background: var(--cm-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 60% no-repeat;
}

/* Callout:  <div class="cm-callout">…</div>  (green)
   Variants: cm-callout--blue / --orange / --maroon / --lime */
#content.cm-content .cm-callout {
  margin: 1.5em 0;
  padding: 1.1rem 1.35rem;
  background: var(--cm-green-tint);
  border-left: 4px solid var(--cm-green);
  border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
}
#content.cm-content .cm-callout--blue   { background: var(--cm-blue-tint);   border-left-color: var(--cm-blue); }
#content.cm-content .cm-callout--orange { background: var(--cm-orange-tint); border-left-color: var(--cm-orange); }
#content.cm-content .cm-callout--maroon { background: var(--cm-maroon-tint); border-left-color: var(--cm-maroon); }
#content.cm-content .cm-callout--lime   { background: var(--cm-lime-tint);   border-left-color: var(--cm-lime); }
#content.cm-content .cm-callout--maroon h3,
#content.cm-content .cm-callout--maroon h4 { color: var(--cm-maroon); }
#content.cm-content .cm-callout h3,
#content.cm-content .cm-callout h4 { margin-top: 0; }
#content.cm-content .cm-callout > :last-child { margin-bottom: 0; }

/* Badge:  <p class="cm-badge">…</p> */
#content.cm-content .cm-badge {
  display: inline-block;
  margin: 0 0 .75em;
  padding: .3em .75em;
  border-radius: 999px;
  background: var(--cm-maroon);
  color: #fff;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Soft panel:  <div class="cm-feature">…</div> */
#content.cm-content .cm-feature {
  margin: 1.75em 0;
  padding: 1.5rem;
  background: var(--cm-blue-tint);
  border: 1px solid rgba(30, 130, 201, .18);
  border-radius: var(--cm-radius);
}
#content.cm-content .cm-feature h2,
#content.cm-content .cm-feature h3 { margin-top: 0; padding-top: 0; }
#content.cm-content .cm-feature h2::before { display: none; }
#content.cm-content .cm-feature > :last-child { margin-bottom: 0; }

/* Call-to-action panel:  <div class="cm-cta"><h2>…</h2><p>…</p></div> */
#content.cm-content .cm-cta {
  position: relative;
  overflow: hidden;
  margin: 2.5em 0;
  padding: 1.75rem 1.5rem;
  border-radius: 18px;
  background: var(--cm-green);
  color: #fff;
  box-shadow: var(--cm-shadow-lg);
}
@container cm (min-width: 560px) {
  #content.cm-content .cm-cta { padding: 2.25rem 2.25rem; }
}
#content.cm-content .cm-cta::after {
  content: "";
  position: absolute;
  right: -110px; top: -130px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 196, 73, .35) 0%, rgba(171, 196, 73, 0) 70%);
  pointer-events: none;
}
#content.cm-content .cm-cta > * { position: relative; z-index: 1; }
#content.cm-content .cm-cta h2,
#content.cm-content .cm-cta h3 { color: #fff; margin-top: 0; padding-top: 0; }
#content.cm-content .cm-cta h2::before { display: none; }
#content.cm-content .cm-cta p { color: #fff; }
#content.cm-content .cm-cta .cm-eyebrow { color: var(--cm-lime); }
#content.cm-content .cm-cta a:not(.cm-btn) { color: #fff; text-decoration: underline; }
#content.cm-content .cm-cta .cm-actions { margin-bottom: 1em; }
#content.cm-content .cm-cta > :last-child { margin-bottom: 0; }

/* Download card:  <p class="cm-download"><a href="file.pdf"><span><strong>…</strong><span>…</span></span></a></p> */
#content.cm-content .cm-download { margin: 1.25em 0 1.75em; }
#content.cm-content .cm-download a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  background: #fff;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  box-shadow: var(--cm-shadow);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#content.cm-content .cm-download a:hover {
  border-color: var(--cm-blue);
  box-shadow: var(--cm-shadow-lg);
  text-decoration: none;
  transform: translateY(-2px);
}
#content.cm-content .cm-download a::before {
  content: "PDF";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 12px;
  background: var(--cm-maroon-tint);
  color: var(--cm-maroon);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
}
#content.cm-content .cm-download a::after {
  content: "\2193";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin-left: auto;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--cm-orange);
  color: #fff;
  font-weight: 700;
}
#content.cm-content .cm-download strong { display: block; color: var(--cm-blue); }
#content.cm-content .cm-download span span { display: block; font-size: .9em; }

/* ---------------------------------------------------------------------
   Motion preference
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #content.cm-content *,
  #content.cm-content *::before,
  #content.cm-content *::after { transition: none !important; }
  #content.cm-content .cm-card:hover,
  #content.cm-content a.cm-btn:hover,
  #content.cm-content .cm-download a:hover { transform: none; }
}