/**
 * "Find an Expert" — the handful of rules the ported design does not cover.
 *
 * The layout, the sidebar, the drawer, the cards, the pager and every
 * breakpoint come from npf-home.css, which is the reference stylesheet ported
 * whole — freelancer-list.html included. Nothing here re-states any of that.
 *
 * What is here is only what the reference's static markup never needed:
 * - states the reference hard-codes into one element (an active category),
 * - controls that are links here where the reference used buttons,
 * - the disabled pager arrows and the empty result set, neither of which the
 *   static page ever shows.
 *
 * Loaded after npf-home.css and scoped the same way, so it wins ties without
 * !important.
 */

/* ==================================================================
   SIDEBAR — matched to the category archive.

   The values below are lifted from npf-search.css, which skins the sidebar on
   /job-categories/<term>/. That sidebar is the reference now: the two screens
   sit next to each other in the site and had visibly different panel padding,
   heading sizes and control heights, because one came from the ported design
   file and the other from the archive skin.

   Rather than reference npf-search.css (it is scoped `.npf-search`, a body
   class this page does not carry, and loading it here would drag in the whole
   job-card skin), the handful of properties that actually differ are restated
   against the design's own class names. Every number is copied, not
   re-estimated:

     panel            #f5f5f5, radius 18px, no border/shadow, 26px 22px 28px
     panel gap        22px, sticky top 16px
     group title      600, 1.05rem/1.4, -0.01em, 10px below
     category link    500, 0.98rem/1.45, 6px block padding
     active category  600, primary, no indent
     "view all"       600, 0.95rem, primary, 10px above, no underline
     controls         white, 1px transparent border, radius 14px,
                      min-height 46px, padding 12px 16px, 0.95rem
     focus            primary border + 3px rgba(63,109,179,.14) ring

   No font-family is declared. npf-search.css asks for Roboto through
   `--npf-font-head`, but the site forces `Inter, system-ui, -apple-system,
   "Segoe UI", sans-serif` with !important — measured on the archive itself,
   where the h1 and the category links both come out Inter. Naming Roboto here
   would therefore be dead code that describes a font nobody sees; leaving the
   family alone is what actually matches. `rem` values are kept as rem for the
   same reason of fidelity: the theme sets `html { font-size: 14px }`, so
   1.05rem is 14.7px on both pages.
   ================================================================== */

body.npf-home .npf-main .filters {
  gap: 22px;
  top: 16px;
}

body.npf-home .npf-main .filters .filter-group {
  background: #f5f5f5;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  padding: 26px 22px 28px;
}

body.npf-home .npf-main .filters .filter-group__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #020b18;
  margin: 0 0 10px;
}

/* The archive's controls sit 14px apart. Titles need more air above them than
   a control does, so they take the gap on their own. */
body.npf-home .npf-main .filter-group--controls > * + * {
  margin-top: 14px;
}

body.npf-home .npf-main .filter-group--controls > .filter-group__title + * {
  margin-top: 0;
}

body.npf-home .npf-main .filter-group--controls > * + .filter-group__title {
  margin-top: 20px;
}

/* ---------- Category list ---------- */

body.npf-home .npf-main .category-list {
  display: grid;
  gap: 0;
  margin: 0;
}

body.npf-home .npf-main .category-list a {
  display: block;
  padding: 6px 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.45;
  color: #020b18;
}

body.npf-home .npf-main .category-list a:hover {
  color: var(--primary, #4f84c3);
  padding-left: 5px;
}

/* The archive marks the current term with weight and colour only — it does not
   indent, so neither does this. */
body.npf-home .npf-main .category-list a.is-active {
  font-weight: 600;
  color: var(--primary, #4f84c3);
}

body.npf-home .npf-main .category-more {
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary, #4f84c3);
}

/* The archive's equivalent link carries no underline sweep. */
body.npf-home .npf-main .category-more::after {
  content: none;
}

/* ---------- Controls ----------
   "Every control in the panel sits on white", as the archive puts it. */

body.npf-home .npf-main .filters .filter-search {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  min-height: 46px;
  padding: 0 7px 0 16px;
}

body.npf-home .npf-main .filters .filter-search input {
  padding: 12px 0;
  font-size: 0.95rem;
}

body.npf-home .npf-main .filters .filter-search:focus-within {
  border-color: var(--primary, #4f84c3);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

body.npf-home .npf-main .filters .filter-search button {
  width: 32px;
  height: 32px;
}

body.npf-home .npf-main .filters .filter-search svg {
  width: 18px;
  height: 18px;
}

body.npf-home .npf-main .filters .select select {
  min-height: 46px;
  padding: 12px 40px 12px 16px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: #020b18;
}

body.npf-home .npf-main .filters .select select:hover {
  border-color: transparent;
}

body.npf-home .npf-main .filters .select select:focus {
  border-color: var(--primary, #4f84c3);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

/* The level pills are the one control the archive has no equivalent for — its
   price type is a select. They keep the design's pill shape and take the
   surrounding radius so they read as part of the same set. */
body.npf-home .npf-main .filters .price-pills {
  gap: 5px;
  padding: 7px;
  border-radius: 14px;
}

body.npf-home .npf-main .filters .price-pill {
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
}

/* ==================================================================
   FILTER / SORT BAR — matched to the category archive's sort row.

   The design's bar is built around a 68px control: `.sort .select select`
   carries `padding-block: 24px`, and the grey `.filter-bar__box` 19px of its
   own, so the whole row stood 68px tall. The archive's row is 38px — the
   height of one Semantic UI dropdown — and the two sat next to each other in
   the site at nearly double the height.

   Measured off /job-categories/grant-writing/:

     row              38px, 12px gap
     "Sort by:"       400, 14px, line-height 38px, #020b18
     dropdown         38px tall, 196px wide, padding 11px 29.4px 11px 14px,
                      1px solid rgba(34,36,38,.15), radius 4px, white,
                      400 14px/14px, rgba(0,0,0,.87)
     caret            a filled triangle, ~12px, 12px from the right edge

   The grey box stays — it is the design's, and it carries the result count and
   the active-filter chips — but it collapses to the same 38px so the row reads
   as one height.
   ================================================================== */

body.npf-home .npf-main .filter-bar {
  gap: 16px;
}

body.npf-home .npf-main .filter-bar__box {
  min-height: 38px;
  padding: 0 20px;
}

body.npf-home .npf-main .sort {
  gap: 12px;
}

body.npf-home .npf-main .sort label {
  font-size: 14px;
  line-height: 38px;
  color: #020b18;
}

body.npf-home .npf-main .sort .select select {
  min-width: 196px;
  height: 38px;
  min-height: 38px;
  padding: 11px 29.4px 11px 14px;
  background: #fff;
  border: 1px solid rgba(34, 36, 38, 0.15);
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.87);
}

body.npf-home .npf-main .sort .select select:focus {
  border-color: var(--primary, #4f84c3);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

body.npf-home .npf-main .sort .select .sort__caret {
  right: 12px;
  width: 12px;
  height: 12px;
  color: rgba(0, 0, 0, 0.87);
}

/* ------------------------------------------------------------------
   Pagination: centred in the results column.

   The theme declares `.pagination { float: right }`. A floated flex container
   shrink-wraps, so the design's `justify-content: center` was centring the
   buttons inside a 404px box parked against the right edge — the row looked
   right-aligned. Cleared, and given the column's full width to centre within.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .pagination {
  float: none;
  width: 100%;
}

/* ------------------------------------------------------------------
   Heading — `.npf-search h1.ui.header`, copied exactly.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .listing-head h1 {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: #020b18;
}

/* ------------------------------------------------------------------
   Controls that are links.

   `.price-pill` and `.page-btn` are `<button>` in the reference and `<a>` here,
   because each one is a filter or a page — a destination, not an action, so it
   should be shareable and work without JS. Anchors do not inherit a button's
   centred text or pointer, and the design's rules assume both.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .price-pill,
body.npf-home .npf-main .page-btn {
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Spent arrows stay in place so the pager keeps its geometry — the design
   centres the row, and dropping an arrow would shift every number sideways
   between pages. */
body.npf-home .npf-main .page-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* The chips are links here for the same reason; the design's own rule already
   clears the button chrome. */
body.npf-home .npf-main .filter-chip {
  text-decoration: none;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Empty state.

   The reference page is always full, so it has no styling for "nothing
   matched". Sized to sit where the first row of cards would.
   ------------------------------------------------------------------ */
body.npf-home .npf-main .results .npf-empty {
  margin: 0;
  padding: 64px 24px;
  text-align: center;
  color: var(--text-soft, #5f6c72);
  font-size: 17px;
  background: #f5f5f5;
  border-radius: var(--radius, 20px);
}

/* ------------------------------------------------------------------
   Mobile drawer: hold the page still while it is open.

   The design's drawer is `position: fixed` over the results. Without locking
   the body, scrolling inside the drawer carries on into the page underneath
   once the drawer's own list ends, and closing it leaves the reader somewhere
   they never navigated to. Declared here rather than in the port because the
   reference does this from its own JS, which is not ported.
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  body.npf-filters-open {
    overflow: hidden;
  }

  /* The design gives the drawer z-index 210 and its overlay 200, which was
     above everything on the reference page. This site also has a fixed bottom
     bar at 9980, so at those values the bar sat on top of an open drawer and
     the overlay never dimmed it. Lifted above the bar, and kept below the
     header's own drawers at 9995 so only one panel can ever be frontmost. */
  body.npf-home .npf-main .filters-overlay {
    z-index: 9985;
  }

  body.npf-home .npf-main .filters {
    z-index: 9990;
  }

  /* The filter bar's sort control is hidden by the design at this width, which
     leaves the bar as a single box — it should then use the full row. */
  body.npf-home .npf-main .filter-bar__box {
    flex: 1 1 100%;
  }
}

/* ==================================================================
   Fixes reported against the live page.
   ================================================================== */

/* ---------- Search field: one border, not two ----------
   `input[type="search"]` is a native control. Chrome draws its own inner box
   and a clear button on top of whatever the page styles, which showed as a
   hard-edged rectangle sitting inside the rounded field. The appearance reset
   and the decoration rules take the native chrome off; everything visible then
   comes from `.filter-search`, which owns the border and the focus ring. */
body.npf-home .npf-main .filters .filter-search input {
  -webkit-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

body.npf-home .npf-main .filters .filter-search input::-webkit-search-decoration,
body.npf-home .npf-main .filters .filter-search input::-webkit-search-cancel-button,
body.npf-home .npf-main .filters .filter-search input::-webkit-search-results-button {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}

/* ---------- Expert level: wrap onto a second row ----------
   Three pills fit a 231px panel. A fourth tier would have squeezed all of them
   until the labels truncated, because the design pins the row to `nowrap`.
   Wrapping instead: the row grows downwards and every label stays readable
   however many levels exist.

   Only `flex-wrap` — no min-width. A floor wide enough to be worth setting
   (72px) pushed the three current pills past the panel and wrapped Diamond
   onto its own line straight away, which is not what was asked for: they
   should stay on one row until they genuinely no longer fit. */
body.npf-home .npf-main .filters .price-pills {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* ---------- Card hover ----------
   The design gives this treatment to `.experts-grid` — the home page's Top
   Rated row — and to the one card it marks `.is-active` in the static listing.
   The listing's own grid was left without it, so a card here did not respond
   to the pointer at all. Same declarations, scoped to `.results-grid`, so the
   two grids behave identically. */
body.npf-home .npf-main .results-grid .expert-card:hover {
  background: var(--primary-light, #6ac9fc);
  border-color: var(--primary-light, #6ac9fc);
}

body.npf-home .npf-main .results-grid .expert-card:hover h3,
body.npf-home .npf-main .results-grid .expert-card:hover h3 a {
  color: #fff;
}

body.npf-home .npf-main .results-grid .expert-card:hover .expert-card__role {
  color: rgba(255, 255, 255, 0.9);
}

body.npf-home .npf-main .results-grid .expert-card:hover .tag {
  background: #e6eaf0;
  color: #677489;
}

/* ---------- Mobile filter drawer ----------
   Two corrections to the drawer this page shares with the category archive.
   Both are needed here specifically because the desktop rule at the top of
   this file — `.filters { gap: 22px; top: 16px }` — is unscoped, and this
   stylesheet loads after npf-home.css, so its `top` also won the media query
   that turns the sidebar into a drawer. */
@media (max-width: 860px) {

  /* `top: 16px` on a `position: fixed` drawer left a strip of the page showing
     above it and pushed the whole panel down. As a drawer it is pinned to the
     viewport, so the offset belongs to the sticky desktop sidebar only. */
  body.npf-home .npf-main .filters {
    top: 0;

    /* Room to scroll past the fixed bottom bar. The drawer runs `top: 0;
       bottom: 0`, so without this its last control ends underneath the 61px
       bar with nothing left to scroll. */
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
}