/**
 * @file
 * Overrides for the unep_maps mapbox map, used by the case studies "Map"
 * display (embedded on /d). Loaded via libraries-extend after
 * unep_maps/unep_map.
 */

/*
 * The pin popup's HTML (see below) is built server-side and injected via
 * mapboxgl's setHTML(), bypassing Drupal's normal render pipeline entirely -
 * so the "Case Study Quickref" component's own SDC-attached library never
 * reaches the page. Inlining its compiled CSS here (which unconditionally
 * loads on any page with this map) is what actually makes it show up in the
 * popup; the case study page picks up the same component the normal way.
 */
/**
 * Case Study Quickref component.
 *
 * Self-contained defaults so the component also works outside the node
 * default layout (e.g. the map pin popup, which has no .c--nodeDefault
 * ancestor to inherit --cs-ref_bg / --cs-ref_accent from).
 */

.c--case-study-quickref {
  /* Read the public property so an ancestor (e.g. .c--nodeDefault--resource)
     can retheme the card; declaring --cs-ref_bg directly here would beat any
     inherited value and make those overrides dead. */
  --_cs-ref_bg: var(--cs-ref_bg, #E5F1FA);
  --_cs-ref_accent: var(--cs-ref_accent, #5387AC);
  --_cs-ref_border: var(--cs-ref_border, #C2CED6);

  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 0.625rem;
  border-radius: 0.875rem;
  background: var(--_cs-ref_bg);
}

.c--case-study-quickref .cs-quickref__name {
    margin: 0 0 0.25rem;
    font-family: var(--f-f_s);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1;
  }

.c--case-study-quickref .cs-quickref__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: 0.625rem;
  }

.c--case-study-quickref .cs-quickref__row:not(:last-child) {
      border-bottom: 1px solid var(--_cs-ref_border);
    }

.c--case-study-quickref .cs-quickref__label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--_cs-ref_accent);
    line-height: 1.125rem;
  }

.c--case-study-quickref .cs-quickref__value {
    font-size: 0.8125rem;
    line-height: 150%;
  }

.c--case-study-quickref .button {
    --btn_c: #222222;
    --btn_bg: #f6f6f6;
    --_btn_o-w: 0px;

    align-self: flex-start;
    margin-block: 1rem;
  }

/* Green palette used on the sponge measure page (vs. the blue case study
   default above) - same element, so this simply overrides the two custom
   properties the rules above already read from. */
.c--case-study-quickref--alt {
  --cs-ref_bg: #E6F2D9;
  --cs-ref_accent: #66804D;
}
.c--case-study-quickref--alt .cs-quickref__row:not(:last-child) {
    border-bottom-color: #CCD6C2;
  }

/* ---------------------------------------------------------------------------
 * Exposed filters: always visible, overlaid on the top-left of the map.
 * The module hides the form behind a toggle button and pins it top-right.
 * ------------------------------------------------------------------------- */
.view-mapbox {
  position: relative;

  /* Break out of the page's centered container to span the full viewport
     width, leaving a 30px gutter on each side for the map itself. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.page-layout:has(.view-mapbox) {
  overflow-x: clip;
}

.view-mapbox .map-container {
  width: calc(100% - 3.75rem);
  height: auto;
  min-height: 31.25rem;
  aspect-ratio: 1860 / 840;
  margin-inline: 1.875rem;
  border-radius: 2rem;
  overflow: hidden;
}

.view-mapbox .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
  margin: 1.5rem 0 0 1.5rem;
}

.view-mapbox .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
  margin: 1.5rem 1.5rem 0 0;
}

.view-mapbox .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl {
  margin: 0 0 1.5rem 1.5rem;
}

.view-mapbox .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
  margin: 0 1.5rem 1.5rem 0;
}

.view-mapbox .exposed-mapbox-filters {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 1.875rem;
  inset-inline-end: auto;
  z-index: 2;
  margin: 1.5rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.view-mapbox .exposed-mapbox-filters .w-pills,
  .view-mapbox .exposed-mapbox-filters .w-filters-row,
  .view-mapbox .exposed-mapbox-filters .close-button {
    pointer-events: auto;
  }

/* The module's JS prepends a "×" close button; not wanted while the form
   is always visible. Re-enabled for the mobile overlay below. */
.view-mapbox form.exposed-mapbox-filters .close-button {
  display: none;
}

/* Hidden while the form is always visible. Re-enabled for mobile below. */
#toggleFiltersForm {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Mobile: filters collapse behind a funnel-icon trigger button, matching
 * the module's own show/hide JS (toggles "button-visible" / "form-visible").
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 48rem) {
  /* Stretch to the map's right edge too (mirroring inset-inline-start),
     so the card has a fixed, known top-right corner - that corner is
     where the trigger/close button below is pinned. */
  .view-mapbox form.exposed-mapbox-filters {
    display: none;
    inset-inline-end: 1.875rem;
    /* Reserve room for the button pinned at the top-right corner. */
    padding-block-start: 3rem;
  }

  .view-mapbox form.exposed-mapbox-filters.form-visible {
    display: block;
  }

  /* Reduced padding brings the pills down to the same 36px height as the
     square close/trigger button below (6px padding-block + 2px border +
     20px line-height, top and bottom). */
  .c--filters--map .w-pills a.bef-link {
    padding: 0.375rem 0.875rem;
  }

  /* Trigger and close button sit flush in the filters card's top-right
     corner - the same spot, so swapping between them causes no jump. */
  .view-mapbox form.exposed-mapbox-filters .close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    border: 2px solid transparent;
    border-radius: var(--b-r_pill);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 1.25rem;
    line-height: 1;
    color: #555555;
    cursor: pointer;
  }

  #toggleFiltersForm.button-visible {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-start: auto;
    inset-inline-end: 3.375rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--b-r_pill);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  #toggleFiltersForm img {
    width: 1rem;
    height: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Zoom controls: frosted-glass card matching the Figma "Zoom Controls"
 * component (node 17871:3261), replacing the module's plain white default.
 * ------------------------------------------------------------------------- */
.view-mapbox .mapboxgl-ctrl-group {
  padding: 1px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.view-mapbox .mapboxgl-ctrl-group button {
  width: 3rem;
  height: 3rem;
}

.view-mapbox .mapboxgl-ctrl-group button + button {
  border-top: 1px solid #e2e8f0;
}

.view-mapbox button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24.02' height='28' viewBox='0 0 24.02 28'%3e%3cpath d='M11.0378 13.0278H5.20444V14.9722H11.0378V20.8056H12.9822V14.9722H18.8156V13.0278H12.9822V7.19444H11.0378V13.0278Z' fill='%2364748B'/%3e%3c/svg%3e");
}

.view-mapbox button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24.02' height='28' viewBox='0 0 24.02 28'%3e%3cpath d='M5.20444 13.0278V14.9722H18.8156V13.0278H5.20444Z' fill='%2364748B'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------------
 * Pins: white teardrop marker with a blue disc and a white "+".
 * ------------------------------------------------------------------------- */
.edw-marker {
  width: 1.5rem;
  height: 1.75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28' fill='none'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 13.6406 0.329242 15.2044 0.925257 16.6287C3.39733 23.3783 12.0631 28 12.0631 28C12.0631 28 22.7079 22.3227 23.7673 14.3635C23.9199 13.5994 24 12.809 24 12Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.0887 14.1631L22.0778 14.2182L22.0705 14.274C21.6268 17.6439 19.1126 20.7315 16.3995 23.1018C15.0775 24.2568 13.7811 25.1784 12.8139 25.8112C12.5329 25.9951 12.2809 26.1538 12.0656 26.286C11.9225 26.1982 11.7631 26.0986 11.5899 25.9877C10.7805 25.4697 9.67601 24.7108 8.50076 23.7512C6.10561 21.7957 3.61273 19.1646 2.53748 16.1966L2.52415 16.1598L2.50919 16.1237C1.99931 14.8918 1.7168 13.538 1.7168 12.1132C1.7168 6.3702 6.32187 1.7146 12.0025 1.7146C17.6831 1.7146 22.2882 6.3702 22.2882 12.1132C22.2882 12.8165 22.2194 13.5018 22.0887 14.1631Z' fill='%230081CC'/%3e%3cpath d='M11.0015 17V7H12.9911V17H11.0015ZM7 12.9911V11.0015H17V12.9911H7Z' fill='white'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---------------------------------------------------------------------------
 * Cluster bubbles: blue to match the pins (module default is gold).
 * ------------------------------------------------------------------------- */
.edw-cluster-marker {
  background-color: #0081cc;
  color: #fff;
  border-color: #fff;
}

/* ---------------------------------------------------------------------------
 * Pin popup: the content is the "Case Study Quickref" component
 * (components/cards/case-study-quickref), the same card used in the case
 * study full page sidebar, rendered via the "compact_teaser" view mode
 * (search_api_rendered_item field, see popup_options.pin_popup_source on
 * the "map" display). The component supplies its own card look (padding,
 * tinted background, rows); this just clips it to the popup's rounded
 * corners and drops the popup's own padding so the two don't double up.
 * ------------------------------------------------------------------------- */
.mapboxgl-popup-content {
  max-width: 17.5rem;
  padding: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.mapboxgl-popup-content .c--case-study-quickref {
  border-radius: 0;
  /* Leave room for the close button in the top-right corner. */
  padding-inline-end: 2.75rem;
}

/* The tip must match the card's tinted background (--cs-ref_bg) rather than
 * mapbox's default white. The tip sits outside .c--case-study-quickref, so the
 * value can't be inherited - it is repeated here as --popup-tip_bg.
 *
 * Mapbox draws the tip as a CSS triangle and colours a different border side
 * per anchor (the anchor names where the popup sits relative to the pin, so
 * the tip points the opposite way): popup above the pin (anchor-bottom*) uses
 * border-top, below it (anchor-top*) border-bottom, and so on. Popups flip
 * anchor near the map edges, so all eight are covered. */
.mapboxgl-popup {
  --popup-tip_bg: #E5F1FA;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  border-top-color: var(--popup-tip_bg);
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  border-bottom-color: var(--popup-tip_bg);
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: var(--popup-tip_bg);
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: var(--popup-tip_bg);
}

.mapboxgl-popup-close-button {
  top: 0.625rem;
  right: 0.625rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: #555555;
  transition: var(--t--b);
}

.mapboxgl-popup-close-button:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--c-black);
}