/* Pagination Styling */
    .pagination {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        list-style-type: none;
    }

    .lqd-icn-ess {
        vertical-align: middle;
    }

    .pagination .page-link {
        display: inline-block;
        padding: 8px 12px;
        text-decoration: none;
        color: var(--aiub-blue);
        border: 1px solid #ddd;
        border-radius: 4px;
        transition: background-color 0.3s, color 0.3s;
    }



    /* Notification Card Styling */
    .notification {
        position: relative;
        height: 90px;
        text-align: left;
        display: flex;
        background-color: white;
        overflow: hidden;
        margin-top: 17px;
    }



    .notification-text {
        flex: 1;
        padding-left: 10px;
        padding-top: 5px;
    }

    .date-custom {
        color: white;
    }

    .notification-text .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

    .notification-text .desc {
        color: #666;
        margin-bottom: 15px;
    }

    .notification-text .info-link {
        color: var(--aiub-blue);
        text-decoration: none;
    }



    /* Previous and Next Buttons */
    .pager {
        display: flex;
        padding-top: 20px;
        list-style: none;
    }

        .pager li a {
            text-decoration: none;
            color: var(--aiub-blue);
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }

            .pager li a:hover, .pagination li.page-item a:hover, .pagination > li.page-item.active > a {
                background-color: var(--aiub-blue);
                color: white;
            }


    .info-link div {
        display: block;
        position: absolute;
        background: transparent;
        color: transparent;
        font-size: 20px;
        font-weight: 700;
        width: 100%;
        height: 100%;
        /*! margin-top: -107px;
        padding: 6% 0%;*/
        text-align: center;
        transition: background 0.3s, color 0.3s;
    }

    .notification:hover .info-link div {
        background: rgba(255,255,255,.8);
        color: #004ea8 !important;
        text-shadow: 2px 1px 5px #fff;
        transition: background 0.3s, color 0.3s;
        left: 50%; /* Center horizontally */
        top: 50%; /* Center vertically */
        transform: translate(-50%, -50%);
        z-index: 10; /* Ensure visibility over other elements */
    }

    .info-link .info-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
    }

    ul.pagination {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .1em;
        padding-top: 20px;
    }

    /* Widen just the search/filter bar's wrapper on desktop -- theme's own .container
       max-width (~1140-1170px) is too narrow for 5 controls (search + 4 dropdowns) to sit
       comfortably on one row at these sizes. Scoped to .filter-bar-container only, so the
       card grid below (plain .container) keeps its normal theme width, unaffected. */
    @media (min-width: 992px) {
        .filter-bar-container {
            max-width: 1320px;
        }
    }

    @media (min-width: 1200px) {
        .filter-bar-container {
            max-width: 1500px;
        }
    }

    /* Filter bar dropdowns opt out of theme.js's site-wide jQuery UI .selectmenu() via
       class="select" (excluded in initSelect()'s .not(...) list) -- keeps these as plain
       native <select> elements so the inline border/padding above actually renders,
       instead of fighting jQuery UI's generated button/popup markup and CSS variables.
       The theme's base CSS already sets appearance:none on every <select> site-wide (hides
       the native OS arrow) -- rather than forcing the native arrow back (which rendered
       inconsistently, doubled up in some browsers), draw exactly one arrow ourselves via
       background-image, and ellipsis-truncate long selected values (e.g. full SDG names)
       so they can't overflow the box and visually run into the next column. */
    .filter-bar select.form-control {
        font-size: 14px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 10px 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: border-color .2s, box-shadow .2s;
    }

    /* Custom dropdown widget (see <script> at bottom of file). The real <select> stays in
       the DOM for form submission but is visually hidden -- .custom-select-trigger and
       .custom-select-options are what the user actually sees/clicks. This is what makes a
       fixed height + internal scroll possible at all: a plain native <select>'s open popup
       has no CSS hook for either. */
    .custom-select-wrap {
        position: relative;
    }

    select.custom-select-native {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .custom-select-trigger {
        height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 1px solid #dfe3e8;
        padding: 6px 32px 6px 14px;
        border-radius: 8px;
        background-color: #fff;
        color: #1c2530;
        font-size: 14px;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398a2b3' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 10px 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color .2s, box-shadow .2s;
    }

    .custom-select-trigger:hover,
    .custom-select-trigger:focus {
        outline: none;
        border-color: var(--aiub-blue);
        box-shadow: 0 0 0 3px rgba(0, 75, 141, 0.15);
    }

    .custom-select-trigger.has-value {
        border-color: var(--aiub-blue);
        background-color: #f8fbfe;
        color: var(--aiub-blue);
        font-weight: 600;
    }

    .custom-select-options {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 20;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        background: #fff;
        border: 1px solid #dfe3e8;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
        max-height: 220px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .custom-select-options.is-open {
        display: block;
    }

    .custom-select-options li {
        padding: 8px 10px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    .lqd-lp-title-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 4.2em;
    }

    .lqd-lp-excerpt-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 6em;
    }

    /* Venue/Organizer footer bar -- two columns side by side, divided by a vertical
       border, sitting under the image+content row (bleeds to the card's own edges via
       negative margins, since the card itself has padding: 15px on all sides). Each
       column's value text is capped at 2 lines -- never more -- via line-clamp. */
    .lqd-lp-info-bar {
        display: flex;
        margin: 10px -2px -8px 0px;
        background: #fafafa;
        border-top: 1px solid #e2e6ec;
    }

    .lqd-lp-info-col {
        flex: 1 1 50%;
        min-width: 0;
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .lqd-lp-info-col:not(:last-child) {
        border-right: 1px solid #e2e6ec;
    }

    .lqd-lp-info-icon {
        flex: none;
        color: #8a94a6;
        margin-top: 2px;
    }

    .lqd-lp-info-text {
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
    }

    .lqd-lp-info-text strong {
        color: #1c2530;
        font-weight: normal;
    }

    .lqd-lp-info-value {
        color: inherit;
    }

    .custom-select-options li:hover {
        background: #f0f4f9;
    }

    .custom-select-options li.is-selected {
        background: #f0f4f9;
        color: var(--aiub-blue);
    }

    /* Search + filter card -- floats over the hero's bottom edge, matching the reference
       layout (dark hero above, white rounded card overlapping it). */
    .events-filter-container {
        position: relative;
        z-index: 5;
        margin-top: -40px;
        margin-bottom: 20px;
    }

    .events-filter-card {
        background: #fff;
        border: 1px solid #e2e6ec;
        padding: 22px 24px 18px;
    }

    .ef-search-row {
        display: flex;
    }

    /* Notices page only: SDG/Venue/Organized By are hidden there (no meaning for notices), so
       Timeframe rides in the same row as the search box instead of its own row below a divider
       -- .ef-group has no width of its own normally (it's sized entirely by the 4-column grid
       it usually sits in, see .ef-groups below), so it needs an explicit width here now that
       it's a flex sibling of the search box instead of a grid child. */
    .ef-search-row-with-timeframe {
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
    }

    /* .ef-search-group wraps the Notice search box together with its own "Search Notices"
       label (added so it matches the Timeframe group's look) -- it also carries .ef-group for
       that label styling, so it's excluded below from the Timeframe group's fixed-width rule
       and given its own grow-to-fill-space sizing instead.
       Deliberately plain block, NOT flex-direction:column -- .ef-search-input already has its
       own explicit height (below) and is a block-level div, so it fills this wrapper's full
       width on its own with no flex needed. A flex column here was tried first and broke that
       height: .ef-search-input's `flex: 1` shorthand sets flex-basis:0%, and inside a
       column-flex parent that hijacks the item's height along the main (now vertical) axis --
       it collapsed to content size regardless of any explicit height set on it. */
    .ef-search-row-with-timeframe > .ef-search-group {
        flex: 1 1 240px;
        min-width: 240px;
    }

    .ef-search-row-with-timeframe > .ef-group:not(.ef-search-group) {
        /* flex-shrink:0 (the "0" in "0 1 320px" would still let it shrink -- this is
           flex-grow:0 flex-shrink:0 flex-basis:320px) so it can't be squeezed narrower than
           the pills need ; at a width too tight for search+timeframe side by side, flex-wrap
           on the row pushes it down to its own full-width line instead, which is legible,
           rather than compressing it into too little space on the same line. */
        flex: 0 0 320px;
    }

    .ef-search-input {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 46px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
        padding: 0 14px;
        transition: border-color .15s, box-shadow .15s;
    }

    /* Notices page only -- taller search box, matches the Timeframe pills' row height better
       now that they sit side by side (News & Events keeps the base 46px above, unscoped). */
    .ef-search-group .ef-search-input {
        height: 37px;
    }

    .ef-search-input:focus-within {
        border-color: #0d5ca8;
        box-shadow: 0 0 0 3px rgba(13, 92, 168, .15);
    }

    .ef-search-input svg {
        flex: none;
        color: #64748b;
    }

    .ef-search-input input {
        flex: 1;
        border: 0;
        outline: none;
        font-size: 14px;
        color: #1c2530;
        background: transparent;
    }

    .ef-search-input input::placeholder {
        color: #94a3b8;
    }

    .ef-search-clear {
        display: none;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #94a3b8;
        cursor: pointer;
    }

    .ef-search-clear.is-visible {
        display: flex;
    }

    .ef-search-clear:hover {
        background: #f1f5f9;
        color: #1e293b;
    }

    .ef-divider {
        border-top: 1px solid #edf0f4;
        margin: 18px 0 16px;
    }

    .ef-groups {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    .ef-group label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--aiub-blue);
        margin-bottom: 8px;
    }

    .ef-group label svg {
        flex: none;
    }

    .ef-group .form-control,
    .ef-group .custom-select-trigger {
        font-size: 13px;
    }

    .ef-group input.form-control {
        height: 40px;
        box-sizing: border-box;
        padding: 6px 14px;
        border: 1.5px solid #e2e8f0;
        border-radius: 10px;
    }

    .ef-group input.form-control:focus {
        outline: none;
        border-color: var(--aiub-blue);
        box-shadow: 0 0 0 3px rgba(0, 75, 141, 0.15);
    }

    .ef-group input.form-control.has-value {
        border-color: var(--aiub-blue);
        background-color: #f8fbfe;
        color: var(--aiub-blue);
        font-weight: 600;
    }

    .ef-timeframe-pills {
        display: flex;
        gap: 4px;
        background: #eef0f3;
        border-radius: 8px;
        padding: 3px;
        margin-bottom: 8px;
        height: 35px;
        justify-content: center;
        align-items: center;
    }

    .ef-pill {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #475066;
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 6px;
        cursor: pointer;
        /* .ef-timeframe-pills has a fixed height (35px) -- if the pill ever gets squeezed
           narrower than its own text ("This Month"), the text wraps to 2 lines and overflows
           that fixed height instead of shrinking, since nothing here stopped it wrapping. */
        white-space: nowrap;
    }

    .ef-pill.is-active {
        background: #fff;
        color: var(--aiub-blue);
        box-shadow: 0 1px 3px rgba(16, 24, 40, .15);
        height: 26px;
    }

    .ef-timeframe-selects {
        display: flex;
        gap: 8px;
    }

    .ef-timeframe-selects .custom-select-trigger.has-value {
        border-color: #dfe3e8;
        background-color: #fff;
        color: #1c2530;
        font-weight: 400;
    }

    .ef-timeframe-selects .custom-select-wrap {
        flex: 1;
        min-width: 0;
    }

    .ef-results-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed #e2e6ec;
    }

    .ef-results-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--blue-tint, #eaf2fa);
        color: var(--aiub-blue);
        font-size: 12.5px;
        font-weight: 700;
        padding: 0px 12px;
        border-radius: 100px;
    }

    @media (max-width: 900px) {
        .ef-groups {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 560px) {
        .ef-groups {
            grid-template-columns: 1fr;
        }
        .events-filter-container {
            margin-top: -24px;
        }
    }

    .active-filter-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #eef2f7;
        color: #333;
        border-radius: 20px;
        padding: 4px 8px 4px 12px;
        font-size: 13px;
        line-height: 1.4;
    }

    .filter-chip-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ccd5e0;
        color: #333;
        text-decoration: none;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
    }

    .filter-chip-remove:hover {
        background: var(--aiub-blue);
        color: #fff;
    }

    .filter-clear-all {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--aiub-blue);
        text-decoration: underline;
        text-underline-offset: 2px;
    }