/*!
 * Free WiFi Map - page styles
 * Loaded only on /free-wifi-map/. Uses the design tokens from style.css so the
 * map page themes with the rest of the site.
 */

/* Fixed-height map box: reserved before Leaflet initialises, so the map cannot
   shift the page as it loads. */
.map-shell {
  position: relative;
  border: 1px solid var(--wst-line);
  border-radius: var(--wst-radius);
  overflow: hidden;
  box-shadow: var(--wst-shadow-sm);
  background: var(--wst-bg-soft);
  height: clamp(380px, 62vh, 640px);
}
.map-canvas { position: absolute; inset: 0; }

/* Leaflet paints its own surfaces; keep them on our palette. */
.leaflet-container {
  background: var(--wst-bg-soft);
  font: inherit;
}
.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--wst-surface);
  color: var(--wst-ink);
  border-color: var(--wst-line);
}
.leaflet-control-zoom a:hover { background: var(--wst-bg-soft); color: var(--wst-accent); }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--wst-surface) 88%, transparent);
  color: var(--wst-muted);
}
.leaflet-control-attribution a { color: var(--wst-accent); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--wst-surface);
  color: var(--wst-body);
  box-shadow: var(--wst-shadow-lg);
}
.leaflet-popup-content { margin: .85rem 1rem; }

/* ------------------------------------------------------------- map markers */
.wifi-pin { background: none; border: 0; }
.wifi-pin__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  color: #fff;
  border: 2px solid var(--wst-surface);
  box-shadow: 0 4px 10px rgba(15, 35, 64, .3);
}
.wifi-pin__dot svg { transform: rotate(45deg); }
.wifi-pin--free .wifi-pin__dot { background: #15803d; }
.wifi-pin--customers .wifi-pin__dot { background: #b45309; }
.wifi-pin--paid .wifi-pin__dot { background: #9a3412; }
.wifi-pin--unknown .wifi-pin__dot { background: #64748b; }

.wifi-you span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wst-blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wst-blue) 30%, transparent);
}
.wifi-accuracy {
  stroke: var(--wst-blue);
  stroke-opacity: .5;
  fill: var(--wst-blue);
  fill-opacity: .10;
}

/* ---------------------------------------------------------------- media */
/* Fixed aspect ratios so a photo arriving late never shifts the layout. */
.wifi-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--wst-bg-soft);
  border: 1px solid var(--wst-line);
}
.wifi-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wifi-media--popup { aspect-ratio: 16 / 9; margin-bottom: .7rem; }
.wifi-media--card { aspect-ratio: 16 / 7; margin-bottom: .85rem; }
.wifi-media--detail { aspect-ratio: 16 / 9; margin-bottom: .6rem; }

/* Shown when the location has no freely licensed photo. Deliberately an icon,
   never a stock photograph of somewhere else. */
.wifi-media--empty {
  background: linear-gradient(140deg, var(--wst-blue-soft), var(--wst-bg-soft));
}
.wifi-media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--wst-muted);
}
.wifi-media__placeholder small {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* CC BY-SA requires the photographer to be credited. */
.wifi-credit {
  margin: .45rem 0 0;
  font-size: .7rem;
  line-height: 1.4;
  color: var(--wst-muted);
}
.wifi-credit a { color: var(--wst-accent); }

/* --------------------------------------------------------------- popups */
.wifi-popup__title {
  margin: 0 0 .4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--wst-ink);
}
.wifi-popup__meta { margin: .3rem 0 0; font-size: .875rem; }
.wifi-popup__distance { font-weight: 600; color: var(--wst-ink); }
.wifi-popup__actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

/* --------------------------------------------------------------- badges */
.wifi-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.wifi-badge--free { background: #e7f8ee; color: #11633c; border-color: #bfe8d2; }
.wifi-badge--customers { background: #fff5e2; color: #8a5a06; border-color: #f6e0b5; }
.wifi-badge--paid { background: #fff0e6; color: #9a4413; border-color: #f8d5bd; }
.wifi-badge--unknown { background: var(--wst-bg-soft); color: var(--wst-muted); border-color: var(--wst-line); }

:root[data-theme="dark"] .wifi-badge--free { background: #0f2a1f; color: #69dfa4; border-color: #1d4634; }
:root[data-theme="dark"] .wifi-badge--customers { background: #2c2412; color: #f0c274; border-color: #4d3d17; }
:root[data-theme="dark"] .wifi-badge--paid { background: #301f12; color: #f2ad83; border-color: #55361a; }

/* ------------------------------------------------------------- list cards */
.wifi-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: clamp(380px, 62vh, 640px);
  overflow-y: auto;
  padding-right: .25rem;
}
.wifi-card {
  /* The list is a flex column with a max-height; without this the cards shrink
     to fit instead of the container scrolling, and early ones collapse to 0. */
  flex: 0 0 auto;
  border: 1px solid var(--wst-line);
  border-radius: 16px;
  padding: .95rem 1rem;
  background: linear-gradient(180deg, var(--wst-surface-2), var(--wst-bg-soft));
}
.wifi-card__head { display: flex; gap: .7rem; align-items: flex-start; }
.wifi-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
}
.wifi-card__icon--free { background: #15803d; }
.wifi-card__icon--customers { background: #b45309; }
.wifi-card__icon--paid { background: #9a3412; }
.wifi-card__icon--unknown { background: #64748b; }
.wifi-card__title {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wst-ink);
}
.wifi-card__meta { margin: .6rem 0 0; font-size: .85rem; color: var(--wst-muted); }
.wifi-card__actions { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

/* ----------------------------------------------------------- map overlays */
.map-overlay {
  position: absolute;
  z-index: 500;               /* above tiles, below Leaflet popups (700) */
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 30rem);
}
.map-overlay--top { top: .75rem; }
.map-overlay--centre { top: 50%; transform: translate(-50%, -50%); }

.map-notice {
  background: var(--wst-surface);
  border: 1px solid var(--wst-line);
  border-radius: 14px;
  box-shadow: var(--wst-shadow-lg);
  padding: .9rem 1.1rem;
  text-align: center;
}

/* -------------------------------------------------------------- controls */
.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.map-toolbar .form-control,
.map-toolbar .form-select { max-width: 20rem; }

.filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--wst-line);
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wst-body);
  background: var(--wst-surface);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--wst-accent); color: var(--wst-accent); }
.filter-chip input { accent-color: var(--wst-blue); margin: 0; }
.filter-chip:has(input:checked) {
  border-color: var(--wst-blue);
  background: var(--wst-blue-soft);
  color: var(--wst-accent);
}
.filter-chip:has(input:focus-visible) {
  outline: 3px solid var(--wst-focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ mobile tabs */
.map-tabs { display: none; }
@media (max-width: 991.98px) {
  .map-tabs { display: inline-flex; }
  .is-hidden-mobile { display: none !important; }
  .wifi-list { max-height: none; overflow: visible; }
}

/* --------------------------------------------------------- cluster bubbles */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: color-mix(in srgb, var(--wst-blue) 25%, transparent); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--wst-blue);
  color: #fff;
  font-weight: 700;
}
.marker-cluster div { font: inherit; font-weight: 700; }

/* ------------------------------------------------------------- detail pane */
.detail-list { margin: 0; }
.detail-list dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wst-muted);
  margin-top: .9rem;
}
.detail-list dd {
  margin: .15rem 0 0;
  color: var(--wst-ink);
  font-weight: 600;
  word-break: break-word;
}
.detail-cta {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--wst-line);
  border-radius: 16px;
  background: var(--wst-blue-soft);
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-fade-anim .leaflet-tile,
  .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}