/* NOTE: The classes used throughout the events listing are taken from the
global CSS without having to interfere with the global CSS file itself, 
as a result, some classes include 'news', or styles had to be slightly
adjusted to be as consistent as possible with other page styles */

/* custom button on purple background,
global CSS does not account for this */
.eventsButton {
    font-size: 1.375rem;
    border: 3px solid var(--white);
    max-width: 100%;
    /* due to the button resizing with the sidebar width, added spacing */
    padding-left: 10px;
    padding-right: 10px;
}
.eventsButton:hover, .loadMore:hover {
    background-color: var(--black);
    border-color: var(--black);
    text-decoration-color: var(--color2);
    cursor: pointer;
    transition: var(--transition);
}

/* fixes issue where sidebar wasn't spanning the full container width */
.sideBarWidget {
    max-width: 100% !important;
}

/*==================== FILTERS ====================*/
.hidden {
    display: none !important;
}

.categoryDropdown {
    max-height: 330px;
    overflow: auto;
    /* Dropdown initial state (hidden) */
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
/* show filter dropdown when active */
.categoryDropdown.show {
    display: block;
}

/* filters use 2 rows instead of 1 */
.newsFilterWrapper {
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* copied from global CSS for checkbox inputs */
 .categoryDropdown input[type=checkbox] {
     display: inline-block;
     width: 15px;
     vertical-align: top;
     margin-top: 9px;
     -webkit-appearance: auto;
     -moz-appearance: auto;
     cursor: pointer;
}
/* copied from global CSS for span elements in dropdown menus */
 .categoryDropdown label > span {
     display: inline-block;
     width: 90%;
}
 .categoryDropdown label > span:hover {
    text-decoration: underline;  
}

.checkbox-label {
    cursor: pointer;
}
 
/* copied from global CSS for list elements in dropdown menus */
 .categoryDropdown li {
     margin: 0 0 10px 0;
}

.dateRange {
    flex-flow: wrap;
    gap: 25px;
}
/* first row of filters */
.newsFilterWrapper .cell:first-child {
    flex: 2 1 calc(50% - (25px / 2));
}
/* second row of filters */ 
.newsFilterWrapper .cell {
    flex: 1 1 calc(25% - (50px / 3));
}
/* date range filter */ 
.dateBox {
    /* plus 30px width for "to" span tag */
    flex: 1 1 calc(50% - (80px / 2));
}

/* styles repeated from global CSS to fix specificity issue where all button styles were being applied */
.filter-option {
    font-size: 1.125rem !important;
    font-weight: 500;
    color: inherit;
    word-wrap: break-word;
    box-shadow: none;
    font-style: italic;
    cursor: pointer;
    /* resets inherited button styles from global CSS */
    padding: 15px 0 !important;
    box-shadow: none !important;
}

/* resets inherited button styles from global CSS */
.categoryDropdown li button::after {
  content: none !important;
  display: none !important;
}

/* fixes issue where extra padding was being applied to list elements */
.categoryDropdown li {
    padding: 0;
}

/* styles pulled from Global CSS for date inputs to be consistent with
other input styles, as the global CSS does not include date inputs */
.dateBox, .dateRange span {
    font-size: inherit;
    font-weight: 500;
    color: inherit;
    word-wrap: break-word;
    box-shadow: none;
    font-style: italic;
    cursor: pointer;
}
.dateRange span {
    font-family: var(--lora);
    margin: auto;
    text-align: center;
    cursor: default;
    font-weight: 600;
    /* width accounted for in 'dateBox' class */
    width: 30px;
}

/* fixes by removing extra spacing for the 'Filter by Date' heading */
.newsFilterWrapper h3 {
    margin: 0;
}

/* fixes dropdown and shadow effect from overlapping */
#toggleEventLoc {
    z-index: 8;
}
#eventLoc {
    z-index: 7;
}
#toggleEventCat {
    z-index: 6;
}
#eventCategory {
    z-index: 5;
}
#toggleEventSchool {
    z-index: 4;
}
#eventSchool {
    z-index: 3;
}
#toggleEventAudience {
    z-index: 2;
}
#eventAudience{
    z-index: 1;
}
/*==================== END: FILTERS ====================*/

/*==================== EVENTS LISTING ====================*/
.columns.backgroundBg {
    background-color: var(--white); /* remove to use tan background */
    padding-top: 0;
}

/* ensures event listing padding in consistent with global CSS */
.interior .events {
    padding: 50px 0 0 0;
}

/* ensures bottom page margin is consistent with global CSS */
.interior.news .mainContent .components:last-child {
    margin-bottom: 0;
}

/* adds missing bottom spacing to be consistent with global CSS */
.interior.news .sharedNews h2 {
    margin-bottom: 35px;
}

/* event specific SVGs */
 .sharedNews .eventsDate::before {
     content: url("../images/event-listing/svg-icons/events-calendar.svg");
} 
 .sharedNews .eventLoc::before {
     content: url("../images/event-listing/svg-icons/events-location.svg");
}     
 .sharedNews .eventCat::before {
     content: url("../images/event-listing/svg-icons/events-categories.svg");
}
 .sharedNews .eventSchool::before {
     content: url("../images/event-listing/svg-icons/events-building.svg");
}
 .sharedNews .eventAudience::before {
     content: url("../images/event-listing/svg-icons/events-person.svg");
}

/* fixes issue where event listing images were not the same size */
.imgZoom img {
    aspect-ratio: 354 / 270;
    object-fit: cover;
}

.newsDate {
    text-transform: capitalize;
}

/* added for usability purposes to perceive text as a link */
.event-location-link {
    font-weight: 600;
}

/* adds right alignment to cta button (More Info) */
.columnList .oneTwo .ctaButton {
    margin: 0 0 0 auto;
}

/* adds center alignment and missing spacing to 'Load More' button */ 
.loadMore {
    margin: auto;
    margin-top: 50px;
}
/*==================== END: EVENTS LISTING ====================*/

/*==================== MEDIA QUIERIES ====================*/
/* resizes the gap between date range to account for span tag (to) */
@media (max-width: 604px) {
    .dateRange span {
        display: block;
        width: 100%;
    }
    .dateRange {
    gap: 5px; 
    }
}

/* resizes sidebar legend text to avoid breaking to new
line, as the global CSS file does not account for this */ 
@media (max-width: 1425px) {
    .sideBarWidget legend {
        font-size: 1.375rem !important;
    }
}
@media (max-width: 1275px) {
    .sideBarWidget legend {
        font-size: 1.125rem !important;
    }
}
@media (max-width: 1200px) {
    .sideBarWidget legend {
        font-size: 1.625rem !important; /* initial font size */
    }
    .eventsButton {
        font-size: 2rem; /*initial font size */
    }
}
@media (max-width: 555px) {
    .sideBarWidget legend {
        font-size: 1.5rem !important;
    }
    .eventsButton {
        font-size: 1.375rem;
    }
}
/*==================== END: MEDIA QUERIES ====================*/