/* ============================================================
   NPF Core — job search / listing page
   Ported from nonprofit/freelancer-list.html.

   This page keeps the theme's own markup in full: the search
   shortcode owns the filter form, the sort dropdown, the
   grid/list switch and the AJAX that repaints results. Nothing
   here renames, moves or replaces an element — the design is
   applied to what the theme already outputs, so every filter
   and handler keeps working.

   That means the selectors below are the theme's, not the
   design's. Each block notes which design rule it stands in for.
   ============================================================ */

.npf-search {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  /* Used by the hover fill on the result cards. It is defined on .npf-dash in
     the dashboard stylesheet, so the rules copied from there referenced it —
     and without it here `background: var(--npf-primary-light)` resolved to
     nothing and the hover did visibly nothing at all. */
  --npf-primary-light: #6ac9fc;
  --npf-ink: #020b18;
  --npf-muted: #677489;
  --npf-text-soft: #5f6c72;
  --npf-line-soft: #eef1f6;
  --npf-bed: #f9fbff;
  --npf-panel: #f5f5f5;
  --npf-radius: 18px;
  --npf-radius-sm: 14px;
  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.28s var(--npf-ease);
  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-font-head: "Roboto", "Inter", system-ui, sans-serif;
}

/* ---------- The bed ----------
   .listing — gradient bed, padding-block 96/100, full-bleed out
   of the theme's 1170px content cap. */
.npf-search .wpj-page-content {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 55%);
  width: 100%;
  max-width: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.npf-search #content-full-ov {
  font-family: var(--npf-font-body);
  color: var(--npf-ink);
  width: min(1248px, 100% - 48px);
  /* The theme floats this container left; a float ignores auto margins, so it
     has to be cleared before the measure can centre. */
  float: none;
  margin-inline: auto;
  padding-block: 40px 100px;
}

/* ---------- Breadcrumb ----------
   .breadcrumb — Home › Services › current. Rendered by
   NPF_Search_Jobs::breadcrumb() above the listing, so it carries
   the same measure as #content-full-ov to line up with the title. */
.npf-breadcrumb {
  font-family: var(--npf-font-body);
}

.npf-breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: min(1248px, 100% - 48px);
  margin-inline: auto;
  /* The design's rhythm: 96px of air above the trail (the section's own top
     padding), then only 24px down to the heading — the breadcrumb belongs to
     the title, not floating between the two. */
  padding-top: 96px;
  padding-bottom: 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.npf-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--npf-ink);
  transition: color var(--npf-t);
}

/* The design fades only the Home link. */
.npf-breadcrumb a:first-child {
  color: rgba(1, 8, 16, 0.6);
}

.npf-breadcrumb a:hover {
  color: var(--npf-primary);
}

.npf-breadcrumb a svg {
  width: 20px;
  height: 20px;
}

.npf-breadcrumb__sep {
  color: var(--npf-ink);
  margin-right: -5px;
}

.npf-breadcrumb__current {
  color: var(--npf-ink);
  font-weight: 500;
}

/* The breadcrumb supplies the top spacing, so the listing below starts flush.
   It is echoed between get_header() and the theme's listing part, which makes
   it a sibling of #content-full-ov inside .wpj-page-content. */
.npf-search .npf-breadcrumb + #content-full-ov {
  padding-top: 0;
  margin-top: 0 !important;
}

@media (max-width: 860px) {
  .npf-breadcrumb__inner {
    width: min(1248px, 100% - 32px);
    padding-top: 61px;
    padding-bottom: 18px;
    font-size: 15px;
  }
}

/* ---------- Head bar ----------
   .listing-head h1 + .filter-bar. The theme puts the title, the
   grid/list switch and the sort dropdown in one Semantic grid
   row; it is re-laid as the design's title-over-filter-bar. */
.npf-search .ui.basic.notpadded.segment.job {
  margin: 0 0 20px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.npf-search .ui.basic.notpadded.segment.job .ui.grid {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 !important;
  flex-wrap: wrap;
}

.npf-search .ui.basic.notpadded.segment.job .ui.grid > .column {
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
}

.npf-search .ui.basic.notpadded.segment.job .ui.grid > .nine.wide.column {
  flex: 1 1 320px;
}

/* .listing-head h1 — clamp(2.3rem, 5vw, 3.3rem), -0.025em */
.npf-search h1.ui.header {
  margin: 0 !important;
  font-family: var(--npf-font-head);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--npf-ink);
}

/* .sort label + .select */
.npf-search .filter-jobs-by {
  display: flex;
  align-items: center;
  gap: 12px;
}

.npf-search .filter-jobs-by label,
.npf-search .filter-jobs-by > span {
  font-family: var(--npf-font-head);
  font-size: 0.95rem;
  color: var(--npf-text-soft);
  white-space: nowrap;
}

/* ---------- Layout ----------
   .listing-layout — 275px sidebar + results, 29px gap. The two
   are siblings in the theme's markup, so the parent becomes the
   grid and the head bar spans it. */
.npf-search #content-full-ov {
  display: grid;
  grid-template-columns: 275px minmax(0, 1fr);
  gap: 29px;
  align-items: start;
}

.npf-search #content-full-ov > .ui.basic.notpadded.segment.job {
  grid-column: 1 / -1;
}

.npf-search .new-left-sidebar,
.npf-search .right_container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  min-width: 0;
}

/* .filters — sticky sidebar */
.npf-search .new-left-sidebar {
  position: sticky;
  top: 16px;
}

/* On a category archive the sidebar holds two panels — the category list and
   the filter form — which the design spaces as `.filters { gap: 22px }`. */
.npf-search .new-left-sidebar > * {
  margin-bottom: 22px !important;
}

.npf-search .new-left-sidebar > *:last-child {
  margin-bottom: 0 !important;
}

.npf-search .new-left-sidebar ul.xoxo {
  list-style: none;
  padding: 0;
  margin: 0 0 22px !important;
}

/* ---------- Category list ----------
   The archive's sibling-category panel, standing in for the design's
   `.filter-group` + `.category-list`. */
.npf-search .new-subcategory-listing {
  background: var(--npf-panel) !important;
  border: 0 !important;
  border-radius: var(--npf-radius) !important;
  box-shadow: none !important;
  padding: 22px 22px 24px !important;
  margin: 0 !important;
}

.npf-search .new-subcategory-listing .subcat-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.npf-search .new-subcategory-listing .subcat-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .category-list a — 5px block padding, nudges right and turns primary on
   hover. The current term is the design's `.is-active`. */
.npf-search .new-subcategory-listing .subcat-list a {
  display: block;
  padding: 6px 0;
  font-family: var(--npf-font-head);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--npf-ink);
  transition: color var(--npf-t), padding-left var(--npf-t);
}

.npf-search .new-subcategory-listing .subcat-list a:hover {
  color: var(--npf-primary);
  padding-left: 5px;
}

/* The term you are currently viewing — the design's `.is-active`.
 *
 * The theme gives it no class: it marks it with an inline
 * `font-weight:900; font-style:italic; color:…` on the anchor, which is the
 * only hook available, hence the attribute selector. Inline styles beat
 * everything but !important, so these three declarations need it. If the theme
 * ever switches to a class, this selector stops matching and the item simply
 * renders like the rest — it degrades quietly rather than breaking. */
.npf-search .new-subcategory-listing .subcat-list a[style*="italic"] {
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--npf-primary) !important;
}

/* The theme's "show all / show less" toggle — the design's `.link-arrow`. */
.npf-search .new-subcategory-listing .js-show-categories-btn,
.npf-search .new-subcategory-listing .show-all-categories,
.npf-search .new-subcategory-listing > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--npf-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--npf-primary);
}

.npf-search .new-subcategory-listing .js-show-categories-btn:hover,
.npf-search .new-subcategory-listing .show-all-categories:hover,
.npf-search .new-subcategory-listing > a:hover {
  color: var(--npf-primary-dark);
}

/* ---------- Category description ----------
   .listing-head p — sits above the results on an archive. */
.npf-search .cat-description {
  margin: 0 0 24px !important;
  color: var(--npf-text-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 1120px;
}

.npf-search .cat-description p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Filter panel ----------
   .filter-group — #f5f5f5, radius, 30px 25px 33px. */
.npf-search .new-left-sidebar .ui.segment {
  background: var(--npf-panel) !important;
  border: 0 !important;
  border-radius: var(--npf-radius) !important;
  box-shadow: none !important;
  padding: 26px 22px 28px !important;
  margin: 0 !important;
}

.npf-search .sidebar-wrapper,
.npf-search .new-left-sidebar form.ui.form {
  width: 100% !important;
}

/* ---------- Search panel ----------
   The design's first sidebar card. npf-search.js lifts the theme's search row
   out of the filter form and drops it here, so it needs the panel treatment
   the `.ui.segment` rule above gives the blocks it used to sit inside. */
.npf-search .new-left-sidebar > .npf-sidebar-search {
  display: block;
  background: var(--npf-panel);
  border-radius: var(--npf-radius);
  padding: 18px;
  margin: 0 0 22px !important;
}

.npf-search .new-left-sidebar > .npf-sidebar-search input[type="text"] {
  width: 100%;
  margin: 0 !important;
}

/* The row's other occupant is the mobile Filters toggle, which the drawer
   button in the sort bar already covers on the widths where it appears. */
.npf-search .new-left-sidebar > .npf-sidebar-search .filter-box {
  display: none !important;
}

/* .filter-group__title */
.npf-search .new-left-sidebar .field > label,
.npf-search .filter-container > .field > label,
.npf-search .filter-container h3,
.npf-search .filter-container h4 {
  font-family: var(--npf-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--npf-ink);
  margin-bottom: 10px;
}

/* Every control in the panel sits on white, the way the design's
   .filter-search and .price-pills do. */
.npf-search .new-left-sidebar input[type="text"],
.npf-search .new-left-sidebar input[type="search"],
.npf-search .new-left-sidebar input[type="number"],
.npf-search .new-left-sidebar select,
.npf-search .new-left-sidebar .ui.dropdown,
.npf-search .new-left-sidebar .ui.selection.dropdown {
  background: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--npf-radius-sm) !important;
  box-shadow: none !important;
  min-height: 46px;
  padding: 12px 16px !important;
  font-family: var(--npf-font-body);
  font-size: 0.95rem;
  color: var(--npf-ink);
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

.npf-search .new-left-sidebar input::placeholder,
.npf-search .new-left-sidebar .ui.dropdown > .default.text {
  color: var(--npf-muted);
}

.npf-search .new-left-sidebar input:focus,
.npf-search .new-left-sidebar .ui.selection.dropdown:focus,
.npf-search .new-left-sidebar .ui.selection.dropdown.active {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
  outline: none !important;
}

.npf-search .new-left-sidebar .ui.selection.dropdown > .dropdown.icon {
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  right: 14px;
  color: var(--npf-text-soft);
}

.npf-search .filter-container > .field,
.npf-search .filter-container > div {
  margin-bottom: 14px;
}

/* The tag list and the badge select are unhooked in PHP (NPF_Search_Jobs).
   This is the net for an install where that hook does not land — the panel
   should never show either control, and a dead dropdown is worse than a
   missing one. */
.npf-search .new-left-sidebar .field:has(select[name="tag[]"]),
.npf-search .new-left-sidebar .field:has(select[name="badge"]) {
  display: none;
}

/* Delivery row — a read-only value beside its unit, then the slider. The
   generic input rule above pads every control to 46px, which squeezed this
   two-character box down to 34px of usable width. */
.npf-search .new-left-sidebar .days-field {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* The whole delivery control was the faintest thing in the panel: the theme's
   `.lighter` grey on the label, a white track on a near-white card, and no
   fill at all to show where the handle sits. Every other control here is a
   bordered white box on that card, so this one read as decoration rather than
   as something a buyer could set. It is given the same weight as a field
   label, and the track is given an edge and a filled range. */
.npf-search .new-left-sidebar .wrapper-delivery-time-search .lighter {
  color: var(--npf-ink);
  font-weight: 600;
  font-size: 0.95rem;
}

/* The theme pins this to `width: 30px !important` on purpose — it is a compact
   read-out of the slider, not a field you type in. So the width is left alone
   and only the padding this stylesheet added is taken back off; at 30px there
   is no room for the 16px side padding the other controls get. */
.npf-search .new-left-sidebar input.max-days-input {
  flex: none;
  text-align: center;
  padding: 10px 2px !important;
  min-height: 40px;
}

.npf-search .new-left-sidebar .max-days-label {
  font-size: 0.92rem;
  color: var(--npf-text-soft);
}

/* Delivery slider */
.npf-search .new-left-sidebar .ui-slider,
.npf-search .new-left-sidebar .noUi-target {
  background: #fff;
  border: 1px solid var(--npf-line-soft);
  border-radius: 999px;
  box-shadow: none;
  height: 8px;
}

/* The filled part, from zero to the handle — jQuery UI draws it as
   `.ui-slider-range` inside the track and leaves it transparent, so the
   control gave no reading at a glance. */
.npf-search .new-left-sidebar .ui-slider .ui-slider-range,
.npf-search .new-left-sidebar .noUi-connect {
  background: var(--npf-primary);
  border: 0;
  border-radius: 999px;
}

.npf-search .new-left-sidebar .ui-slider-handle,
.npf-search .new-left-sidebar .noUi-handle {
  background: var(--npf-primary);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(2, 11, 24, 0.18);
}

/* Filter Results button — the design's primary .btn */
.npf-search .new-left-sidebar .ui.button,
.npf-search .new-left-sidebar button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 14px 24px !important;
  font-family: var(--npf-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: background var(--npf-t), transform var(--npf-t);
}

.npf-search .new-left-sidebar .ui.button:hover,
.npf-search .new-left-sidebar button[type="submit"]:hover {
  background: var(--npf-primary-dark) !important;
  transform: translateY(-2px);
}

/* ---------- Results ----------
   .results-grid — 3 columns, 19px gap. The theme prints the
   cards inside .post_results; only the container becomes a grid,
   the cards themselves keep their own markup. */
.npf-search .post-result-advanced-search {
  margin-bottom: 0 !important;
}

/* The cards are not children of .post_results — the theme nests them in a
   Semantic row (`.wpj-load-more-target.ui.three.cards`) which is what actually
   lays them out. Gridding the wrapper turned that whole row into a single
   302px column, so the grid belongs on the row itself.

   The grid/list switch marks list view by ADDING `list-grid` to the row, so
   the column grid is keyed to its absence. In list view the cards keep the
   theme's horizontal layout (image left, details right) and simply stack. */
.npf-search .wpj-load-more-target.cards:not(.list-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;
  align-items: start;
  margin: 0 !important;
}

/* The row also carries the theme's `cf` clearfix, whose ::before/::after
   become grid items in a grid container — they were taking the first and last
   cells and pushing every card one column along. Clearfix is meaningless here
   anyway now that nothing floats. */
.npf-search .wpj-load-more-target.cards::before,
.npf-search .wpj-load-more-target.cards::after {
  display: none;
}

.npf-search .wpj-load-more-target.cards > .ui.card,
.npf-search .wpj-load-more-target.cards > .column {
  width: auto !important;
  margin: 0 !important;
  min-width: 0;
}

/* List view — one full-width row per card. */
.npf-search .wpj-load-more-target.cards.list-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0 !important;
}

/* Load-more sits below the grid, full width. */
.npf-search .load-more-button {
  margin-top: 28px;
  text-align: center;
}

/* ---------- Filter panel polish ----------
   The controls are Semantic UI dropdowns, so their chrome comes from
   semantic.css defaults — a grey chip, a near-black serif-ish x, a square
   menu. These bring the panel in line with the rest of the design and give it
   some feedback to interact with. Markup and handlers untouched.
   ------------------------------------------------------------------ */

/* Clear (x) on the category field. Semantic renders it as an icon glyph in
   near-black at 13px; the design's controls use the same blue as the header
   icons, so it becomes a round, tappable target that tints on hover. */
.npf-search .new-left-sidebar .ui.dropdown > .clear-dropdown,
.npf-search .new-left-sidebar .ui.dropdown > i.icon.x {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  /* This dropdown is `clearable` and has no caret of its own, so the x sits at
     the field's own inset rather than clearing one. */
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  color: var(--npf-primary) !important;
  font-size: 12px !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t);
}

.npf-search .new-left-sidebar .ui.dropdown > .clear-dropdown:hover,
.npf-search .new-left-sidebar .ui.dropdown > i.icon.x:hover {
  background: var(--npf-primary-soft);
  color: var(--npf-primary-dark) !important;
}

/* The caret, same blue.
   On the multiple (tag) dropdown Semantic leaves this in normal flow, so it
   claimed a line of its own above the pill and pushed the field to 103px.
   Taking it out of flow collapses that, and the field gets right padding so a
   pill can never run underneath it. */
.npf-search .new-left-sidebar .ui.dropdown > .dropdown.icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  color: var(--npf-primary) !important;
  opacity: 1 !important;
  transition: transform var(--npf-t);
}

.npf-search .new-left-sidebar .ui.multiple.dropdown {
  padding-right: 40px !important;
}

.npf-search .new-left-sidebar .ui.dropdown.active > .dropdown.icon {
  transform: translateY(-50%) rotate(180deg);
}

/* ---------- Selected tag pills ----------
   Semantic ships these as a grey chip with a faded x. The design's chip is the
   soft brand tint with the primary colour on top — the same treatment the
   result cards use for their category tag. */
.npf-search .new-left-sidebar .ui.dropdown a.ui.label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  margin: 3px 5px 3px 0 !important;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 12px !important;
  line-height: 1.2;
  text-transform: none;
  transition: background var(--npf-t);
}

.npf-search .new-left-sidebar .ui.dropdown a.ui.label:hover {
  background: #d2e4ff !important;
}

.npf-search .new-left-sidebar .ui.dropdown a.ui.label > i.delete.icon {
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--npf-primary) !important;
  opacity: 1 !important;
  transition: color var(--npf-t);
}

.npf-search .new-left-sidebar .ui.dropdown a.ui.label > i.delete.icon:hover {
  color: #c0392b !important;
}

/* ---------- Open dropdown menu ----------
   Semantic gives it square lower corners, a hairline shadow and 1px dividers.
   This detaches it from the field and gives the rows a hover state. */
.npf-search .new-left-sidebar .ui.dropdown .menu {
  margin-top: 6px !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: var(--npf-radius-sm) !important;
  box-shadow: 0 12px 28px rgba(2, 11, 24, 0.12) !important;
  overflow: hidden auto;
  padding: 6px !important;
}

.npf-search .new-left-sidebar .ui.dropdown .menu > .item {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-family: var(--npf-font-body);
  font-size: 14px !important;
  line-height: 1.4;
  color: var(--npf-ink) !important;
  transition: background var(--npf-t), color var(--npf-t);
}

.npf-search .new-left-sidebar .ui.dropdown .menu > .item:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

.npf-search .new-left-sidebar .ui.dropdown .menu > .item.selected,
.npf-search .new-left-sidebar .ui.dropdown .menu > .item.active {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
  font-weight: 600 !important;
}

/* A slimmer scrollbar so a long category list does not show the OS default. */
.npf-search .new-left-sidebar .ui.dropdown .menu::-webkit-scrollbar {
  width: 8px;
}

.npf-search .new-left-sidebar .ui.dropdown .menu::-webkit-scrollbar-thumb {
  background: #d7dde6;
  border-radius: 999px;
}

.npf-search .new-left-sidebar .ui.dropdown .menu::-webkit-scrollbar-thumb:hover {
  background: var(--npf-primary);
}

/* ---------- Interaction ----------
   The panel had no feedback at all; these give the controls a hover state to
   match the buttons and cards elsewhere on the page. */
.npf-search .new-left-sidebar input[type="text"]:hover,
.npf-search .new-left-sidebar input[type="search"]:hover,
.npf-search .new-left-sidebar input[type="number"]:hover,
.npf-search .new-left-sidebar .ui.selection.dropdown:hover {
  border-color: #c7d8ef !important;
}

.npf-search .new-left-sidebar .ui.selection.dropdown.active,
.npf-search .new-left-sidebar .ui.selection.dropdown.visible {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

/* The delivery slider handle grows a little under the cursor. */
.npf-search .new-left-sidebar .ui-slider-handle:hover,
.npf-search .new-left-sidebar .noUi-handle:hover {
  transform: scale(1.12);
}

.npf-search .new-left-sidebar .ui-slider-handle,
.npf-search .new-left-sidebar .noUi-handle {
  transition: transform var(--npf-t), box-shadow var(--npf-t);
}

/* ---------- Result card ----------
   Copied from the "Recommended for you" cards on the logged-in dashboard
   (npf-dashboard.css, scoped there to `.npf-recommend`) so the two are
   identical — same markup, same rules, only the scope rewritten to this
   page's `.right_container`.

   That block already solved things worth keeping:
     - the <img> carries NO src; the theme paints the photo as an inline
       background-image, so it is sized with `background-size: contain`.
       `cover` crops a wide source vertically and, because the inline style
       anchors to the bottom, throws away the top — the face.
     - the tier badge needs `transform: none`, or the theme's translate pulls
       it up and the media box clips its laurels.
     - the rating chip zeroes its own font-size to swallow a bare " Verified"
       text node that has no element to hide, and the star row restores it.
     - the seller row and the list description are hidden, as in the design.

   Regenerate from npf-dashboard.css rather than hand-editing here, so the two
   pages cannot drift apart.
   ------------------------------------------------------------------ */

.npf-search .right_container,
.npf-search .right_container > * {
  max-width: 100%;
}

.npf-search .right_container ul.listing-job {
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-search .right_container li.layout_jobs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-search .right_container .row.ui,
.npf-search .right_container .wpj-load-more-target {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14.6px;
  row-gap: 35px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.npf-search .right_container .ui.card,
.npf-search .right_container .job-card {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid #e4e4e4 !important;
  border-radius: 14.6px !important;
  padding: 4.561px !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden;
  transition: background var(--npf-t), border-color var(--npf-t);
}

.npf-search .right_container .ui.card:hover,
.npf-search .right_container .job-card:hover {
  background: var(--npf-primary-light) !important;
  border-color: #e4e4e4 !important;
}

.npf-search .right_container .ui.card:hover .iscu_listings_years_of_experience {
  color: rgba(255, 255, 255, 0.9);
}

.npf-search .right_container #job_listings .ui.card > .image,
.npf-search .right_container .ui.card > .image {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 1.03 / 1;
  overflow: hidden;
  border-radius: 14.6px !important;
  /* The brand tint behind the photo, matching "Recommended for you" — that grid
     is the reference for this card, and the listing pages render the same card.
     The photos are remove.bg cut-outs sized `contain`, so this box shows around
     and behind every subject: it *is* the photo's background, and leaving it as
     the card's white was what made the same person look different here than on
     the dashboard. See npf-dashboard.css for the canonical block. */
  background: var(--npf-primary-soft, #e1eeff);
}

.npf-search .right_container .ui.card {
  display: flex !important;
  flex-direction: column;
  height: auto !important;
}

.npf-search .right_container .ui.card > .image .wpj-carousel,
.npf-search .right_container .ui.card > .image .owl-stage-outer,
.npf-search .right_container .ui.card > .image .owl-stage,
.npf-search .right_container .ui.card > .image .owl-item,
.npf-search .right_container .ui.card > .image .owl-item > * {
  height: 100% !important;
}

.npf-search .right_container .ui.card > .image .owl-stage-outer {
  background: #fff;
}

.npf-search .right_container #job_listings .ui.card > .image img:not(.iscu_listings_user_badge),
.npf-search .right_container .ui.card > .image img:not(.iscu_listings_user_badge) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
  left: auto !important;
  translate: none;
  /* The slate wash the cut-outs stand on. On the dashboard this arrives free,
     from iscu-public.css's `#job_listings .ui.card > .image img` — but that ID
     rule needs a `#job_listings` ancestor, which the listing pages do not have,
     so the same card rendered its photos on bare white here. Set explicitly to
     the theme's own value so both grids match. */
  background-color: #acbdc5;
  transition: none;
  /* These <img> elements carry NO src — the theme paints the photo through an
     inline background-image, and that inline style also picks the fit:
     `contain` when the source is taller than it is wide, `cover` otherwise,
     anchored to `bottom`. `cover` is what cropped the heads: a wide source
     scaled to fill a 1.03:1 box overflows vertically, and anchoring the
     overflow to the bottom throws away the top — where the face is.
     `contain` fits the whole source every time, so nothing is ever cut off.
     Position is left to the inline style, which stands the subject on the
     bottom edge. Most of these photos are cut-outs on transparency, so the
     letterboxing `contain` leaves is invisible. */
  background-size: contain !important;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
}

.npf-search .right_container #job_listings .ui.card > .image img[src=""],
.npf-search .right_container .ui.card > .image img[src=""] {
  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.npf-search .right_container .ui.card > .image .owl-item > a,
.npf-search .right_container .ui.card > .image .owl-item > a > div,
.npf-search .right_container .ui.card > .image .owl-item a,
.npf-search .right_container .ui.card > .image .owl-item a > div {
  display: block;
  width: 100%;
  height: 100%;
}

/* The tier shield is not shown on cards — it ranked freelancers by a level the
   platform assigns, in the corner of a card a nonprofit reads as a quality
   mark. Same call as on the dashboard and profile grids (npf-dashboard.css) and
   on the home and expert cards, which simply stop drawing it; here the badge
   comes from the child theme's card template via iscu, so it is hidden rather
   than unhooked and the third-party template is left alone.

   `.right_container` covers both routes this stylesheet serves — the category
   archive and the search page — and catches the badge whether or not the card
   script has moved it onto the image yet.

   The positioning below is kept, commented-in, so restoring the badge is a
   matter of deleting this rule. */
.npf-search .right_container .iscu_listings_user_badge {
  display: none !important;
}

.npf-search .right_container #job_listings .ui.card > .image img.iscu_listings_user_badge,
.npf-search .right_container .iscu_listings_user_badge {
  position: absolute;
  top: 14.6px;
  right: 15px;
  left: auto !important;
  bottom: auto !important;
  translate: none;
  transform: none !important;
  z-index: 3;
  width: 50px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain;
  pointer-events: none;
}

.npf-search .right_container .image .iscu_listings_user_points,
.npf-search .right_container .iscu_listings_user_points {
  position: absolute;
  bottom: 11px;
  right: 11px;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 34.7px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 10px !important;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(19, 24, 36, 0.12);
  line-height: 1;
  /* See npf-dashboard.css: the zeroed font-size dates from the loose
     " Verified" text node this chip used to carry. NPF_Claims replaces that
     node with a labelled `.npf-explevel`, which sets its own size. */
  font-size: 0;

  /* Room for the label, capped so the chip cannot run off the card. */
  max-width: calc(100% - 22px);
  flex-wrap: wrap;
  height: auto;
  min-height: 34.7px;
  padding: 5px 10px !important;
  gap: 4px;
}

.npf-search .right_container .iscu_listings_user_points .npf-explevel__label { font-size: 12.5px; }
.npf-search .right_container .iscu_listings_user_points .npf-explevel { gap: 4px; }

.npf-search .right_container .iscu_listings_user_points .wpj-star-rating-static {
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
}

.npf-search .right_container .iscu_listings_user_points i.star {
  font-size: 15px;
  margin: 0 1px;
}

.npf-search .right_container .card-image-icons {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 3;
}

.npf-search .right_container .ui.card > .content.flex-parent {
  display: none !important;
}

.npf-search .right_container .ui.card .cards-title {
  width: 100% !important;
  padding: 27.4px 6px 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

.npf-search .right_container .ui.card .cards-title .list-header {
  display: block;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 23px;
  color: var(--npf-ink);
  /* One line, ellipsised — the same treatment "Recommended for you" gives it.
     A second line was not just longer: `.cards-title` clips its overflow, so a
     two-line title had its descenders sliced through the middle, and the cards
     in a row no longer agreed on where the experience line sat. */
  height: auto !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The theme indents the title by .75em inside .cards-title
   (cards.css:139 `margin: 0 .75em`), which left it starting 13px to the right
   of the category chip above it and the experience line below — the three are
   meant to share one left edge. Same neutralisation npf-dashboard.css makes;
   the selector carries `.wpj-card-style-3` to outrank the theme's own. */
.npf-search .right_container .wpj-card-style-3.ui.card .cards-title.list-70-right .list-header,
.npf-search .right_container .wpj-card-style-3.ui.card .cards-title.list-70-right .description {
  margin-left: 0;
  margin-right: 0;
}

.npf-search .right_container .ui.card .cards-title .list-header:hover {
  color: var(--npf-primary);
}

.npf-search .right_container .ui.card .iscu_listings_years_of_experience,
.npf-search .right_container .ui.card .cards-title .desc {
  color: var(--npf-muted);
  font-size: 14px;
  line-height: 23px;
  margin-top: 10.9px;
}

.npf-search .right_container .ui.card > .iscu_listings_years_of_experience {
  /* 6px matches .cards-title's own padding, so the text lines up with the
     title above it and the heart sits 6px off the card's inner edge. */
  padding: 0px 6px;
  /* Padding alone still left the row inset — the theme gives this div
     `margin: … 18px …`, which is what was actually pushing it in. */
  margin-left: 0;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.npf-search .right_container .upb_add_remove_links {
  flex: none;
  margin: 0;
  line-height: 1;
}

.npf-search .right_container .upb_add_remove_links a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.npf-search .right_container .upb_add_remove_links i.heart.icon {
  font-size: 18px;
  width: auto;
  margin: 0;
}

.npf-search .right_container .upb_add_remove_links .full-heart,
.npf-search .right_container .upb_add_remove_links .empty-heart {
  display: none;
}

.npf-search .right_container .ui.card .description,
.npf-search .right_container .ui.card .description.visible-on-list {
  display: none !important;
}

.npf-search .right_container .npf-card-tags {
  display: flex;
  gap: 5.5px;
  flex-wrap: wrap;
  margin-bottom: 10.9px;
}

.npf-search .right_container .npf-tag {
  display: inline-flex;
  align-items: center;
  height: 23.7px;
  padding: 0 9.1px;
  border-radius: 7.3px;
  background: var(--npf-primary-soft);
  color: var(--npf-muted);
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* The grid/list view switch, gone on every width.
   `-absolute` was already hidden inside the results container; `-relative` is
   the copy the category archive prints into the sort bar, and it was only
   being hidden on mobile. Both go: the design has one card layout, so the
   control offered a second view the skin does not style, and the pair of grey
   icons read as decoration next to "Sort by". Hidden rather than removed —
   the theme still prints it and its JS still binds, so nothing errors. */
.npf-search .grid-switch-absolute,
.npf-search .grid-switch-relative,
.npf-search .right_container .grid-switch-absolute {
  display: none !important;
}

.npf-search .right_container img {
  border-radius: 14.6px;
}

.npf-search .right_container .load-more-button:hover,
.npf-search .right_container .wpj-load-more:hover,
.npf-search .right_container .load-more:hover {
  background: var(--npf-primary-dark);
  transform: translateY(-2px);
}

.npf-search .right_container .load-more-button.loading,
.npf-search .right_container .wpj-load-more.loading {
  color: transparent;
  text-indent: 0;
  transform: none;
}

.npf-search .right_container .load-more-button.loading::after,
.npf-search .right_container .wpj-load-more.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: npf-load-more-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .npf-search .right_container .load-more-button.loading::after,
  .npf-search .right_container .wpj-load-more.loading::after {
    animation-duration: 2.4s;
  }
}

.npf-search .right_container .mb75 {
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .npf-search .right_container .row.ui,
  .npf-search .right_container .wpj-load-more-target {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .npf-search .right_container .row.ui,
  .npf-search .right_container .wpj-load-more-target {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 19px;
  }

  .npf-search .right_container .load-more-button::before,
  .npf-search .right_container .wpj-load-more::before {
    display: none;
  }

  .npf-search .right_container .load-more-button,
  .npf-search .right_container .wpj-load-more,
  .npf-search .right_container .load-more {
    width: 100%;
    max-width: 226px;
    margin-top: 24px;
  }
}

@media (max-width: 560px) {
  .npf-search .right_container .row.ui,
  .npf-search .right_container .wpj-load-more-target {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .npf-search .right_container .ui.card .cards-title {
    padding: 18px 7px 0 !important;
  }

  .npf-search .right_container .ui.card > .iscu_listings_years_of_experience {
    padding: 0 7px 14px;
  }

  .npf-search .right_container .npf-card-tags {
    gap: 5px;
    flex-wrap: nowrap;
    margin-bottom: 7px;
  }

  .npf-search .right_container .npf-tag {
    height: auto;
    font-size: 0.472rem;
    line-height: 1;
    padding: 3.4px 5.5px;
    white-space: nowrap;
  }

.npf-search .right_container .ui.card .cards-title .list-header {
    height: auto !important;
    margin-bottom: 0 !important;
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .npf-search .right_container .ui.card .iscu_listings_years_of_experience,
  .npf-search .right_container .ui.card .cards-title .desc {
    font-size: 0.55rem;
    line-height: 1.4;
    margin-top: 8px;
  }

  .npf-search .right_container .image .iscu_listings_user_points,
  .npf-search .right_container .iscu_listings_user_points {
    height: auto;
    padding: 4px 6px !important;
    bottom: 7px;
    right: 7px;
  }

  .npf-search .right_container .iscu_listings_user_points .wpj-star-rating-static,
  .npf-search .right_container .iscu_listings_user_points i.star {
    font-size: 0.72rem;
  }

  .npf-search .right_container #job_listings .ui.card > .image img.iscu_listings_user_badge,
  .npf-search .right_container .iscu_listings_user_badge {
    width: 26px !important;
    top: 7px;
    right: 8px;
  }
}

/* ---------- Badge sizing on the search route ----------
   The two listing routes are pinned to 145px by different rules:

     category archive -> `#job_listings .ui.card > .image img`      (1,3,1)
     search page      -> `.page-id-28 .ui.card > .image img`        (0,4,1)

   The copied block answers the first, because the dashboard shares that
   container id. The search page has no #job_listings at all — it is page 28,
   so iscu-public.css targets it by body class instead. This carries enough
   classes to outrank that without needing an id.
   ------------------------------------------------------------------ */
.npf-search .right_container .ui.card > .image img.iscu_listings_user_badge {
  position: absolute;
  top: 14.6px;
  right: 15px;
  left: auto !important;
  bottom: auto !important;
  translate: none;
  /* The theme applies a translate that pulls the badge up by half its height;
     overriding `top` alone does not cancel it, and the media's overflow then
     clips the laurels. */
  transform: none !important;
  z-index: 3;
  width: 50px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 560px) {
  .npf-search .right_container .ui.card > .image img.iscu_listings_user_badge {
    width: 26px !important;
  }
}

/* ---------- Pagination ----------
   .pagination / .page-btn from the design. Built by npf-search.js from the
   theme's Load More state, which already knows the page count.
   ------------------------------------------------------------------ */
.npf-search .npf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 68px;
  flex-wrap: wrap;
}

.npf-search .npf-page-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-family: var(--npf-font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--npf-ink);
  background: #fff;
  border: 1px solid var(--npf-line-soft);
  cursor: pointer;
  transition: all var(--npf-t);
}

.npf-search .npf-page-btn:hover:not(:disabled) {
  border-color: var(--npf-primary);
  color: var(--npf-primary);
  transform: translateY(-2px);
}

.npf-search .npf-page-btn.is-active {
  background: var(--npf-primary);
  border-color: var(--npf-primary);
  color: #fff;
}

/* The arrows carry the brand colour even at rest. */
.npf-search .npf-page-arrow {
  border-color: var(--npf-primary);
  color: var(--npf-primary);
}

.npf-search .npf-page-arrow svg {
  width: 18px;
  height: 18px;
}

.npf-search .npf-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* The theme's Load More, superseded by the pager. !important because
   load-more.js sets an inline display:block on ready. */
.npf-search .load-more-button.npf-has-pager {
  display: none !important;
}

/* ---------- Fetching a page ----------
   Paging is AJAX. The only cue used to be the whole pager fading, which on a
   short results column read as nothing happening at all. Now the button that
   was clicked spins, and the grid it is about to replace dims — so the wait
   is attached to the control that caused it. */

.npf-search .npf-pagination.is-loading {
  pointer-events: none;
}

/* The spun button keeps its size and place in the row; only its label is
   swapped for the ring, so the pager's geometry does not shift mid-fetch. */
.npf-search .npf-page-btn.is-busy {
  position: relative;
  border-color: var(--npf-primary);
  background: #fff;
  /* Hides the "02" without removing it — the text still measures the button. */
  color: transparent;
  opacity: 1;
}

.npf-search .npf-page-btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--npf-primary-soft, #e1eeff);
  border-top-color: var(--npf-primary);
  border-radius: 50%;
  animation: npf-page-spin 0.6s linear infinite;
}

@keyframes npf-page-spin {
  to { transform: rotate(360deg); }
}

/* The outgoing results. Kept at a readable opacity rather than blanked: the
   reader keeps their place, and the change is legible as "this is being
   replaced" instead of "this broke". */
.npf-search .wpj-load-more-target.npf-results--busy {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .npf-search .npf-page-btn.is-busy::after { animation-duration: 1.6s; }
  .npf-search .wpj-load-more-target.npf-results--busy { transition: none; }
}

/* ---------- Mobile filter bar + drawer ----------
   Desktop keeps the sidebar in place, so the bar and its toggle only appear
   once the layout collapses. The drawer itself is the theme's own sidebar with
   a class toggled on it — nothing is moved or rebuilt.
   ------------------------------------------------------------------ */
.npf-search .npf-filter-bar,
.npf-search .npf-filters__head,
.npf-search .npf-filters-overlay {
  display: none;
}

@media (max-width: 860px) {
  /* .filter-bar__box — the grey bar holding the Filters button. */
  .npf-search .npf-filter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f2f4f5;
    border-radius: var(--npf-radius);
    padding: 12px 14px;
    margin-bottom: 26px;
  }

  /* .filters-toggle */
  .npf-search .npf-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--npf-line-soft);
    border-radius: 12px;
    padding: 12px 18px;
    font-family: var(--npf-font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--npf-ink);
    cursor: pointer;
    transition: border-color var(--npf-t), color var(--npf-t);
  }

  .npf-search .npf-filters-toggle svg {
    width: 18px;
    height: 18px;
  }

  .npf-search .npf-filters-toggle:hover {
    border-color: var(--npf-primary);
    color: var(--npf-primary);
  }

  /* .filters — off-canvas, slides in from the left. */
  .npf-search .new-left-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 210;
    width: min(340px, 88vw);
    max-width: none !important;
    background: #fff;
    padding: 18px !important;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.32s var(--npf-ease);
    box-shadow: 0 20px 60px rgba(2, 11, 24, 0.18);
  }

  .npf-search .new-left-sidebar.is-open {
    transform: none;
  }

  /* The desktop layout rule sets `width: auto !important` on this element, so
     the drawer's own width has to match that weight to get its measure. */
  .npf-search .new-left-sidebar {
    width: min(340px, 88vw) !important;
  }

  /* On mobile the theme collapses the filter fields to zero height and puts
     them behind its own blue toggle. Inside a drawer that toggle is redundant
     — the drawer *is* the filter panel — so the fields are expanded and the
     toggle hidden, which is how the design presents it. */
  .npf-search .new-left-sidebar .filter-container,
  .npf-search .new-left-sidebar .js-group-filters,
  .npf-search .new-left-sidebar .group-filters {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .npf-search .new-left-sidebar .filter-box {
    display: none !important;
  }

  /* The theme's own category truncation: three items, the rest in a hidden
     `.show-categories` list, and a full-width blue chevron button to reveal
     them. Inside a drawer that already scrolls, that button costs a tap to see
     a list that could simply be there — so the list is expanded and the button
     goes. Hidden, not removed: the theme still prints it and its slideDown
     handler still binds, so nothing errors. */
  .npf-search .new-left-sidebar .js-more-elements {
    display: none !important;
  }

  .npf-search .new-left-sidebar .show-categories,
  .npf-search .new-left-sidebar .js-all-elements {
    display: block !important;
    height: auto !important;
  }

  /* Room to scroll past the fixed bottom bar.
     The drawer is pinned `top: 0; bottom: 0`, so its last child ends flush with
     the viewport bottom — which is exactly where the 61px bottom bar sits. The
     "Filter Results" button was landing underneath it with no way to scroll
     further. The inset keeps the phone's home indicator clear too. */
  .npf-search .new-left-sidebar {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }

  /* .filters__head — title and close, drawer only. */
  .npf-search .npf-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-family: var(--npf-font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--npf-ink);
  }

  .npf-search .npf-filters__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--npf-panel);
    color: var(--npf-ink);
    cursor: pointer;
    transition: background var(--npf-t), color var(--npf-t);
  }

  .npf-search .npf-filters__close:hover {
    background: var(--npf-primary-soft);
    color: var(--npf-primary);
  }

  .npf-search .npf-filters__close svg {
    width: 20px;
    height: 20px;
  }

  /* .filters-overlay */
  .npf-search .npf-filters-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 15, 28, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--npf-t);
  }

  .npf-search .npf-filters-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* .sort — the design drops the sort control and the grid/list switch on
     mobile; the Filters drawer is the only control that fits the bar. */
  .npf-search .filter-jobs-by,
  .npf-search .grid-switch-relative,
  .npf-search .ui.basic.notpadded.segment.job .seven.wide.column {
    display: none !important;
  }

  .npf-search .npf-pagination {
    margin-top: 40px;
    gap: 10px;
  }

  .npf-search .npf-page-btn {
    width: 42px;
    height: 42px;
    font-size: 0.9rem;
  }
}

/* ---------- Responsive ----------
   Design: 2 columns and a 250px sidebar under 1100px, then a
   single column with the filters above the results. */
@media (max-width: 1100px) {
  .npf-search #content-full-ov {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
  }

  .npf-search .wpj-load-more-target.cards:not(.list-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .npf-search #content-full-ov {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 20px 64px;
    width: min(1248px, 100% - 32px);
  }

  /* The sidebar becomes the off-canvas drawer here — its `position: fixed`
     is set in the drawer block above, so it must not be reset to static. */

  .npf-search .ui.basic.notpadded.segment.job .ui.grid {
    gap: 14px;
  }
}

@media (max-width: 560px) {
  /* The design keeps a two-up grid right down to phone width. */
  .npf-search .wpj-load-more-target.cards:not(.list-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
    row-gap: 19px;
  }

  .npf-search h1.ui.header {
    font-size: 1.75rem;
  }
}

@media (max-width: 767px) {
  .npf-search .ui.basic.notpadded.segment.job{
    margin: 0 auto !important;
  }
}