/* ==========================================================
   ========================================================== */

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================
   PAGE LOADING
   ========================================================== */
#programResults {
    opacity: 0;
}

#programResults.is-ready {
    opacity: 1;
    transition: opacity .2s ease;
}


/* ----------------------------------------------------------
   FORM CONTROLS
   ---------------------------------------------------------- */

input:checked + label {
    font-weight: 700;
    color: #002d72;
}

input[type="text"] {
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    padding: 0.5em;
    font-size: 1em;
    line-height: 1.25;
    border-radius: 3px;
    border: 1px solid #555;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    background: #fff;
    border-radius: 3px;
    border: 2px solid #555;
    vertical-align: middle;
    position: relative;
    top: -0.15em;
}

input[type="checkbox"]:checked {
    background: #abd;
}

h3 {
    margin-top: 1.5em;
}



/* ----------------------------------------------------------
   FILTER PANELS
   ---------------------------------------------------------- */

#degreeoptions,
#quicksearch,
#filterRelated,
#filterCollege,
#filterCollegeMob {
    width: 100%;
    background-color: #f0f0f0;
    border-radius: 0.25em;
    padding: 1em;
    margin-bottom: 1em;
}

#quicksearch {
    margin-top: 1em;
}

#filterCollege label {
    margin-left: 0.5em;
}

#filterCollegeMob {
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    font-size: 1em;
    line-height: 1.5;
    border: 1px solid #333;
    border-radius: 4px;
    margin-top: 1em;
}

.no-results,
.searchvar {
    padding: 0.25em;
    font-weight: 700;
    margin: 1em;
}

.search-help {
    margin: -1em 0 1em 0 !important;
    padding: .6em .75em;
    background: #f0f0f0;
    border-left: 3px solid #002c77;
    font-size: .95em;
}

/* ----------------------------------------------------------
   DESKTOP / MOBILE FILTERS
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
    .col4 > .columns > .col5,
    .col4 > .columns > .col7 {
        width: 100% !important;
        float: none !important;
    }
}

/* Hide mobile college dropdown by default */
.optionsMobile {
    display: none;
}

@media (max-width: 599px) {

    .optionsMobile {
        display: block;
    }

    .mobileCollegeRemove,
    .removeMobile {
        display: none;
    }

    #filterRelated {
        display: none;
    }
}


/* ----------------------------------------------------------
   ISOTOPE GRID
   ---------------------------------------------------------- */

.grid {
    width: 100%;
}

.grid::after {
    content: "";
    display: block;
    clear: both;
}

/*
   Isotope sizing elements.
   These values assume approximately three columns.
*/

/* ----------------------------------------------------------
   ISOTOPE GRID
   ---------------------------------------------------------- */

.grid {
    width: 100%;
}

/*
   3 columns:
   32% + 2% + 32% + 2% + 32% = 100%
*/

.grid-item {
    width: 32%;
    margin: 0 0 1.25em 0;
}

.grid-item a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
 /*   cursor: pointer; */
}


.grid-item .program-link:focus-visible::after {
    outline: 3px solid #002c77;
    outline-offset: 3px;
}

.gutter-sizer {
    width: 2%;
}

/* 100% online program link */
.online-option {
    position: absolute;
    top: .75em;
    right: .75em;
    z-index: 2;
}

.online-link {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    z-index: 2;
    text-decoration: none;
    color: #002c77;
}

.online-link::before {
    content: "\f109";
    font: var(--fa-font-solid);
    font-size: 1.1em;
}



.online-link:focus-visible {
    outline: 3px solid #002c77;
    outline-offset: 3px;
}

/* Two columns */

@media (max-width: 959px) {

    .grid-item {
        width: 49%;
    }

    .gutter-sizer {
        width: 2%;
    }
}


/* One column */

@media (max-width: 599px) {

    .grid-item {
        width: 100%;
    }

    .gutter-sizer {
        width: 0;
    }
}

/* ----------------------------------------------------------
   PROGRAM CARDS
   ---------------------------------------------------------- */

/*
.element-item1 {
    position: relative;
    padding: 1em 1em 1em 3.25em;

    display: block;
    min-height: 7em;

    background: #fff;
    border: 1px solid #666;
    border-radius: 3px;

    box-shadow: 0 10px 25px rgba(0, 44, 119, 0.04);

    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
*/
.element-item1 {
    position: relative;
    padding: .75em .75em .75em 3.25em;
    display: flex;
    flex-direction: column;
    min-height: 7em;
    background: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: 0 10px 25px rgba(0, 44, 119, 0.04);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.element-item1:has(.online-link) {
    padding-right: 3em;
}

.element-item1 > a {
    margin-top: 0;
    font-size:1.1em; 
    text-decoration-color: rgba(167, 10, 67, 0.35);
} 

.element-item1 > a:hover {
     text-decoration-color: rgba(0, 44, 119, 0.35);
} 


.element-item1:hover {
   /* box-shadow: 0 20px 35px rgba(0, 44, 119, 0.10);*/
    box-shadow: 0 12px 30px rgba(0, 44, 119, 0.28);
    border-color: #002c77;
  
}


/* ----------------------------------------------------------
   COLLEGE COLOR / ICON STRIP
   ---------------------------------------------------------- */

/*
   Base pseudo-element.

   Velocity only needs to output the existing college class:
   .cba
   .ces
   .chp
   .chass
   .sacd
   .sod
   .school-law (because we use law in related-fields)
   .soo
   .special-programs

   CSS handles the color and icon automatically.
*/

.element-item1::before {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2.25em;

    color: #fff;

    /*
       Font Awesome
       Uses the Font Awesome solid font already loaded
       by the site.
    */
    font: var(--fa-font-solid);
    font-size: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    border-radius: 2px 0 0 2px;

    transition:
        width 0.3s ease,
        opacity 0.3s ease;
}


/* Slight movement in the accent strip on hover */

.element-item1:hover::before {
    width: 2.5em;
}


/* ----------------------------------------------------------
   COLLEGE COLORS + FONT AWESOME ICONS
   ---------------------------------------------------------- */


/* College of Business Administration
   Handshake
*/

.element-item1.cba::before {
    content: "\f2b5";
    background-color: #2F6B5F; 
}


/* College of Engineering & Science
   Gear
*/

.element-item1.ces::before {
    content: "\f013";
    background-color: #f1b434;
}


/* College of Health Professions / McAuley School of Nursing
   Hospital
*/

.element-item1.chp::before {
    content: "\f0f8";
    background-color: #d53b20;
}


/* College of Humanities, Arts & Social Sciences
   Lightbulb
*/

.element-item1.chass::before {
    content: "\f0eb";
    background-color: #009cde;
}


/* School of Architecture + Community Development
   Building
*/

.element-item1.sacd::before {
    content: "\f1ad";
    background-color: #668A4C;
}


/* School of Dentistry
   Tooth
*/

.element-item1.sod::before {
    content: "\f5c9";
    background-color: #425563;
}


/* School of Optometry
   Eye
*/

.element-item1.soo::before {
    content: "\f06e";
    background-color: #7bb0e2;
}

.element-item1.special-programs::before {
    content: "";
    background-color: #000;
}

/*
   School of Law
   Balance scale

   IMPORTANT: use ".school-law" because
   ".law" is a related-interest classes.

   This selector only applies the School of Law styling when
   the card does NOT also belong to another college/school.
*/

.element-item1.school-law:not(.cba):not(.ces):not(.chp):not(.chass):not(.sacd):not(.sod):not(.soo)::before {
    content: "\f24e";
    background-color: #66435a;
}




/* ----------------------------------------------------------
   EXISTING INLINE COLLEGE ICONS
   ---------------------------------------------------------- */

/*
   These are the smaller icons currently output by Velocity
   inside the individual cards/filter controls.
*/

.academics-icon {
    margin-right: 5px;
    min-width: 35px;
    padding: 3px;
    border-radius: 0.5em;

    color: #fff;
    font-weight: 900;
    font-size: 1em;

    text-align: center;
    display: inline-block;

    font-style: normal;
    font-variant: normal;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.cba-icon {
    background: #2F6B5F;
}

.eng-icon {
    background: #f1b434;
}

.chp-icon {
    background: #d53b20;
}

.chass-icon {
    background: #009cde;
}

.dental-icon {
    background: #425563;
}

.sacd-icon {
    background: #668A4C;
}

.law-icon {
    background: #66435a;
}

.soo-icon {
    background: #7bb0e2;
}
.special-programs-icon {
    background: #000;
}


/* ----------------------------------------------------------
   MULTI-COLLEGE SPLIT RIBBON
   ---------------------------------------------------------- */

/* If a card contains the multi-college ribbon,
   suppress the normal single-college ::before strip. */
.element-item1:has(.college-ribbon)::before {
    display: none;
}

/* Container for two or more college segments */
.college-ribbon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.25em;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2px 0 0 2px;
    transition: width 0.3s ease;
}

/* Keep your existing ribbon hover movement */
.element-item1:hover .college-ribbon {
    width: 2.5em;
}

/* Each college gets an equal portion of the ribbon */
.college-ribbon-part {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: var(--fa-font-solid);
    font-size: 1em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}


/* College of Business Administration */
.college-ribbon-part.cba {
    background-color: #2F6B5F;
}

.college-ribbon-part.cba::before {
    content: "\f2b5";
}


/* College of Engineering & Science */
.college-ribbon-part.ces {
    background-color: #f1b434;
}

.college-ribbon-part.ces::before {
    content: "\f013";
}


/* College of Health Professions */
.college-ribbon-part.chp {
    background-color: #d53b20;
}

.college-ribbon-part.chp::before {
    content: "\f0f8";
}


/* College of Humanities, Arts & Social Sciences */
.college-ribbon-part.chass {
    background-color: #009cde;
}

.college-ribbon-part.chass::before {
    content: "\f0eb";
}


/* School of Architecture + Community Development */
.college-ribbon-part.sacd {
    background-color: #668A4C;
}

.college-ribbon-part.sacd::before {
    content: "\f1ad";
}


/* School of Dentistry */
.college-ribbon-part.sod {
    background-color: #425563;
}

.college-ribbon-part.sod::before {
    content: "\f5c9";
}


/* School of Law */
.college-ribbon-part.school-law {
    background-color: #66435a;
}

.college-ribbon-part.school-law::before {
    content: "\f24e";
}


/* School of Optometry */
.college-ribbon-part.soo {
    background-color: #7bb0e2;
}

.college-ribbon-part.soo::before {
    content: "\f06e";
}


/* Special Programs — color only, no icon */
.college-ribbon-part.special-programs {
    background-color: #000;
}

.college-ribbon-part.special-programs::before {
    content: "";
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.btn-shutter-out-horizontal {
    padding: 0;
    margin: 0;
}

.button-container {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    margin: .75em 0 1em;
}

.button-container button {
    padding: .55em .9em;
    border: 1px solid #002c77;
    border-radius: 4px;
    background: #fff;
    color: #002c77;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.button-container button:hover,
.button-container button:focus-visible {
    background: #002c77;
    color: #fff;
}

.button-container button:focus-visible {
    outline: 3px solid rgba(0, 44, 119, 0.35);
    outline-offset: 2px;
}

/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .element-item1,
    .element-item1::before {
        transition: none;
    }

    .element-item1:hover {
        transform: none;
    }

    .element-item1:hover::before {
        width: 2.25em;
    }
}