/*
 * Articles page: search, filters and numbered pagination.
 * Loaded only by templates/articles-search/content-articles-search.php; everything is scoped
 * to .gomde-as. Colours and fonts follow the theme: #1f4788 (site colour), #323232 (text),
 * #e6e6e6 (borders), #666666 (secondary text: 5.7:1 on white, WCAG AA), Quicksand for UI text.
 */

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

/* ---------- Filters block ---------- */

.gomde-as .gomde-as-filters {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.7708333333% 8px;
    color: #323232;
    font-family: Quicksand, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}

.gomde-as .gomde-as-form {
    margin: 0;
    padding: 0;
}

.gomde-as .gomde-as-admin-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 4px solid #c0392b;
    background: #fdf1f0;
    font-size: 14px;
}

/* Search field */

/* The bar spans the content width and is the containing block for the open filter panel,
   so the panel can be as wide as the cards while the funnel sits inside the narrow row. */
.gomde-as .gomde-as-bar {
    position: relative;
    margin: 0 0 14px;
}

.gomde-as .gomde-as-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 604px; /* 560 search row + gap + funnel */
    margin: 0 auto;
}

.gomde-as .gomde-as-search__input {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #c8c8c8;
    border-right-width: 0;
    border-radius: 3px 0 0 3px;
    background: #fff;
    color: #323232;
    font-family: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming in */
    line-height: 40px;
    -webkit-appearance: none;
    appearance: none;
}

.gomde-as .gomde-as-search__button,
.gomde-as .gomde-as-apply__button {
    box-sizing: border-box;
    height: 42px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #1f4788;
    border-radius: 0 3px 3px 0;
    background: #1f4788;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 40px;
    cursor: pointer;
}

.gomde-as .gomde-as-search__button:hover,
.gomde-as .gomde-as-apply__button:hover {
    background: #173766;
    border-color: #173766;
}

.gomde-as .gomde-as-search__input:focus,
.gomde-as .gomde-as-search__button:focus,
.gomde-as .gomde-as-apply__button:focus,
.gomde-as .gomde-as-select__control:focus,
.gomde-as .gomde-as-chip:focus,
.gomde-as .gomde-as-active__chip:focus,
.gomde-as .gomde-as-summary__reset:focus {
    outline: 2px solid #1f4788;
    outline-offset: 2px;
}

.gomde-as .gomde-as-search__input:focus {
    position: relative;
    z-index: 1;
    border-color: #1f4788;
}

/* ---------- Collapsible filter panel (native <details>/<summary>) ----------
   Closed by default: the page shows only the search field and this toggle. The toggle carries
   the number of active filters and the panel is printed with "open" when one of them is active.
   Browsers without <details> support show the panel expanded, which is the safe fallback. */

/* The funnel rides in the search row, to the right of the "Шукати" button; it stays static so the
   open panel is positioned against .gomde-as-bar instead. */
.gomde-as .gomde-as-panel {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: static;
    margin: 0 0 0 8px;
    padding: 0;
    border: 0;
}

/* One icon-only button: a funnel, the same height as the field and the button next to it. */
.gomde-as .gomde-as-panel__toggle {
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 44px;
    height: 42px;
    margin: 0;
    padding: 0;
    position: relative;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    background: #fff;
    color: #555;
    line-height: 0;
    cursor: pointer;
    list-style: none; /* Firefox: hide the default triangle */
}

.gomde-as .gomde-as-panel__toggle::-webkit-details-marker {
    display: none;
}

.gomde-as .gomde-as-panel__toggle::marker {
    content: '';
}

.gomde-as .gomde-as-panel__toggle:hover {
    border-color: #1f4788;
    color: #1f4788;
}

.gomde-as .gomde-as-panel__toggle:focus {
    outline: 2px solid #1f4788;
    outline-offset: 2px;
}

.gomde-as .gomde-as-panel__icon {
    display: block;
}

/* How many filters are on: a small badge on the corner of the funnel. */
.gomde-as .gomde-as-panel__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #1f4788;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.gomde-as .gomde-as-panel[open] > .gomde-as-panel__toggle {
    border-color: #1f4788;
    color: #1f4788;
}

/* Open panel: a full-width sheet dropped under the search row. It is positioned against
   .gomde-as-bar, so it keeps the width of the cards and does not push them down. */
.gomde-as .gomde-as-panel__body {
    position: absolute;
    /* 42px row + 8px gap. Not "top: 100%": the script adds padding to the bar to make room for
       this panel, and a percentage would then chase its own reserved space down the page. */
    top: 50px;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 12px 14px 6px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* Groups */

.gomde-as .gomde-as-group {
    position: relative;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0 0 0 90px;
    border: 0;
}

/* The legend sits in the left column on wide screens (absolute: legends ignore flex/float quirks). */
.gomde-as .gomde-as-group__legend {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 84px;
    margin: 0;
    padding: 6px 0 0;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.gomde-as .gomde-as-group__subtitle {
    margin: 2px 0 2px;
    padding: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

.gomde-as .gomde-as-chips {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gomde-as .gomde-as-chips__item {
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 0;
    list-style: none;
    vertical-align: top;
}

.gomde-as .gomde-as-chip {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #fff;
    color: #323232;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.gomde-as .gomde-as-chips--small .gomde-as-chip {
    padding: 2px 9px;
    font-size: 13px;
}

.gomde-as a.gomde-as-chip:hover,
.gomde-as a.gomde-as-chip:focus {
    border-color: #1f4788;
    color: #1f4788;
    text-decoration: none;
}

.gomde-as .gomde-as-chip.is-active,
.gomde-as a.gomde-as-chip.is-active:hover,
.gomde-as a.gomde-as-chip.is-active:focus {
    border-color: #1f4788;
    background: #1f4788;
    color: #fff;
}

.gomde-as .gomde-as-chip__count {
    margin-left: 2px;
    color: #666;
    font-size: 12px;
}

/* No article left with the current filters: still a link, but dimmed (colours keep 4.5:1). */
.gomde-as .gomde-as-chip.is-empty {
    border-style: dashed;
    color: #666;
}

.gomde-as .gomde-as-chip.is-active .gomde-as-chip__count {
    color: #dfe6f2;
}

.gomde-as .gomde-as-chip__x {
    margin-left: 6px;
    font-weight: 700;
}

/* Selects (native: class "nochosen" keeps the theme's Chosen plugin away) */

.gomde-as .gomde-as-select {
    display: inline-block;
    margin: 0 0 6px;
    vertical-align: top;
}

.gomde-as .gomde-as-select__control {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 200px;
    height: 34px;
    margin: 0;
    padding: 0 30px 0 10px;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    background-color: #fff;
    color: #323232;
    font-family: inherit;
    font-size: 14px;
    line-height: 32px;
}

.gomde-as .gomde-as-select__control.is-active {
    border-color: #1f4788;
    color: #1f4788;
    font-weight: 700;
}

.gomde-as .gomde-as-apply {
    margin: 0 0 6px 90px;
}

.gomde-as .gomde-as-apply__button {
    height: 34px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 32px;
}

/* With JavaScript the selects submit on change; the button stays for keyboard users. */
.gomde-as .gomde-as-form.gomde-as-js .gomde-as-apply__button {
    border-color: #c8c8c8;
    background: #fff;
    color: #323232;
    font-weight: 400;
}

.gomde-as .gomde-as-form.gomde-as-js .gomde-as-apply__button:hover {
    border-color: #1f4788;
    color: #1f4788;
}

/* Summary: found count, active filters, reset */

.gomde-as .gomde-as-summary {
    margin: 6px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #e6e6e6;
}

.gomde-as .gomde-as-summary__found {
    display: inline-block;
    margin: 0 12px 6px 0;
    padding: 0;
    color: #1f4788;
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
}

.gomde-as .gomde-as-active {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gomde-as .gomde-as-active__item {
    display: inline-block;
    margin: 0 4px 6px 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}

.gomde-as .gomde-as-active__chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 16px;
    background: #eef2f8;
    color: #1f4788;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.gomde-as a.gomde-as-active__chip:hover,
.gomde-as a.gomde-as-active__chip:focus {
    background: #dfe6f2;
    text-decoration: none;
}

.gomde-as .gomde-as-active__x {
    margin-left: 4px;
    font-weight: 700;
}

.gomde-as .gomde-as-summary__reset {
    display: inline-block;
    margin: 0 0 6px 4px;
    color: #323232;
    font-size: 14px;
    text-decoration: underline;
    vertical-align: middle;
}

.gomde-as .gomde-as-summary__reset:hover,
.gomde-as .gomde-as-summary__reset:focus {
    color: #1f4788;
}

.gomde-as .gomde-as-summary__note {
    margin: 0 0 6px;
    color: #666;
    font-size: 13px;
}

/* Highlighted search words in the cards */

.gomde-as mark.gomde-as-mark {
    padding: 0 1px;
    border-radius: 2px;
    background: #fff1a8;
    color: inherit;
}

/* Target of #gomde-as-list links: leave a little space above the summary / first card. */
.gomde-as .gomde-as-anchor {
    height: 0;
    scroll-margin-top: 16px;
}

/* Messages: same column as the filters */

.gomde-as .gomde-as-out-of-range,
.gomde-as .gomde-as-no-results {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 1.7708333333% 0;
    text-align: left;
}

.gomde-as .gomde-as-out-of-range .message a,
.gomde-as .gomde-as-no-results .message a {
    display: block;
    margin-top: 12px;
    color: #1f4788;
    font-size: 16px;
}

/* ---------- Pagination (same look as "Blogs (нумерація)") ---------- */

.gomde-as .gomde-pager-container {
    margin-top: 24px;
    padding-bottom: 8px;
}

.gomde-as .gomde-pager__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gomde-as .gomde-pager__item {
    margin: 3px;
    padding: 0;
    list-style: none;
}

.gomde-as .gomde-pager__link {
    display: inline-block;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    background: #fff;
    color: #323232;
    font-family: Quicksand, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: border-color .15s, color .15s, background-color .15s;
    transition: border-color .15s, color .15s, background-color .15s;
}

.gomde-as a.gomde-pager__link:hover,
.gomde-as a.gomde-pager__link:focus {
    border-color: #1f4788;
    color: #1f4788;
    text-decoration: none;
}

.gomde-as a.gomde-pager__link:focus {
    outline: 2px solid #1f4788;
    outline-offset: 2px;
}

.gomde-as .gomde-pager__link.is-current,
.gomde-as a.gomde-pager__link.is-current:hover,
.gomde-as a.gomde-pager__link.is-current:focus {
    border-color: #1f4788;
    background: #1f4788;
    color: #fff;
    font-weight: 700;
}

.gomde-as .gomde-pager__link.is-disabled {
    border-color: #f0f0f0;
    color: #c8c8c8;
    cursor: default;
}

.gomde-as .gomde-pager__prev,
.gomde-as .gomde-pager__next {
    font-size: 22px;
}

.gomde-as .gomde-pager__dots {
    min-width: 16px;
    color: #666;
    font-family: Quicksand, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

/* ---------- Small screens ---------- */

@media (max-width: 50em) {
    .gomde-as .gomde-as-filters {
        padding-left: 2.65625%;
        padding-right: 2.65625%;
    }
}

@media (max-width: 40em) {
    .gomde-as .gomde-as-filters {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Bigger tap target for the funnel on a phone (44px, Apple's minimum). */
    .gomde-as .gomde-as-panel__toggle {
        padding: 12px 13px 10px;
    }

    .gomde-as .gomde-as-panel__body {
        padding: 12px 12px 6px;
    }

    .gomde-as .gomde-as-group {
        padding-left: 0;
        /* A <fieldset> reports the full width of an overflowing descendant even when that
           descendant clips itself, which gives the whole page a horizontal scrollbar. */
        overflow: hidden;
    }

    .gomde-as .gomde-as-group__legend {
        position: static;
        width: auto;
        padding: 0 0 4px;
    }

    /* One swipeable row per chip group instead of a column of chips: keeps the filters short.
       The row bleeds into the right edge of the panel so a cut-off chip shows that there is more. */
    .gomde-as .gomde-as-chips {
        /* 4px inside the scroll box so the focus outline (2px, offset 2px) is not clipped */
        margin: 0 -12px 0 -4px;
        padding: 4px 12px 5px 4px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .gomde-as .gomde-as-chips__item {
        margin-bottom: 2px;
    }

    .gomde-as .gomde-as-chip {
        white-space: nowrap;
    }

    .gomde-as .gomde-as-out-of-range,
    .gomde-as .gomde-as-no-results {
        padding-left: 16px;
        padding-right: 16px;
    }

    .gomde-as .gomde-as-apply {
        margin-left: 0;
    }

    .gomde-as .gomde-as-select {
        display: block;
    }

    .gomde-as .gomde-as-select__control {
        width: 100%;
        min-width: 0;
        height: 40px;
        font-size: 16px;
        line-height: 38px;
    }

    .gomde-as .gomde-as-apply__button {
        width: 100%;
        height: 40px;
    }
}

@media (max-width: 30em) {
    .gomde-as .gomde-pager__item {
        margin: 2px 1px;
    }

    .gomde-as .gomde-pager__link {
        min-width: 32px;
        height: 36px;
        padding: 0 6px;
        font-size: 15px;
        line-height: 34px;
    }

    .gomde-as .gomde-pager__dots {
        min-width: 12px;
        line-height: 36px;
    }
}

/* An empty filter group (English has no teacher/topic tags yet) would show a bare legend.
   :has() is not in older browsers; there the legend simply stays, as it did before. */
@supports selector(:has(*)) {
    .gomde-as .gomde-as-group:not(:has(.gomde-as-chip)):not(:has(select)) {
        display: none;
    }
}