/* MCR Pathways school locator.
   It sits in the theme's .school-locator-block, straight under the orange .school-locator-header, and closes
   that block as a white box (the slot the StoreRocket widget filled: radius 0 0 20px 20px).
   Spacing, radii, type and breakpoints follow the theme (style.css): blocks 15px radius under 768px and 20px
   from 768px; pills 50px; gutters 20px on phones and 50px (the header's side padding) from 768px; gaps
   16/20/24/32; breakpoints 768 and 992. Colours are the theme's --MCR-* tokens. */

.mcr-loc {
  --loc-ink: var(--MCR-DarkBlue, #213350);
  --loc-teal: var(--MCR-Teal, #2A6075);
  --loc-ivory: var(--MCR-Ivory, #FDF9EA);
  --loc-line: #c9d3d8;
  --loc-muted: #4a5560;
  --loc-none: #5d6770;
  --loc-radius: 15px;      /* theme .cta-block: 15px, 20px from 768px */
  --loc-gutter: 20px;      /* side padding; matches the header's, below */
  --loc-gap: 16px;         /* between related things (theme spacer xs) */
  --loc-gap-l: 24px;       /* between sections of the locator */
  --loc-panel-pad: 20px;   /* inside panels and cards (theme .cta-wrapper) */
  --loc-small: clamp(15px, 1.25vw, 18px); /* hints, notes, badges: one step under the body size */
  --loc-control-h: 52px;   /* inputs, select and buttons share one height */
  color: var(--loc-ink);
  background: #fff;
  border-radius: 0 0 var(--loc-radius) var(--loc-radius);
  padding: var(--loc-gap-l) var(--loc-gutter) 32px;
  margin: 0;
  text-align: left;
}

/* The theme header keeps 50px side padding at every width, which squeezes its text to 245px on a phone.
   Give it the locator's gutter there so the header copy and the locator content share one left edge. */
.school-locator-block .school-locator-header { padding: 40px var(--loc-header-gutter, 20px) 32px; border-radius: 15px 15px 0 0; }

.mcr-loc__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.mcr-loc__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mcr-loc [hidden] { display: none !important; }

/* The theme bullets list items (ul li: padding-left 16/32px, li: margin-bottom 16px, li::before).
   :where() keeps this reset at one class of specificity, so the component rules below (cards, legend)
   set their own padding and margin instead of being overridden by it. */
.mcr-loc :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.mcr-loc :where(li) { padding: 0; margin: 0; }
.mcr-loc li::before { content: none !important; display: none !important; }
.mcr-loc :where(p) { margin: 0; }

/* ---------- search panel */

.mcr-loc__search {
  background: var(--loc-ivory);
  border-radius: var(--loc-radius);
  padding: var(--loc-panel-pad);
  margin: 0 0 var(--loc-gap-l);
}
.mcr-loc__fields {
  display: grid; gap: var(--loc-gap); grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "q" "r" "btns";
}
.mcr-loc__field--q { grid-area: q; }
.mcr-loc__field--r { grid-area: r; }
.mcr-loc__buttons { grid-area: btns; }
.mcr-loc__field label { display: block; font-weight: 600; line-height: 1.3; margin: 0 0 8px; }
/* The theme sets every input and select with !important (15px 20px padding, min-height 51px, fit-content
   height). These selectors are more specific, so the text box, the select and the buttons get one height. */
.mcr-loc .mcr-loc__field input,
.mcr-loc .mcr-loc__field select {
  display: block;
  width: 100%;
  box-sizing: border-box !important;
  height: var(--loc-control-h) !important;
  min-height: var(--loc-control-h) !important;
  margin: 0;
  background-color: #fff;
}
.mcr-loc .mcr-loc__field input[aria-invalid="true"] { border-color: #b3261e !important; }
.mcr-loc__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
/* Theme pill buttons (button.button: 50px radius, 15px 20px padding, 16px; 15px 30px, 18px from 768px).
   On phones they share the row and wrap to full width when it is too narrow. */
.mcr-loc .mcr-loc__btn {
  flex: 1 1 auto; width: auto; min-height: var(--loc-control-h); margin: 0;
  border: 0; color: var(--loc-ink); white-space: nowrap;
}
.mcr-loc .mcr-loc__btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.mcr-loc__hint { margin: 12px 0 0; font-size: var(--loc-small); line-height: 1.5; color: var(--loc-muted); }
.mcr-loc__error {
  margin: 12px 0 0; padding: 12px 16px; border-left: 4px solid #b3261e; background: #fff;
  border-radius: 0 10px 10px 0; color: #8c1d18; font-weight: 600;
}
.mcr-loc__filter { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; min-height: 44px; }
.mcr-loc .mcr-loc__filter input {
  width: 24px; height: 24px !important; min-height: 0 !important; padding: 0 !important; margin: 0;
  border-radius: 4px !important; accent-color: var(--loc-teal); flex: none;
}
.mcr-loc__filter label { font-weight: 600; line-height: 1.3; cursor: pointer; padding: 10px 0; }
/* The theme's input:focus outline is orange (#F09336), about 2.2:1 on the ivory panel.
   This selector is more specific than the theme's !important rule, so it wins (WCAG 1.4.11). */
.mcr-loc .mcr-loc__field input:focus,
.mcr-loc .mcr-loc__field select:focus,
.mcr-loc .mcr-loc__filter input:focus { outline: 3px solid var(--loc-ink) !important; outline-offset: 2px !important; }

/* Announcements for screen readers; the same words are on screen in the results or the error box. */
.mcr-loc__status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mcr-loc__status.mcr-loc__status--visible {
  position: static; width: auto; height: auto; margin: 0 0 var(--loc-gap); overflow: visible; clip: auto; white-space: normal;
  font-weight: 600;
}

/* ---------- List | Map switch (below 992px): a full-width pill toggle */

.mcr-loc__views {
  display: flex; border: 2px solid var(--loc-ink); border-radius: 50px; overflow: hidden;
  margin: 0 0 var(--loc-gap-l); max-width: 360px;
}
.mcr-loc__view {
  flex: 1 1 0; font: inherit; font-weight: 600; min-height: 44px; padding: 8px 16px;
  background: #fff; color: var(--loc-ink); border: 0; cursor: pointer;
}
.mcr-loc__view + .mcr-loc__view { border-left: 2px solid var(--loc-ink); }
.mcr-loc__view[aria-pressed="true"] { background: var(--loc-ink); color: #fff; }
.mcr-loc__view:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: -6px; border-radius: 50px; }
/* On the pressed (navy) button a navy ring would vanish: draw it white there (white on navy 12.6:1). */
.mcr-loc__view[aria-pressed="true"]:focus-visible { outline-color: #fff; }

/* ---------- body */

.mcr-loc__body { display: block; }
.mcr-loc--js.mcr-loc--show-map .mcr-loc__list { display: none; }
.mcr-loc--js:not(.mcr-loc--show-map) .mcr-loc__mapwrap { display: none; }
.mcr-loc__list:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: 2px; }

/* Theme h3 (clamp 20-40px) with a 24px floor, so on phones it stands a clear step above the 18px h4 rows. */
.mcr-loc .mcr-loc__heading { margin: 0 0 12px; font-size: clamp(24px, 4vw, 40px); }
.mcr-loc__heading:focus { outline: none; }
.mcr-loc__intro, .mcr-loc__summary, .mcr-loc__nohit { margin: 0 0 var(--loc-gap); }
.mcr-loc__note { margin: 0 0 8px; font-size: var(--loc-small); color: var(--loc-muted); }

/* build-time list: one disclosure per council */
.mcr-loc__council { margin: 0; }
/* The row reaches 8px into the gutter on each side (negative margin, matching padding), so the text keeps
   the locator's left edge but the focus ring has room around it. The rule under it stays at the content
   width, drawn as a background line inset by the same 8px. The name wraps; the count stays on the right. */
.mcr-loc__group > summary {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  min-height: 56px; box-sizing: border-box; margin: 0 -8px; padding: 12px 48px 12px 8px; position: relative;
  background: linear-gradient(var(--loc-line), var(--loc-line)) no-repeat 8px 100% / calc(100% - 16px) 1px;
  border-radius: 8px; cursor: pointer; list-style: none;
}
.mcr-loc__group > summary::-webkit-details-marker { display: none; }
/* Chevron: points down when closed, up when open. */
.mcr-loc__group > summary::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 3px solid var(--loc-ink); border-bottom: 3px solid var(--loc-ink); transform: rotate(45deg);
}
.mcr-loc__group[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.mcr-loc__group > summary:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: 0; }
.mcr-loc__group > summary:hover .mcr-loc__council-name { text-decoration: underline; text-underline-offset: 3px; }
/* Theme h4 size (clamp 18-24px). */
.mcr-loc .mcr-loc__council-name { margin: 0; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.mcr-loc__council-count { font-size: var(--loc-small); color: var(--loc-muted); white-space: nowrap; flex: none; }
/* An open council's places are indented behind a soft teal rule, so they read as belonging to it. */
.mcr-loc .mcr-loc__group[open] > .mcr-loc__items {
  margin: 0 0 var(--loc-gap); padding: 0 0 0 16px; border-left: 3px solid #e1edf1;
}

/* One fixed shape for every place row, the same order as the result cards: name, then where, then the badge. */
.mcr-loc .mcr-loc__item {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px;
  padding: 12px 0; margin: 0; border-bottom: 1px solid var(--loc-line);
}
.mcr-loc__item-name { font-weight: 600; line-height: 1.4; }
.mcr-loc__item-meta { color: var(--loc-muted); font-size: var(--loc-small); line-height: 1.4; }
.mcr-loc__item .mcr-need { margin-top: 4px; }

.mcr-loc__more { margin: var(--loc-gap) 0 0; }
.mcr-loc__more > summary {
  display: flex; align-items: center; min-height: 48px; box-sizing: border-box; padding: 12px 0;
  cursor: pointer; font-weight: 700; font-family: var(--TTCommons, inherit); font-size: clamp(18px, 3vw, 24px); line-height: 1.3;
  text-decoration: underline; text-underline-offset: 4px;
}
.mcr-loc__more > summary:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: 2px; border-radius: 4px; }
.mcr-loc__cta { margin: var(--loc-gap-l) 0 0; display: flex; }

/* need badge: icon shape + words + colour */
.mcr-need {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 6px; border-radius: 50px;
  font-size: var(--loc-small); font-weight: 600; line-height: 1.3;
}
.mcr-need__icon { width: 16px; height: 16px; flex: none; }
.mcr-need--high { background: var(--loc-teal); color: #fff; }
.mcr-need--some { background: #e1edf1; color: var(--loc-ink); }
.mcr-need--some .mcr-need__icon { color: var(--loc-teal); }
.mcr-need--none { background: #f0f0ec; color: #3b444c; }
.mcr-need--none .mcr-need__icon { color: var(--loc-none); }

/* result cards */
.mcr-loc .mcr-loc__cards { margin: 0 0 var(--loc-gap); counter-reset: loc; }
.mcr-loc .mcr-loc__card {
  border: 1px solid var(--loc-line); border-radius: var(--loc-radius); padding: var(--loc-panel-pad);
  margin: 0 0 var(--loc-gap); background: #fff;
}
/* Theme h4 size (clamp 18-24px). */
.mcr-loc .mcr-loc__card-name { margin: 0 0 4px; line-height: 1.3; }
.mcr-loc__card-name:focus { outline: 3px solid var(--loc-ink); outline-offset: 2px; border-radius: 4px; }
.mcr-loc .mcr-loc__meta { margin: 0 0 12px; color: var(--loc-muted); }
.mcr-loc .mcr-loc__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 var(--loc-gap); }
.mcr-loc__dist { font-weight: 600; }
.mcr-loc .mcr-loc__actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: 0; }
.mcr-loc .mcr-loc__show, .mcr-loc .mcr-loc__clear {
  font: inherit; font-weight: 600; color: var(--loc-ink); background: none; border: 0; padding: 8px 0;
  min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.mcr-loc .mcr-loc__more-btn { border: 0; cursor: pointer; margin: 0 0 var(--loc-gap); color: var(--loc-ink); }

/* ---------- map */

.mcr-loc__map {
  height: min(60vh, 480px); min-height: 320px; border-radius: var(--loc-radius); overflow: hidden;
  background: #fdf9ea; border: 1px solid var(--loc-line); box-sizing: border-box;
}
.mcr-loc__map .leaflet-tile-pane { filter: saturate(0.22) sepia(0.28) brightness(1.1) contrast(0.9); }
.mcr-loc__map:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: 2px; }
/* Map credits sit under the map as a caption (on the map they covered the bottom 75-90px on phones). */
.mcr-loc .mcr-loc__attrib { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--loc-muted); }
.mcr-loc .mcr-loc__attrib a { color: var(--loc-ink); text-decoration: underline; text-underline-offset: 2px; }

/* The pin box is at least 24px (WCAG 2.5.8) even where the drawn shape is 18-22px; the SVG sits centred in it. */
.mcr-pin { background: none; border: 0; display: flex; align-items: center; justify-content: center; }
.mcr-pin svg { display: block; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
.mcr-pin--high { color: var(--loc-teal); }
.mcr-pin--some { color: var(--loc-teal); }
.mcr-pin--none { color: var(--loc-none); }
.mcr-pin:focus-visible, .mcr-cluster:focus-visible { outline: 3px solid var(--loc-ink); outline-offset: 3px; border-radius: 50%; }

.mcr-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; color: var(--loc-ink);
  border: 3px solid var(--loc-teal); font-weight: 700; font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.mcr-cluster--high { background: var(--loc-teal); color: #fff; border-color: #fff; outline: 2px solid var(--loc-teal); }

.mcr-pin-you span {
  display: block; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  background: var(--MCR-Yellow, #F8D45B); border: 4px solid var(--loc-ink);
}

.mcr-loc__popup { font-size: 16px; color: var(--loc-ink); }
.mcr-loc__popup p { margin: 0 0 8px; }
.mcr-loc__popup-name { font-weight: 700; font-size: 17px; }
.mcr-loc__popup-meta { color: var(--loc-muted); }
.mcr-loc__popup .button { display: inline-flex; color: var(--loc-ink); }

/* Map key: compact chips under the map, 8px apart, no theme li margins. */
.mcr-loc .mcr-loc__legend {
  margin: var(--loc-gap) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.mcr-loc .mcr-loc__legend > li { margin: 0; padding: 0; display: flex; align-items: center; min-height: 32px; }
.mcr-loc__legend-item { gap: 8px; font-size: var(--loc-small); line-height: 1.3; }
.mcr-loc__legend .mcr-cluster {
  width: 28px; height: 28px; box-sizing: border-box; font-size: 12px; flex: none; box-shadow: none;
}
.mcr-loc__legend .mcr-cluster--high { outline-offset: 0; }
.mcr-loc .mcr-loc__updated {
  margin: var(--loc-gap-l) 0 0; padding-top: var(--loc-gap); border-top: 1px solid var(--loc-line);
  font-size: var(--loc-small); color: var(--loc-muted);
}

/* ---------- 768px: theme tablet step. 20px radii, 50px gutters (the header's own side padding). */

@media (min-width: 768px) {
  .mcr-loc .mcr-loc__group[open] > .mcr-loc__items { padding-left: 20px; }
  .mcr-loc {
    --loc-radius: 20px;
    --loc-gutter: 50px;
    --loc-gap: 20px;
    --loc-gap-l: 32px;
    --loc-panel-pad: 24px;
    padding: 40px var(--loc-gutter) 50px;
  }
  .school-locator-block .school-locator-header { padding: 60px 50px 50px; border-radius: 20px 20px 0 0; }
  .mcr-loc__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "q r" "btns btns"; align-items: end; }
  .mcr-loc .mcr-loc__btn { flex: 0 0 auto; }
  .mcr-loc__map { height: min(60vh, 520px); }
}

/* ---------- 992px: theme desktop step. Search in one row; list left, map right (sticky under the fixed header). */

@media (min-width: 992px) {
  .mcr-loc {
    --loc-gap-l: 32px;
  }
  .mcr-loc__fields {
    grid-template-columns: minmax(0, 2fr) minmax(9em, 1fr) auto;
    grid-template-areas: "q r btns";
  }
  .mcr-loc--js .mcr-loc__views { display: none !important; }
  .mcr-loc--js .mcr-loc__body {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--loc-gap-l); align-items: start;
  }
  .mcr-loc--js .mcr-loc__list { display: block !important; }
  .mcr-loc--js .mcr-loc__mapwrap:not([hidden]) {
    display: block !important; position: sticky; top: calc(var(--header-offset, 130px) - 20px);
  }
  .mcr-loc__map { height: clamp(400px, calc(100vh - 300px), 600px); }
}