/* ==========================================================================
   OUR LOCATIONS AND ORDER ONLINE
   --------------------------------------------------------------------------
   Loaded on the locations archive, on the Order Online page and on a single
   location page, beside site.css.

   The archive and Order Online are one locator (template-parts/locator.php):
   one screen, a panel of controls and results on the left and the map filling
   the rest. The document never scrolls; only the results list does. From 1280px
   the panel runs to the top of the window and the compact header sits over the
   map. From 1024px to 1279px the same split sits under a full-width compact
   header. Below 1024px the panel and the map share the screen and LIST | MAP
   picks which is shown.

     .locator--mapped    at least one location has verified coordinates, so
                         the map column is a real tile map.
     .locator--unmapped  no location has coordinates, so the map column is a
                         designed "where to find us" panel and no switch is
                         drawn.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE SHELL
   --------------------------------------------------------------------------
   The header is fixed and transparent elsewhere, with a scrim that spills
   60px below it over hero photography. Here there is no hero, and header.php
   prints it in its compact scrolled form. --loc-head is the header's measured
   height (locations.js keeps it current); var(--header-h-sm) is the no-JS
   fallback. --loc-side is the panel's width, which the header also starts from.
   -------------------------------------------------------------------------- */
body.bcx-locator {
  --loc-side: clamp(26.25rem, 30vw, 28.75rem);
}

body.bcx-locator .site-header::before { inset: 0; }

.locator-main {
  --loc-head: var(--header-h-sm);
  box-sizing: border-box;
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(var(--loc-head) + 26rem);
  padding-top: var(--loc-head);
  background: var(--ink-0);
  color: var(--text);
}

.locator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border-top: 1px solid var(--line);
}

.locator__controls,
.locator__switch,
.locator__list,
.locator__map { min-width: 0; }

/* --------------------------------------------------------------------------
   ORDER MODE: the page's heading, and the branch's own ordering buttons
   -------------------------------------------------------------------------- */
.locator__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .7rem;
}

.locator__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

.locator__sub {
  margin: 0;
  font-size: .86rem;
  color: var(--mute);
}

.locator__warn {
  margin: 0;
  padding: .5rem .7rem;
  border-left: 3px solid var(--red-ui);
  background: var(--ink-0);
  font-size: .84rem;
  line-height: 1.4;
  color: var(--text);
}

.loccard__btns {
  flex: 1 0 100%;
  display: grid;
  gap: 8px;
}

.loccard__btns .btn {
  width: 100%;
  justify-content: center;
}

.loccard__btns--none { display: block; }

.loccard__none {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--mute);
}

.locator__pagenote {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--mute);
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.locator__controls {
  display: grid;
  gap: .7rem;
  padding: 14px var(--gutter, 16px) 12px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}

.locsearch {
  position: relative;
  display: flex;
  align-items: center;
}

.locsearch__icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--mute);
  pointer-events: none;
}

.locsearch__field {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--ink-0);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 1rem; /* 16px: no zoom-on-focus on iOS */
  transition: border-color .2s var(--ease);
}

.locsearch__field::placeholder { color: var(--mute-2); }

.locsearch__field:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 28%, transparent);
}

.locsearch__field::-webkit-search-cancel-button { display: none; }

.locsearch__clear {
  position: absolute;
  right: 2px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
}

.locsearch__clear:hover,
.locsearch__clear:focus-visible { color: var(--white); }

.locator__tools {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.locator__state,
.locator__near {
  flex: 1 1 10rem;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.locator__state {
  padding: 0 2.2rem 0 .85rem;
  background-color: var(--ink-0);
  color: var(--text);
}

.locator__near {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0 1rem;
  background: transparent;
  color: var(--white);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.locator__near:hover,
.locator__near:focus-visible {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
}

.locator__near[aria-busy="true"] { cursor: progress; opacity: .75; }

.locator__near .icon { width: 18px; height: 18px; color: var(--red); }

.locator__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 28px;
}

.locator__count {
  margin: 0;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}

.locator__count b { color: var(--white); font-weight: 800; }

.locator__reset {
  min-height: 32px;
  padding: 0 .25rem;
  border: 0;
  background: transparent;
  color: var(--red);
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.locator__reset:hover,
.locator__reset:focus-visible { color: var(--white); }

.locator__note {
  margin: 0;
  padding: .55rem .75rem;
  border-left: 3px solid var(--red);
  background: var(--ink-0);
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   LIST | MAP, below the split only
   -------------------------------------------------------------------------- */
.locator__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px var(--gutter, 16px);
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}

.locator__mode {
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--mute);
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.locator__mode:hover { color: var(--white); }

.locator__mode[aria-pressed="true"] {
  border-color: var(--red-ui);
  background: var(--red-ui);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   RESULTS -- the one thing on this page that scrolls
   -------------------------------------------------------------------------- */
.locator__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--gutter, 16px) calc(20px + env(safe-area-inset-bottom));
  background: var(--ink-0);
  scrollbar-color: var(--line-2) transparent;
}

.loclist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loclist__empty {
  display: grid;
  justify-items: start;
  gap: .8rem;
  margin: 0;
  padding: 1.25rem 0;
  font-family: var(--f-body);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--mute);
}

.loclist__empty p { margin: 0; }

.loclist__empty strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}

.locator--none {
  display: grid;
  place-items: center;
  padding: var(--gutter, 16px);
  text-align: center;
}

/* --------------------------------------------------------------------------
   A CARD
   -------------------------------------------------------------------------- */
.loccard {
  position: relative;
  display: grid;
  gap: .4rem;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
  cursor: pointer;
  scroll-margin: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.loccard:hover { border-color: var(--line-2); }

.loccard[aria-current="true"] {
  border-color: var(--red);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--red) 14%, transparent), transparent 70%),
    var(--ink-1);
  box-shadow: inset 3px 0 0 var(--red);
}

.loccard__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.loctype,
.locstate,
.loccard__dist {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 22px;
  padding: 0 .5rem;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.loctype {
  border: 1px solid var(--line-2);
  color: var(--text);
}

.loctype .icon { width: 13px; height: 13px; color: var(--red); }

.locstate { border: 1px solid transparent; }

.locstate[data-loc-badge="open"] {
  background: color-mix(in srgb, var(--white) 92%, transparent);
  color: var(--ink-text);
}

.locstate[data-loc-badge="open"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-ui);
}

.locstate[data-loc-badge="closed"] {
  border-color: var(--line-2);
  color: var(--mute);
}

.locstate[data-loc-badge="unknown"] {
  border-color: var(--line);
  border-style: dashed;
  color: var(--mute-2);
}

.locstate[data-loc-badge="status"] {
  background: var(--red-deep);
  color: var(--white);
}

.locstate--sample {
  border-color: var(--red);
  color: var(--red);
}

.loccard__dist {
  margin-left: auto;
  padding-right: 0;
  color: var(--white);
}

.loccard__name {
  margin: .1rem 0 0;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.loccard__name a {
  color: var(--white);
  text-decoration: none;
}

.loccard__name a:hover,
.loccard__name a:focus-visible { color: var(--red); }

.loccard__addr,
.loccard__line {
  margin: 0;
  font-family: var(--f-body);
  font-size: .84rem;
  line-height: 1.45;
  color: var(--mute);
}

.loccard__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .9rem;
}

.loccard__hours { color: var(--text); }

.loccard__phone {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}

.loccard__phone:hover,
.loccard__phone:focus-visible { color: var(--white); text-decoration-color: currentColor; }

.loccard__line--order { gap: 0 .3em; font-size: .78rem; color: var(--mute-2); }

.loccard__line--order:has([data-loc-hours][hidden]) { display: none; }

.loccard__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
}

.loccard__acts .btn { flex: 0 1 auto; }

.loccard__pin {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 42px;
  margin-left: auto;
  padding: 0 .6rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--mute);
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.loccard__pin .icon { width: 16px; height: 16px; color: var(--red); }

.loccard__pin:hover,
.loccard__pin:focus-visible { color: var(--white); }

.loccard__note {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--f-body);
  font-size: .76rem;
  line-height: 1.4;
  color: var(--mute-2);
}

/* --------------------------------------------------------------------------
   THE MAP COLUMN
   -------------------------------------------------------------------------- */
.locator__map {
  position: relative;
  min-height: 0;
  background: var(--ink-2);
}

.locator .locmap {
  border: 0;
  border-radius: 0;
}

.locator .locmap__canvas {
  min-height: 0;
  touch-action: none; /* the list scrolls; the map pans */
}

/* The attribution sits over the map's corner, as map credits do, so the map
   keeps its full height. */
.locator .locmap__attr {
  position: absolute;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 5;
  max-width: 100%;
  padding: .3rem .6rem;
  border: 0;
  border-top-left-radius: var(--radius);
  background: color-mix(in srgb, var(--ink-0) 82%, transparent);
}

/* No map: the panel sits under the list as a compact strip on phones and
   tablets, and fills the column on desktop. */
.locator--unmapped .locmap--empty {
  height: 100%;
  border-width: 1px 0 0;
  border-radius: 0;
  align-content: start;
}

/* --------------------------------------------------------------------------
   BELOW THE SPLIT: ONE VIEW AT A TIME
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .locator--mapped .locator__list,
  .locator--mapped .locator__map { grid-row: 3; grid-column: 1; }

  .locator--mapped[data-mode="list"] .locator__map,
  .locator--mapped[data-mode="map"] .locator__list { display: none; }

  .locator--unmapped { grid-template-rows: auto minmax(0, 1fr) auto; }

  .locator--unmapped .locator__map { grid-row: 3; }

  .locator--unmapped .locmap--empty {
    gap: .6rem;
    padding: 14px var(--gutter, 16px);
  }

  .locator--unmapped .locmap--empty .locmap__title { font-size: 1.15rem; }

  .locator--unmapped .locmap--empty .locmap__text { font-size: .8rem; }

  .locator--unmapped .locmap__cities {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
  }

  .locator--unmapped .locmap__city {
    padding: 0;
    border: 0;
    font-size: .95rem;
  }
}

/* --------------------------------------------------------------------------
   THE SPLIT
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .locator {
    grid-template-columns: var(--loc-side) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .locator__switch { display: none; }

  .locator__controls { grid-column: 1; grid-row: 1; padding-inline: 20px; }

  .locator__list {
    grid-column: 1;
    grid-row: 2;
    padding-inline: 20px;
  }

  .locator__controls,
  .locator__list { border-right: 1px solid var(--line); }

  .locator__map { grid-column: 2; grid-row: 1 / -1; }

  .locator--unmapped .locmap--empty {
    border-width: 0;
    align-content: center;
    padding: clamp(32px, 4vw, 64px);
  }
}

/* The compact header moves over the map, and the panel takes the full height.
   The map runs under the header, so --loc-map-top tells its controls where the
   clear part starts. locations.js measures the same overlap for popups and fits. */
@media (min-width: 1280px) {
  body.bcx-locator .site-header--locator { left: var(--loc-side); }

  .site-header--locator .site-header__inner {
    max-width: none;
    padding-inline: clamp(20px, 2vw, 32px);
  }

  .locator-main {
    min-height: 26rem;
    padding-top: 0;
  }

  .locator { border-top: 0; }

  .locator__map { --loc-map-top: var(--header-h-sm); }
}

/* Small phones: every pixel of height goes to the list or the map, so the
   controls tighten and the state filter and Find Nearest share one row. */
@media (max-width: 479px) {
  .locator__controls { gap: .5rem; padding-block: 10px; }
  .locsearch__field { height: 44px; }
  .locator__tools { flex-wrap: nowrap; }
  .locator__tools .locator__state,
  .locator__tools .locator__near { flex: 1 1 0; font-size: .74rem; }
  .locator__near { padding-inline: .5rem; gap: .35rem; }
  .locator__meta { min-height: 24px; }
  .locator__switch { padding-block: 4px; }
  .loccard__acts .btn { flex: 1 1 auto; }
}

/* A short phone looking at the map: the heading steps aside for the map and
   stays in the document for assistive technology. It returns on List. */
@media (max-width: 1023px) and (max-height: 600px) {
  .locator--mapped[data-mode="map"] .locator__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   THE MAP
   --------------------------------------------------------------------------
   Hand-built over raster tiles: no mapping library, no API key, no paid
   service, nothing to go stale in a vendor bundle. locations.js positions
   the tiles and the markers; everything visual is here.
   ========================================================================== */
.locmap {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-1);
  overflow: hidden;
}

.locmap__canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  background: var(--ink-2);
  cursor: grab;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.locmap__canvas.is-dragging { cursor: grabbing; }

.locmap__tiles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.locmap__tile {
  position: absolute;
  width: 256px;
  height: 256px;
  /* The tiles are a light street map; this settles them into the dark page
     without hiding the streets. */
  filter: grayscale(.35) brightness(.78) contrast(1.08) saturate(.7);
  user-select: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   A MARKER
   -------------------------------------------------------------------------- */
.locmap__pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -34px 0 0 -17px; /* the point of the pin is the coordinate */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}

.locmap__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--white);
  border-radius: 50% 50% 50% 0;
  background: var(--red-ui);
  transform: rotate(-45deg);
  box-shadow: 0 6px 16px rgb(0 0 0 / .45);
}

.locmap__pin span {
  position: relative;
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--white);
}

.locmap__pin:hover,
.locmap__pin:focus-visible {
  transform: translateY(-3px) scale(1.06);
  z-index: 3;
}

.locmap__pin[aria-current="true"] {
  z-index: 4;
  transform: translateY(-4px) scale(1.14);
}

.locmap__pin[aria-current="true"]::before {
  background: var(--white);
  border-color: var(--red);
}

.locmap__pin[aria-current="true"] span { background: var(--red); }

/* Several locations too close to tell apart at this zoom. Selecting it zooms
   in until they separate. */
.locmap__cluster {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px; /* centred on the group */
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--red-ui);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--red-ui) 30%, transparent), 0 6px 16px rgb(0 0 0 / .45);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}

.locmap__cluster:hover,
.locmap__cluster:focus-visible { transform: scale(1.08); z-index: 3; }

/* --------------------------------------------------------------------------
   THE POPUP, anchored to the selected marker
   -------------------------------------------------------------------------- */
.locmap__pop {
  position: absolute;
  z-index: 6;
  /* locations.js sets left/top so the whole popup stays inside the map and
     --arrow-x so the arrow still points at the marker. */
  --arrow-x: 50%;
  width: min(17rem, calc(100% - 16px));
  padding: .85rem 2.2rem .95rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--ink-0);
  box-shadow: 0 18px 44px rgb(0 0 0 / .5);
}

.locmap__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: solid var(--line-2);
  border-width: 0 1px 1px 0;
  background: var(--ink-0);
  transform: rotate(45deg);
}

.locmap__pop.is-below::after {
  top: 0;
  transform: rotate(-135deg);
}

.locmap__pop-name {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
}

.locmap__pop-text {
  margin: 0 0 .6rem;
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--mute);
}

.locmap__pop-acts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.locmap__pop-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--mute);
  cursor: pointer;
}

.locmap__pop-close:hover,
.locmap__pop-close:focus-visible { color: var(--white); }

/* --------------------------------------------------------------------------
   ZOOM
   -------------------------------------------------------------------------- */
.locmap__zoom {
  position: absolute;
  top: calc(var(--loc-map-top, 0px) + 10px);
  right: 10px;
  z-index: 5;
  display: grid;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ink-0) 82%, transparent);
  backdrop-filter: blur(6px);
}

.locmap__zoom button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.locmap__zoom button:hover,
.locmap__zoom button:focus-visible {
  background: var(--red-ui);
  color: var(--white);
}

.locmap__zoom button[disabled] {
  color: var(--mute-2);
  cursor: default;
}

.locmap__zoom button[disabled]:hover { background: transparent; color: var(--mute-2); }

/* --------------------------------------------------------------------------
   ATTRIBUTION -- a tile provider's licence requirement, not decoration.
   Printed only where tiles are actually fetched.
   -------------------------------------------------------------------------- */
.locmap__attr {
  flex: 0 0 auto;
  padding: .5rem .8rem;
  border-top: 1px solid var(--line);
  background: var(--ink-0);
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--mute-2);
}

.locmap__attr a { color: var(--mute); }

/* ==========================================================================
   THE PANEL THAT APPEARS WHERE A MAP CANNOT
   --------------------------------------------------------------------------
   Shown when no location has verified coordinates -- which is the state of
   the records today. It is the map's designed alternative, so it carries the
   same frame and the same angle language as the rest of the brand instead of
   looking like something that failed.
   ========================================================================== */
.locmap--empty {
  display: grid;
  gap: 1rem;
  height: auto;
  padding: clamp(22px, 2.6vw, 32px);
  border-color: var(--line-2);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red-ember) 20%, transparent), transparent 62%),
    var(--ink-1);
}

.locmap--empty .locmap__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: .95;
  text-transform: uppercase;
  color: var(--white);
}

.locmap--empty .locmap__text {
  margin: 0;
  max-width: 44ch;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--mute);
}

/* The cities, set as type. This is the one thing a map would have told a
   visitor at a glance that a list of addresses does not. */
.locmap__cities {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locmap__city {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}

.locmap__city b {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--red);
}

/* ==========================================================================
   A SINGLE LOCATION
   ========================================================================== */
.locpage__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
  .locpage__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem);
    align-items: start;
  }

  .locpage__aside {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
  }
}

.locpage__block + .locpage__block {
  margin-top: clamp(28px, 3.5vw, 48px);
}

.locpage__h {
  margin-bottom: 1rem;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-text);
}

/* The week, as a table of what is recorded. A day the owner has not filled
   in reads "Hours unavailable" -- never a guess, and never blank. */
.lochours {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
  font-size: .92rem;
}

.lochours caption {
  margin-bottom: .6rem;
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  font-variation-settings: "wdth" 72;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: left;
  color: var(--red-deep);
}

.lochours th,
.lochours td {
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--line-ink);
  text-align: left;
  vertical-align: baseline;
}

.lochours th {
  width: 9rem;
  font-weight: 700;
  color: var(--ink-text);
}

.lochours td { color: var(--ink-mute); }

.lochours tr[data-state="open"] td { color: var(--ink-text); }

.lochours tr[data-state="unknown"] td {
  font-style: italic;
  color: var(--ink-mute);
}

.lochours tr[data-today="true"] th,
.lochours tr[data-today="true"] td {
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.lochours tr[data-today="true"] th { color: var(--red-deep); }

/* The facts panel beside the body copy. */
.locfacts {
  display: grid;
  gap: 1rem;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line-ink);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-lg);
  background: var(--bone-2);
}

.locfacts__row {
  display: grid;
  gap: .25rem;
}

.locfacts__k {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.locfacts__v {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-text);
}

.locfacts__v a {
  color: var(--ink-text);
  text-decoration-color: var(--line-ink);
  text-underline-offset: .18em;
}

.locfacts__v a:hover,
.locfacts__v a:focus-visible { text-decoration-color: var(--red); }

.locfacts__acts {
  display: grid;
  gap: .5rem;
}

/* Ordering destinations, on the location's own page. One row per confirmed
   provider and mode -- never another location's link. */
.locprov {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.locprov__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  background: var(--bone-2);
}

.locprov__name {
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-text);
}

.locprov__modes {
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* A location with nothing confirmed says so in plain words. */
.locprov--none {
  padding: 1rem;
  border: 1px dashed var(--line-ink);
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--ink-mute);
}

/* The map on a single location page: same engine, one marker, shorter. */
.locpage .locmap {
  height: clamp(280px, 38vh, 420px);
  border-color: var(--line-ink);
  background: var(--bone-2);
}

.locpage .locmap--empty {
  height: auto;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 60%),
    var(--bone-2);
}

.locpage .locmap--empty .locmap__title { color: var(--ink-text); }
.locpage .locmap--empty .locmap__text { color: var(--ink-mute); }

.locpage .locmap__attr {
  background: var(--bone-2);
  border-top-color: var(--line-ink);
  color: var(--ink-mute);
}

.locpage .locmap__attr a { color: var(--ink-mute); }

/* ==========================================================================
   OTHER LOCATIONS, at the foot of a single location page
   ========================================================================== */
.locnear {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .locnear { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}

.locnear__item {
  display: grid;
  gap: .35rem;
  padding: var(--loc-pad, 1.1rem);
  border: 1px solid var(--line-ink);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--bone-2);
  transition: border-color .25s var(--ease);
}

.locnear__item:hover { border-left-color: var(--red); }

.locnear__name {
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
}

.locnear__name a {
  color: var(--ink-text);
  text-decoration: none;
}

.locnear__name a:hover,
.locnear__name a:focus-visible { color: var(--red-deep); }

.locnear__meta {
  font-family: var(--f-body);
  font-size: .85rem;
  color: var(--ink-mute);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .locmap__pin,
  .loccard,
  .locnear__item { transition: none; }

  .locmap__pin:hover,
  .locmap__pin:focus-visible,
  .locmap__pin[aria-current="true"] { transform: none; }
}

/* ==========================================================================
   PRINT -- the addresses and the phone numbers, nothing interactive
   ========================================================================== */
@media print {
  .locator__controls,
  .locator__switch,
  .locator__map,
  .locmap,
  .loccard__acts,
  .locpage__aside .locfacts__acts { display: none; }

  .locator-main { height: auto; min-height: 0; padding-top: 0; }

  .locator { display: block; height: auto; }

  .locator__list { overflow: visible; }

  .locator--mapped[data-mode="map"] .locator__list { display: block; }

  .loclist { grid-template-columns: 1fr 1fr; }

  .loccard {
    border: 0;
    border-bottom: 1px solid var(--line-ink);
    background: none;
    page-break-inside: avoid;
  }
}

/* The map-side header keeps the scrolled header's sizes, but the column is narrower
   than the page: the nav shares out what is left instead of using the page's gaps.
   Below 1366px it steps down to the sizes the same header uses at 1100-1279px. */
@media (min-width: 1280px) {
  .site-header--locator .site-header__inner { gap: 16px; padding-inline: 20px; }
  .site-header--locator .primary-nav { flex: 1 1 auto; min-width: 0; margin-left: 0; }
  .site-header--locator .primary-nav__list { justify-content: space-evenly; gap: 12px; }
  .site-header--locator .site-header__actions { flex: none; margin-left: 0; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  .site-header--locator .primary-nav a { font-size: .875rem; }
  .site-header--locator .site-header__order { font-size: .95rem; padding: 0 1.6em; }
}