/**
 * Course Catalog Mobile-First CSS
 * Last Update: Filtering modifications
 */

/* ========================================
   RESET AND BASE STYLES
   ======================================== */
.course-catalog-container {
    max-width: 1400px;
    margin: 0 auto;
    /* Remove display: flex for mobile, add it back on desktop */
}

.course-catalog-wrapper * {
    box-sizing: border-box;
}

.course-catalog-wrapper {
    font-family: Karla, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #000;
    width: 100%;
}

.summary-text p {
    margin-bottom: 0;
}

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

.entry-content #boxheaderminimal h1.hdrH1 {
    max-width: 1200px !important;
}
#boxheaderminimal {
    margin-top: 77px;
}
div#block-868aa036-5e1d-4372-b9b8-76b4ac02fbc9 {
    display: none;
}
.page .site-container button:focus {
    outline: none !important;
}
/* ========================================
   MOBILE-FIRST BASE STYLES (formerly in max-width: 1177px)
   ======================================== */

/* Header Elements */
.hdrFilter {
    font-size: 24px;
    color: #000 !important;
}

.hdrFilterMbl {
    display: flex;
    padding: 11px 16px;
    justify-content: space-between;
    margin-bottom: 0;
    border-bottom: 1px solid #e6e6e6;
    align-items: center;
}

.hdrFilterDsktp {
    display: none;
}

/* Search Section */
.course-search {
    background: #fff;
    padding: 0;
    border-bottom: none;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: right;
    margin-left: 16px;
}

.course-search h3 {
    display: none;
}

.course-search .search-form {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding-right: 16px;
    margin-bottom: 0;
}

.course-search-input {
    border: 1px solid #000;
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    font-family: Karla;
    color: #000;
    min-width: 265px;
    height: 36px;
}

.course-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 205, 0, 0.1);
}

/* Search Button */
.search-button {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px 0;
    color: #002B49;
    text-align: center;
    font-family: Karla;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    width: 36px;
    height: 26px;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M24.5 26.25L16.625 18.375C16 18.875 15.2812 19.2708 14.4688 19.5625C13.6562 19.8542 12.7917 20 11.875 20C9.60417 20 7.6825 19.2133 6.11 17.64C4.5375 16.0667 3.75083 14.145 3.75 11.875C3.75 9.60417 4.53667 7.6825 6.11 6.11C7.68333 4.5375 9.605 3.75083 11.875 3.75C14.1458 3.75 16.0679 4.53667 17.6412 6.11C19.2146 7.68333 20.0008 9.605 20 11.875C20 12.7917 19.8542 13.6562 19.5625 14.4688C19.2708 15.2812 18.875 16 18.375 16.625L26.25 24.5L24.5 26.25ZM11.875 17.5C13.4375 17.5 14.7658 16.9533 15.86 15.86C16.9542 14.7667 17.5008 13.4383 17.5 11.875C17.5 10.3125 16.9533 8.98458 15.86 7.89125C14.7667 6.79792 13.4383 6.25083 11.875 6.25C10.3125 6.25 8.98458 6.79708 7.89125 7.89125C6.79792 8.98542 6.25083 10.3133 6.25 11.875C6.25 13.4375 6.79708 14.7658 7.89125 15.86C8.98542 16.9542 10.3133 17.5008 11.875 17.5Z" fill="%23002B49"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #F2CD00;
    border: none;
    outline: none;
}

.search-button:hover {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M24.5 26.25L16.625 18.375C16 18.875 15.2812 19.2708 14.4688 19.5625C13.6562 19.8542 12.7917 20 11.875 20C9.60417 20 7.6825 19.2133 6.11 17.64C4.5375 16.0667 3.75083 14.145 3.75 11.875C3.75 9.60417 4.53667 7.6825 6.11 6.11C7.68333 4.5375 9.605 3.75083 11.875 3.75C14.1458 3.75 16.0679 4.53667 17.6412 6.11C19.2146 7.68333 20.0008 9.605 20 11.875C20 12.7917 19.8542 13.6562 19.5625 14.4688C19.2708 15.2812 18.875 16 18.375 16.625L26.25 24.5L24.5 26.25ZM11.875 17.5C13.4375 17.5 14.7658 16.9533 15.86 15.86C16.9542 14.7667 17.5008 13.4383 17.5 11.875C17.5 10.3125 16.9533 8.98458 15.86 7.89125C14.7667 6.79792 13.4383 6.25083 11.875 6.25C10.3125 6.25 8.98458 6.79708 7.89125 7.89125C6.79792 8.98542 6.25083 10.3133 6.25 11.875C6.25 13.4375 6.79708 14.7658 7.89125 15.86C8.98542 16.9542 10.3133 17.5008 11.875 17.5Z" fill="%23F2CD00"/%3E%3C/svg%3E');
}
button#clear-search-button {
    width: 16px;
    height: 16px;
    background: url('/wp-content/uploads/2025/07/btnClose.png') 0 0 / contain no-repeat transparent;
    border: none;    
    position: absolute;
    right: 80px;    
    cursor: pointer;
    align-self: center;
}
/* Search button with icon only */
.search-button.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    text-indent: -9999px;
    overflow: hidden;
}

/* Clear Selection Links */
.clear-selection-link {
    display: none;
}

.mobile-clear-selection {
    display: inline-block;
    color: #002B49;
    font-family: Karla;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.mobile-clear-selection:hover {
    opacity: 0.8;
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #F2CD00;
    border: 1px solid #F2CD00;
    border-radius: 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    font-family: Karla;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    margin-left: 16px;
    outline: none !important;
}

.mobile-filter-toggle:after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cpath d="M18.3333 15.5041C18.3333 15.6698 18.2675 15.8288 18.1503 15.946C18.0331 16.0632 17.8741 16.1291 17.7083 16.1291H13.4583C13.3191 16.6481 13.0126 17.1068 12.5862 17.4339C12.1598 17.761 11.6374 17.9383 11.1 17.9383C10.5626 17.9383 10.0402 17.761 9.61382 17.4339C9.18743 17.1068 8.88087 16.6481 8.74167 16.1291H2.29167C2.12591 16.1291 1.96694 16.0632 1.84973 15.946C1.73252 15.8288 1.66667 15.6698 1.66667 15.5041C1.66667 15.3383 1.73252 15.1793 1.84973 15.0621C1.96694 14.9449 2.12591 14.8791 2.29167 14.8791H8.74167C8.88087 14.36 9.18743 13.9014 9.61382 13.5743C10.0402 13.2472 10.5626 13.0699 11.1 13.0699C11.6374 13.0699 12.1598 13.2472 12.5862 13.5743C13.0126 13.9014 13.3191 14.36 13.4583 14.8791H17.7083C17.8741 14.8791 18.0331 14.9449 18.1503 15.0621C18.2675 15.1793 18.3333 15.3383 18.3333 15.5041ZM18.3333 4.49573C18.3333 4.66149 18.2675 4.82047 18.1503 4.93768C18.0331 5.05489 17.8741 5.12073 17.7083 5.12073H15.6667C15.5275 5.6398 15.2209 6.09844 14.7945 6.42554C14.3681 6.75265 13.8457 6.92995 13.3083 6.92995C12.7709 6.92995 12.2485 6.75265 11.8222 6.42554C11.3958 6.09844 11.0892 5.6398 10.95 5.12073H2.29167C2.2096 5.12073 2.12832 5.10457 2.05249 5.07316C1.97667 5.04175 1.90777 4.99571 1.84973 4.93768C1.79169 4.87964 1.74566 4.81074 1.71425 4.73491C1.68284 4.65908 1.66667 4.57781 1.66667 4.49573C1.66667 4.41366 1.68284 4.33239 1.71425 4.25656C1.74566 4.18073 1.79169 4.11183 1.84973 4.05379C1.90777 3.99576 1.97667 3.94972 2.05249 3.91831C2.12832 3.8869 2.2096 3.87073 2.29167 3.87073H10.95C11.0892 3.35167 11.3958 2.89303 11.8222 2.56593C12.2485 2.23882 12.7709 2.06152 13.3083 2.06152C13.8457 2.06152 14.3681 2.23882 14.7945 2.56593C15.2209 2.89303 15.5275 3.35167 15.6667 3.87073H17.7083C17.7907 3.86961 17.8725 3.88501 17.9488 3.91603C18.0252 3.94704 18.0945 3.99303 18.1528 4.05129C18.211 4.10956 18.257 4.1789 18.288 4.25524C18.3191 4.33157 18.3345 4.41335 18.3333 4.49573ZM18.3333 9.99573C18.3345 10.0781 18.3191 10.1599 18.288 10.2362C18.257 10.3126 18.211 10.3819 18.1528 10.4402C18.0945 10.4984 18.0252 10.5444 17.9488 10.5754C17.8725 10.6065 17.7907 10.6219 17.7083 10.6207H7.95834C7.81914 11.1398 7.51258 11.5984 7.08619 11.9255C6.6598 12.2526 6.13741 12.4299 5.6 12.4299C5.0626 12.4299 4.54021 12.2526 4.11382 11.9255C3.68743 11.5984 3.38087 11.1398 3.24167 10.6207H2.29167C2.12591 10.6207 1.96694 10.5549 1.84973 10.4377C1.73252 10.3205 1.66667 10.1615 1.66667 9.99573C1.66667 9.82997 1.73252 9.671 1.84973 9.55379C1.96694 9.43658 2.12591 9.37073 2.29167 9.37073H3.24167C3.38087 8.85167 3.68743 8.39303 4.11382 8.06593C4.54021 7.73882 5.0626 7.56152 5.6 7.56152C6.13741 7.56152 6.6598 7.73882 7.08619 8.06593C7.51258 8.39303 7.81914 8.85167 7.95834 9.37073H17.7083C17.8741 9.37073 18.0331 9.43658 18.1503 9.55379C18.2675 9.671 18.3333 9.82997 18.3333 9.99573Z" fill="%23002B49"/>%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 4px;
}

.mobile-filter-toggle:hover {
/*    background: #f8f9fa;
    border-color: #adb5bd;
*/
}
button.mobile-filter-toggle:hover {
    background-color: var(--dark-blue);
    color: var(--yellow);
}
button.mobile-filter-toggle:hover::after {  
    content: '';
    width: 16px;
    height: 16px;  
     background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3E%3Cpath d="M18.3333 15.5041C18.3333 15.6698 18.2675 15.8288 18.1503 15.946C18.0331 16.0632 17.8741 16.1291 17.7083 16.1291H13.4583C13.3191 16.6481 13.0126 17.1068 12.5862 17.4339C12.1598 17.761 11.6374 17.9383 11.1 17.9383C10.5626 17.9383 10.0402 17.761 9.61382 17.4339C9.18743 17.1068 8.88087 16.6481 8.74167 16.1291H2.29167C2.12591 16.1291 1.96694 16.0632 1.84973 15.946C1.73252 15.8288 1.66667 15.6698 1.66667 15.5041C1.66667 15.3383 1.73252 15.1793 1.84973 15.0621C1.96694 14.9449 2.12591 14.8791 2.29167 14.8791H8.74167C8.88087 14.36 9.18743 13.9014 9.61382 13.5743C10.0402 13.2472 10.5626 13.0699 11.1 13.0699C11.6374 13.0699 12.1598 13.2472 12.5862 13.5743C13.0126 13.9014 13.3191 14.36 13.4583 14.8791H17.7083C17.8741 14.8791 18.0331 14.9449 18.1503 15.0621C18.2675 15.1793 18.3333 15.3383 18.3333 15.5041ZM18.3333 4.49573C18.3333 4.66149 18.2675 4.82047 18.1503 4.93768C18.0331 5.05489 17.8741 5.12073 17.7083 5.12073H15.6667C15.5275 5.6398 15.2209 6.09844 14.7945 6.42554C14.3681 6.75265 13.8457 6.92995 13.3083 6.92995C12.7709 6.92995 12.2485 6.75265 11.8222 6.42554C11.3958 6.09844 11.0892 5.6398 10.95 5.12073H2.29167C2.2096 5.12073 2.12832 5.10457 2.05249 5.07316C1.97667 5.04175 1.90777 4.99571 1.84973 4.93768C1.79169 4.87964 1.74566 4.81074 1.71425 4.73491C1.68284 4.65908 1.66667 4.57781 1.66667 4.49573C1.66667 4.41366 1.68284 4.33239 1.71425 4.25656C1.74566 4.18073 1.79169 4.11183 1.84973 4.05379C1.90777 3.99576 1.97667 3.94972 2.05249 3.91831C2.12832 3.8869 2.2096 3.87073 2.29167 3.87073H10.95C11.0892 3.35167 11.3958 2.89303 11.8222 2.56593C12.2485 2.23882 12.7709 2.06152 13.3083 2.06152C13.8457 2.06152 14.3681 2.23882 14.7945 2.56593C15.2209 2.89303 15.5275 3.35167 15.6667 3.87073H17.7083C17.7907 3.86961 17.8725 3.88501 17.9488 3.91603C18.0252 3.94704 18.0945 3.99303 18.1528 4.05129C18.211 4.10956 18.257 4.1789 18.288 4.25524C18.3191 4.33157 18.3345 4.41335 18.3333 4.49573ZM18.3333 9.99573C18.3345 10.0781 18.3191 10.1599 18.288 10.2362C18.257 10.3126 18.211 10.3819 18.1528 10.4402C18.0945 10.4984 18.0252 10.5444 17.9488 10.5754C17.8725 10.6065 17.7907 10.6219 17.7083 10.6207H7.95834C7.81914 11.1398 7.51258 11.5984 7.08619 11.9255C6.6598 12.2526 6.13741 12.4299 5.6 12.4299C5.0626 12.4299 4.54021 12.2526 4.11382 11.9255C3.68743 11.5984 3.38087 11.1398 3.24167 10.6207H2.29167C2.12591 10.6207 1.96694 10.5549 1.84973 10.4377C1.73252 10.3205 1.66667 10.1615 1.66667 9.99573C1.66667 9.82997 1.73252 9.671 1.84973 9.55379C1.96694 9.43658 2.12591 9.37073 2.29167 9.37073H3.24167C3.38087 8.85167 3.68743 8.39303 4.11382 8.06593C4.54021 7.73882 5.0626 7.56152 5.6 7.56152C6.13741 7.56152 6.6598 7.73882 7.08619 8.06593C7.51258 8.39303 7.81914 8.85167 7.95834 9.37073H17.7083C17.8741 9.37073 18.0331 9.43658 18.1503 9.55379C18.2675 9.671 18.3333 9.82997 18.3333 9.99573Z" fill="%23F2CD00"/>%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 4px;
}
/* Mobile Filter Controls */
.mobile-filter-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.mobile-search-section {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

/* Mobile layout styles */
.course-catalog-container,
.course-catalog-wrapper {
    display: block;
}

.mobile-filter-bar {
    display: flex; 
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #e1e5e9;
    width: 100%;
    box-sizing: border-box;
    gap: 16px;
}

.no-results-message {
    text-align: center;
    font-weight: 700;
    padding-top: 8px;
    font-size: 24px;
}

/* Filter Groups - Mobile Accordion Style */
.filter-group {
    margin-bottom: 0;
    /* border-bottom: 1px solid #e1e5e9; */
}

.filter-group:last-child {
    border-bottom: none;
}

.filter-group h3 {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    font-family: Karla;
    margin-bottom: 0;
    padding: 20px 0;
    border-bottom: none;
    text-align: left;
    cursor: pointer;
    position: relative;
    justify-content: space-between;
    background: none;
    border: none;
    width: 100%;
}

.filter-group h3:after {
    content: '';
    width: 31px;
    height: 31px;
    flex-shrink: 0;background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M25.8333 11.6252L15.5 21.9585L5.16666 11.6252L7.74999 9.04184L15.5 16.7918L23.25 9.04184L25.8333 11.6252Z" fill="black"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}
.sub-term-list {
    display: none;
}
input[type="checkbox"]:checked + label + .sub-term-list {
    display: block;
}
.filter-group.open h3:after {
    transform: rotate(180deg);
}

/* Filter Lists */
.course-catalog-sidebar .filter-list,
.sub-term-list {
    list-style: none;
    padding: 0;
}

.course-catalog-sidebar ul.filter-list ul.sub-term-list {
    padding-left: 0;
}

.course-catalog-sidebar ul.filter-list li, 
.course-catalog-sidebar .filter-list ul.sub-term-list li {
    list-style: none;
}

.course-catalog-sidebar .filter-list {
    margin: 0;
    display: none;
    padding:0 0 16px 16px;
    border-bottom: none;
}

.course-catalog-sidebar .filter-list li {
    margin-bottom: 16px;
}
.course-catalog-sidebar .filter-list li:last-child {
    margin-bottom: 0;
}

.course-catalog-sidebar .filter-list label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-family: Karla;
    color: #000;
    font-weight: 700;
    line-height: 1.5;
}

.course-catalog-sidebar .filter-list input[type="checkbox"],
.sub-term-list input[type="checkbox"] {
    cursor: pointer;
}

.course-catalog-sidebar .filter-list input[type="checkbox"] {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    accent-color: #F2CD00;
    float: left;
}

.sub-term-list {
    margin: 12px 0 0 32px;
}

.sub-term-list li {
    margin-bottom: 12px;
}

.sub-term-list label {
    font-size: 15px;
    color: #666;
    font-weight: 400;
}

.sub-term-list input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

/* Additional mobile styles */
.search-button {
    width: 44px;
    height: 36px;
    padding: 0;
    overflow: hidden;
}

/* Pagination */
.course-grid.initial-load .initial-course[data-page="1"] {
    display: block;
}

.course-grid.initial-load .initial-course:not([data-page="1"]) {
    display: none;
}

.course-grid:not(.initial-load) ~ #pagination-container.initial-pagination {
    display: none;
}

.course-pagination {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 8px;
    margin: 7px 0 1px;
    margin-left: 16px;
    flex-wrap: wrap;
}

.pagination-btn {
    display: flex;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: Karla, sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: underline;
    border-color: transparent;
}

.pagination-btn:hover:not(:disabled):not(.active) {
    background-color: #F2CD00;
    border-color: transparent;
    color: #002B49;
}

.pagination-btn.active {
    background-color: #012B49;
    color: #FFF;
    cursor: default;
}
.pagination-btn.pagePrev,
.pagination-btn.pageNext {
    display: flex !important;
    flex-direction: row;
    gap: 8px;
}
.pagination-btn.pagePrev::before,
.pagination-btn.pageNext::after {
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    margin: 0 0 -2px 0;
}
.pagination-btn.pagePrev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.3327 1.33203L4.66602 7.9987L11.3327 14.6654' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E");    
}
.pagination-btn.pageNext::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.66602 1.33203L11.3327 7.9987L4.66602 14.6654' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E");
}
.pagination-btn:disabled {
    display: none !important;
}

/* No courses message */
.no-courses-filtered {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 18px;
    font-family: Karla, sans-serif;
    font-weight: 500;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid #e1e5e9;
}

/* Results count */
.results-count {
    text-align: center;
    padding: 12px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    font-family: Karla, sans-serif;
    margin: 20px 0;
    border: 1px solid #e1e5e9;
}
.course-catalog-sidebar a.clearMobile,
.course-catalog-sidebar a.applyMobile {
    display: none;
}
.course-catalog-sidebar.active a.clearMobile {
    border: 2px solid #002B49;
    padding: 16px;
    display: block;
    border-radius: 20px 0;
    margin: 10px 18px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    color: #002B49;
}
a.clear-selection-link.clearDesktop {
    align-self: start;
    margin: 0;
}
.course-catalog-sidebar.active .apply-filter {
    display: block;
    padding: 16px;
    background-color: #F2CD00;
    border: 2px solid #F2CD00;
    border-radius: 20px 0;
    margin: 0 18px 32px;
    text-decoration: none;
    text-align: center;
}
/* Mobile Filter Sidebar */
.course-catalog-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 1000;
    overflow-y: hidden;
    transform: translateX(-100%);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.course-catalog-sidebar.active {
    transform: translateX(0);
    transition: none;
    width: 268px;
    left: auto;
    z-index: 999999;
    display: flex !important;
    flex-direction: column;
    height: 100%; 
    justify-content: space-between !important;
}
aside.course-catalog-sidebar.active .clearDesktop {
    display: none;
}

.course-catalog-sidebar.active .filter-group h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    font-family: Karla;
    margin: 0;
    padding: 11px 20px 11px 16px;
    border-bottom: 0;
    text-align: right;
}

/* Scrollable Filter Content Wrapper */
.scrollable-filter-content {
    overflow-y: auto; 
    overflow-x: hidden; 
    flex: 1;
    /*
    padding: 0 20px;
    height: calc(100vh - 110px);
    */
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e1e5e9;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    font-family: Karla;
    margin: 0;
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    color: #000;
    font-weight: 300;
    line-height: 1;
}

/* iOS-specific fix for Apply Filters button to account for home indicator */
@supports (-webkit-touch-callout: none) {

}

/* Also adjust the scrollable content height for iOS */
@supports (-webkit-touch-callout: none) {
 
}

/* Mobile Filter Content Area */
.mobile-filter-content {
    flex: 1;
    padding: 0 20px 120px 20px;
}

/* Clear Selection Link - Desktop version */
.clear-selection-link {
    color: #000;
    font-family: Karla;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    margin: 16px 0 24px 0;
    display: inline-block;
}

a.clear-selection-link:hover {
    color: #000;
}

/* Filter Actions */
.filter-actions {
    padding: 20px 0;
    border-top: 2px solid #e1e5e9;
    margin-top: 20px;
}

.clear-filters {
    width: 100%;
    padding: 12px 20px;
    background: #f8f9fa;
    color: #495057;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    font-family: Karla;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-filters:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

/* Apply Filters Button */
.apply-filters {
    position: relative; 
    bottom: auto;
    left: auto;
    right: auto;
    background: white;
    z-index: auto;
    flex-shrink: 0; 
    width: 100%;
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #F2CD00;
    color: #002B49;
    text-align: center;
    font-family: Karla;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.apply-filters:hover {
    background: #d4b300;
    border-color: #d4b300;
}

/* Apply Filters styling when sidebar is active */
.course-catalog-sidebar.active .apply-filters {
    display: flex !important;
    width: 100%;
    z-index: 100;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
  /*   overflow: hidden !important;
    position: fixed; Additional prevention 
    width: 100%;*/
}

/* Course Grid */
.course-grid {
    padding: 16px;
}

/* Course Cards */
.course-card {
    display: flex;
    padding: 16px 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 10px 0px;
    border: 1px solid #000;
    background: #FFF;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.10);
    margin-bottom: 16px;
    transition: all 0.2s ease;
    width: 100%;
}

.course-card h2 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    font-family: Karla;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.summary-text {
    font-size: 15px;
    color: #000;
    font-family: Karla;
    line-height: 1.5;
}

.additional-details {
    font-size: 15px;
    color: #000;
    font-family: Karla;
    margin-bottom: 8px;
}

/* Read More Link */
.custom-link {
    color: #002B49;
    font-family: Karla;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    display: inline-block;
    margin-bottom: 8px;
    transition: opacity 0.2s ease;
}

.custom-link:hover {
    opacity: 0.8;
}

/* Taxonomy Tags */
.acf-taxonomy-tags {
    /* margin-top: 8px; */
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.term-tag::after,
.sub-term-tag::after {
    content: ", ";
}

.acf-taxonomy-tags span:last-of-type::after {
    content: "";
}

.term-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}
section.tagsBox {
    display: flex;
    font-size: 12px;
    font-weight: bold;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}
/* Yellow Tag Styling */
.term-tag {
    display: flex;
    /* padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: none;
    background: #F2CD00;
    text-align: center; */
    color: #002B49;
    font-family: Karla;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    align-self: start;
}
.term-tag.tagsTxt {
    color: black;
}
.term-tag.tagsTxt::after {
    content: "";
}

.sub-term-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Blue Tag Styling for Sub-terms */
.sub-term-tag {
    display: flex;
    /*
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #012B49;
    text-align: center;
    */
    color: #F5F5F5;
    font-family: Karla;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

#boxheaderminimal + .wysiwyg_white .btnCommonStyle {
    margin-bottom: 20px;
}

/* ========================================
   MOBILE-SPECIFIC ADJUSTMENTS (up to 550px)
   ======================================== */
@media (max-width: 550px) {
    .course-catalog-container {
        display: flex;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }
    #boxheaderminimal + .wysiwyg_white .btnCommonStyle {
        margin-bottom: -8px;
        width: 100%;
        justify-content: center;
    }    
    #boxheaderminimal + .wysiwyg_white .btnStyle-01 {
        margin-bottom: 28px;
    }
}

/* ========================================
   DESKTOP STYLES (1178px+)
   ======================================== */
@media (min-width: 1178px) {
    /* Hide mobile elements */
    .mobile-filter-bar,
    .hdrFilterMbl, 
    .mobile-clear-selection,
    .mobile-filter-toggle,
    .mobile-filter-toggle-wrapper {
        display: none !important;
    }
    
    /* Desktop layout */
    .course-catalog-container {
        display: flex !important;
        gap: 100px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    /* Show desktop elements */
    .hdrFilterDsktp {
        display: block;
        margin-bottom: 0;
        color: black;
    }
    
    .clear-selection-link {
        align-self: end;
        display: block;
        margin: 0;
    }

    .course-pagination {
        margin: 40px 0 -40px;
    }
    
    /* Desktop search button with text */
    .search-button {
        padding: 8px 16px;
        background-image: none;
        text-indent: 0;
        overflow: visible;
        width: 90px;
        height: 40px;
    }
    .search-button:hover {
        background-image: none;
    }
    button#clear-search-button {
        right: 120px;
    }
    .course-search {
        background: transparent;
        border-bottom: none;
        padding: 0 17px 18px 0;
        width: 100%;
        flex-direction: row;
        gap: 25px;
    }

    .course-search h3 {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        text-align: right;
    }
    
    .course-search .search-form {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: unset;
        margin-right: 0;        
        justify-content: right;
        padding-right: 0;
        flex-grow: 0;
        position: relative;
    }
    
    .course-search-input {
        width: 435px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 45px;
    }
    
    .course-search-input::placeholder {
        color: #757575;
        font-size: 16px;
    }
    
    /* Desktop Sidebar */
    .course-catalog-sidebar {
        position: unset !important; 
        transform: none !important;
        display: flex !important;
        width: 164px;
        flex-direction: column;
        gap: 30px;
        flex-shrink: 0;
        background: transparent !important;
        border-radius: 0;
        padding: 0;
        height: fit-content;
        overflow-y: visible !important;
        margin-top: 63px;
    }
    
    /* Desktop Content Area */
    .course-catalog-wrapper {
        flex: 1;
        display: block;
    }
    
    .sidebar-header {
        display: none;
    }
    
    .apply-filters {
        display: none;
    }
    
    .mobile-filter-content {
        padding: 0;
    }
    
    /* Desktop filter groups */
    .filter-group:first-child {
        padding: 0;
    }
    .filter-group {
        margin-bottom: 0;
        padding-top: 40px;
    }
    
    .filter-group h3 {
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: default; 
        position: relative;
        padding: 0 0 24px 0;
        margin-bottom: 24px;
        border-bottom: 1px solid #000;
    }

    .filter-group h3::after {
        display: none;
    }
    
    .course-catalog-sidebar .filter-list {
        display: block !important;
        margin: 0;
        padding: 0;
    }

    /* Desktop Course Content */
    .course-grid {
        flex: 1;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .course-card {
        width: 100%;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .course-card a.read-more-toggle:focus {
        text-decoration: underline;
    }
    
    .course-card h2 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    
    .summary-text {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 8px;
    }
    
    .additional-details {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 8px;
    }
}

/* ========================================
   LARGE DESKTOP (1200px+)
   ======================================== */
@media (min-width: 1200px) {
    .course-catalog-wrapper {
        max-width: 1400px;
        gap: 50px;
    }
    
    .course-catalog-sidebar {
        width: 164px;
    }
}