/*
 * Pack Thru v1.3.0 — contrast and readability refinement.
 * Loaded AFTER all theme page styles. Scope to existing components, with
 * no changes to widths, grid, image crops, spacing, type scale or layout.
 * Explicit colors protect against WordPress/Elementor inherited heading
 * and link rules on the staging site.
 */

/* White text on the existing dark navy sections. */
.certification-section,
.cert-inner,
.cta-panel,
.inner-cta-panel {
  color: #fff;
}

.certification-section :is(h1, h2, h3, h4, h5, h6),
.cert-inner :is(h1, h2, h3, h4, h5, h6),
.cta-panel :is(h1, h2, h3, h4, h5, h6),
.inner-cta-panel :is(h1, h2, h3, h4, h5, h6),
.together-copy :is(h2, h3) {
  color: #fff !important;
}

.certification-section .cert-copy,
.certification-section .cert-card strong,
.cert-inner p,
.cert-inner .cert-inner-cards strong,
.cta-panel p,
.inner-cta-panel p,
.together-copy p {
  color: #f0f7ff !important;
}

.certification-section .cert-card small,
.cert-inner .cert-inner-cards span {
  color: #deecfc !important;
}

.certification-section .cert-kicker,
.cert-inner .section-kicker,
.inner-cta-panel .section-kicker,
.inner-cta-panel .section-kicker.text-info {
  color: #39e0be !important;
}

/* Preserve mint handwritten emphasis on the homepage CTA. */
.cta-panel h2 span { color: #39e0be !important; }

/* Primary blue buttons: white text on a slightly deeper branded blue.
 * WCAG normal-text contrast >= 4.5:1. */
a.btn.btn-brand,
button.btn.btn-brand,
input.btn.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0875d7;
  --bs-btn-border-color: #0875d7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #075fae;
  --bs-btn-hover-border-color: #075fae;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #075fae;
  --bs-btn-active-border-color: #075fae;
  background-color: #0875d7;
  border-color: #0875d7;
  color: #fff !important;
  opacity: 1;
}

:is(a, button, input).btn.btn-brand:is(:hover, :focus-visible, :active) {
  background-color: #075fae;
  border-color: #075fae;
  color: #fff !important;
}

/* White/outlined calls to action use navy lettering until hovered. */
:is(a, button).btn.btn-soft,
:is(a, button).btn.btn-outline-brand {
  color: #082e58 !important;
  background-color: #fff;
}
:is(a, button).btn.btn-soft:is(:hover, :focus-visible) {
  color: #073d73 !important;
  background-color: #edf7ff;
}
:is(a, button).btn.btn-outline-brand:is(:hover, :focus-visible, :active) {
  color: #fff !important;
  background-color: #0875d7;
  border-color: #0875d7;
}

/* Outline button on navy Celebration panel. */
.together-panel .btn.together-btn {
  color: #fff !important;
  background-color: transparent;
  border-color: rgba(255,255,255,.85);
}
.together-panel .btn.together-btn:is(:hover, :focus-visible) {
  color: #062d5a !important;
  background-color: #fff;
  border-color: #fff;
}

/* Teal CTAs retain the approved teal fill. White on light teal has poor
 * contrast, so use dark navy lettering (including the circular arrow). */
:is(a, button).btn.cta-btn {
  --bs-btn-color: #062d5a;
  --bs-btn-bg: #22d7ae;
  --bs-btn-border-color: #22d7ae;
  --bs-btn-hover-color: #062d5a;
  --bs-btn-hover-bg: #19c89f;
  --bs-btn-hover-border-color: #19c89f;
  color: #062d5a !important;
  background-color: #22d7ae;
  border-color: #22d7ae;
}
:is(a, button).btn.cta-btn:is(:hover, :focus-visible, :active) {
  color: #062d5a !important;
  background-color: #19c89f;
  border-color: #19c89f;
}

/* Avoid inherited text colors within the button/icon wrappers. */
.btn.btn-brand :is(span, i),
.btn.btn-outline-brand:is(:hover, :focus-visible) :is(span, i),
.together-panel .btn.together-btn :is(span, i) {
  color: inherit !important;
}
.btn.cta-btn :is(span, i) {
  color: #062d5a !important;
}

/* A few standalone controls have bespoke button classes. */
.celebration-sound-btn {
  color: #07345f !important;
}
.celebration-sound-btn:is(:hover, :focus-visible) {
  color: #07345f !important;
}
.celebration-sound-toggle:is(:hover, :focus-visible),
.celebration-play-toggle:is(:hover, :focus-visible) {
  color: #fff !important;
  background-color: #075fae;
}

/* Keyboard focus is visible on dark and light backgrounds. */
:is(a, button, input).btn:focus-visible,
.celebration-sound-btn:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 3px;
}