/* ==========================================================================
   The front page — direction B.

   True white ground, layered soft shadow, larger radii, and the search as one
   floating pill with the locate button inside it. The tokens are in app.css so
   the storefront and the checkout inherit the same vocabulary in slice R rather
   than re-deriving it.

   The shop card itself is NOT here. Three pages render it, so it lives in
   app.css — a shared component in a page stylesheet is the mistake that left
   the kitchen board unstyled once.
   ========================================================================== */

body { background: var(--b-ground); }

/* --- Hero ----------------------------------------------------------------- */

.finder-hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) 1.25rem 2rem;
  text-align: center;
}

.finder-hero__title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin-bottom: 0.75rem;
}

.finder-hero__lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
  text-wrap: balance;
}

/* --- The search pill ------------------------------------------------------ */

/*
  One control, not three sitting next to each other. The input, the locate
  button and the submit all live inside a single rounded surface, which is what
  makes it read as an object rather than as a form.

  `position: relative` is load-bearing: the suggestion list hangs off it.
*/
.findbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  background: var(--b-raised);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-pill);
  box-shadow: var(--b-shadow);
  transition: box-shadow 0.16s ease;
}

.findbar:focus-within { box-shadow: var(--b-shadow-lift); }

.findbar__field { flex: 1; min-width: 0; }

.findbar__input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0.7rem 0;
  font-size: var(--step-0);
  outline: none;
}

.findbar__input::placeholder { color: var(--ink-faint); }

/* Chrome draws its own clear button on type=search and it fights the pill. */
.findbar__input::-webkit-search-decoration,
.findbar__input::-webkit-search-cancel-button { display: none; }

.findbar__gps {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--b-sunken);
  color: var(--ink-soft);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.findbar__gps:hover { background: var(--line-soft); color: var(--ink); }
.findbar__gps[hidden] { display: none; }
.findbar__gps.is-busy { animation: findbar-pulse 1s ease-in-out infinite; }

@keyframes findbar-pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .findbar__gps.is-busy { animation: none; opacity: 0.6; }
  .shopcard { transition: none; }
}

.findbar__go {
  flex-shrink: 0;
  border-radius: var(--b-radius-pill);
  padding-inline: 1.4rem;
}

.findbar__note {
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: 0.75rem;
  min-height: 1.2em;
}

/* --- Address suggestions -------------------------------------------------- */

.findbar__suggest {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--b-raised);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  box-shadow: var(--b-shadow-lift);
  overflow: hidden;
  text-align: left;
}

/* A base rule that sets `display` outranks the UA's [hidden] rule. Cost paid
   once already on the slot picker. */
.findbar__suggest[hidden] { display: none; }

.findbar__suggest li {
  padding: 0.65rem 1.1rem;
  cursor: pointer;
  font-size: var(--step-0);
}

.findbar__suggest li + li { border-top: 1px solid var(--b-line); }
.findbar__suggest li:hover,
.findbar__suggest li[aria-selected="true"] { background: var(--b-sunken); }

.findbar__suggest small { display: block; color: var(--ink-faint); font-size: var(--step--1); }

/* --- Results: list beside a map ------------------------------------------- */

.finder-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
}

.finder-results__heading {
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/*
  The map is a tall sticky panel beside a list that scrolls. Its own rounded
  surface, because a full-bleed map on a white page has no edge and the results
  look like they are floating over the country.
*/
.finder-results__map {
  position: sticky;
  top: 1.5rem;
  height: min(34rem, 70vh);
  border-radius: var(--b-radius-lg);
  overflow: hidden;
  border: 1px solid var(--b-line);
  box-shadow: var(--b-shadow);
  background: var(--b-sunken);
}

.finder-results__map > * { height: 100%; }

.finder-empty {
  padding: 2rem 1.5rem;
  background: var(--b-sunken);
  border-radius: var(--b-radius-lg);
  text-align: center;
}

.finder-empty p { color: var(--ink-soft); margin-bottom: 1.25rem; text-wrap: balance; }

/* --- The network, and the city links -------------------------------------- */

.finder-network {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 5rem;
}

.finder-network .section__title {
  font-size: var(--step-2);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.finder-cities { margin-top: 2.5rem; }

.finder-cities__title {
  font-size: var(--step-0);
  font-weight: 650;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}

.finder-cities__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.finder-cities__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius-pill);
  background: var(--b-raised);
  text-decoration: none;
  font-size: var(--step--1);
  transition: border-color 0.14s ease;
}

.finder-cities__list a:hover { border-color: var(--b-line-str); }
.finder-cities__list .mono { color: var(--ink-faint); font-size: 0.75rem; }

/* --- City and cuisine pages ----------------------------------------------- */

.citypage { max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }

.citypage__crumb { margin-bottom: 1.25rem; font-size: var(--step--1); }
.citypage__crumb a { color: var(--ink-soft); text-decoration: none; }
.citypage__crumb a:hover { color: var(--ink); text-decoration: underline; }

.citypage__title {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.citypage__list { margin-top: 1.75rem; }
.citypage .finder-cities { margin-top: 3rem; }

/* --- Narrow --------------------------------------------------------------- */

@media (max-width: 60rem) {
  .finder-results { grid-template-columns: 1fr; }

  /* Map first on a phone: "where is this" is the question a small screen asks
     before "what are the terms". */
  .finder-results__map { order: -1; position: static; height: 15rem; }
}

@media (max-width: 33rem) {
  .findbar {
    flex-wrap: wrap;
    border-radius: var(--b-radius-lg);
    padding: 0.75rem;
  }

  .findbar__field { flex: 1 1 100%; order: -1; padding-inline: 0.5rem; }
  .findbar__go { flex: 1; }
}