/* Portland guide on the site's look (base.css supplies tokens and controls).
   Place-type colors stay: the map and the list use them to match pins to places. */

:root {
  --fir: #163a2c; /* quadrant lines and walking rings on the map (read by portland.js) */
  --moss: #4e6358;
  --coffee: #6f4a2e;
  --bakery: #c2662d;
  --dessert: #c93f7c;
  --bar: #a87400;
  --restaurant: #b8322a;
  --food-cart: #1f78a0;
  --thing-to-do: #3b7a36;
  --other: #5b5f8f;
  --guide-width: 36rem;
}

[class*="type-"] { --kind: var(--other); }
.type-coffee { --kind: var(--coffee); }
.type-bakery { --kind: var(--bakery); }
.type-dessert { --kind: var(--dessert); }
.type-bar { --kind: var(--bar); }
.type-restaurant { --kind: var(--restaurant); }
.type-food-cart { --kind: var(--food-cart); }
.type-thing-to-do { --kind: var(--thing-to-do); }

.guide {
  padding: 0 16px 48px;
}

.intro {
  max-width: 34em;
  margin: 16px 0 0;
  color: var(--text-2);
}

.filters {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.filter,
.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter button,
.tools button {
  font-size: 14px;
}

.filter button[class^="type-"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kind);
  content: "";
}

.filter button[aria-pressed="true"],
.tools button[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
}

.tools {
  margin-top: 4px;
}

.status:empty {
  display: none;
}

.status,
.hint {
  color: var(--text-2);
  font-size: 14px;
}

.hint {
  max-width: 34em;
  margin-bottom: 16px;
}

.map {
  height: 55vh;
  min-height: 18rem;
  margin: 0 -16px 32px;
  background: var(--bg-3);
}

.quadrant-label span {
  position: absolute;
  color: var(--fir);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  opacity: .35;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.leaflet-tooltip.walk-label {
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: rgb(243 246 244 / 85%);
  box-shadow: none;
  color: var(--fir);
  font: 700 12px var(--sans);
}

.leaflet-tooltip.walk-label::before {
  display: none;
}

.worth-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 12px;
  font-size: 14px;
}

.worth-key dt {
  flex-basis: 100%;
  font-weight: 600;
}

.worth-key dd {
  margin: 0;
}

.kind {
  margin-top: 32px;
}

.kind h2 {
  padding-bottom: 6px;
  border-bottom: 3px solid var(--kind);
  font-size: 17px;
}

.kind ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.place {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 1rem;
}

.place.is-selected {
  padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--kind);
}

.place h3 {
  font-size: 16px;
}

/* A text link, not one of the site's pill buttons. */
button.place-name,
button.place-name:hover {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--kind);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.distance {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
}

.worth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14px;
}

.worth-4,
.worth-3 {
  color: var(--text);
  font-weight: 600;
}

.meter {
  display: inline-flex;
  gap: 3px;
}

.meter i {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--kind, var(--text));
  border-radius: 50%;
}

.meter i.on {
  background: var(--kind, var(--text));
}

.description p {
  max-width: 34em;
  margin-top: 6px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 14px;
}

.links a {
  color: var(--text-2);
  text-underline-offset: .2em;
}

.links a:hover {
  color: var(--text);
}

.empty {
  margin-top: 32px;
  padding: 0;
}

.leaflet-tile-pane {
  filter: grayscale(.9) contrast(.85) brightness(1.06);
}

/* Leaflet popups are always white, so they keep fixed dark text in dark mode. */
.leaflet-popup-content {
  color: var(--fir);
  font: 14px/1.5 var(--sans);
}

.leaflet-popup-content .popup-worth,
.leaflet-popup-content a {
  color: var(--fir);
  font-weight: 600;
}

.leaflet-popup-content p {
  margin: 6px 0 0;
  color: var(--moss);
}

/* Phones: keep the map pinned to the top while the list scrolls under it. */
@media (max-width: 59.99rem) {
  .filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
    scrollbar-width: none;
  }

  .filter button {
    flex: none;
    min-height: 44px;
  }

  .map {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 40vh;
    height: 40svh;
    min-height: 14rem;
    margin-bottom: 8px;
  }

  .place {
    scroll-margin-top: calc(max(40svh, 14rem) + 1rem);
  }

  .links a {
    padding: 8px 0;
  }
}

/* Wide screens: the list on the left, the map filling the rest below the site header. */
@media (min-width: 60rem) {
  body > .bar {
    position: sticky;
    top: 0;
    z-index: 1001; /* above Leaflet's controls, so the site menu stays usable */
  }

  .guide {
    width: var(--guide-width);
    padding: 0 24px 64px;
  }

  .map {
    position: fixed;
    inset: 57px 0 0 var(--guide-width); /* below the header bar: 36px controls, 20px padding, 1px border */
    height: auto;
    margin: 0;
  }
}