/* WT26 Call Finder: frontend styles * Board (sidebar + results + map), cards, single job view, Apply and Submit * forms, badges, and the ported legacy password form. Used by the shortcodes, * the Gutenberg blocks, the Divi modules, the Breakdance elements and the * plugin templates. Theme-agnostic: no builder-specific selectors and NO * font-family declarations; the board inherits the host theme's type. * * ---------- Sizing text: max(em, rem), never a bare rem ---------- * Eight ported WT themes set `html { font-size: 62.5% }`, so a bare rem is * 10px there; Divi's body is 14px and Enfold's 13px, so a bare em shrinks * those. Every text size is `max(, )`: the em half tracks the host * theme, the rem half holds the size we designed. Inputs use * `max(1em, 16px)`: the 16px floor is literal (iOS zooms a focused input * below it). * * ---------- Sizing boxes: px ---------- * Grid tracks, gaps, paddings, icon buttons, the map height and the sidebar * width are design constants and stay in px so they render at the drawn size * on every root font size. * * ---------- Colours: custom properties only ---------- * Every colour is a `--wt26-cf-*` token with a neutral default, declared on * `:where(:root)` at zero specificity. A theme, a child theme or a site's * Additional CSS overrides them with any `:root { … }` or `.wt26-cf { … }` * rule. Text colour is inherited from the theme; tokens cover surfaces, * borders, the accent and the badges. * * ---------- Legacy layout rules ---------- * The board keeps the legacy class names and ids (`.filter_job_results_ * container`, `.wt_job_wrap`, `.wt_job_meta`, `#wt_search_text`, …) so the * per-site Additional CSS written against the 2023 plugin keeps matching. * Those legacy rules are re-stated below at their ORIGINAL specificity behind * a zero-cost `:where(.wt26-cf)` scope, and this sheet is enqueued in * before the customizer CSS, so a site's own rule wins every tie by source * order exactly as it did before. Rules that fought the old float layout * (card width and float, the list's flex-wrap) are not re-stated: the grid * replaces them. Two legacy choices are dropped on purpose: `.wt_job_meta { * color: #000; text-transform: capitalize }` (forced black on dark themes and * mangled URLs and emails); text now inherits. * * ---------- Class contract (spec section 5; render.php is the spelling) ---------- * Root `.wt26-cf.wt26-cf-board.filter_job_results_container`; board.js adds * `.wt26-cf--js` on init (reveals every `.wt26-cf__js-only` control), * `.wt26-cf--has-dialog` once the mobile filters dialog exists, and * `.wt26-cf--map-open` while the mobile map is shown. Sidebar * `aside.wt26-cf__filters` > `form.wt26-cf__form` with * `fieldset.wt26-cf__group[data-taxonomy]` > `ul.wt26-cf__options` > `li` * with `input[data-term-id]` + `label` + `span.wt26-cf__count` (the facet * pill). Mobile toggle `button.wt26-cf__filters-toggle` (+ `.wt26-cf__filters- * count`); `dialog.wt26-cf__dialog` with `.wt26-cf__dialog-head`, * `.wt26-cf__dialog-title`, `.wt26-cf__dialog-close`, `.wt26-cf__dialog-body` * (the aside is moved inside while open) and an optional `.wt26-cf__dialog- * foot`. Results `section.wt26-cf__results` > `#wt_job_overlay.wt26-cf__ * overlay[role=status][aria-busy]` (with `span.wt26-cf__spinner` and the * screen-reader `.wt26-cf__overlay-text`), `.wt26-cf__toolbar` > * `h2.wt26-cf__heading` > `span.wt26-cf__result-count[data-wt26-cf-count]` * and `.wt26-cf__tools` (`.wt26-cf__filters-toggle`, `.wt26-cf__map-toggle`, * `select.wt26-cf__sort`, `.wt26-cf__layout` > `.wt26-cf__layout-btn[data- * wt26-cf-layout][aria-pressed]`), `.wt26-cf__map`, `.wt26-cf-search`, * `.wt26-cf__list.wt26-cf__list--grid|--list[aria-busy]` of * `article.wt26-cf__card` (`.wt26-cf__card--active` while its pin is hovered; * pins get `.wt-map-pin--active`), `.wt26-cf__empty`, `nav.wt26-cf__pagination` * (`--pagination` with page-numbers chips, `--load_more` with * `a.wt26-cf__load-more` + `span.wt26-cf__progress`). Shared controls: * `.wt26-cf-button` (+ `--primary`, `--secondary`, `--link`, `--small`), * `.wt26-cf-input`, `.wt26-cf-select`. Per-card accent: render.php prints * `style="--wt26-cf-job-color: #hex"` on cards whose primary term has a colour. */ /* ---------- Tokens ---------- */ :where(:root) { --wt26-cf-accent: #1d4ed8; /* white on #1d4ed8 = 6.3:1 */ --wt26-cf-accent-hover: #1e40af; --wt26-cf-accent-contrast: #fff; --wt26-cf-focus: #1d4ed8; --wt26-cf-surface: #fff; --wt26-cf-surface-muted: rgba(0, 0, 0, 0.035); --wt26-cf-surface-hover: rgba(0, 0, 0, 0.06); --wt26-cf-border: rgba(0, 0, 0, 0.14); --wt26-cf-border-strong: rgba(0, 0, 0, 0.32); --wt26-cf-muted-opacity: 0.74; /* keeps AA against a near-white surface for body text down to #444 */ --wt26-cf-radius: 8px; --wt26-cf-radius-small: 4px; --wt26-cf-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); --wt26-cf-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.14); --wt26-cf-gap: 24px; --wt26-cf-card-min: 280px; --wt26-cf-card-padding: 16px; --wt26-cf-sidebar-width: 280px; --wt26-cf-sticky-top: 24px; --wt26-cf-map-height: 450px; --wt26-cf-image-fit: contain; /* term logos are the common image; set to cover for photo boards */ --wt26-cf-badge-bg: rgba(0, 0, 0, 0.08); --wt26-cf-badge-expired-bg: #fde8e8; --wt26-cf-badge-expired-fg: #8a1c1c; /* 7.4:1 on #fde8e8 */ --wt26-cf-badge-new-bg: #e3f1e6; --wt26-cf-badge-new-fg: #1b5e2a; --wt26-cf-badge-pending-bg: #fff4d6; --wt26-cf-badge-pending-fg: #7a4b00; --wt26-cf-pin-default: #e02b20; --wt26-cf-gate-accent: #1c3f95; /* legacy password form colour */ --wt26-cf-gate-input-bg: #eee; --wt26-cf-gate-input-fg: #444; /* legacy shipped #999, which fails contrast on #eee */ } /* ---------- Legacy layout rules, re-stated (see header) ---------- */ .filter_job_results_container:where(.wt26-cf) { display: flex; padding-bottom: 40px; box-sizing: border-box; } :where(.wt26-cf) .all_job_posts_container { flex: 1 0 0%; min-width: 0; width: 100%; box-sizing: border-box; } :where(.wt26-cf) .all_filter_list_sidebar { width: var(--wt26-cf-sidebar-width); min-width: var(--wt26-cf-sidebar-width); max-width: var(--wt26-cf-sidebar-width); flex-shrink: 0; padding: 0 10px 10px; box-sizing: border-box; } :where(.wt26-cf) .wt_job_filter_list h3 { font-size: max(1.25em, 1.25rem); font-weight: 500; line-height: 1.4; margin: 10px 0; padding: 0; } /* The two !important flags are the legacy plugin's own: content-area list resets in Divi (`#left-area ul`) and friends out-specify any class we could write, and the sites' CSS was authored against exactly this behaviour. */ :where(.wt26-cf) .wt_job_filter_list ul { list-style: none !important; padding: 0 !important; } :where(.wt26-cf) .wt_job_searchandfilter input[type="radio"], :where(.wt26-cf) .wt_job_searchandfilter input[type="checkbox"], :where(.wt26-cf) #filter_by_full_part label { cursor: pointer; } :where(.wt26-cf) #filter_by_midcouncil li, :where(.wt26-cf) #filter_by_position li { padding: 7px 0; } :where(.wt26-cf) .wt_job_wrap { border: 1px solid var(--wt26-cf-border); padding: var(--wt26-cf-card-padding); overflow: hidden; box-sizing: border-box; } :where(.wt26-cf) .wt_job_wrap:hover { box-shadow: rgb(0 0 0 / 20%) 0 0 20px; } :where(.wt26-cf) .wt_job_image_bg { width: 100%; min-height: 0; aspect-ratio: 4 / 3; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-bottom: 20px; } :where(.wt26-cf, .wt26-cf-single) .wt_job_meta { padding: 3px 0; font-size: inherit; font-weight: initial; } :where(.wt26-cf, .wt26-cf-single) .wt_job_meta_content h3 { font-size: max(1.0625em, 1.0625rem); font-weight: 700; line-height: 1.35; } /* Row classes the importer carries over from the legacy card builder. */ :where(.wt26-cf) .wt_job_wrap .wt_job_meta_content p.wt_church_name { font-size: max(0.875em, 0.875rem); padding-top: 0; margin-top: 0; line-height: 1.25; } :where(.wt26-cf) .wt_job_wrap .wt_job_meta_content span.wt_read_more { font-size: max(0.6875em, 0.6875rem); text-decoration: underline; } :where(.wt26-cf) .wt_job_wrap .wt_job_meta_content p.wt_brief_descript { line-height: 1.6; } :where(.wt26-cf) .wt-filter-unavailable { opacity: 0.55; } :where(.wt26-cf) .wt-filter-unavailable label { cursor: default; } :where(.wt26-cf) .is-hide { display: none; } /* Search bar (legacy selector kept whole so per-site overrides still tie). */ .filter_job_results_container .search_input.wt_seach_box #wt_search_text { width: 100%; padding: 15px; border-radius: 20px; margin: 20px 0; } /* Map canvas: same height as the legacy board, without the legacy horizontal padding (Leaflet measures the padding box and tiles overflowed into it). */ :where(.wt26-cf, .wt26-cf-single) div#mapJobCanvas { width: 100%; height: var(--wt26-cf-map-height); } .wt-map-pin { background: none !important; border: none !important; } :where(.leaflet-popup-content) .info_content p { margin: 0 0 5px; } /* Single job page (body and post classes are aliased in post-type.php). */ .single-wt24_call_finder #main-content .container:before { width: 0; height: 0; } :where(.single-wt24_call_finder) .single_wt_job_wrap { margin-top: 15px; } body.single-wt24_call_finder .post-meta { display: none; } :where(.single-wt24_call_finder) .wt25_job_single_container { width: 80%; margin: 0 auto; padding: 50px 0; } .wt_clear { clear: both; } @media only screen and (max-width: 991px) { .filter_job_results_container:where(.wt26-cf) { display: block; } :where(.wt26-cf) .all_filter_list_sidebar { width: auto; min-width: 0; max-width: none; margin-bottom: 15px; } :where(.wt26-cf) .all_job_posts_container { width: 100%; display: block; } :where(.single-wt24_call_finder) .wt25_job_single_container { width: 100%; padding: 24px 0; } } /* ---------- Board root and layout ---------- */ .wt26-cf-board { position: relative; gap: var(--wt26-cf-gap); align-items: flex-start; color: inherit; } .wt26-cf-board *, .wt26-cf-board *::before, .wt26-cf-board *::after { box-sizing: border-box; } .wt26-cf__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Sticky sidebar on wide screens; its own scroll region when taller than the viewport so every group stays reachable. */ .wt26-cf__filters { position: sticky; top: var(--wt26-cf-sticky-top); align-self: flex-start; max-height: calc(100vh - var(--wt26-cf-sticky-top) - 16px); overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: auto; } body.admin-bar .wt26-cf__filters { top: calc(var(--wt26-cf-sticky-top) + 32px); max-height: calc(100vh - var(--wt26-cf-sticky-top) - 48px); } /* ---------- Sidebar: form, title, groups ---------- */ .wt26-cf__form { display: flex; flex-direction: column; gap: 4px; margin: 0; } .wt26-cf__title, .wt26-cf__filters-title, .wt25_job_filter_main_title { margin: 0 0 8px; font-size: max(1.375em, 1.375rem); font-weight: 700; line-height: 1.25; } .wt26-cf__reset-wrap { margin: 0; } .wt26-cf__reset { align-self: flex-start; font-size: max(0.875em, 0.875rem); text-decoration: underline; text-underline-offset: 2px; } .wt26-cf__group { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; } .wt26-cf__legend { display: block; width: 100%; margin: 0; padding: 0; } .wt26-cf__legend h3 { margin: 10px 0 6px; } /* Option lists. More than eight rows scroll inside a fixed height (the :has() rule needs no markup change; the modifier is the explicit switch). */ .wt26-cf__options { margin: 0; padding: 0; list-style: none; } .wt26-cf__options--scroll, .wt26-cf__options:has(> li:nth-child(9)) { max-height: 288px; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: auto; } /* render.php prints the input as a SIBLING of its label (the legacy markup, wired with for=), so the row itself is the flex container. Making the label the row would push it onto its own line under the control. */ .wt26-cf__option, .wt26-cf__options > li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; } .wt26-cf__option-label, .wt26-cf__options label { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; min-height: 36px; padding: 4px 6px; margin: 0; border-radius: var(--wt26-cf-radius-small); cursor: pointer; font-size: max(0.9375em, 0.9375rem); line-height: 1.35; } .wt26-cf__options label:hover { background: var(--wt26-cf-surface-muted); } .wt26-cf__options li:has(:checked) > label, .wt26-cf__options label:has(:checked) { font-weight: 600; } .wt26-cf__options input[type="radio"], .wt26-cf__options input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--wt26-cf-accent); } .wt26-cf__options input:focus-visible { outline: 3px solid var(--wt26-cf-focus); outline-offset: 2px; } .wt26-cf__option-text { flex: 1 1 auto; min-width: 0; } .wt26-cf__swatch, .wt26-cf-swatch { flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--wt26-cf-swatch, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); vertical-align: middle; } .wt26-cf__count { flex: 0 0 auto; margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--wt26-cf-badge-bg); font-size: max(0.75em, 0.75rem); font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .wt26-cf__count:empty { display: none; } /* Zero-result options stay in the tab order and readable (opacity >= .55, no pointer-events: none) so a keyboard or screen reader user can still pick one and see the empty state explain itself. */ .wt-filter-unavailable label { text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, 0.3); } .wt-filter-unavailable .wt26-cf__count { background: transparent; box-shadow: inset 0 0 0 1px var(--wt26-cf-border); } .wt26-cf__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; } /* ---------- Shared controls: buttons, inputs, selects ---------- */ .wt26-cf-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--wt26-cf-border-strong); border-radius: var(--wt26-cf-radius-small); background: var(--wt26-cf-surface); color: inherit; font-size: max(1em, 1rem); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .wt26-cf-button:hover { background: var(--wt26-cf-surface-hover); } .wt26-cf-button:focus-visible { outline: 3px solid var(--wt26-cf-focus); outline-offset: 2px; } .wt26-cf-button:disabled, .wt26-cf-button[aria-disabled="true"] { opacity: 0.6; cursor: default; } .wt26-cf-button--primary { border-color: var(--wt26-cf-accent); background: var(--wt26-cf-accent); color: var(--wt26-cf-accent-contrast); } .wt26-cf-button--primary:hover { border-color: var(--wt26-cf-accent-hover); background: var(--wt26-cf-accent-hover); } .wt26-cf-button--secondary { background: transparent; } .wt26-cf-button--link { min-height: 0; padding: 4px 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 2px; } .wt26-cf-button--link:hover { background: transparent; text-decoration-thickness: 2px; } .wt26-cf-button--small { min-height: 36px; padding: 6px 12px; font-size: max(0.875em, 0.875rem); } .wt26-cf-button--icon { width: 44px; padding: 0; } .wt26-cf-button[aria-pressed="true"] { border-color: var(--wt26-cf-accent); background: var(--wt26-cf-accent); color: var(--wt26-cf-accent-contrast); } .wt26-cf-button svg, .wt26-cf-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wt26-cf-input, .wt26-cf-select, .wt26-cf-textarea, .wt26-cf-form input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="hidden"])), .wt26-cf-form select, .wt26-cf-form textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--wt26-cf-border-strong); border-radius: var(--wt26-cf-radius-small); background: var(--wt26-cf-surface); color: inherit; font-size: max(1em, 16px); line-height: 1.4; } .wt26-cf-textarea, .wt26-cf-form textarea { min-height: 140px; resize: vertical; } .wt26-cf-input:focus-visible, .wt26-cf-select:focus-visible, .wt26-cf-textarea:focus-visible, .wt26-cf-form input:focus-visible, .wt26-cf-form select:focus-visible, .wt26-cf-form textarea:focus-visible { outline: 3px solid var(--wt26-cf-focus); outline-offset: 1px; } .wt26-cf-form input[type="checkbox"], .wt26-cf-form input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--wt26-cf-accent); } /* ---------- JS-only controls, mobile filters: toggle button and dialog ---------- */ /* Controls that do nothing without board.js (the layout toggle, the filters and map toggles) stay hidden until it adds `.wt26-cf--js` to the board root. The two toggles also wait for the phone breakpoint further down. */ .wt26-cf__js-only, .wt26-cf__filters-toggle, .wt26-cf__map-toggle { display: none; } .wt26-cf--js .wt26-cf__js-only { display: inline-flex; } /* The two toggles are js-only too, but they wait for the phone breakpoint (the rule inside the max-width media query below wins by source order). */ .wt26-cf--js .wt26-cf__filters-toggle, .wt26-cf--js .wt26-cf__map-toggle { display: none; } /* board.js hides controls with the `hidden` attribute (no Leaflet, desktop width); an author display rule must never show them again. */ .wt26-cf--js .wt26-cf__js-only[hidden], .wt26-cf--js .wt26-cf__filters-toggle[hidden], .wt26-cf--js .wt26-cf__map-toggle[hidden] { display: none; } .wt26-cf__dialog { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--wt26-cf-surface); color: inherit; overflow: hidden; } .wt26-cf__dialog::backdrop { background: rgba(0, 0, 0, 0.5); } .wt26-cf__dialog[open] { display: flex; flex-direction: column; } .wt26-cf__dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--wt26-cf-border); } .wt26-cf__dialog-title { margin: 0; font-size: max(1.125em, 1.125rem); font-weight: 700; } .wt26-cf__dialog-close { flex: 0 0 auto; margin-left: auto; } .wt26-cf__dialog-body { flex: 1 1 auto; min-height: 0; padding: 16px; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: auto; } .wt26-cf__dialog-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--wt26-cf-border); background: var(--wt26-cf-surface); } .wt26-cf__dialog-foot .wt26-cf-button { flex: 1 1 auto; } /* Inside the dialog the aside is a plain block, not a sticky column. */ .wt26-cf__dialog .wt26-cf__filters, .wt26-cf__dialog .all_filter_list_sidebar { display: block; position: static; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; padding: 0; margin: 0; } @media only screen and (min-width: 992px) { /* A dialog opened at a narrow width and then widened: centre it. */ .wt26-cf__dialog { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 32px); border-radius: var(--wt26-cf-radius); box-shadow: var(--wt26-cf-shadow-hover); } } @media only screen and (max-width: 991px) { .wt26-cf-board { gap: 16px; } .wt26-cf__filters { position: static; max-height: none; overflow: visible; } /* With JS and a working (board.js adds .wt26-cf--has-dialog) the sidebar lives in the dialog and the toolbar shows the toggles. Without JS, or in a browser with no dialog element, everything stays in flow. */ .wt26-cf--has-dialog .wt26-cf__filters { display: none; } /* Inside the dialog it shows again, whether board.js appended the dialog inside the board root or to . */ .wt26-cf__dialog .wt26-cf__filters, .wt26-cf--has-dialog .wt26-cf__dialog .wt26-cf__filters { display: block; } .wt26-cf--js .wt26-cf__filters-toggle, .wt26-cf--js .wt26-cf__map-toggle { display: inline-flex; } .wt26-cf--js:not(.wt26-cf--map-open) .wt26-cf__map { display: none; } } /* ---------- Results: loading status, toolbar, search, map ---------- */ /* Inline, non-blocking loading status: `#wt_job_overlay.wt26-cf__overlay [role=status]` holding `span.wt26-cf__spinner` and the screen-reader text in `.wt26-cf__overlay-text`. board.js flips aria-busy; the block is only painted while a fetch is running (the legacy overlay was a page mask). */ .wt26-cf__overlay { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0; font-size: max(0.9375em, 0.9375rem); font-weight: 600; } .wt26-cf__overlay:not([aria-busy="true"]), .wt26-cf__overlay[hidden] { display: none; } .wt26-cf__spinner { flex: 0 0 auto; display: inline-block; width: 20px; height: 20px; border: 3px solid var(--wt26-cf-border); border-top-color: var(--wt26-cf-accent); border-radius: 50%; animation: wt26-cf-spin 0.8s infinite linear; } /* The legacy inner `span.spinner` is kept for per-site CSS; a theme's own `.spinner` artwork must not paint inside ours. */ .wt26-cf__spinner > .spinner { display: none; } @keyframes wt26-cf-spin { 100% { transform: rotate(360deg); } } .wt26-cf__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--wt26-cf-border); } .wt26-cf__heading { margin: 0; font-size: max(1.25em, 1.25rem); font-weight: 700; line-height: 1.3; } .wt26-cf__heading:focus { outline: none; } .wt26-cf__heading:focus-visible { outline: 3px solid var(--wt26-cf-focus); outline-offset: 4px; border-radius: 2px; } /* The live result count. render.php prints it as `span.wt26-cf__result-count [data-wt26-cf-count]` inside the h2 heading, where it inherits the heading type; board.js falls back to a stand-alone `p.wt26-cf__result-count` on markup without one, and that reads as a muted line. */ .wt26-cf__result-count { margin: 0; font-size: max(0.9375em, 0.9375rem); opacity: var(--wt26-cf-muted-opacity); font-variant-numeric: tabular-nums; } .wt26-cf__heading .wt26-cf__result-count { font-size: inherit; font-weight: inherit; line-height: inherit; opacity: 1; } .wt26-cf__tools, .wt26-cf__toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; } /* Sort: render.php puts the class on the