/**
 * MCF — Find a Specialist (public licensee directory)
 *
 * Filters (services dropdown + region pills) are styled for a DARK / navy
 * background by default (they sit in the hero, like the approved design). Add
 * the class `mcf-on-light` to a filter wrapper if you place it on a light band.
 *
 * Palette (Uncode brand):
 *   navy #002e62 · kitchen/teal #008ca7 · plumbing/orange #ff6633 · electrical/green #64a70b
 */

/* ── Per-service accent token ──────────────────────────────────────────── */
.mcf-svc-kitchen    { --mcf-svc: #008ca7; --mcf-svc-dark: #008ca7; }
.mcf-svc-plumbing   { --mcf-svc: #ff6633; --mcf-svc-dark: #ff6633; }
.mcf-svc-electrical { --mcf-svc: #64a70b; --mcf-svc-dark: #64a70b; }

/* ─────────────────────────────────────────────────────────────────────────
 * Free-text search box
 *
 * Shares the dropdown's shell (same height, radius, border and dark-hero
 * treatment) so the three controls read as one set — but NOT its uppercase
 * micro-type: this one holds what the visitor typed, and forcing their words to
 * uppercase makes a name look like a label.
 *
 * !important on the input mirrors the selects below: Uncode's style-utils set
 * background, border and width on bare `input` at a specificity our single
 * class can't beat.
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-search { display: flex; justify-content: center; }
.mcf-search-shell { position: relative; display: inline-block; }

/* The magnifier, drawn in CSS so the control carries no icon-font dependency. */
.mcf-search-shell::before {
  content: ""; position: absolute; left: 18px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border: 2px solid currentColor; border-radius: 50%;
  color: #fff; opacity: .75; pointer-events: none;
}
.mcf-search-shell::after {
  content: ""; position: absolute; left: 27px; top: 50%;
  width: 6px; height: 2px; margin-top: 3px;
  background: currentColor; transform: rotate(45deg); transform-origin: left center;
  color: #fff; opacity: .75; pointer-events: none;
}

.mcf-search-input {
  box-sizing: border-box;
  -webkit-appearance: none !important; appearance: none !important;
  background-color: rgba(255, 255, 255, .12) !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, .4) !important;
  color: #fff !important;
  padding: 12px 44px 12px 42px;
  font-size: 13px; letter-spacing: .2px; font-weight: 500; text-align: left;
  line-height: 1.2; border-radius: 6px; outline: none;
  /* Wider than the dropdowns ON PURPOSE. Search is the primary way into this
     page ("I know the town I want"); the filters are the browse path. At the
     same width the three controls read as three equal peers in a ragged centred
     stack, which is what made the field look like an afterthought. */
  min-width: 480px; max-width: 100%; width: auto !important; height: auto; margin: 0 !important;
  transition: background-color .2s, border-color .2s;
}
/* Uncode's style-custom.css sets `.style-light ::placeholder { color: … }` at the
   same specificity as a lone `.mcf-search-input::placeholder` and loads after
   us, so the prompt inherits the page's dark text on the dark hero. Scoping to
   the wrapper and forcing it is what actually wins. */
.mcf-finder-search .mcf-search-input::placeholder,
.mcf-finder-search .mcf-search-input::-webkit-input-placeholder { color: rgba(255, 255, 255, .7) !important; opacity: 1; }
.mcf-search-input:hover,
.mcf-search-input:focus-visible { background-color: rgba(255, 255, 255, .2) !important; border-color: #fff !important; }
.mcf-search-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Ours is the clear button — the native WebKit one would sit beside it. */
.mcf-search-input::-webkit-search-cancel-button,
.mcf-search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.mcf-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent;
  color: #fff; font-size: 19px; line-height: 1; cursor: pointer; opacity: .75;
  transition: background-color .2s, opacity .2s;
}
.mcf-search-clear:hover { background: rgba(255, 255, 255, .2); opacity: 1; }
.mcf-search-clear:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
.mcf-search-clear[hidden] { display: none; }

/* light-background variant */
.mcf-finder-search.mcf-on-light .mcf-search-shell::before,
.mcf-finder-search.mcf-on-light .mcf-search-shell::after { color: #002e62; opacity: .6; }
.mcf-finder-search.mcf-on-light .mcf-search-input {
  background-color: #fff !important; color: #002e62 !important; border-color: #d8dde3 !important;
}
.mcf-finder-search.mcf-on-light .mcf-search-input::placeholder,
.mcf-finder-search.mcf-on-light .mcf-search-input::-webkit-input-placeholder { color: #7b8794 !important; }
.mcf-finder-search.mcf-on-light .mcf-search-input:hover,
.mcf-finder-search.mcf-on-light .mcf-search-input:focus-visible { border-color: #008ca7 !important; background-color: #fff !important; }
.mcf-finder-search.mcf-on-light .mcf-search-input:focus-visible { outline-color: #008ca7; }
.mcf-finder-search.mcf-on-light .mcf-search-clear { color: #002e62; }
.mcf-finder-search.mcf-on-light .mcf-search-clear:hover { background: rgba(0, 46, 98, .1); }

/* ─────────────────────────────────────────────────────────────────────────
 * Service dropdown
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-services { display: flex; justify-content: center; }
.mcf-svc-select-wrap { position: relative; display: inline-block; }
.mcf-svc-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; color: #fff;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg); pointer-events: none; opacity: .9;
}
.mcf-svc-select,
.mcf-region-select {
  box-sizing: border-box;
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff !important;
  padding: 12px 46px 12px 20px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; text-align: left;
  line-height: 1; cursor: pointer; border-radius: 6px; outline: none;
  min-width: 240px; height: auto; transition: background-color .2s, border-color .2s;
}
.mcf-svc-select:hover, .mcf-svc-select:focus-visible,
.mcf-region-select:hover, .mcf-region-select:focus-visible {
  background-color: rgba(255, 255, 255, .2); border-color: #fff;
}
.mcf-svc-select:focus-visible,
.mcf-region-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mcf-svc-select option,
.mcf-region-select option { color: #1a1a1a; background: #fff; }

/* light-background variant (either filter wrapper) */
.mcf-on-light .mcf-svc-select,
.mcf-on-light .mcf-region-select {
  background-color: #fff; color: #002e62 !important; border-color: #d8dde3;
}
.mcf-on-light .mcf-svc-select:hover, .mcf-on-light .mcf-svc-select:focus-visible,
.mcf-on-light .mcf-region-select:hover, .mcf-on-light .mcf-region-select:focus-visible { border-color: #008ca7; }
.mcf-on-light .mcf-svc-select:focus-visible,
.mcf-on-light .mcf-region-select:focus-visible { outline-color: #008ca7; }

/* ─────────────────────────────────────────────────────────────────────────
 * Region pills
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-regions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 16px;
}
.mcf-rpill {
  padding: 11px 22px; border: 1.5px solid rgba(255, 255, 255, .35);
  background: transparent; color: rgba(255, 255, 255, .8);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  line-height: 1; cursor: pointer; border-radius: 6px;
  transition: background .2s, color .2s, border-color .2s; white-space: nowrap;
}
/* ADJ-80 — forced row break. A zero-height item that fills the flex line, so the
   pills after it start a new row instead of wrapping wherever they happen to
   land (which could strand one region alone).

   The break is its own flex line, so it collects the container's 10px gap on
   both sides and the two rows sit 20px apart rather than 10px. That is not
   tunable from here: a negative margin is clamped, because a flex line is never
   shorter than 0 (measured — margin-top of -9/-10/-20px all yield the same
   20px), and shrinking the container's row-gap would also shrink the natural
   wrap gap at the narrow desktop widths where each row wraps again. 20px is the
   cost of the deliberate break, and reads as intended separation. */
.mcf-rpill-break {
  flex: 0 0 100%; width: 100%; height: 0;
}

.mcf-rpill:hover { border-color: #fff; color: #002e62; background-color: #fff; }
.mcf-rpill.is-active { background: #fff; color: #002e62; border-color: #fff; }
.mcf-rpill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* light-background variant */
.mcf-finder-regions.mcf-on-light .mcf-rpill { border-color: #d0d6dd; color: #5a6a7a; }
.mcf-finder-regions.mcf-on-light .mcf-rpill:hover { border-color: #002e62; color: #002e62; }
.mcf-finder-regions.mcf-on-light .mcf-rpill.is-active { background: #002e62; color: #fff; border-color: #002e62; }

/* Region dropdown — the mobile alternative to the pills. Hidden on desktop;
   the media query below swaps the pills for this on phones. */
.mcf-finder-regions-select { display: none; justify-content: center; margin-top: 14px; }

/* ─────────────────────────────────────────────────────────────────────────
 * Card grid
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-grid-wrap { width: 100%; }
.mcf-finder-grid {
  display: grid;
  /* min(…, 100%) keeps the card at its target width on wide screens but never
     lets the track exceed the container, so the grid can't cause horizontal
     overflow on very narrow phones. max-width caps the row at ~4 generous
     columns (instead of squeezing in a 5th) and centres it. */
  grid-template-columns: repeat(auto-fill, minmax(min(var(--mcf-card-min, 300px), 100%), 1fr));
  gap: 24px;
  max-width: 1320px;
  margin-left: auto; margin-right: auto;
}

.mcf-lc-card {
  position: relative; display: block; overflow: hidden;
  height: 280px; border-radius: 10px; text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  background: #002e62; /* base under the image / for noimg cards */
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s;
  will-change: transform;
}
.mcf-lc-card:hover, .mcf-lc-card:focus-visible {
  transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}
/* Distinct keyboard focus ring (not just the hover lift) — WCAG 2.4.7. */
.mcf-lc-card:focus-visible { outline: 3px solid #008ca7; outline-offset: 3px; }

.mcf-lc-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .5s ease;
}
.mcf-lc-card:hover .mcf-lc-bg { transform: scale(1.05); }

/* Placeholder for cards with no image: a clean service-tinted wash. */
.mcf-lc-noimg {
  background-image: linear-gradient(150deg, var(--mcf-svc, #008ca7) 0%, #002e62 100%);
}
.mcf-lc-noimg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(255,255,255,.14) 0%, transparent 55%);
}

.mcf-lc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .04) 100%);
}

.mcf-lc-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 20px;
  background: var(--mcf-svc, #008ca7); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.mcf-lc-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; text-align: left; }
.mcf-lc-city {
  display: block; color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2;
  margin-bottom: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.mcf-lc-desc {
  display: block; color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcf-lc-btn {
  display: inline-block; padding: 8px 20px; border-radius: 6px;
  background: var(--mcf-svc, #008ca7); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background .2s, transform .2s;
}
.mcf-lc-card:hover .mcf-lc-btn { background: var(--mcf-svc-dark, #006f85); }

/* Empty state + not-yet-configured note */
/* ─────────────────────────────────────────────────────────────────────────
 * Status bar + empty state
 *
 * Live filtering has no submit button, so the count is what confirms a
 * keystroke did something — and it carries the way out. Only ever ONE reset is
 * on screen: the bar's while there are results, the empty state's when there
 * are none. Both sit on the light band under the hero, so they're styled dark.
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-finder-status {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  max-width: 1320px; margin: 0 auto 18px; padding: 0 2px;
}
.mcf-finder-status[hidden] { display: none; }
.mcf-finder-count { margin: 0; color: #5a6a7a; font-size: 14px; letter-spacing: .2px; }

.mcf-finder-clear-all {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #008ca7; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.mcf-finder-clear-all:hover { color: #002e62; border-bottom-color: currentColor; }
.mcf-finder-clear-all:focus-visible { outline: 2px solid #008ca7; outline-offset: 3px; }

.mcf-finder-empty {
  text-align: center; color: #5a6a7a; font-size: 15px; padding: 48px 20px 16px; margin: 0;
}
.mcf-finder-empty[hidden] { display: none; }
.mcf-finder-empty-text { margin: 0; font-size: 17px; color: #002e62; }
/* The filters that produced the dead end, so "nothing found" is never a
   mystery — self-hiding, since it's empty until the JS fills it. */
.mcf-finder-empty-filters { margin: 8px 0 0; font-size: 14px; color: #7b8794; }
.mcf-finder-empty-filters:empty { display: none; }
.mcf-finder-empty .mcf-finder-clear-all { margin-top: 18px; }
.mcf-finder-setup {
  grid-column: 1 / -1; text-align: center; color: #5a6a7a; font-size: 15px;
  padding: 48px 24px; border: 1px dashed #cfd6dd; border-radius: 10px; background: rgba(0,0,0,.015);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Filter animation (FLIP + fade-up, JS-driven)
 * ───────────────────────────────────────────────────────────────────────── */
.mcf-lc-card[hidden] { display: none !important; }

/* Entering / repositioning: JS toggles these; transitions live here. Cards that
   filter OUT are hidden immediately (display:none) — the eye follows the reflow —
   while remaining cards slide (FLIP) and new cards fade up with a stagger. */
.mcf-finder-grid.is-animating .mcf-lc-card { transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease, box-shadow .28s; }
.mcf-lc-card.is-enter { opacity: 0; transform: translateY(16px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .mcf-lc-card, .mcf-lc-bg, .mcf-finder-grid.is-animating .mcf-lc-card { transition: none !important; }
  .mcf-lc-card.is-enter { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Responsive
 * ───────────────────────────────────────────────────────────────────────── */
/* Tablet / phone: swap the region pills for a dropdown (like All Services) and
   let both dropdowns go full-width so they stack cleanly. */
@media (max-width: 782px) {
  .mcf-finder-services { display: block; }
  .mcf-svc-select-wrap { display: block; width: 100%; }
  .mcf-svc-select, .mcf-region-select { min-width: 0; width: 100%; }
  .mcf-finder-regions { display: none; }
  .mcf-finder-regions-select { display: flex; }
  .mcf-finder-search { display: block; }
  .mcf-search-shell { display: block; width: 100%; }
  .mcf-search-input { min-width: 0; width: 100% !important; }
}

@media (max-width: 600px) {
  .mcf-finder-grid { gap: 16px; }
  .mcf-lc-card { height: 240px; }
}