/*
    Call-to-action banners — brand styling for the shared CTA partials:
      Views/Shared/_TrainingCenterCtaRibbon.cshtml
      Views/Shared/_CareerCtaBanner.cshtml
    Only the brand colors / sizes that Bootstrap 5 utilities can't express live here;
    layout and spacing are handled by BS5 classes on the markup.
*/

/* Brand "action" button (red), shared by both CTAs.
   Defined through Bootstrap's button CSS variables so it behaves like a
   built-in variant (btn-primary, btn-outline-light, ...).
   Scoped to `.btn.btn-cta` (two classes) so it outranks Bootstrap's base
   `.btn` rule, which resets --bs-btn-bg to transparent and loads after this
   file in _Layout. */
.btn.btn-cta {
    --bs-btn-color: #fff;
    --bs-btn-bg: #f03f42;
    --bs-btn-border-color: #f03f42;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d8302f;
    --bs-btn-hover-border-color: #d8302f;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d8302f;
    --bs-btn-active-border-color: #d8302f;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Find-a-Training-Center ribbon */
.cta-ribbon {
    background-color: #0071af;
    color: #fff;
}

.cta-ribbon__icon {
    width: 48px;
    height: 48px;
    background-color: #00539b;
    font-size: 1.4rem;
}

.cta-ribbon__eyebrow {
    color: #eef4f9;
    font-size: 1.0625rem;
}

.cta-ribbon__title {
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: 0.3px;
}

/* Homepage "Start Your Career Here" banner */
.cta-career {
    background: linear-gradient(118deg, #003a6b 0%, #00539b 52%, #0071af 100%);
    color: #fff;
}

.cta-career__title {
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: 0.4px;
}

.cta-career__lead {
    color: #e6f1fa;
}