/* Adventure Map (map.html) — uses the tokens in site.css */

.adv-map {
  /* Category colors (site palette) */
  --cat-meeting-place: var(--navy);
  --cat-campout: #4e6b1f;          /* Crew 182 green */
  --cat-high-adventure: var(--red);
  --cat-waterway: #1d6fa5;
  --cat-service-project: #c4561b;  /* Troop 182B orange */
  --cat-other: var(--muted);
  --adv-map-h: clamp(360px, 64vh, 620px);
  margin-bottom: 48px;
}

.adv-map [data-cat="meeting-place"]   { --cat: var(--cat-meeting-place); }
.adv-map [data-cat="campout"]         { --cat: var(--cat-campout); }
.adv-map [data-cat="high-adventure"]  { --cat: var(--cat-high-adventure); }
.adv-map [data-cat="waterway"]        { --cat: var(--cat-waterway); }
.adv-map [data-cat="service-project"] { --cat: var(--cat-service-project); }
.adv-map [data-cat="other"]           { --cat: var(--cat-other); }

.adv-dot {
  display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cat, var(--cat-other)); box-shadow: 0 0 0 2px #fff;
}

/* ---------- Toolbar ---------- */

.adv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 16px; }
.adv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adv-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: .4em .95em;
  border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink);
  font: 700 .88rem var(--font-head); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.adv-chip:hover { border-color: var(--navy); color: var(--navy); }
.adv-chip[aria-pressed="true"] { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.adv-count {
  min-width: 1.7em; padding: 0 .45em; border-radius: 999px; background: var(--cream);
  color: var(--navy-deep); font-size: .78rem; line-height: 1.6; text-align: center;
}
.adv-chip[aria-pressed="true"] .adv-count { background: rgba(255, 255, 255, .18); color: #fff; }

.adv-unit { display: inline-flex; align-items: center; gap: 8px; font: 700 .88rem var(--font-head); color: var(--navy-deep); }
.adv-unit select {
  min-height: 40px; padding: .35em .8em; border: 2px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); font: 600 .92rem var(--font-body); cursor: pointer;
}
.adv-unit select:hover { border-color: var(--navy); }

.adv-reset {
  margin-left: auto; min-height: 40px; padding: .4em .2em; border: 0; background: none; cursor: pointer;
  color: var(--navy); font: 700 .88rem var(--font-head); text-decoration: underline; text-underline-offset: 3px;
}
.adv-reset:hover { color: var(--red); }

/* ---------- Map + list ---------- */

.adv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

.adv-canvas {
  position: relative; isolation: isolate; z-index: 0; /* keep Leaflet's layers under the sticky header */
  height: var(--adv-map-h); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: #dfe7ef;
}
.adv-canvas.leaflet-container { font: 400 .95rem/1.5 var(--font-body); }
.adv-canvas.leaflet-container a { color: var(--navy); }
.adv-canvas.leaflet-container a:hover { color: var(--red); }
.adv-canvas.leaflet-container .leaflet-control-attribution a { color: #0b4f9c; }

.adv-side {
  display: flex; flex-direction: column; max-height: var(--adv-map-h); min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
}
.adv-side-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--cream); }
.adv-side-head h2 { margin: 0; font-size: 1.05rem; }
.adv-status { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.adv-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; }
.adv-list li + li { margin-top: 2px; }

.adv-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-left: 4px solid transparent; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.adv-item:hover { background: var(--cream); }
.adv-item[aria-current="true"] { background: var(--cream); border-left-color: var(--cat, var(--navy)); }
.adv-item .adv-dot { margin-top: .4em; }
.adv-item-text { min-width: 0; }
.adv-item-name { display: block; font: 700 1rem/1.3 var(--font-head); color: var(--navy-deep); overflow-wrap: anywhere; }
.adv-item-meta { display: block; margin-top: 2px; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.adv-empty { padding: 14px 12px; color: var(--muted); }

/* ---------- Pins and routes ---------- */

.adv-marker { color: var(--cat-other); background: none; border: 0; }
.adv-marker--meeting-place   { color: var(--cat-meeting-place); }
.adv-marker--campout         { color: var(--cat-campout); }
.adv-marker--high-adventure  { color: var(--cat-high-adventure); }
.adv-marker--waterway        { color: var(--cat-waterway); }
.adv-marker--service-project { color: var(--cat-service-project); }
.adv-pin { display: block; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 26, 56, .35)); transform-origin: 50% 100%; transition: transform .15s; }
.adv-marker:hover .adv-pin, .adv-marker.is-active .adv-pin { transform: scale(1.18); }
.adv-marker:focus { outline: none; }
.adv-marker:focus-visible .adv-pin { transform: scale(1.18); }
.adv-marker:focus-visible { outline: 3px solid var(--navy-deep); outline-offset: 2px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; }

.adv-route { stroke: var(--cat-other); }
.adv-route--meeting-place   { stroke: var(--cat-meeting-place); }
.adv-route--campout         { stroke: var(--cat-campout); }
.adv-route--high-adventure  { stroke: var(--cat-high-adventure); }
.adv-route--waterway        { stroke: var(--cat-waterway); }
.adv-route--service-project { stroke: var(--cat-service-project); }
.adv-route:hover { stroke-width: 7; }

/* ---------- Popups ---------- */

.adv-canvas .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 26, 56, .25); }
.adv-canvas .leaflet-popup-content { margin: 14px 16px 16px; }
.adv-pop { font-size: .95rem; line-height: 1.5; color: var(--ink); }
.adv-pop p { margin: 0 0 8px; }
.adv-pop .adv-pop-cat {
  display: flex; align-items: center; gap: 7px; margin: 0 0 4px;
  font: 700 .72rem/1.4 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.adv-pop-title { margin: 0 24px 6px 0; font: 800 1.08rem/1.25 var(--font-head); color: var(--navy-deep); }
.adv-pop-title:focus { outline: none; }
.adv-pop-title:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.adv-pop .adv-pop-date { font-weight: 700; color: var(--red-dark); }
.adv-pop-photo { margin: 6px 0 10px; }
.adv-pop-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--cream); }
.adv-pop-photo figcaption { margin-top: 3px; font-size: .74rem; line-height: 1.35; color: var(--muted); }
.adv-canvas .adv-pop-photo figcaption a { color: var(--muted); }
.adv-pop .adv-pop-addr { font-size: .88rem; color: var(--muted); }
.adv-pop-links { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 4px 0 0; padding: 0; }
.adv-pop-links a { font: 700 .86rem var(--font-head); }
.adv-pano-btn { margin-top: 12px; }
.adv-canvas .adv-pano-btn { color: #fff; }

/* Details shown inside the list when the map can't load */
.adv-inline { margin: 0 12px 12px 40px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.adv-inline .adv-pop-cat, .adv-inline .adv-pop-title { display: none; }
.adv-inline .adv-pop-photo { max-width: 320px; }
.adv-no-map .adv-layout { grid-template-columns: 1fr; }
.adv-no-map .adv-side { max-height: none; }
.adv-no-map .adv-list { overflow: visible; }
.adv-no-map .adv-canvas { height: auto; display: grid; place-items: center; padding: 28px 24px; background: var(--cream); }
.adv-map-fallback { margin: 0; max-width: 46ch; text-align: center; font-weight: 600; color: var(--navy-deep); }

/* ---------- 360° photo viewer ---------- */

.adv-pano {
  width: min(1100px, calc(100vw - 24px)); max-width: none; height: min(760px, calc(100dvh - 24px)); max-height: none;
  padding: 0; border: 0; border-radius: var(--radius); background: var(--navy-deep); color: #fff; overflow: hidden;
}
.adv-pano[open] { display: flex; flex-direction: column; }
.adv-pano::backdrop { background: rgba(0, 26, 56, .82); }
.adv-pano.is-fallback { position: fixed; inset: 0; margin: auto; z-index: 2000; box-shadow: 0 0 0 100vmax rgba(0, 26, 56, .82); }
.adv-pano-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; }
.adv-pano-title { flex: 1; margin: 0; color: #fff; font-size: 1.05rem; }
.adv-pano-close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.adv-pano-close:hover { background: rgba(255, 255, 255, .2); }
.adv-pano-close:focus-visible, .adv-pano-view:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.adv-pano-view { position: relative; flex: 1; min-height: 0; background: #000; }
.adv-pano-msg { margin: 0; padding: 8px 18px 0; color: #ffd9de; font-weight: 600; }
.adv-pano-msg:empty { display: none; }
.adv-pano-hint { margin: 0; padding: 8px 18px 12px; font-size: .85rem; color: #c9d6e8; }

/* ---------- Notes under the map ---------- */

.adv-help { max-width: 760px; }
.adv-help h2 { font-size: 1.4rem; }
.adv-help code { padding: 1px 6px; border-radius: 6px; background: var(--cream); font-size: .92em; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .adv-layout { grid-template-columns: 1fr; }
  .adv-map { --adv-map-h: clamp(300px, 56vh, 460px); }
  .adv-side { max-height: none; }
  .adv-list { overflow: visible; }
}

@media (max-width: 600px) {
  .adv-toolbar { gap: 10px 12px; }
  .adv-chip { padding: .35em .8em; font-size: .84rem; }
  .adv-reset { margin-left: 0; }
  .adv-canvas .leaflet-popup-content { margin: 12px 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-chip, .adv-pin { transition: none; }
}

@media print {
  .adv-toolbar, .adv-canvas, .adv-pano { display: none !important; }
  .adv-layout { display: block; }
  .adv-side { max-height: none; border: 0; }
  .adv-list { overflow: visible; }
}