/**
 * @file prose-components.css
 * Editor-insertable component classes for body content, applied via the
 * CKEditor 5 Style dropdown (editor.editor.filtered_html). Loaded globally
 * in the `components` library so the classes work on every content type,
 * not just tutorial pages.
 *
 * The prose rules in basic-page.css (`article .node__content p { color: … }`)
 * have (0,1,2) specificity and beat a bare class, so color overrides here
 * repeat the prose-scoped selectors. Mirror any change into css/ckeditor5.css
 * so editors see the same thing in the WYSIWYG.
 */

/* ── Callouts ── */
.callout-green {
  background: var(--gmu-primary-green, #005239);
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}

.callout-green,
article .node__content p.callout-green,
article .layout__region--content p.callout-green,
article .node__content .callout-green p,
article .layout__region--content .callout-green p,
article .node__content .callout-green strong,
article .layout__region--content .callout-green strong,
article .node__content .callout-green h2,
article .node__content .callout-green h3,
article .node__content .callout-green h4 {
  color: #fff;
}

article .node__content .callout-green a,
article .layout__region--content .callout-green a,
p.callout-green a {
  color: #fff;
  text-decoration-color: var(--gmu-accent-yellow, #ffcc33);
}

.callout-yellow {
  background: #fff8e1;
  border-left: 4px solid var(--gmu-accent-yellow, #ffcc33);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}

.callout-info {
  background: #f4f4f4;
  border-left: 4px solid var(--gmu-primary-green, #005239);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1rem 1.25rem;
  line-height: 1.6;
}

/* ── Paragraph variants ── */
.lead,
article .node__content p.lead,
article .layout__region--content p.lead {
  font-size: var(--font-size-18, 1.125rem);
  line-height: 1.7;
  color: var(--gmu-black, #000);
}

.text-note,
article .node__content p.text-note,
article .layout__region--content p.text-note {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.6;
}

/* ── Heading variant: h2 without the yellow underline ── */
article .node__content h2.h-plain,
article .layout__region--content h2.h-plain,
h2.h-plain {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── List variants ── */
article .node__content ul.list-check,
article .layout__region--content ul.list-check,
ul.list-check {
  list-style: none;
  padding-left: 0.25rem;
}

ul.list-check > li {
  padding-left: 1.6rem;
  position: relative;
}

ul.list-check > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gmu-primary-green, #005239);
  font-weight: 700;
}

ul.list-2col {
  columns: 2;
  column-gap: 2.5rem;
}

ul.list-2col > li {
  break-inside: avoid;
}

@media (max-width: 640px) {
  ul.list-2col {
    columns: 1;
  }
}

/* ── Button-style link ── */
article .node__content a.btn-link,
article .layout__region--content a.btn-link,
a.btn-link {
  display: inline-block;
  background: var(--gmu-primary-green, #005239);
  color: #fff;
  font-family: var(--font-heading, 'Figtree', sans-serif);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.375rem;
  text-decoration: none;
}

article .node__content a.btn-link:hover,
article .layout__region--content a.btn-link:hover,
a.btn-link:hover {
  background: var(--gmu-dark-gray, #333);
  color: #fff;
}