/**
 * Kiosk finder — styled to match the citizenadvice theme.
 *
 * Every token below is lifted from the theme's own style.css so the finder reads
 * as part of the site rather than a bolted-on plugin:
 *
 *   --kah-navy    #06163a  html,body colour
 *   --kah-blue    #144D82  .btn-primary background, input border-color
 *   --kah-heading #004b88  h1–h6 colour, .bluebox background
 *   --kah-amber   #ffc46c  .btn-primary:hover background
 *   --kah-amber-soft #f7b86f  the theme's most-used accent
 *   --kah-plum    #9a1d4e  .purplebox
 *   --kah-purple  #574A69  .purple_title
 *   --kah-pale    #d4e5ef  pale blue used on dark boxes
 *   --kah-green   #005743  with a light tint for the "available" pills
 *   --kah-line    #eaeaea  the theme's light border grey
 *
 * Shape follows the theme's actual markup rather than its base .btn-primary rule:
 *  - Buttons are pills. Every CTA in the theme's partials is
 *    `btn-wide text-uppercase btn btn-primary rounded-pill` (13 uses), so the
 *    border-radius:0 on .btn-primary is always overridden by rounded-pill.
 *    .btn-wide is padding-left/right:60px, hence the generous horizontal padding.
 *  - Panels and cards are white, rounded and shadowed — 20px matches
 *    `.rounded-blue-background .container`, and the shadow is Bootstrap's
 *    `.shadow` utility, which is what the theme's own block_section cards use.
 *
 * Two deliberate departures from the theme, both for legibility:
 *  - Body weight is 300 site-wide; small text here uses 400, because 300 at
 *    0.875rem is genuinely hard to read.
 *  - The theme's .btn-primary:hover keeps white text on amber (~1.9:1 contrast).
 *    Ours switches to navy text on hover (~9:1). This page exists to help people
 *    find accessible services, so its buttons should be readable.
 */

.kah-kiosk-finder {
  --kah-navy: #06163a;
  --kah-blue: #144D82;
  --kah-heading: #004b88;
  --kah-amber: #ffc46c;
  --kah-amber-soft: #f7b86f;
  --kah-plum: #9a1d4e;
  --kah-purple: #574A69;
  --kah-pale: #d4e5ef;
  --kah-green: #005743;
  --kah-green-pale: #e6f2e9;
  --kah-line: #eaeaea;
  --kah-text: #06163a;
  --kah-muted: #5d687f;
  --kah-radius: 20px;                              /* theme panel radius */
  --kah-pill: 50rem;                               /* Bootstrap .rounded-pill */
  --kah-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);   /* Bootstrap .shadow */
  --kah-shadow-lift: 0 1rem 2rem rgba(0, 0, 0, .18);

  font-family: inherit; /* theme body font: Poppins */
  color: var(--kah-text);
}

/* Own copy rather than relying on the theme shipping .screen-reader-text. */
.kah-kiosk-finder .kah-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Search bar ---------------------------------------------------------- */

.kah-search-bar {
  background: #fff;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  padding: 20px 24px;
  margin-bottom: 24px;
}
.kah-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Blue-bordered inputs, matching .header-form input in the theme, softened to
   sit alongside the pill buttons. */
.kah-search-bar input[type=text],
.kah-search-bar select {
  border: 1px solid var(--kah-blue);
  border-radius: var(--kah-pill);
  padding: 11px 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--kah-text);
  background: #fff;
}
.kah-search-bar input[type=text] { flex: 1 1 260px; }
.kah-search-bar input[type=text]::placeholder { color: var(--kah-muted); opacity: 1; }
.kah-search-bar input[type=text]:focus,
.kah-search-bar select:focus {
  outline: 2px solid var(--kah-amber-soft);
  outline-offset: 1px;
}

/* The theme's CTA button: .btn .btn-primary .btn-wide .text-uppercase .rounded-pill */
.kah-search-bar button {
  background: var(--kah-blue);
  color: #fff;
  border: 1px solid var(--kah-blue);
  border-radius: var(--kah-pill);
  padding: 11px 48px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.kah-search-bar button:hover,
.kah-search-bar button:active,
.kah-search-bar button:focus-visible {
  background: var(--kah-amber);
  border-color: var(--kah-amber-soft);
  color: var(--kah-navy);
}
.kah-search-bar button:focus-visible { outline: 2px solid var(--kah-navy); outline-offset: 2px; }
.kah-search-bar button:disabled { opacity: .65; cursor: wait; }

/* Collapses completely when there's no message, so the controls sit centred in the
   box rather than being pushed up by a reserved blank line. */
.kah-search-status {
  font-size: .875rem;
  font-weight: 400;
  color: var(--kah-muted);
  margin-top: 10px;
}
.kah-search-status:empty { margin-top: 0; }
.kah-search-status.err { color: var(--kah-plum); font-weight: 700; }

.kah-search-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 0;
}

.kah-clear-link {
  background: none !important;
  border: none !important;
  color: var(--kah-muted) !important;
  text-decoration: underline;
  font-size: .9rem !important;
  font-weight: 400 !important;
  cursor: pointer;
  padding: 0 !important;
  margin-top: 10px;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex: 0 0 auto !important;
}
.kah-clear-link:hover,
.kah-clear-link:active,
.kah-clear-link:focus-visible { color: var(--kah-blue) !important; background: none !important; }
.kah-clear-link:disabled,
.kah-clear-link[aria-disabled="true"] {
  font-weight: 400 !important;
  opacity: .45;
  cursor: not-allowed;
}

/* --- Map ---------------------------------------------------------------- */

#kahMap {
  width: 100%;
  height: 640px;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  overflow: hidden; /* so Leaflet's tiles clip to the rounded corners */
  margin-bottom: 24px;
}

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

.kah-filters {
  background: #fff;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin-bottom: 44px;
}
.kah-filter-group { min-width: 160px; }

/* The accessibility labels are long, so that group takes a full-width row of its
   own. min-width:0 stops the flex item inheriting the 160px floor and refusing to
   fill the row. */
.kah-filter-group--wide { flex: 1 1 100%; min-width: 0; }

/* Sentence case — the theme doesn't use all-caps anywhere for text. */
.kah-filter-group h4 {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: var(--kah-heading);
}
.kah-filter-group select {
  border: 1px solid var(--kah-blue);
  border-radius: var(--kah-pill);
  padding: 9px 18px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 400;
  color: var(--kah-text);
  background: #fff;
  min-width: 180px;
}

.kah-day-chips, .kah-who-chips, .kah-access-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Only the narrow-column groups are capped. The accessibility row is deliberately
   uncapped so its chips spread across the full width. */
.kah-day-chips, .kah-who-chips { max-width: 380px; }
/* Chips are <button> elements so they're keyboard reachable — hence the
   font/colour/line-height resets to undo the browser's button defaults. */
.kah-chip {
  border: 1px solid var(--kah-blue);
  border-radius: var(--kah-pill);
  background: #fff;
  color: var(--kah-blue);
  padding: 6px 16px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s, color .12s;
}
.kah-chip:hover,
.kah-chip:active {
  background: var(--kah-amber);
  border-color: var(--kah-amber-soft);
  color: var(--kah-navy);
}
.kah-chip:focus-visible { outline: 2px solid var(--kah-amber-soft); outline-offset: 2px; }
.kah-chip[aria-pressed="true"] {
  background: var(--kah-blue);
  border-color: var(--kah-blue);
  color: #fff;
  font-weight: 700;
}
.kah-chip[aria-pressed="true"]:hover,
.kah-chip[aria-pressed="true"]:active {
  background: var(--kah-amber);
  border-color: var(--kah-amber-soft);
  color: var(--kah-navy);
}

/* --- Results ------------------------------------------------------------ */

/* --- Results accordion (closed by default) ------------------------------ */

.kah-results { margin-bottom: 24px; }

.kah-results-summary {
  list-style: none;            /* hide the default disclosure triangle */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  padding: 18px 24px;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--kah-heading);
}
.kah-results-summary::-webkit-details-marker { display: none; }
.kah-results-summary::marker { content: ""; }
.kah-results-summary:hover { color: var(--kah-blue); }
.kah-results-summary:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 2px; }

.kah-results-summary #kahResultsHeading { flex: 1 1 auto; }
.kah-results-summary #kahResultsCount {
  font-size: .9rem; font-weight: 400; color: var(--kah-muted);
}

/* Chevron, rotating when open. */
.kah-results-summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s;
  margin-bottom: 3px;
}
.kah-results[open] .kah-results-summary::after { transform: rotate(-135deg); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .kah-results-summary::after { transition: none; }
}

.kah-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
/* The card is focused when arriving from a pop-up's "View more". */
.kah-card:focus-visible { outline: 3px solid var(--kah-blue); outline-offset: 3px; }

/* Quicksand, echoing .section_title h3 in the theme. */
.kah-town-heading {
  grid-column: 1/-1;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kah-heading);
  border-bottom: 3px solid var(--kah-amber-soft);
  padding-bottom: 6px;
  margin: 18px 0 0;
}

/* White box with a shadow, like the theme's block_section cards. */
.kah-card {
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  padding: 24px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kah-card--active { border-color: var(--kah-amber-soft); }
.kah-card:hover,
.kah-card:focus-within {
  box-shadow: var(--kah-shadow-lift);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .kah-card { transition: box-shadow .18s; }
  .kah-card:hover, .kah-card:focus-within { transform: none; }
}
/* !important is needed here, reluctantly. The theme has an unscoped rule —
   `.bg_blue p, li, h3 { color: white!important; }` — where only the first selector
   is scoped, so it turns EVERY h3 on the site white. Without this the kiosk names
   are invisible. The real fix belongs in the theme (scope it to .bg_blue h3), but
   that risks anything else on the site relying on the current behaviour. */
.kah-card h3 {
  font-family: inherit;
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--kah-heading) !important;
}
.kah-card--active h3 { color: var(--kah-amber-soft) !important; }
/* Every field, as a two-column definition list. <dl> so the label/value pairing is
   real for screen readers rather than just visual, and a grid so it stays dense in
   a narrow card or map pop-up. */
.kah-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 10px 0 0;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.45;
}
.kah-dl dt {
  font-weight: 700;
  color: var(--kah-muted);
  white-space: nowrap;
}
.kah-dl dd { margin: 0; color: var(--kah-text); overflow-wrap: anywhere; }

/* Below this the label column steals too much room, so stack instead. */
@media (max-width: 420px) {
  .kah-dl { grid-template-columns: 1fr; gap: 0 0; }
  .kah-dl dt { margin-top: 6px; }
}

/* Badges follow the same pill language as the buttons. */
.kah-card .kah-distance {
  display: inline-block;
  background: var(--kah-pale);
  color: var(--kah-blue);
  border-radius: var(--kah-pill);
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 12px;
  margin-bottom: 8px;
}

.kah-who-tag {
  display: inline-block;
  border-radius: var(--kah-pill);
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 12px;
  margin: 4px 4px 4px 0;
}
.kah-who-all { background: var(--kah-pale); color: var(--kah-heading); }
.kah-who-women { background: #f7e7ee; color: var(--kah-plum); }
.kah-who-patients, .kah-who-service { background: #ece8f1; color: var(--kah-purple); }

/* Green reads as "available", and both greens come from the theme. */
.kah-icon-row { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.kah-icon-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 400;
  color: var(--kah-green);
  background: var(--kah-green-pale);
  border-radius: var(--kah-pill);
  padding: 4px 11px;
}
.kah-icon-pill svg { width: 12px; height: 12px; flex: none; }
.kah-icon-pill i { font-size: .85em; line-height: 1; }

.kah-card-map-button {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kah-blue);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.kah-card-map-button:hover { color: var(--kah-plum); }
.kah-card-map-button:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 3px; }

/* --- Icon-only + tooltip (map pop-ups) ---------------------------------- */

.kah-popup-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.kah-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kah-green-pale);
  color: var(--kah-green);
  cursor: help;
}
.kah-tip-wrap svg { width: 15px; height: 15px; }
.kah-tip-wrap i { font-size: 15px; line-height: 1; }
.kah-tip-wrap:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 2px; }

/* The tooltip itself: above the icon, centred, and non-interactive so it can't
   swallow clicks meant for the map. */
.kah-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--kah-navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s;
  pointer-events: none;
  z-index: 1000; /* above Leaflet panes */
}
/* Little pointer underneath. */
.kah-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--kah-navy);
}
.kah-tip-wrap:hover .kah-tip,
.kah-tip-wrap:focus .kah-tip,
.kah-tip-wrap:focus-visible .kah-tip {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .kah-tip { transition: none; }
}

.kah-no-results {
  grid-column: 1/-1;
  text-align: center;
  color: var(--kah-muted);
  background: #fff;
  border-radius: var(--kah-radius);
  box-shadow: var(--kah-shadow);
  padding: 44px 24px;
  font-size: 1rem;
  font-weight: 400;
}

/* --- Leaflet popups ----------------------------------------------------- */

.kah-kiosk-finder .leaflet-popup-content { font-family: inherit; margin: 14px 16px; }
.kah-kiosk-finder .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: var(--kah-shadow);
}
.kah-popup-title {
  font-weight: 700;
  color: var(--kah-heading);
  margin-bottom: 6px;
  font-size: .95rem;
  line-height: 1.3;
  padding-right: 14px; /* clear of Leaflet's close button */
}
/* The pop-up is the tightest space, so drop a step and stack the labels. */
.kah-popup .kah-dl {
  grid-template-columns: 1fr;
  gap: 0;
  font-size: .78rem;
  margin-top: 8px;
}
.kah-popup .kah-dl dt { margin-top: 6px; }
.kah-popup .kah-dl dt:first-child { margin-top: 0; }

/* "View more" — a button (it performs an action) styled as a text link. */
.kah-popup-more {
  display: inline-block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--kah-blue);
  text-decoration: underline;
  cursor: pointer;
}
.kah-popup-more:hover { color: var(--kah-plum); }
.kah-popup-more:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 2px; }

@media (max-width: 640px) {
  .kah-filters { gap: 18px; padding: 18px; }
  .kah-search-bar { padding: 18px; }
  .kah-card { padding: 20px; }
  #kahMap { height: 440px; }
  /* 48px of horizontal padding doesn't fit a narrow screen. */
  .kah-search-bar button { flex: 1 1 auto; padding: 11px 24px; }
  .kah-results-summary { font-size: 1rem; padding: 16px 18px; }
}

/* --- Finder layout: map-first controls and overlay filters ---------------- */

.kah-kiosk-finder { --kah-radius: 18px; }

.kah-search-bar {
  padding: 27px 20px 15px;
  margin-bottom: 0;
  border-radius: var(--kah-radius) var(--kah-radius) 0 0;
  box-shadow: var(--kah-shadow);
  position: relative;
  z-index: 3;
}
.kah-search-row { gap: 14px; }
.kah-search-bar input[type=text] { flex-basis: 420px; min-width: 0; }
.kah-search-bar input[type=text],
.kah-search-bar select { border-color: #d8dde6; padding: 10px 16px; }
.kah-search-bar button { padding: 10px 42px; }
.kah-search-feedback { padding: 0 2px; }

.kah-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  margin-top: 8px;
  font-size: .9rem;
  font-weight: 400;
}
.kah-filter-toolbar__title { color: var(--kah-heading); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.kah-filter-toolbar__title i { margin-right: 7px; }
.kah-filter-toolbar__copy { color: var(--kah-text); }
.kah-filter-toolbar__count { background: var(--kah-blue); color: #fff; border-radius: 5px; padding: 4px 9px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.kah-filter-toolbar__clear { color: var(--kah-blue); padding: 6px 0; font-family: inherit; font-size: .9rem; font-weight: 400; text-decoration: underline; cursor: pointer; }
.kah-clear-link,
.kah-filter-toolbar__clear { font-family: inherit !important; font-size: .9rem !important; line-height: 1.5 !important; }
.kah-filter-toolbar__clear:hover:not([aria-disabled="true"]) { color: var(--kah-plum); }
.kah-filter-toolbar__clear:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 3px; }
.kah-filter-toolbar__clear[aria-disabled="true"] { color: #98a1b1; font-weight: 400; opacity: .45; cursor: not-allowed; text-decoration: none; }
.kah-filter-toggle.kah-filter-toggle { margin-left: auto; padding: 8px 20px; background: var(--kah-blue); border-color: var(--kah-blue); color: #fff; text-transform: none; font-size: .9rem; }
.kah-filter-toggle.kah-filter-toggle:hover,
.kah-filter-toggle.kah-filter-toggle:active,
.kah-filter-toggle.kah-filter-toggle:focus-visible,
.kah-filter-toggle.kah-filter-toggle[aria-expanded="true"] { background: var(--kah-amber); border-color: var(--kah-amber-soft); color: var(--kah-navy); }
.kah-filter-toggle i { margin-left: 12px; transition: transform .15s; }
.kah-filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.kah-map-stage { position: relative; }
#kahMap { height: 680px; border-radius: 0; box-shadow: var(--kah-shadow); margin-bottom: 0; }

.kah-filters[hidden] { display: none; }
.kah-filters {
  position: absolute;
  z-index: 1001;
  top: 20px;
  right: 20px;
  width: min(360px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 18px;
  padding: 20px;
  margin: 0;
  border-radius: 12px;
  box-shadow: var(--kah-shadow-lift);
}
.kah-filters__heading { display: flex; justify-content: space-between; align-items: center; }
/* The theme has an unscoped `h3 { color: white !important; }` selector. Keep
   this override tightly limited to the filter-panel title so it remains visible
   on the white panel without changing headings elsewhere on the page. */
.kah-filters__heading h3 { margin: 0; color: var(--kah-heading) !important; font-size: 1.25rem; font-weight: 700; }
.kah-filters__close { appearance: none; border: 0; background: transparent; color: var(--kah-blue); padding: 5px; font-size: 1.4rem; cursor: pointer; }
.kah-filters__close:focus-visible, .kah-filter-clear:focus-visible { outline: 2px solid var(--kah-blue); outline-offset: 2px; }
.kah-filter-group, .kah-filter-group--wide { min-width: 0; flex: none; }
.kah-filter-group[hidden] { display: none; }
.kah-filter-group h4 { margin-bottom: 7px; }
.kah-filter-group select { width: 100%; min-width: 0; border-radius: 8px; padding: 10px 12px; }
.kah-day-chips, .kah-who-chips, .kah-access-chips { max-width: none; }
.kah-chip { font-size: .78rem; padding: 5px 10px; }
.kah-filter-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 4px; }
.kah-filter-clear { border: 0; background: transparent; color: var(--kah-blue); padding: 8px 0; font-family: inherit; font-size: .9rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.kah-filter-apply { border: 1px solid var(--kah-blue); background: var(--kah-blue); color: #fff; border-radius: 7px; padding: 10px 16px; font-family: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.kah-filter-apply:hover,
.kah-filter-apply:active,
.kah-filter-apply:focus-visible { background: var(--kah-amber); border-color: var(--kah-amber-soft); color: var(--kah-navy); }
.kah-filter-apply:focus-visible { outline: 2px solid var(--kah-navy); outline-offset: 2px; }

.kah-results { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0 0 24px; }
.kah-results-summary {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 16px 22px;
  gap: 12px;
  border-radius: 0 0 var(--kah-radius) var(--kah-radius);
  box-shadow: var(--kah-shadow);
  font-size: .95rem;
}
.kah-results-summary::after { transform: rotate(45deg); margin: 0 3px 3px 6px; }
.kah-results[open] .kah-results-summary::after { transform: rotate(-135deg); margin-bottom: 0; }
.kah-results-summary #kahResultsCount { color: var(--kah-heading); font-size: 1.05rem; font-weight: 700; }
.kah-results-summary #kahResultsHeading { flex: 0 1 auto; color: var(--kah-blue); font-size: .9rem; text-decoration: underline; }
.kah-results-summary__pin { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kah-blue); color: #fff; }
.kah-results-summary__divider { width: 1px; height: 22px; background: #c5cad3; }
.kah-results[open] .kah-list { max-height: none; overflow: visible; background: #fff; padding: 28px; margin: 0; border-radius: 0 0 var(--kah-radius) var(--kah-radius); box-shadow: var(--kah-shadow); }
.kah-results[open] .kah-results-summary { border-radius: 0; }

@media (max-width: 760px) {
  .kah-search-bar { padding: 14px 14px 0; }
  .kah-filter-toolbar { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 10px; }
  .kah-filter-toolbar__copy { flex-basis: 100%; order: 3; }
  .kah-filter-toggle.kah-filter-toggle { margin-left: auto; padding: 8px 14px; }
  #kahMap { height: 520px; }
  .kah-filters { top: 10px; right: 10px; width: calc(100% - 20px); max-height: calc(100% - 20px); }
  .kah-results-summary { padding: 14px 16px; }
}