/* Orlando Citizen — Top Spots map app.
   Styled to the site print-magazine system (--om-* custom properties defined
   by the theme design layer; literal fallbacks keep it native if they move). */
#om-topspots {
  --om-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --om-body: 'Source Serif 4', Georgia, 'Iowan Old Style', Charter, serif;
  --om-ui: 'Libre Franklin', 'Helvetica Neue', Inter, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --om-ink: #14161A;
  --om-ink-soft: #3C4047;
  --om-muted: #5E6268;
  --om-paper: #FBF9F4;
  --om-paper-warm: #F4F0E6;
  --om-rule: #E2DDD2;
  --om-rule-strong: #C9C2B2;
  --om-navy: #00407E; /* sampled from the Orlando Citizen award badge */
  --om-navy-deep: #00335F;
  font-family: var(--om-body);
  color: var(--om-ink);
  margin: 16px 0 24px;
}

/* --- filter chips ------------------------------------------------------- */
#om-topspots .om-ts-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
}
#om-topspots .om-ts-chip {
  font-family: var(--om-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--om-ink-soft);
  background: var(--om-paper);
  border: 1px solid var(--om-rule-strong);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  line-height: 1.25;
}
#om-topspots .om-ts-chip:hover { border-color: var(--om-ink-soft); }
#om-topspots .om-ts-chip.is-active {
  background: var(--om-ink);
  border-color: var(--om-ink);
  color: var(--om-paper);
}
#om-topspots .om-ts-chip.om-ts-chip-winners.is-active {
  background: var(--om-navy);
  border-color: var(--om-navy-deep);
  color: #fff;
}
#om-topspots .om-ts-chip .om-ts-chip-n { opacity: 0.62; font-weight: 500; }

/* --- meta row: count + legend ------------------------------------------- */
#om-topspots .om-ts-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  border-top: 2px solid var(--om-ink);
  padding-top: 9px;
  margin-bottom: 10px;
}
#om-topspots .om-ts-count {
  font-family: var(--om-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--om-ink);
}
#om-topspots .om-ts-legend {
  font-family: var(--om-ui);
  font-size: 13px;
  color: var(--om-ink-soft);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#om-topspots .om-ts-legend span { display: inline-flex; align-items: center; gap: 6px; }
#om-topspots .om-ts-legend svg { display: block; }

/* --- the map -------------------------------------------------------------- */
#om-topspots .om-ts-mapwrap {
  border: 1px solid var(--om-rule-strong);
  background: var(--om-paper-warm);
}
#om-ts-map { width: 100%; height: 68vh; min-height: 440px; max-height: 720px; }
@media (max-width: 640px) {
  #om-ts-map { height: 62vh; min-height: 380px; }
}
#om-topspots .om-ts-fallback {
  padding: 40px 24px;
  text-align: center;
  font-family: var(--om-body);
  color: var(--om-ink-soft);
}

/* --- markers -------------------------------------------------------------- */
.om-ts-pin { cursor: pointer; line-height: 0; }
.om-ts-pin svg { display: block; }
.om-ts-pin-standard svg { filter: drop-shadow(0 1px 1.5px rgba(20, 22, 26, 0.45)); }
.om-ts-pin-standard:hover svg { transform: scale(1.15); }
.om-ts-pin-winner { z-index: 5; }
.om-ts-pin-winner svg { filter: drop-shadow(0 2px 3px rgba(0, 32, 64, 0.5)); }
.om-ts-pin-winner:hover svg { transform: scale(1.08); }
.om-ts-pin svg { transition: transform 120ms ease; transform-origin: 50% 100%; }

/* --- popup ------------------------------------------------------------------ */
.om-ts-popup .maplibregl-popup-content {
  font-family: var(--om-body);
  color: var(--om-ink);
  border-radius: 3px;
  border: 1px solid var(--om-rule-strong);
  box-shadow: 0 6px 24px rgba(20, 22, 26, 0.22);
  padding: 14px 16px 12px;
  max-width: 272px;
}
.om-ts-popup .maplibregl-popup-close-button {
  font-size: 16px;
  color: var(--om-muted);
  padding: 2px 7px;
}
.om-ts-pop-name {
  font-family: var(--om-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  margin: 0 18px 5px 0;
}
.om-ts-pop-winner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--om-navy);
  color: #fff;
  font-family: var(--om-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 4px 8px;
  margin: 0 0 7px;
}
.om-ts-pop-rank {
  font-family: var(--om-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--om-ink-soft);
  margin: 0 0 6px;
}
.om-ts-pop-rank .om-ts-pop-score { color: var(--om-ink); }
.om-ts-pop-addr {
  font-size: 14px;
  color: var(--om-muted);
  margin: 0 0 9px;
  line-height: 1.35;
}
.om-ts-pop-link {
  font-family: var(--om-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--om-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--om-navy);
}
.om-ts-pop-link:hover { color: var(--om-navy-deep); }

/* --- stale deep-link notice ------------------------------------------------ */
.om-ts-stale {
  font-family: var(--om-ui);
  font-size: 13.5px;
  color: var(--om-ink-soft);
  background: var(--om-paper-warm);
  border: 1px solid var(--om-rule-strong);
  border-left: 3px solid var(--om-navy);
  padding: 9px 13px;
  margin: 0 0 12px;
}

/* --- the listed fallback (every spot, no map required) ---------------------- */
.om-ts-list { margin: 26px 0 8px; border-top: 2px solid var(--om-ink); padding-top: 12px; }
.om-ts-list > summary {
  font-family: var(--om-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--om-ink);
}
.om-ts-list section { margin-top: 18px; }
.om-ts-list h3 {
  font-family: var(--om-serif);
  font-size: 19px;
  margin: 0 0 6px;
}
.om-ts-list ol { margin: 0; padding-left: 1.4em; }
.om-ts-list li { font-size: 15.5px; line-height: 1.5; margin: 2px 0; }
.om-ts-list li a { color: var(--om-navy); text-decoration: none; border-bottom: 1px solid var(--om-rule-strong); }
.om-ts-list li a:hover { color: var(--om-navy-deep); }
@media (min-width: 900px) {
  .om-ts-list-cols { columns: 2; column-gap: 44px; }
  .om-ts-list section { break-inside: avoid; }
}

/* --- chips on small screens: one scrollable row, not six wrapped rows ------- */
@media (max-width: 720px) {
  #om-topspots .om-ts-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  #om-topspots .om-ts-chip { flex: 0 0 auto; }
}

/* --- page furniture ---------------------------------------------------------- */
.om-ts-lede { font-size: 17px; line-height: 1.55; }
.om-ts-note {
  font-family: var(--om-ui);
  font-size: 13px;
  color: var(--om-muted);
  margin-top: 10px;
}
.om-map-cta a { font-weight: 700; }