/* Shared Your Career form page styles. Formstack owns its field presentation. */
.your-career-form {
    --navy: #042a4f;
    --orange: #eb6d00;
    --light-blue: #c9ebfc;
    --column-padding: 40px;
    --med-blue: #1680BA;
    --page-padding: 25px;
    margin: 0;
    color: #444;
    background: #f5f5f5;
    /* Preserve the original body and the effective embedded-style overrides. */
    font: .875rem / 1.125 titling-gothic-fb, sans-serif, 'Helvetica Neue', Helvetica, Arial;

    h2, h3, p {
        font-family: Roboto, sans-serif;
        text-wrap: pretty;
    }

    h2, h3 {
        text-wrap: balance;
    }

    &, *, *::before, *::after {
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
    }

    .wrapper {
        width: 100%;
        max-width: 1280px;
        margin-inline: auto;
        background: #fff;
        padding-block: var(--page-padding);
    }

    main {
        border-top: 2px solid var(--orange);
        border-bottom: 2px solid var(--med-blue);
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: minmax(0, 1fr);
        /* Border-box height includes both borders; wrapper padding stays outside. */
        height: calc(100vh - var(--page-padding) - var(--page-padding));
        height: calc(100dvh - var(--page-padding) - var(--page-padding));
    }

    a {
        color: inherit;

        &:hover {
            text-decoration-thickness: 2px;
        }
    }

    :focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 3px;
    }

    .program-description,
    .sidebar {
        min-width: 0;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        scrollbar-color: #64748b #e5e7eb;

        &:focus-visible {
            outline-offset: -3px;
        }
    }

    .program-description {
        color: var(--program-text, #fff);
        background: var(--program-background, var(--navy));
    }

    .hero-content {
        position: relative;
        padding-block: 70px 0;
    }

    .hero-title {
        position: relative;
        z-index: 1;

        h1 {
            margin: 0 0 40px;
            font: italic 700 4.375rem / 1.2 'Bebas Neue', Arial, sans-serif;
            letter-spacing: 2px;
            text-transform: uppercase;

            span {
                display: table;
                color: #fff;
                margin-bottom: 14px;
                padding: 7px 28px 3.5px 14px;
                background: var(--orange);
            }
        }
    }

    .hero-image {
        position: absolute;
        top: 44px;
        right: var(--column-padding);
        width: 354px;
        aspect-ratio: 1;
        background: center / contain no-repeat;
    }

    .hero-sub-message {
        margin-top: 20px;
        border-top: 2px solid currentColor;
        padding-top: 20px;

        p {
            margin: 0;
            color: var(--program-accent, var(--light-blue));
            font-size: 1.5625rem;
            font-weight: 500;
            line-height: 1.3;
        }
    }

    .hero-content,
    .key-features,
    .main-copy {
        padding-inline: var(--column-padding);
    }

    .key-features {
        padding-bottom: 20px;

        h2 {
            font-size: 1.3125rem;
        }
    }

    .list-features {
        padding-left: 24px;

        li::marker {
            color: var(--orange);
            font-size: 1.125rem;
        }
    }

    .program-copy p {
        font-size: 1.0625rem;
        font-family: sans-serif;
        font-style: normal;
        font-weight: 200;
        line-height: 1.8;
    }

    .main-banner {
        display: block;
        width: 100%;
        height: 308px;
        margin-top: 32px;
        object-fit: cover;
        object-position: center;
    }

    .intro-heading {
        margin: 0 0 40px;
        padding-top: 64px;
        font-family: Roboto, sans-serif;
        font-size: 49px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.125;
    }

    .graph-section {
        margin-block: 60px;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .graph {
        height: 200px;
        background: center / contain no-repeat;
    }

    .list-content {
        padding-left: 20px;

        h3 {
            position: relative;
            margin-bottom: 0;
            color: var(--program-accent, var(--light-blue));
            font-size: 1.0625rem;
            font-family: titling-gothic-fb, sans-serif;
            font-weight: 500;
            line-height: 1.8;
            text-transform: uppercase;

            &::before {
                content: '';
                position: absolute;
                top: 10.2px;
                left: -20px;
                width: 7px;
                aspect-ratio: 1;
                border-radius: 50%;
                background: var(--orange);
            }
        }
    }

    .list-div {
        margin-bottom: 40px;
    }

    .main-bottom-content {
        margin-block: 60px;

        h2 {
            margin: 0;
            font: 700 2.875rem / 1.125 Roboto, sans-serif;
        }
    }

    .link-section {
        padding-block: 40px;
        border-block: 2px solid currentColor;
        text-transform: uppercase;

        a {
            color: var(--program-link, #ff8619);
        }
    }

    .logo-section {
        padding-block: 60px;
    }

    .school-logo {
        height: 62px;
        background: center / contain no-repeat;
    }

    .sidebar {
        min-width: 0;
        padding: 16px 20px;
        color: var(--navy);
    }

    #form-heading {
        margin: 0;
        scroll-margin-top: 16px;
        text-align: center;
        font: 500 2.0625rem / 1.125 Roboto, sans-serif;
    }

    .form-content > p {
        margin: 10px 0 20px;
        text-align: center;
        font-size: .9375rem;
        font-family: titling-gothic-fb, sans-serif;
        line-height: 1.4;
    }

    .side-form {
        margin-block: 10px;
        /* Use stable Formstack hooks, never its generated class names. */
        .fsBody {
            margin: 0 !important;
            padding: 0 !important;
        }

        .fsForm {
            margin: 0 !important;
            padding: 5px !important;
            width: 100%;
            max-width: none;
            font-family: titling-gothic-fb, sans-serif;
            font-style: normal;
            font-weight: 200;
        }

        .fsBody .fsLabel,
        .fsBody label {
            font-weight: normal !important;
        }
        /* Formstack's 400px minimum otherwise overflows narrower containers. */
        .fsPage {
            min-width: 0;
            width: 100%;
        }

        .fsSection,
        .fsFieldCell,
        .fsSubFieldGroup,
        .fsSubFieldGroup > * {
            min-width: 0;
            max-width: 100%;
        }

        .fsSection {
            padding: 5px;
        }

        .fsSubmit {
            margin-top: 0 !important;
        }

        [data-testid=field-92567355] {
            margin-bottom: 0 !important;
        }

        button[type=submit] {
            margin-bottom: 10px;
        }
    }

    .privacy {
        color: #757575;
        text-align: center;
        font-size: .75rem;
        font-style: italic;
        font-weight: 100;
        line-height: 1.4;

        p {
            margin: 10px 0 0;
            font-family: titling-gothic-fb, sans-serif;
        }
    }

    @media screen and (max-width: 1024px) {
        --column-padding: 20px;

        main {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto;
            height: auto;
        }

        .sidebar {
            grid-row: 1;
        }

        .program-description,
        .sidebar {
            overflow: visible;
            scrollbar-gutter: auto;
        }

        .hero-content {
            /* Both layers contribute to the hero's height on narrow screens. */
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            padding-block: 20px;
        }

        .hero-title,
        .hero-image {
            grid-area: 1 / 1;
            align-self: start;
        }

        .hero-sub-message {
            grid-area: 2 / 1;

            p {
                font-size: .9375rem;
            }
        }
            /* One fixed mobile font set; no fluid sizes or extra phone tiers. */
            .hero-title h1 {
                margin-bottom: 0;
                font-size: 2.1875rem;

                span {
                    margin-bottom: 7px;
                    padding: 3.5px 14px 1.75px 7px;
                }
            }

        .intro-heading {
            font-size: 30px;
        }

        .program-copy p {
            font-size: .9375rem;
        }

        #form-heading {
            font-size: 2rem;
        }

        .form-content > p {
            font-size: .8125rem;
        }

        .hero-image {
            position: static;
            justify-self: end;
            max-width: 100%;
        }
    }

    @media screen and (max-width: 600px) {
        .image-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .hero-image {
            width: 204px;
        }
    }

    @media print {
        main {
            display: block;
            height: auto;
        }

        .program-description,
        .sidebar {
            overflow: visible;
        }

        .program-description {
            color: #000;
            background: #fff;
        }
    }
}

    .your-career-form .hero-image {
        background-image: url("/go/your-career/assets/images/student900x900.jpg");
    }

    .your-career-form .schedule-illustration {
        background-image: url("/go/your-career/mba/assets/images/fit_icon.png");
    }

    .your-career-form .faculty-illustration {
        background-image: url("/go/your-career/mba/assets/images/CSUF_2020_Landing-Page-Icons_060420-v2-02.png");
    }

    .your-career-form .college-logo {
        background-image: url("/go/your-career/mba/assets/images/BUSINESS-ECONOMICS-reversed-orange.png");
    }

    .your-career-form .accreditation-logo {
        background-image: url("/go/your-career/mba/assets/images/AACSB-logo-accredited-reverse-color-RGB.png");
    }