/* LAST UPDATED: 06.03.2024 - SM */


/* Mostly used on the "inner nav" sections on pages, but the columns are also used on the Program Explorer on /education */
.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    break-inside: avoid;
    margin-bottom: 0;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.list a {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
        -webkit-transition: color 0.3s ease-in-out;
}

.list--two-column li {
    color: var(--primary-accent);
}

.list--two-column a {
    padding: 0.45em 0.75em 0.45em 0;
}

.list--three-column {
    font-size: 1em;
    margin: 0 auto;
    max-width: 90%;
    position: relative;
}

.list--gap--200 {
    column-gap: 200px;
    -webkit-column-gap: 200px;
}


/* Used on non-landing pages */
.horizontal-list {
    list-style: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.horizontal-list li {
    display: inline;
    margin: 0 15px 0 0;
    padding: 0;
}

.horizontal-list li:not(:last-of-type)::after {
    content: "|";
    margin: 0 0 0 15px;
}

/* The square is a custom style for lists on EVMS websites */
.square {
    background: none;
    border: none;
    font-size: 1em; /* Added 03.20.2024 */
    height: auto;
    margin-left: 2em; /* Added 03.20.2024, adjust down to mobile if needed */
    opacity: 1;
    position: static;
    transform: none;
        -webkit-transform: none;
    transition: none;
        -webkit-transition: none;
    width: 100%;
}

/* Used in the footer, but also in other random parts of the website */
[class^="col-"] > ul {
    margin-bottom: 30px;
}

.page-content li,
.card-body li {
  font-size: 20.25px; /* The pages weren't showing the proper font size on unordered lists inside of unordered lists. Added 06.13.2022. */
  margin-left: 3em;
  padding-left: 0.75em;
}

/* Added 06.22.2022 for WWW List content types. Not sure if they'll stay here */
.sectionLeft {
  padding: 1em 0 0.5em 0;
  width: 100%;
}

.sectionRight {
  padding: 0 0 0.75em;
}

      
      


/***** MEDIA QUERIES *****/
@media screen and (min-width: 576px) {
    .list--two-column {
        font-size: 1em;
        padding-left: 0.5em;
        position: relative;
    }

    .list--three-column a {
        line-height: 130%;
        padding: 0.25em 1.5em;
    } 	
}
      
/* Added 06.21.22 */
@media screen and (max-width: 600px) {
 	.list a {
      margin-bottom: 1em;
    } 
}

@media screen and (min-width: 600px) {
    .list--two-column {
        break-inside: avoid;
            -webkit-column-break-inside: avoid;
        column-count: 2;
            -webkit-column-count: 2;
        column-gap: 40px;
            -webkit-column-gap: 40px;
    }

    .list--three-column {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        column-count: 2;
        -webkit-column-count: 2;
        column-gap: 40px;
        -webkit-column-gap: 40px;
    }
}

@media screen and (max-width: 667px) {
  .page-content li,
  .card-body li {
  	font-size: 1em; 
  	margin-left: 0;
  	padding-left: 0;
}

/* Added 06.22.2022 */      
@media screen and (max-width: 800px) {
  .sectionLeft {
    padding: 0;
  }
  
  .sectionRight {
    padding: 0;
  }
}

@media screen and (min-width: 800px) {
    .list--three-column {
        column-count: 3;
        -webkit-column-count: 3;
    }
  
    .sectionLeft {
       padding: 0;
       max-width: 100%;
  }
}


