@import "image.css";

.section-content-callout.full-width {
    min-height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content-callout.full-width.region {
    max-width: 100vw;
    width: 100%;
    height: 100%;
    max-height: 40rem;
}

.section-content-callout.full-width .cc-full-width-wrapper {
    text-align: center;
    padding: var(--padding-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content-callout.background-image {
    display: grid;
    grid-template-areas: "ccfullimage";
    overflow-x: hidden;
}

.section-content-callout.background-image > * {
    grid-area: ccfullimage;
}

.section-content-callout.background-image .cc-full-width-wrapper {
    height: 100%;
}

.section-content-callout.full-width .content-callout-text {
    margin-inline: auto;
    max-width: 125rem;
}

.section-content-callout.background-image .button:where(.primary, .secondary) {
    --local-bg-color: var(--color-brand-orange);
    --local-border-color: var(--color-brand-orange);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.background-image
.button:where(.primary, .secondary):hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.solid .button.primary {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
    font-weight: 500;
}

.section-content-callout.solid .button.primary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.solid .button.secondary {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
}

.section-content-callout.solid .button.secondary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

/* solid blue */
.section-content-callout.solid-blue .button.primary {
    --local-bg-color: var(--color-brand-orange);
    --local-border-color: var(--color-brand-orange);
    --local-color: var(--color-brand-navy);
    font-weight: 500 !important;
}

.section-content-callout.solid-blue .button.primary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.solid-blue .button.secondary {
    --local-bg-color: var(--color-brand-orange);
    --local-border-color: var(--color-brand-orange);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.solid-blue .button.secondary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout h2 {
    font-weight: 700;
    font-size: 3rem;
    margin-block-start: 4rem;
    margin-bottom: 1.5rem;
}

/* solid teal */
.section-content-callout.solid-teal .button.primary,
.section-content-callout.solid-orange .button.primary {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
    font-weight: 500;
}

.section-content-callout.solid-teal .button.primary:hover,
.section-content-callout.solid-orange .button.primary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout.solid-teal .button.secondary,
.section-content-callout.solid-orange .button.secondary {
    --local-bg-color: var(--color-brand-navy);
    --local-border-color: var(--color-brand-navy);
    --local-color: var(--color-primary-white);
}

.section-content-callout.solid-teal .button.secondary:hover,
.section-content-callout.solid-orange .button.secondary:hover {
    --local-bg-color: var(--color-brand-pale-blue);
    --local-border-color: var(--color-brand-pale-blue);
    --local-color: var(--color-brand-navy);
}

.section-content-callout h2 {
    font-weight: 700;
    font-size: 3rem;
    margin-block-start: 4rem;
    margin-bottom: 1.5rem;
}

/* background image  */
.section-content-callout.background-image .background-img {
    min-width: 100%;
    height: auto;
}

.section-content-callout.background-image,
.section-content-callout.background-image h2 {
    color: var(--color-primary-white);
}

.section-content-callout p {
    font-size: 2.1rem;
}

.section-content-callout a {
    margin: 4rem 1rem;
    font-weight: 600;
}

.section-content-callout.background-image .blue-overlay {
    background-color: var(--color-brand-navy-opacity);
    width: 100dvw;
    min-height: 40rem;
    height: 100%;
}

/* solid color */
.section-content-callout.solid {
    background: var(--color-gray-light-web);
}

.section-content-callout.solid-blue {
    background: var(--color-brand-navy);
    color: var(--color-primary-white);
}

.section-content-callout.solid-teal {
    background: var(--color-brand-teal);
    color: var(--color-primary-white);
}

.section-content-callout.solid-orange {
    background: var(--color-brand-orange);
    color: var(--color-brand-navy);
}

/* .content-callout-text .calls-to-action{
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
} */
@media (max-width: 74em) {
    .section-content-callout.full-width > .region {
        max-width: 90vw;
    }

    .section-content-callout.full-width .content-callout-text {
        margin-inline: 2rem;
    }
}

@media screen and (max-width: 55em) {
    .section-content-callout.full-width.region {
        max-height: unset;
    }
}

@media screen and (max-width: 35em) {
    .section-content-callout.full-width .calls-to-action a {
        margin: 1rem 2rem !important;
    }
}

@media (max-width: 30em) {
    .section-content-callout.full-width p {
        font-size: 1.6rem;
    }

    .section-content-callout.full-width .content-callout-text {
        margin-inline: 3rem;
    }
}