/* Copied/Altered Bootstrap Styles */
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,
.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select,
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback),
.input-group>.wp-block-button .wp-block-button__link {
    margin-left: calc(-1 * var(--wp--custom--border--width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group>.form-control,
.input-group>.form-floating,
.input-group>.form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.wp-block-button__link.disabled,
.wp-block-button__link:disabled {
    color: #6c757d;
    pointer-events: none;
}

.btn-close:focus-visible,
.page-link:focus-visible {
    outline: var(--wp--custom--focus--width) solid var(--wp--custom--focus--color);
    outline-offset: var(--wp--custom--focus--offset);
}

.d-none {
    display: none !important;
}
/* end Copied/AlteredBootstrap Styles */


/* Bootstrap Overrides */
.badge {
    --bs-badge-border-radius: var(--wp--custom--border--radius);
}

.pagination {
    --bs-pagination-color: var(--wp--custom--link--color);
    --bs-pagination-bg: var(--wp--preset--color--base);
    --bs-pagination-border-width: var(--wp--custom--border--width);
    --bs-pagination-border-color: var(--wp--custom--border--color);
    --bs-pagination-border-radius: var(--wp--custom--border--radius);
    --bs-pagination-active-color: var(--wp--custom--button--color);
    --bs-pagination-active-bg: var(--wp--custom--button--bg-color);
    --bs-pagination-active-border-color: var(--wp--custom--button--border-color);
    --bs-pagination-focus-box-shadow: none;

    --wp--custom--focus--color: var(--wp--preset--color--contrast);
}

.modal {
    --bs-modal-zindex: 100000;
}

.modal-body {
    --bs-modal-padding: 0;
}

.btn-close {
    --bs-btn-close-opacity: 0.75;
    --bs-btn-close-focus-shadow: none;
}
/* end Bootstrap Overrides */

#searchListError .alert-message {
    margin-top: 0;
    margin-bottom: var(--wp--custom--spacing--block-gap);
    padding: var(--wp--preset--spacing--20);
    border-left: .25rem solid var(--wp--custom--color--danger--bg-color);
    color: var(--wp--custom--color--danger--bg-color);
    font-weight: 700;
}

#itemSearch {
    container: doc-list/inline-size;
}

#searchableListControls {
    container: doc-search-controls/inline-size;
}

.search-controls {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

@container doc-search-controls (inline-size > 550px) {
    .search-controls {
        flex-direction: row;
    }
}

#keywordsSearchableList {
    border-right: 0;
}

.clear-input-value {
    --wp--custom--focus--offset: calc(var(--wp--custom--focus--width) * -2.5);

    padding: var(--wp--custom--form--control-padding-y) var(--wp--custom--form--control-padding-x);
    background-color: var(--wp--custom--form--control-bg-color);
    border: var(--wp--custom--border--width) var(--wp--custom--border--style) var(--wp--custom--form--control-border-color);
    border-left: 0;
    color: var(--wp--custom--form--control-color);
    line-height: var(--wp--custom--form--control-line-height);
}

input.form-control+.clear-input-value {
    display: none;
}

input.form-control:not(:-moz-placeholder)+.clear-input-value {
    display: inline-block;
}

input.form-control:not(:placeholder-shown)+.clear-input-value {
    display: inline-block;
}

.wp-block-button:has(#filterSearchableList) {
    align-self: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
}

#filterSearchableList .badge {
    background-color: var(--wp--custom--button--bg-color);
    color: var(--wp--custom--button--color);
}

#searchableListShowAll {
    margin-top: var(--wp--preset--spacing--30);
    padding: 0;
}

#searchableListChosenFiltersList {
    display: flex;
    gap: var(--wp--preset--spacing--20);
    flex-wrap: wrap;
    margin-top: var(--wp--preset--spacing--40);
}

#searchableListResultsAreaContainer {
    container: results-message-area/inline-size;
}

#searchableListResultsArea {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    margin-top: var(--wp--preset--spacing--40);
    border-bottom: calc(var(--wp--custom--border--width) * 2) var(--wp--custom--border--style) var(--wp--preset--color--primary);
}

@container results-message-area (inline-size > 600px) {
    #searchableListResultsArea {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--wp--preset--spacing--20);
    }

    #searchableListSortControls {
        order: 1;
    }
}

#searchableListMatchingResultNumbers {
    font-weight: 700;
}

#searchableListSortControls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
}

#searchableListSortControls :where(.wp-element-button, .wp-block-button__link) {
    --wp--custom--button--padding-y: .313rem;
    --wp--custom--button--padding-x: .5rem;
    --wp--custom--button--border-width: 1px;
    --wp--custom--button--border-color: #6c757d;
    --wp--custom--button--bg-color: var(--wp--custom--button--border-color);
    --wp--custom--button--font-size: .938rem;

    --wp--custom--focus--color: currentColor;

    line-height: 1;
}

/* Flip arrow for descending sort */
#searchableListSortControls button.desc .sort-button-icon {
    transform: scaleY(-1);
}

.pagination {
    --pagination-active-bg: var(--wp--custom--button--bg-color);
    --pagination-focus-bg: transparent;
    --pagination-focus-box-shadow: none;

    --focus-border-color: #000;

    margin: 0;
}

.page-link:hover {
    text-decoration: underline;
}

.pagination--minimal {
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: currentColor;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;

    gap: var(--wp--preset--spacing--20);
}

.pagination--minimal .page-link {
    border-radius: var(--wp--custom--border--radius);
}

.pagination--minimal .page-link:hover {
    text-decoration: none;
}

.pagination-container {
    container: pagination/inline-size;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
}

@container pagination (inline-size < 550px) {
    ul.pagination {
        flex-basis: 100%;
        order: 3;
    }

    .pagingPrevious {
        order: 1;
    }

    .pagingNext {
        order: 2;
    }
}

.pagination-container .pagingPrevious {
    padding-left: 0;
}

.pagination-container:has(.pagination:empty, .pagination > :only-child) {
    display: none;
}

.highlight {
    background-color: #fafa9c;
    color: #333;
    font-weight: 700;
}

.indiv-chosen-filter-item {
    --wp--custom--button--bg-color: #6c757d;
    --wp--custom--button--color: #fff;
    --wp--custom--button--border-color: #6c757d;
    --wp--custom--button--border-width: 1px;
    --wp--custom--button--font-size: .938rem;

    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0.313rem 0.5rem;
    line-height: 1;
}

#searchableListFiltersModal .modal-dialog {
    margin-right: 0;
}

#searchableListFiltersModal .modal-title {
    margin-top: 0;
    font-size: var(--wp--preset--font-size--fs-4);
}


/* Template styles */
.searchable-list__item {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--40);
    margin-bottom: var(--wp--preset--spacing--20);
    padding-bottom: var(--wp--preset--spacing--20);
    border-bottom: var(--wp--custom--border--width) var(--wp--custom--border--style) var(--wp--custom--border--color);
}

@container doc-list (inline-size < 500px) {
    .searchable-list__item {
        flex-wrap: wrap;
    }
}

.searchable-list__item-document-icon {
    align-self: flex-start;
    font-size: 1.75rem;
}

.searchable-list__item-content > * {
    margin-block-start: 0;
}

.searchable-list__item-content {
    flex-grow: 1;
}

.searchable-list__item-title {
    font-weight: 700;
}

.searchable-list__item-description {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
}

.searchable-list__item-meta {
    --section-divider-width: .25rem;
    --section-divider-height: var(--section-divider-width);
    --section-divider-gap: var(--wp--preset--spacing--20);
    --section-divider-color: currentColor;

    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--wp--preset--color--muted-text);
}

/* Add top margin when meta doesn't directly follow title */
.searchable-list__item-title:not(:has(+ .searchable-list__item-meta)) ~ .searchable-list__item-meta {
    margin-block-start: var(--wp--preset--spacing--20);
}

.searchable-list__item-meta > * {
    display: inline-flex;
    align-items: center;
}

.searchable-list__item-meta > *:first-child {
    margin-right: 0;
    padding-right: calc( var(--section-divider-gap) * 2 );
}

.searchable-list__item-meta > *:not(:first-child) {
    margin-right: 0;
    padding-right: var(--section-divider-gap);
    padding-left: var(--section-divider-gap);
    transform: translateX(calc(var(--section-divider-gap) * -1));
}

.searchable-list__item-meta > *:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: var(--section-divider-width);
    height: var(--section-divider-height);
    background-color: var(--section-divider-color);
    border-radius: 50%;
    position: relative;
    left: calc(var(--section-divider-gap) * -1);
}

.searchable-list__item-meta > *:last-child {
    padding-right: 0;
}

.searchable-list__item-download-link {
    flex-grow: 0;
    flex-shrink: 0;
}

.searchable-list__item-download-link .is-style-button-link :where( .wp-element-button, .wp-block-button__link) {
    --wp--custom--button--padding-y: 0;
    --wp--custom--button--padding-x: 0;
}

.searchable-list__item-download-link .icon {
    font-size: 1.35rem;
}

.searchable-list--compact {
    font-size: 1rem;
}

.searchable-list--compact .searchable-list__item {
    margin-bottom: calc(var(--wp--preset--spacing--20) * .75);
    padding-bottom: calc(var(--wp--preset--spacing--20) * .75);
}

.searchable-list--compact .searchable-list__item-document-icon {
    font-size: 1.25rem;
}

@container doc-list (inline-size < 700px) {
    .wp-block-table .searchable-list__item-document-icon-header,
    .searchable-list--table .searchable-list__item-document-icon,
    .searchable-list--table .searchable-list__item-download-link .icon {
        display: none;
    }

    .searchable-list--table .searchable-list__item-download-link {
        --wp--custom--button--padding-x: .375rem;
        --wp--custom--button--padding-y: .188rem
        --wp--custom--button--font-size: .938rem;
    }
}

.searchable-list--table .table-shrink-cell {
    width: 1%;
    white-space: nowrap;
}

.wp-block-table.is-style-table-heading-bar table thead {
    --table-color: var(--wp--preset--color--contrast);
    --table-bg: var(--wp--preset--color--light);
    border-color: color-mix(in srgb, var(--wp--preset--color--light), black 10%);
}

.searchable-list--table td {
    transition: background-color 0.3s ease;
}

.searchable-list--table tr:hover {
    --table-bg: color-mix(in srgb, var(--wp--preset--color--light), white 50%);
}

.searchable-list--cards {
    display: grid;
    gap: var(--wp--preset--spacing--40);
}

.searchable-list--cards .searchable-list__item {
    margin-bottom: 0;
    padding: var(--wp--preset--spacing--30);
    border: var(--wp--custom--border--width) var(--wp--custom--border--style) var(--wp--custom--border--color);
    border-radius: var(--wp--custom--border--radius);
}

@container doc-list (inline-size > 700px) {
    .searchable-list--cards {
        grid-template-columns: repeat(var(--searchable-list-columns, 1), 1fr);
    }

    .searchable-list--cards .searchable-list__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .searchable-list--cards .searchable-list__item-document-icon {
        align-self: center;
        font-size: 3rem;
        line-height: 1;
    }

    .searchable-list--cards .searchable-list__item-meta {
        justify-content: center;
    }
}