/*
 * Interactive Members Map (Boutik)
 * Custom styles (svgMap.min.css handles the vendor map internals; this file
 * covers the widget chrome: search bar + dropdown, country sidebar, and the
 * on-map country popup).
 *
 * Colors/spacing are exposed as CSS custom properties on .bim-map-widget so
 * a site can restyle the widget without editing this file — just redeclare
 * the variables under a more specific selector in Site Settings → Custom
 * CSS, e.g.:
 *   .bim-map-widget { --bim-accent: #123456; }
 */

.bim-map-widget {
  --bim-accent: #4d3ef0;
  --bim-accent-dark: #372c9e;
  --bim-accent-tint: #eeebff;
  --bim-border: #e4dfd2;
  --bim-map-bg: #ffffff;
  --bim-map-nodata: #F1F1F1;
  --bim-surface: #ffffff;
  --bim-text: #1c1a17;
  --bim-muted: #6b675c;
  /* Single radius token, used everywhere in this file for a uniform
     8px corner across every box/control in the widget (search field,
     Clear button, sidebar card, map card, popup, dropdown, country
     buttons, count badge, close button) — do not reintroduce a second
     "sm"/"lg" radius value without a specific design reason. */
  --bim-radius: 8px;

  position: relative;
  color: var(--bim-text);
  max-width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.4;
}

.bim-map-widget *,
.bim-map-widget *::before,
.bim-map-widget *::after {
  box-sizing: border-box;
}

.bim-map-widget button {
  font-family: inherit;
}

.bim-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bim-noscript-table {
  width: 100%;
  border-collapse: collapse;
}

.bim-noscript-table th,
.bim-noscript-table td {
  border: 1px solid var(--bim-border);
  padding: 6px 10px;
  text-align: left;
}

/* ---------------------------------------------------------------------
   Search bar + typeahead dropdown
   --------------------------------------------------------------------- */
.bim-searchbar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.bim-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.bim-search-icon {
  position: absolute;
  left: 14px;
  top: 24px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--bim-muted);
  pointer-events: none;
}

/* Scoped as ".bim-map-widget .bim-search-input" (two classes), not just
   ".bim-search-input", so this reliably wins over the site theme's own
   global form-control rule (typically something like
   "input[type=text], input[type=search], select, textarea { padding: …;
   border-radius: … }"). That theme selector combines an element type with
   an attribute selector, which — because of how CSS specificity ties are
   broken component-by-component — can actually outrank a single-class
   selector despite looking "less specific" at a glance. Confirmed on the
   live OBSERVISTA site: without this second class, the theme's own
   padding-left won the cascade, so the search icon visually overlapped
   the placeholder text. Keep this two-class form for any future rule that
   styles a bare <input>/<select>/<textarea> in this widget. */
.bim-map-widget .bim-search-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px 10px 42px;
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  background: var(--bim-surface);
  color: var(--bim-text);
  font-size: 1rem;
  line-height: 1.3;
}

.bim-map-widget .bim-search-input::placeholder {
  color: var(--bim-muted);
}

.bim-map-widget .bim-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.bim-search-dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: var(--bim-surface);
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  box-shadow: 0 10px 24px rgba(20, 16, 8, 0.12);
  padding: 6px;
}

.bim-search-result {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  gap: 1px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--bim-radius);
  background: transparent;
  color: var(--bim-text);
  cursor: pointer;
  min-height: 44px;
  justify-content: center;
}

/* Explicit color here (not just background) is required: the site theme's
   global "button:hover, button:focus { color: white }" rule would
   otherwise win the cascade over the plain ".bim-search-result" text
   color on this light lavender hover/focus background — invisible text.
   Covers :focus too, not just :hover/.is-focused — a real <button> gets
   native :focus from Tab navigation independently of the "is-focused"
   class this widget's own arrow-key handling adds. Same fix applied to
   .bim-country-btn and .bim-popup-close below, and .bim-clear already
   had its own explicit hover color. */
.bim-search-result:hover,
.bim-search-result:focus,
.bim-search-result.is-focused {
  background: var(--bim-accent-tint);
  color: var(--bim-text);
}

.bim-search-result-name {
  font-weight: 700;
}

.bim-search-result-meta {
  font-size: 0.84rem;
  color: var(--bim-muted);
}

.bim-search-empty {
  padding: 12px 10px;
  color: var(--bim-muted);
  font-size: 0.9rem;
}

.bim-clear {
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 48px;
  padding: 0 18px;
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  background: var(--bim-surface);
  color: var(--bim-text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.bim-clear:hover,
.bim-clear:focus {
  border-color: var(--bim-accent);
  color: var(--bim-accent-dark);
}

.bim-map-widget input:focus-visible,
.bim-map-widget button:focus-visible,
.bim-map-widget a:focus-visible {
  outline: 3px solid var(--bim-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Body layout: country sidebar + map
   --------------------------------------------------------------------- */
.bim-body {
  display: grid;
  /* Sidebar column trimmed from 240px and the gap from 22px (below) to
     give the map column a bit more width — since the map's SVG scales
     width:100%/height:auto off its own fixed aspect ratio, more width is
     the only way to render it (and, via syncSidebarHeight() in bim-map.js,
     the sidebar that mirrors its height) slightly taller without
     distorting the map. */
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.bim-sidebar {
  background: var(--bim-surface);
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  padding: 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Height is set inline (in px) by bim-map.js, matching the rendered
     height of .bim-visual (the map card) whenever the two sit side by
     side, so the two boxes always line up exactly regardless of country
     count or map aspect ratio at the current width. Cleared back to auto
     below the 860px breakpoint, where they stack instead. */
}

.bim-sidebar-heading {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bim-muted);
}

.bim-sidebar-subtitle {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--bim-muted);
}

.bim-country-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Fills whatever height .bim-sidebar ends up with (see above) and
     scrolls internally if there are more countries than fit — no fixed
     max-height here, since that was an arbitrary number that happened to
     roughly match the map's height at one specific viewport width. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Kept tight on purpose (2px, plus the smaller row below) so more
     countries are visible without scrolling — user explicitly asked to
     shrink the row spacing to fit more countries in view. */
  gap: 2px;
}

.bim-country-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--bim-radius);
  background: transparent;
  color: var(--bim-text);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.bim-country-btn:hover,
.bim-country-btn:focus {
  background: #E8E8E8;
  color: var(--bim-text);
}

.bim-country-btn[aria-current="true"] {
  background: #2B2B2B;
  border-color: #2B2B2B;
  color: #fff;
}

.bim-country-btn[aria-current="true"] .bim-country-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.bim-country-flag {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

.bim-country-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bim-country-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bim-muted);
  background: var(--bim-map-bg);
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Map (decorative, pointer-only — see aria-hidden in markup and the
   tabindex="-1" patch in bim-map.js) + on-map country popup
   --------------------------------------------------------------------- */
.bim-main {
  position: relative;
  min-width: 0;
}

.bim-visual {
  background: var(--bim-map-bg);
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  /* Trimmed from 10px, same reasoning as .bim-body's column width above —
     a little more room for the SVG itself means a little more height too. */
  padding: 8px;
  overflow: hidden;
  min-height: 220px;
}

.bim-visual.bim-visual--unavailable {
  display: none;
}

.bim-canvas {
  width: 100%;
}

.bim-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Re-skin the vendor map's chrome so it reads white/neutral, with visible
   (not blended-away) countries that have no data — matching a classic
   choropleth look rather than svgMap's own blue-ocean default. */
.bim-visual .svgMap-map-wrapper {
  background: var(--bim-map-bg);
}

/* Do NOT hardcode a flat fill here — svgMap.js sets a per-country
   --svg-map-country-fill custom property (colorMin..colorMax gradient for
   countries with data) and relies on its own base rule
   (fill: var(--svg-map-country-fill, #E2E2E2)) to paint it. A plain
   `fill: var(--bim-map-nodata)` here would win the cascade and flatten
   every country — with or without members — to the same no-data gray.
   Only change the *fallback* so genuinely dataless countries use our
   lighter gray instead of the vendor's default. */
.bim-visual .svgMap-country {
  fill: var(--svg-map-country-fill, var(--bim-map-nodata));
}

.bim-visual .svgMap-map-controls-wrapper,
.bim-visual .svgMap-map-continent-controls-wrapper {
  border-radius: var(--bim-radius);
  box-shadow: 0 0 0 1px var(--bim-border);
}

.bim-visual .svgMap-control-button.svgMap-zoom-button:hover::after,
.bim-visual .svgMap-control-button.svgMap-zoom-button:hover::before,
.bim-visual .svgMap-control-button.svgMap-zoom-button:active::after,
.bim-visual .svgMap-control-button.svgMap-zoom-button:active::before {
  background: var(--bim-accent);
}

.bim-visual .svgMap-control-button.svgMap-zoom-reset-button:hover::before,
.bim-visual .svgMap-control-button.svgMap-zoom-reset-button:active::before {
  border-color: var(--bim-accent);
}

/* svgMap.js appends its tooltip element directly to <body> (to escape any
   overflow:hidden ancestor), not inside .bim-visual/.bim-map-widget — so a
   ".bim-visual .svgMap-tooltip" selector never matches it. Has to be a bare
   selector. Since there's only ever one map instance per page for this
   plugin, that's safe; if that ever changes, give the tooltip a unique
   marker via the map instance instead of relying on ancestry.
   Border-radius is hardcoded (not var(--bim-radius)) for the same reason:
   that custom property is declared on .bim-map-widget, and this element
   sits outside its subtree, so the variable simply wouldn't resolve here
   — keep this in sync with --bim-radius above (8px) by hand.
   Also: our onGetTooltip() (bim-map.js) returns a plain <div> that svgMap.js
   inserts directly as the tooltip's only content, bypassing the library's
   own .svgMap-tooltip-content-container wrapper (which is what normally
   supplies the 10px/20px padding) — that wrapper is only auto-created when
   onGetTooltip is left unset. So the padding has to live here instead, on
   the tooltip box itself. */
.svgMap-tooltip,
.svgMap-persistent-tooltip {
  border-radius: 8px;
  font-family: inherit;
  padding: 8px 12px;
}

/* The country currently shown in the popup gets a visible outline so it's
   obvious which shape the popup belongs to, for both map-click and
   sidebar-click origins. */
.bim-visual .svgMap-country.bim-country-active {
  stroke: #000000;
  stroke-width: 2.2;
  --svg-map-country-fill: #2B2B2B;
  fill: #2B2B2B;
}

/* ---------------------------------------------------------------------
   On-map country popup
   --------------------------------------------------------------------- */
.bim-popup {
  position: absolute;
  z-index: 15;
  width: min(320px, calc(100% - 24px));
  max-height: min(420px, calc(100% - 24px));
  overflow-y: auto;
  background: var(--bim-surface);
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  box-shadow: 0 14px 32px rgba(20, 16, 8, 0.16);
  padding: 14px 16px;
  animation: bim-fade-in 0.15s ease-out;
}

.bim-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bim-popup-flag {
  font-size: 1.3rem;
  line-height: 1;
}

.bim-popup-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bim-popup-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bim-muted);
}

.bim-popup-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--bim-border);
  border-radius: var(--bim-radius);
  background: var(--bim-surface);
  color: var(--bim-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.bim-popup-close:hover,
.bim-popup-close:focus {
  background: var(--bim-accent-tint);
  border-color: var(--bim-accent);
  color: var(--bim-text);
}

.bim-popup-list {
  list-style: none;
  counter-reset: bim-popup-counter;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bim-popup-member {
  counter-increment: bim-popup-counter;
  padding: 8px 10px 8px 34px;
  position: relative;
  border-radius: var(--bim-radius);
  background: var(--bim-map-bg);
}

.bim-popup-member.is-highlighted {
  background: var(--bim-accent-tint);
}

.bim-popup-member::before {
  content: counter(bim-popup-counter) ".";
  position: absolute;
  left: 10px;
  top: 8px;
  font-weight: 700;
  color: var(--bim-muted);
  font-size: 0.85rem;
}

.bim-popup-member-name {
  display: block;
  font-weight: 700;
}

.bim-popup-member-institution {
  display: block;
  font-size: 0.88rem;
  color: var(--bim-muted);
}

@keyframes bim-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------
   Responsive: sidebar becomes a horizontal chip row above the map
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .bim-body {
    grid-template-columns: 1fr;
  }

  .bim-sidebar {
    position: relative;
    padding: 12px;
    /* Below this breakpoint the sidebar becomes a horizontal chip row
       above the map (not beside it), so the JS-driven height-matching
       (bim-map.js, "syncSidebarHeight") does not apply here — the script
       already clears its inline height at this width, this is a CSS
       fallback so a stale inline height can never cause an oversized
       empty box even if that runs before this stylesheet's media query
       is (re-)evaluated. */
    height: auto !important;
  }

  .bim-sidebar::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 12px;
    right: 12px;
    width: 20px;
    background: linear-gradient(to right, transparent, var(--bim-surface) 85%);
    pointer-events: none;
  }

  .bim-country-list {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .bim-country-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .bim-popup {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

@media (max-width: 520px) {
  .bim-searchbar {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion / high contrast
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bim-map-widget * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .bim-search-input,
  .bim-clear,
  .bim-country-btn,
  .bim-sidebar,
  .bim-visual,
  .bim-popup,
  .bim-popup-close,
  .bim-search-dropdown {
    border: 1px solid CanvasText;
  }
}