/* ==========================================================================
   Banners + CTA Box — MBA ACT
   Banner: tangerine full-width with text + link (reused by alert bar).
   CTA Box: accent bg, 8px radius, heading + body + button.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner — full-width, tangerine bg
   -------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-tangerine);
  color: var(--color-navy-darkest);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  text-align: center;
}

.banner a {
  color: var(--color-navy-darkest);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.banner a:hover {
  color: var(--color-navy);
}

/* Navy variant */
.banner--navy {
  background-color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   Alert Bar — Figma node 10546:16431. Tangerine bg, white text per design.
   Note: white on tangerine is 2.62:1 (WCAG AA fail). Design-over-AA choice
   confirmed by client 2026-04-22.
   -------------------------------------------------------------------------- */
.alert-bar {
  background-color: var(--color-tangerine);
  padding: 8px var(--space-4);
}

.alert-bar__inner {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2); /* 8 per Figma */
  max-width: 1440px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.4;
}

.alert-bar__text {
  margin: 0;
  font-weight: var(--font-weight-bold); /* 65 Bold per Figma */
  color: var(--color-white);
}

.alert-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-white);
  font-weight: var(--font-weight-regular); /* 55 Roman per Figma */
  text-decoration: none; /* underline lives on the text span only — chevron stays unlined */
}

.alert-bar__link-text {
  text-decoration: underline;
}

.alert-bar__link:hover {
  color: var(--color-tangerine-darkest);
}

.alert-bar__link-icon {
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   CTA Box — accent background, call-to-action section
   -------------------------------------------------------------------------- */
.cta-box {
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-tangerine);
  color: var(--color-white);
  border-radius: var(--radius-md); /* 8px */
  text-align: center;
}

.cta-box__heading {
  font-size: var(--h3-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--h3-lh);
  margin-bottom: var(--space-4);
}

.cta-box__body {
  font-size: var(--text-md);
  line-height: var(--text-md-lh);
  margin-bottom: var(--space-8);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.cta-box__action {
  display: inline-flex;
}

/* Navy CTA box */
.cta-box--navy {
  background-color: var(--color-navy);
}

/* Responsive */
@media (max-width: 768px) {
  .cta-box {
    padding: var(--space-8) var(--space-6);
  }

  .cta-box__heading {
    font-size: 2rem;
  }
}