/**
 * Section: CTA (dark)
 *
 * Overrides only. `cta.css` carries the layout and is enqueued alongside this
 * file by the section's render function, so a page can use the dark variant
 * without the light one and still get the base treatment.
 *
 * Ported from the mockup's `.hiw-cta` block (css/howitworks.css 268-316).
 * The layout half of that block is byte-identical to `.about-cta`, which is
 * why only the colour half lives here.
 *
 * Contrast on --deep-ocean #1B5E7A, checked rather than assumed — the
 * `madein` section's mockup colours failed badly on the same background:
 *
 *   --off-white  #FAFAF7  headings, large   6.86:1   passes AA and AAA
 *   --coastal-blue #A8C8D4 body copy        4.06:1   FAILS AA for normal text
 *   --coastal-blue           h2 em, large    4.06:1   passes (3:1 large-text)
 *
 * The body paragraph is therefore lifted to --coastal-soft, which clears AA at
 * ~6.4:1 and is a barely perceptible lightening. The heading em keeps
 * --coastal-blue: it is large text, so 3:1 applies and it passes as authored.
 */

.cta--dark {
  background: var(--deep-ocean);
}

.cta--dark .eyebrow {
  color: var(--coastal-blue);
}

.cta--dark h2 {
  color: var(--off-white);
}

.cta--dark h2 em {
  color: var(--coastal-blue);
}

.cta--dark p {
  /* Was --coastal-blue in the mockup: 4.06:1 on Deep Ocean, under the AA
     requirement of 4.5:1 for normal text. --coastal-soft clears it. */
  color: var(--coastal-soft);
  max-width: 46ch;
}

/* The outline button sits on a dark background here — flip it to light. */
.cta--dark .btn-outline {
  color: var(--off-white);
  border-color: rgba(250, 250, 247, 0.5);
}

.cta--dark .btn-outline:hover {
  background: var(--off-white);
  color: var(--deep-ocean);
}