@font-face {
    font-family: 'adobe-caslon-pro';
    src: url('/fonts/acalsonpro-regular/ACaslonPro-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'national2';
    font-weight: 400;
    src: url('/fonts/national2/TestNational2-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'national2';
    font-weight: 500;
    src: url('/fonts/national2/TestNational2-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'national2';
    font-weight: 700;
    src: url('/fonts/national2/TestNational2-Bold.otf') format('opentype');
}

@layer theme {
    :root {
        --color-primary: #990000;
        --color-secondary: #000000;
        --color-yellow: #ffcc00;
        --color-white: #ffffff;
        --color-gray: #767676;
        --body-font-family: 'national2', sans-serif;
        --text-color: var(--color-secondary);
        --link-hover-color: #820e16;
        --color-red-1: var(--color-primary);
        --primary-button-background-color: var(--color-primary);
        --primary-button-border-color: transparent;
        --primary-button-hover-background-color: var(--color-yellow);
        --primary-button-hover-color: var(--color-secondary);
        --secondary-button-background-color: var(--color-white);
        --secondary-button-color: var(--color-primary);
        --secondary-button-border-color: var(--color-primary);
        --secondary-button-hover-background-color: var(--color-primary);
        --secondary-button-hover-border-color: var(--color-primary);
        --secondary-button-hover-color: var(--color-white);
        --label-color: var(--color-secondary);
    }
}

@layer global {

    h1,
    h2,
    h3,
    h4 {
        color: var(--color-secondary);
        font-family: 'adobe-caslon-pro';
    }

    .hero-container:has(.hero-image-wrapper):has(.hero-content-wrapper) {
        min-height: 300px;
        @media (width >= 48em){
             & h1{max-width: 50%;}
            }
         }
        

    .button {
        &:not(.primary, .secondary) {
            --button-color: var(--link-color);
            font-weight: 700;
            font-size: var(--body-font-size-sm);
            gap: 10px;
            text-transform: uppercase;

            &::after {
                display: none;
            }
        }
    }

    .loader {
        width: 45px;
        aspect-ratio: 1;
        --c: no-repeat linear-gradient(var(--color-primary) 0 0);
        background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
        background-size: 20% 100%;
        animation: l1 1s infinite linear;
        margin: auto;
    }

    @keyframes l1 {
        0% {
            background-size: 20% 100%, 20% 100%, 20% 100%;
        }

        33% {
            background-size: 20% 10%, 20% 100%, 20% 100%;
        }

        50% {
            background-size: 20% 100%, 20% 10%, 20% 100%;
        }

        66% {
            background-size: 20% 100%, 20% 100%, 20% 10%;
        }

        100% {
            background-size: 20% 100%, 20% 100%, 20% 100%;
        }
    }
}

@layer overrides {
    .button-container {
        --button-justify: start;
    }

    dialog.modal {
        transition: none;
    }

    .modal-box {
        width: 100%;
    }

    .back-to-top {
        background-color: var(--color-yellow);
        color: var(--color-secondary);
        bottom: 190px;
        z-index: 2;

        @media screen and (width <36em) {
            display: none;
        }
    }

    .embeddedMessagingConversationButton {
        bottom: 160px;
    }

    .hero-container:has(.hero-image-wrapper):has(.hero-content-wrapper) {
        padding: 0px;
        position: relative;

        @media screen and (width <=36em) {
            padding-block: 20px;
        }

        & h1,
        .hero-sub-title {
            color: var(--color-white);
        }

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 1) 0%,
                    rgba(0, 0, 0, 0.1) 60%,
                    rgba(0, 0, 0, 0.01) 100%);

            @media (width<=36em) {
                background: linear-gradient(to right,
                        rgba(0, 0, 0, 0.8) 0%,
                        rgba(0, 0, 0, 0.1) 90%,
                        rgba(0, 0, 0, 0.01) 100%);
            }
        }

        & .hero-wrapper {
            display: flex;
            align-items: center;

            & .hero {
                & .hero-content-wrapper {
                    position: relative;
                    z-index: 1;
                }

                & .hero-image-wrapper {
                    & img {
                        object-fit: cover;
                        object-position: top;
                    }
                }
            }
        }
    }

    .sticky-footer-wrapper {
        background-color: var(--color-gray);
        --sticky-footer-border-color: transparent;
        --primary-button-color: var(--color-black);
        --primary-button-background-color: var(--color-yellow);
        --secondary-button-background-color: transparent;
        --secondary-button-color: var(--color-white);
        --secondary-button-border-color: var(--color-white);
        --secondary-button-hover-background-color: var(--color-yellow);
        --secondary-button-hover-border-color: var(--color-yellow);
        --secondary-button-hover-color: var(--color-black);
        color: var(--color-white);
        z-index: 1;

        & .sticky-footer {
            & .sticky-footer-text-container {
                font-size: 1.125rem;
            }

            & .button-container {
                flex-wrap: nowrap;

                & .button.primary {
                    @media (width<=36em) {
                        padding: 10px 6px;
                        font-size: 12px;
                    }
                }

                & .button.secondary {
                    background-color: var(--color-primary);
                    border: var(--color-primary);

                    &:hover {
                        background-color: var(--color-yellow);
                        color: var(--color-black);
                        border-color: var(--color-yellow);
                    }

                    @media (width<=36em) {
                        padding: 10px 6px;
                        font-size: 12px;
                        min-width: fit-content;
                    }
                }
            }
        }
    }

    .blog-cards {
        & .card {
            & .card-header {
                min-height: 107px;

                img {
                    object-fit: cover;
                }
            }

            & .card-body {
                min-block-size: 150px;
            }
        }
    }

    .nav-wrapper {
        --link-color: var(--color-secondary);
    }

    .image-flip {
        & img {
            @media (width >=36em) {
                transform: scale(-1, 1);
            }
        }
    }

    .footer-wrapper {
        background-color: var(--color-secondary);

        & .column {
            & h2 {
                color: var(--color-yellow);
            }

            & ul {
                color: var(--color-white);

                & li {
                    color: var(--color-yellow);
                    & a {
                        &:hover {
                            text-decoration: underline;
                            color: var(--color-white);
                        }
                    }
                }
            }

            & .icon-regis-logo-footer {
                & img {
                    max-width: 60%;
                }
            }
        }

        & .footer-bottom {
            border-block-start-color: var(--color-gray);
            color: var(--color-white);
            & p{
                color: var(--color-yellow);
            }
            & ul {
                color: var(--color-white);

                & li {
                    & a {
                        &:hover {
                            text-decoration: underline;
                            color: var(--color-white);
                        }
                    }
                }
            }
        }
    }

    /* Faculty page image fix */
    .usc-faculty-grid-layout {
        .column.image {
            justify-self: center;
        }

        .column-row {
            grid-template-columns: 1fr 5fr;

            @media (width <=48em) {
                grid-template-columns: 1fr;
            }
        }
    }

    .faculty-image-fix {
        & img {
            width: 125px;
            height: 125px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .modal-box {
        width: 100%;
        color: #000000;

        & .modal-top-section {

            & p:first-child {
                color: var(--color-primary);
            }

            & p:nth-child(2) {
                color: var(--color-black);
            }
        }

        & .modal-progress-bar {
            background-color: var(--color-primary);
        }

        & .modal-button-container {
            & button:first-child:nth-last-child(2) {
                background: transparent;
                border: 2px solid var(--color-primary);
                color: var(--color-black-2);

                &:hover {
                    background-color: var(--color-yellow);
                    color: var(--color-black);
                    border-color: var(--color-yellow);
                }
            }

            & button {
                background-color: var(--color-primary);
                color: var(--color-white);
                border: unset;

                &:hover {
                    background-color: var(--color-yellow);
                    color: var(--color-black);
                    border-color: var(--color-yellow);
                }
            }
        }

        & .modal-multistep-form-wrapper {
            & label {
                color: var(--color-black);
            }

            & input,
            select {
                border: 2px solid var(--color-gray-4);

                &:focus {
                    outline: none;
                    border: 2px solid var(--color-primary);
                }
            }
        }
    }

    .hero-container:has(.blog-hero-min-height) {
        min-height: 350px;
    }

    .para-space {
        & p:not(:last-child) {
            margin-bottom: 15px;
        }

        & ul {
            li:not(:last-child) {
                margin-bottom: 15px;
            }
        }
    }

    .teaser-cards.normal-card {
        & ul li {
            &:hover {
                background-color: none;
            }

            & a {
                background-color: var(--color-gray-2);
                pointer-events: none;

                span {
                    &::before {
                        display: none;
                    }
                }
            }
        }
    }

    .width-reset {
        & .column-row {
            grid-template-columns: 3fr 1fr;

            @media screen and (width <=48em) {
                grid-template-columns: 1fr;
            }
        }
    }

    .grid-four-col-container {
        .column-row {
            grid-template-columns: repeat(4, 1fr);

            @media (width <=48em) {
                grid-template-columns: 1fr;
            }
        }
    }

    .image-max-width-300 {
        & img {
            max-width: 300px;
            width: 100%;
        }
    }

    .less-gap-between-blocks {
        gap: 10px;
    }

    .nav-wrapper {
        & ul {
            & li {

                & button,
                & a {
                    &:hover {
                        color: var(--color-primary);

                    }
                }
            }
        }
    }

    .faculty-page-image-fix {
        & img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .lp-bg-img>* {
        position: relative;
        z-index: 1;
    }

    .lp-bg-img {
        position: relative;
        background-image: url('https://main--adobe-edge-usc-mapp--eckgboundlesslearning.aem.page/files/usc-lp-bg-image.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        padding: 45px 0;
        margin-bottom: 0px;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.7) 0%,
                    rgba(0, 0, 0, 0.7) 100%);
        }
    }

    .responsive-link {
        & a {
            /* word-break: break-all; */
        }
    }

    .icon-cards {
    & .card {
        & picture {
            & img {
                max-width: 100px;
                height: 100px;
                object-fit: contain;
                
            }
        }
    }
   }
   .title-underline {
    &::after {
        background-color: var(--color-primary);
    }
}

.jumplinks-list:has(> :nth-child(4)) {
        padding-bottom: 70px !important;

        @media (width <=75em) {
            padding-bottom: 80px !important;
        }
    }

    .cookie-consent-wrapper {
        .button.mobile-only {
            display: none;
        }
        .close-cookie-message:hover {
            text-decoration-color: #000;
        }

        @media (width<=36em) {
            .column-wrapper {
                .block {
                    gap: 15px;
                }
            }
            .section.column-container {
                margin-top: 15px;
                margin-bottom: 15px;
            }
            .copy-extra-large {
                display: none;
            }
            .button.mobile-only {
                display: flex;
                flex: 1;
                &:hover {
                    text-decoration-color: #000;
                }
            }
            .secondary {
                flex: 2;
            }
            .close-cookie-message {
                display: none;
            }
        }
        & .button-container {
            flex-wrap: nowrap;

            & .primary {
                @media (width<=36em) {
                    min-height: 49px;
                    padding: 0px 10px;
                    font-size: 12px;
                }
            }

            & .secondary {
                @media (width<=36em) {
                    min-height: 49px;
                    padding: 0px 10px;
                    font-size: 12px;
                    min-width: fit-content;
                }
            }
        }
    }
}