/* Community Resilience Hubs Map — styles
   Marker pin + sidebar panel (list/detail) theming. Safe to inline
   into a Webflow Embed. */

/* Scoped so this doesn't depend on the host page already having a
   border-box reset. Without it, elements below that combine `width` and
   `padding` (e.g. .rhm-sidebar__header) get padding ADDED on top of that
   width instead of included within it, pushing them wider than their own
   parent. */
.rhm-layout,
.rhm-layout *,
.rhm-layout *::before,
.rhm-layout *::after {
  box-sizing: border-box;
}

/* Map + sidebar (desktop: right of the map) side by side. map.js builds
   this wrapper around the plain <div id="resilience-hubs-map"> at init
   time (map first, sidebar second — see buildSidebarLayout — so the
   sidebar lands on the right in this plain DOM-order flex row), so the
   Webflow embed itself never needs to change. */
.rhm-layout {
  display: flex;
  align-items: stretch;
  height: 70vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rhm-map {
  flex: 1;
  min-width: 0;
  height: 100%;
}

/* Rounded corners live on the canvas itself, not on .rhm-map — clipping
   the whole map container would also clip marker labels/pins that
   happen to sit right at the edge, cutting them off abruptly instead
   of just letting them render past the rounded corner. */
.rhm-map .maplibregl-canvas {
  border-radius: 12px 0 0 12px;
}

.rhm-sidebar {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #527570;
  border-radius: 0 12px 12px 0;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.2s ease;
}

/* Hidden: fully removed from the layout — the map reclaims the width.
   Brought back via the standalone "Show hub list" map control
   (.rhm-show-list), not from anything inside the sidebar itself, since
   the sidebar has no visible footprint at all while hidden. */
.rhm-sidebar.is-hidden {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.rhm-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.rhm-sidebar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.rhm-sidebar__title:hover {
  text-decoration: underline;
}

.rhm-sidebar__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.rhm-sidebar__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.rhm-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Swapped for .rhm-sidebar__list (never both at once) via the
   .showing-detail class on .rhm-sidebar — see showHubDetail()/
   showHubList() in map.js. Hidden by default so a hub selected via
   marker/list/search/"Find closest hub" is what makes it appear. */
.rhm-sidebar__detail {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
}

.rhm-sidebar.showing-detail .rhm-sidebar__list {
  display: none;
}

.rhm-sidebar.showing-detail .rhm-sidebar__detail {
  display: flex;
}

/* Pinned to the top of the scrollable detail view (rather than
   scrolling away with the rest of it) so there's always an obvious way
   back to the list, even for a hub with a long field list. */
.rhm-sidebar__back {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: #527570;
  color: rgba(255, 255, 255, 0.85);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.rhm-sidebar__back:hover {
  color: #fff;
  text-decoration: underline;
}

.rhm-sidebar__detail-body {
  padding: 10px 14px 16px;
}

.rhm-sidebar__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.rhm-sidebar__item:hover,
.rhm-sidebar__item:focus {
  background: rgba(255, 255, 255, 0.08);
}

.rhm-sidebar__item--active {
  background: rgba(255, 201, 60, 0.16);
}

.rhm-sidebar__item-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.rhm-sidebar__item-meta {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* Mobile: the map fills the entire layout (which map.js sizes to match
   whatever height the element wrapping this embed provides — see the
   height-detection comment in map.js). The list is an overlay docked to
   the bottom, growing its own max-height from 0 when shown rather than
   pushing the map into a smaller area, so the map's size never changes
   as the list opens/closes and the total never exceeds the layout's own
   height the way stacking map+list would. */
@media (max-width: 767px) {
  .rhm-layout {
    display: block;
    position: relative;
  }

  /* position + z-index gives the map its own stacking context, so
     MapLibre's own internal z-indexes (controls, the canvas itself)
     stay contained inside it instead of competing directly with
     .rhm-sidebar for stacking order as bare siblings — without this,
     the canvas paints over the sidebar despite the sidebar being
     position:absolute, since neither had an explicit stacking context
     to begin with. */
  .rhm-map {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 0;
  }

  .rhm-map .maplibregl-canvas {
    border-radius: 12px;
  }

  .rhm-sidebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Overrides the desktop `width: 340px` — with an explicit width,
       `left`/`right: 0` can't both hold at once (over-constrained), so
       the box would silently stay at 340px wide instead of stretching
       full-width. */
    width: auto;
    max-height: 60%;
    border-radius: 14px 14px 12px 12px;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  /* Collapses to zero height (rather than sliding via transform) so it
     never renders outside .rhm-layout's own box while hidden — nothing
     here needs to rely on the layout itself clipping an off-screen
     sidebar. */
  .rhm-sidebar.is-hidden {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* .rhm-marker is the element MapLibre owns and positions — it must carry
   NONE of our own CSS, not even `position`. MapLibre's own stylesheet
   sets `.maplibregl-marker { position: absolute }` on this same element
   (via a class it adds); a `position` rule of ours on the same selector
   would win or lose depending on cascade order rather than intent, and
   if it wins, the marker stops being absolutely positioned, gets treated
   as a normal in-flow block box that stretches to the map's full width,
   and MapLibre's `translate(-50%, ...)` centering math — computed
   against that wrong width — throws the marker far off to one side.
   All real styling — look, hover scale, cursor, the label — lives on
   the inner .rhm-marker__inner. */
.rhm-marker__inner {
  position: relative;
  cursor: pointer;
  line-height: 0;
}

.rhm-marker__pin {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 100%;
  transition: transform 0.15s ease;
}

.rhm-marker__inner:hover .rhm-marker__pin {
  transform: scale(1.15);
}

/* Positioned relative to .rhm-marker__inner. Visibility is toggled by
   the label-collision logic in map.js; kept as visibility rather than
   display so getBoundingClientRect() stays accurate while hidden. */
.rhm-marker__label {
  position: absolute;
  top: 14px;
  left: 32px;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(13, 20, 20, 0.62);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.rhm-detail__photo {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 10px;
}

.rhm-detail__title {
  margin: 0 0 6px;
  font-size: 16px;
  color: #fff;
}

/* No max-height/scroll of its own — .rhm-sidebar__detail (the whole
   panel content, photo/title/specs together) is what scrolls now that
   this lives in a persistent side panel rather than a small popup
   bubble, so a hub with 15+ filled-in columns just makes the whole
   panel scroll a bit further, not a scroll-within-a-scroll. */
.rhm-detail__specs {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rhm-detail__spec-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}

.rhm-detail__spec-label {
  color: rgba(255, 255, 255, 0.65);
  flex: 0 0 108px;
}

.rhm-detail__spec-value {
  color: #fff;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.rhm-detail__spec-link {
  color: #ffc93c;
  font-weight: 600;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.rhm-detail__spec-link:hover {
  text-decoration: underline;
}

.rhm-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Solid fills with white text, not the tinted/text-colored style you'd
   use on a white background — these now sit on the sidebar's own green
   background (#527570), where a pale tint would barely register. */
.rhm-pill--yes {
  background: #2f8f66;
  color: #fff;
}

.rhm-pill--no {
  background: #a44242;
  color: #fff;
}

.rhm-pill--unknown {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

.rhm-search {
  position: relative;
  margin: 10px 0 0 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.rhm-search__input {
  width: 180px;
  font-size: 13px;
  padding: 7px 10px;
  border: none;
  border-radius: 4px;
  background: rgba(13, 20, 20, 0.55);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  outline: none;
}

.rhm-search__input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.rhm-search__input:focus {
  background: rgba(13, 20, 20, 0.75);
  box-shadow: 0 0 0 2px #1f7a5c;
}

/* Stacks directly under .rhm-search — both are added as "top-left" map
   controls in that order, and MapLibre stacks same-corner controls in
   the order they're added. Always shown (unlike .rhm-show-list below,
   which only shows while the sidebar is hidden) — finding the nearest
   hub is useful regardless of whether the list happens to be open. */
.rhm-find-closest {
  margin: 8px 0 0 10px;
}

.rhm-find-closest__button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
  background: rgba(13, 20, 20, 0.55);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.rhm-find-closest__button:hover {
  background: rgba(13, 20, 20, 0.75);
}

.rhm-find-closest__button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Stacks below .rhm-find-closest (added after it, same corner). Only
   shown while the sidebar is hidden. */
.rhm-show-list {
  margin: 8px 0 0 10px;
}

.rhm-show-list__button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
  background: rgba(13, 20, 20, 0.55);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.rhm-show-list__button:hover {
  background: rgba(13, 20, 20, 0.75);
}

.rhm-search__results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.rhm-search__result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid #eee;
  background: none;
  cursor: pointer;
  font: inherit;
}

.rhm-search__result:last-child {
  border-bottom: none;
}

.rhm-search__result:hover,
.rhm-search__result:focus {
  background: #f4faf7;
}

.rhm-search__result-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #33484a;
}

/* Shown in place of the map briefly if the sheet fails to load (bad
   network, sheet un-published, etc.) or loads with no usable rows. */
.rhm-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 260px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(13, 20, 20, 0.75);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}