/* ============================================================
   SEARCH RESULTS PAGE — heading + form + filters + table + pager
   Applies on /search-results when block has manualRender=true
   and transformation=searchResults.

   Page-scoped: extracted from nbtc.css and linked only from
   searchResults.cshtml so it does not affect the rest of the site.
   Relies on CSS variables defined in the globally-loaded color.css
   (--darkred, --darkgrey, --grey, --lightgrey, --lightgrey-2,
   --pink, --white).
   ============================================================ */
/* NOTE: this site's root is large (1rem = 24px, see font.css), so every
   search element gets an explicit, smaller size to stay compact. */

/* Smooth transitions for every search element — animate color/background/
   border/box-shadow/transform state changes (hover, focus, checked, active).
   Individual rules below may override with a more specific transition. */
.search-results *,
.search-results__form,
.search-results__form *,
.search-results__filter-categories,
.search-results__filter-categories *,
.search-results__filter-date-range,
.search-results__filter-date-range *,
.search-results__table,
.search-results__table *,
.pager-numbered,
.pager-numbered * {
    transition: color 0.15s ease,
                background-color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                transform 0.15s ease,
                opacity 0.15s ease;
}
.search-results { margin: 1rem 0; }
/* Sizes mirror the Bootstrap fs-* classes previously set inline:
   heading = fs-8 / fs-sm-7 / fs-lg-6, count = fs-8, filters/form = fs-11,
   table th = fs-8, td = fs-10. */
.search-results__heading {
    font-size: 1rem;            /* fs-8 */
    font-weight: 700;
    line-height: 1.15;
    color: var(--darkgrey);
    margin-bottom: 0.75rem;
}
@media (min-width: 576px) { .search-results__heading { font-size: 1.25rem; } } /* fs-sm-7 */
@media (min-width: 992px) { .search-results__heading { font-size: 1.5rem; } }  /* fs-lg-6 */
.search-results__q { color: var(--darkgrey); }
.search-results__count {
    color: var(--darkred);
    font-weight: 700;
    font-size: 1rem;            /* fs-8 */
    margin-left: 0.4rem;
}

/* The shared .main-section-widgetRepeater-filter wrapper is pulled up by
   `top:-85px` (style.css) so the filter row tucks under a TALL hero. That
   hero height lives in nbtc.css (.hero-inner padding), which isn't loaded
   here, so the hero collapses and the offset drags the filter over the
   "Search Results" title. Neutralize it on this page so the filter flows
   (appends) normally below the title. */
@media (min-width: 992px) {
    .main-section-widgetRepeater-filter { top: 0; }
}

/* The WidgetRepeater renders every selected filter partial inside one
   container (.widget-repeater__filters--top). We lay them out as:
     row 1 → search box (left)  +  month/year (pushed right)
     row 2 → category checkboxes (full width)
   `order` keeps that arrangement regardless of the editor's pick order. */
.widget-repeater__filters--top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: 0.62rem;   /* shrink all filter text (labels, selects, search, categories) */
}

/* Match v13: all search text is bold (700). */
.widget-repeater__filters--top .widget-repeater__filter-label,
.widget-repeater__filters--top .widget-repeater__filter--date-range select,
.widget-repeater__filters--top .select-filter,
.search-results__category,
.search-results__category-text,
.search-results__filter-categories-label,
.search-results__form-label,
.search-results__form-input,
.search-results__table td,
.search-results__td-title a,
.search-results__td-date {
    font-weight: 700;
}
.widget-repeater__filters--top > .search-results__form,
.widget-repeater__filters--top > .widget-repeater__filter--search-box { order: 1; }
.widget-repeater__filters--top > .widget-repeater__filter--date-range { order: 2; margin-left: auto; }
.widget-repeater__filters--top > .search-results__filter-categories { order: 3; flex: 0 0 100%; width: 100%; }

/* Month/year filter (Starter.filter.byMonthYear) — right-aligned inline group */
.widget-repeater__filter--date-range {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.widget-repeater__filter--date-range .widget-repeater__filter-label {
    color: var(--darkgrey);
    font-weight: 700;
    white-space: nowrap;
    margin-bottom: 0;
}
.widget-repeater__filter--date-range select,
.widget-repeater__filter--date-range .select-filter {
    padding: 4px 26px 4px 10px;
    border: 1px solid var(--lightgrey);
    border-radius: 6px;
    background-color: var(--white, #fff);
    color: var(--darkgrey);
    font-weight: 700;
    cursor: pointer;
}
.widget-repeater__filter--date-range select::-ms-expand,
.widget-repeater__filter--date-range .select-filter::-ms-expand {
    display: none; /* legacy Edge/IE native arrow */
}
.widget-repeater__filter--date-range select:focus,
.widget-repeater__filter--date-range .select-filter:focus {
    border-color: var(--darkred);
    outline: 0;
    box-shadow: 0 0 0 3px var(--pink);
}

/* Standalone month/year filter on the search-results page. It is rendered by the
   transformation (not inside .widget-repeater__filters--top), so it sets its own
   font-size — otherwise labels + selects inherit the huge 24px root. fs-11 = 0.85rem. */
.search-results__filter-date-range {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.search-results__filter-date-range .select-filter-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.search-results__filter-date-range .widget-repeater__filter-label {
    font-weight: 700;
    color: var(--darkgrey);
    white-space: nowrap;
    margin-bottom: 0;
}
.search-results__filter-date-range select,
.search-results__filter-date-range .select-filter {
    font-size: inherit;
    font-weight: 700;
}

/* Search form on the page (rectangular — different from the overlay's pill) */
.search-results__form {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.search-results__form-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--darkgrey);
    font-weight: 600;
    white-space: nowrap;
}
.search-results__form-icon { color: var(--darkgrey); }
.search-results__form-input {
    flex: 1;
    min-width: 180px;
    padding: 0px 10px;
    border: 1px solid var(--lightgrey);
    border-radius: 4px;
    background-color: var(--white, #fff);
    font-size: inherit;
    color: var(--darkgrey);
    outline: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-results__form-input:focus {
    border-color: var(--darkred);
    box-shadow: 0 0 0 3px var(--pink);
}
.search-results__form-submit {
    padding: 0px 16px;
    background-color: var(--darkgrey);
    color: var(--white, #fff);
    border: 1px solid var(--darkgrey);
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.search-results__form-submit:hover,
.search-results__form-submit:focus-visible {
    background-color: var(--darkred);
    border-color: var(--darkred);
    color: var(--white, #fff);
    outline: none;
}

/* Right-side month + year dropdowns */
.search-results__filter-date {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.search-results__filter-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--darkgrey);
    font-weight: 600;
    margin-bottom: 0;
}
.search-results__select:focus { border-color: var(--darkred); outline: 0; box-shadow: 0 0 0 3px var(--pink); }

/* Category checkbox group — label on its own line, then a 4-column grid */
.search-results__filter-categories {
    margin: 0.25rem 0 1rem;
    /* Rendered directly by the transformation, so set its own size (else inherits 24px root). fs-11 = 0.85rem. */
    font-size: 0.85rem;
}
.search-results__filter-categories-label {
    color: var(--darkgrey);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.search-results__category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem 1.25rem;
}
@media (max-width: 991.98px) {
    .search-results__category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .search-results__category-list { grid-template-columns: 1fr; }
}
.search-results__category {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--darkgrey);
    text-decoration: none;
    padding: 4px 0;
    cursor: pointer;
}
.search-results__category:hover .search-results__category-text { color: var(--darkred); }
/* Visually hide the real checkbox; the styled box below is the visible control. */
.search-results__category-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.search-results__category-box {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--grey);
    border-radius: 3px;
    background-color: var(--white, #fff);
    flex: 0 0 auto;
    position: relative;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.search-results__category-input:checked + .search-results__category-box {
    background-color: var(--darkred);
    border-color: var(--darkred);
}
.search-results__category-input:checked + .search-results__category-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.485 1.929a1 1 0 0 1 0 1.414l-7.071 7.071a1 1 0 0 1-1.414 0L1.515 6.929a1 1 0 0 1 1.414-1.414L5.707 8.293l6.364-6.364a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}
/* Keyboard focus ring on the styled box. */
.search-results__category-input:focus-visible + .search-results__category-box {
    outline: 0;
    box-shadow: 0 0 0 3px var(--pink);
    border-color: var(--darkred);
}
.search-results__category-text {
    transition: color 0.12s ease;
}

/* Table */
.search-results__table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
}
.search-results__table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--white, #fff);
    font-size: 0.9rem;          /* td default = fs-10 */
}
.search-results__table thead tr {
    background-color: var(--darkred);
    color: var(--white, #fff);
}
.search-results__table th {
    padding: 0.4rem 0.65rem;
    font-weight: 700;
    font-size: 1rem;            /* fs-8 */
    text-align: center;
    border: 0;
}
.search-results__table .search-results__th-title { text-align: center; }
.search-results__table .search-results__th-date { text-align: center; width: 120px; }
.search-results__table tbody tr {
    border-bottom: 1px solid var(--lightgrey);
}
.search-results__table tbody tr:nth-child(even) { background-color: #f9f9fa; }
.search-results__table tbody tr:hover { background-color: rgba(198, 31, 44, 0.04); }
.search-results__table td {
    padding: 0.4rem 0.65rem;
    color: var(--darkgrey);
    vertical-align: middle;
}
.search-results__td-title a {
    color: var(--darkgrey);
    text-decoration: none;
    display: block;
}
.search-results__td-title a:hover { color: var(--darkred); text-decoration: underline; }
.search-results__td-date {
    color: var(--grey);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.search-results__empty {
    text-align: center;
    color: var(--grey);
    padding: 2rem 1rem;
}

/* Numbered pager */
.pager-numbered {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.pager-numbered__page,
.pager-numbered__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.35rem;
    border-radius: 50%;
    color: var(--darkgrey);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.65rem;
    background-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.pager-numbered__page:hover,
.pager-numbered__nav:hover {
    background-color: var(--lightgrey-2);
    color: var(--darkred);
}
.pager-numbered__page.is-current {
    background-color: var(--darkred);
    color: var(--white, #fff);
    cursor: default;
}
.pager-numbered__nav {
    background-color: var(--lightgrey-2);
    font-size: 0.8rem;
    line-height: 1;
}
.pager-numbered__nav.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}
.pager-numbered__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 26px;
    color: var(--darkgrey);
}

/* Dark-mode tweaks for the results page */
[data-bs-theme="dark"] .search-results__heading { color: rgba(255, 255, 255, 0.92); }
[data-bs-theme="dark"] .search-results__form-input,
[data-bs-theme="dark"] .search-results__select {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
[data-bs-theme="dark"] .search-results__form-label,
[data-bs-theme="dark"] .search-results__filter-categories-label,
[data-bs-theme="dark"] .search-results__filter-label,
[data-bs-theme="dark"] .search-results__category-text { color: rgba(255, 255, 255, 0.85); }
[data-bs-theme="dark"] .search-results__table { background-color: transparent; }
[data-bs-theme="dark"] .search-results__table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.03); }
[data-bs-theme="dark"] .search-results__table tbody tr:hover { background-color: rgba(255, 201, 201, 0.08); }
[data-bs-theme="dark"] .search-results__table td,
[data-bs-theme="dark"] .search-results__td-title a { color: rgba(255, 255, 255, 0.85); }
[data-bs-theme="dark"] .search-results__td-date { color: rgba(255, 255, 255, 0.55); }
[data-bs-theme="dark"] .pager-numbered__page,
[data-bs-theme="dark"] .pager-numbered__nav { color: rgba(255, 255, 255, 0.85); }
[data-bs-theme="dark"] .pager-numbered__nav { background-color: rgba(255, 255, 255, 0.1); }
[data-bs-theme="dark"] .pager-numbered__page:hover,
[data-bs-theme="dark"] .pager-numbered__nav:hover {
    background-color: rgba(255, 201, 201, 0.15);
    color: #ffd1d4;
}

/* Removes the 'X' clear button from Chrome, Safari, and modern Edge */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Removes the 'X' clear button from legacy Internet Explorer and Edge */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}