/**
 * COPx Map — Public Map Display Styles
 *
 * Extracted from the standalone map HTML for use via the [copx_map] shortcode.
 *
 * Namespacing notes (so this never clashes with the submission form or theme):
 *   - All CSS custom properties are prefixed --copx-* (defined on :root because
 *     the map JS reads them from document.documentElement).
 *   - All element IDs are prefixed #copx-map-* .
 *   - The former global `*` reset and `body{}` rule are scoped to the map
 *     containers (#copx-map-wrapper / #copx-map-overlay) only.
 *   - Class names are unchanged but every rule lives under a #copx-map-* ancestor.
 *
 * ADJUSTMENT: Edit the CSS custom properties at the top to restyle the map.
 */

  /* ============================================================
     CSS VARIABLES — adjust these to restyle the map
     ============================================================ */
  :root {
    /* Colours */
    --copx-color-bg:               #FFFFFF;
    --copx-color-countries:        #AAAAAA;
    --copx-color-ocean:            #E5E5E5;
    --copx-color-graticule:        rgba(0,0,0,0.06);
    --copx-color-accent:           #ff0033;   /* red — clusters, pin outer, active filter */
    --copx-color-cat-individual:   #000000;   /* inner circle: Climate Heroes */
    --copx-color-cat-institution:  #E5E5E5;   /* inner circle: Institutions */
    --copx-color-filter-all-bg:    #000000;
    --copx-color-filter-all-text:  #FFFFFF;
    --copx-color-filter-2-bg:      #000000;
    --copx-color-filter-2-text:    #FFFFFF;
    --copx-color-filter-3-bg:      #E5E5E5;
    --copx-color-filter-3-text:    #000000;
    --copx-color-overlay-backdrop: rgba(0,0,0,0.55);
    --copx-color-overlay-bg:       #FFFFFF;
    --copx-color-text:             #000000;
    --copx-color-link:              #ff0033;

    /* Drop shadow — shared by pins and cluster circles.
       Cluster JS reads these and divides by k to counteract zoom scale.
       Pin paths are already in unscaled space so they use the values directly. */
    --copx-shadow-offset-x:        0;      /* px — no unit, applied in JS */
    --copx-shadow-offset-y:        2;      /* px — no unit, applied in JS */
    --copx-shadow-blur:            4;      /* px — no unit, applied in JS */
    --copx-shadow-color:           rgba(0,0,0,0.3);

    /* Fallback images per category (replace with real URLs) */
    --copx-fallback-img-individual: url('');   /* static image for Climate Heroes */
    --copx-fallback-img-institution: url(''); /* static image for Institutions */

    /* Typography */
    --copx-font-main: "Courier New", Courier, monospace;

    /* Map container */
    --copx-map-height: calc(min(100vw, 1200px) / 1.9);
    --copx-map-max-scale: 240; /* limits map scale at default zoom — increase to widen */

    /* Pin */
    --copx-pin-width:              28px;
    --copx-pin-height:             35.8px; /* width * (58.91/46.08) */

    /* Cluster */
    --copx-cluster-color:           #ff0033;
    --copx-cluster-text:           #FFFFFF;
    --copx-cluster-size-base:      36px;   /* minimum cluster circle diameter */
    --copx-cluster-size-max:       60px;   /* maximum cluster circle diameter */
  }
:root { @media (max-width: 400px) {
      --copx-pin-width:              20px;
      --copx-pin-height:             25.57px; /* width * (58.91/46.08 = 1.27842882) */
      --copx-cluster-size-base:      25px;   /* minimum cluster circle diameter */
      --copx-cluster-size-max:       40px;   /* maximum cluster circle diameter */
    }
  }

  /* ============================================================
     RESET / BASE
     ============================================================ */
  /* Scoped to the map's own containers so it never resets the WP theme or
     the form-plugin elements (the original was a global * reset).

     Wrapped in :where() so the selector keeps ZERO specificity — identical to
     the original `*` reset. Without :where(), the #id prefix would raise this
     to (1,0,0) and outrank the map's own class rules (e.g. .filter-button
     padding, .overlay-title margin), collapsing their spacing and sizing. */
  :where(#copx-map-wrapper, #copx-map-overlay),
  :where(#copx-map-wrapper, #copx-map-overlay) :where(*, *::before, *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Was a global body{} rule — scoped so the map's font/background/colour
     apply only to the map and its overlay, not the whole WP page. */
  #copx-map-wrapper,
  #copx-map-overlay {
    font-family: var(--copx-font-main);
    background: var(--copx-color-bg);
    color: var(--copx-color-text);
  }

  /* ============================================================
     MAP CONTAINER
     ============================================================ */
  #copx-map-container {
    position: relative;
    width: 100%;
    height: var(--copx-map-height);
    background: var(--copx-color-bg);
    overflow: hidden;
    min-height: 400px;
  }

  #copx-map-svg {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #E5E5E5;
  }

  /* Country paths */
  .country {
    fill: var(--copx-color-countries);
    stroke: var(--copx-color-countries);
    stroke-width: 0.5px;
  }

  .country.antarctica {
    /* Uncomment to hide Antarctica: display: none; */
    opacity: 1;
  }

  .graticule {
    fill: none;
    stroke: none;
    stroke-width: 0.5px;
  }

  .sphere {
    fill: var(--copx-color-ocean);
  }

  /* ============================================================
     PINS
     ============================================================ */
  .pin {
    overflow: visible;
  }

  /* Cursor and pointer-events on paths directly — <g> hover is unreliable
     in SVG across browsers, particularly on the left half of the viewport */
  .pin .pin-outer,
  .pin .pin-inner {
    cursor: pointer;
    pointer-events: all;
    transition: opacity 0.15s;
  }

  .pin .pin-outer {
    fill: var(--copx-color-accent);
    /* drop-shadow set dynamically in JS so it counteracts zoom scale */
  }

  .pin .pin-inner {
    fill: var(--copx-color-cat-individual); /* default; overridden per category */
  }

  /* Category-specific inner fill */
  .pin.cat-individual .pin-inner  { fill: var(--copx-color-cat-individual); }
  .pin.cat-institution .pin-inner { fill: var(--copx-color-cat-institution); }

  /* Hover on paths themselves, not the parent <g> */
  .pin .pin-outer:hover,
  .pin .pin-inner:hover ~ .pin-outer,
  .pin .pin-outer:hover ~ .pin-inner {
    opacity: 0.8;
  }

  /* ============================================================
     CLUSTERS
     ============================================================ */
  .cluster-group {
    cursor: pointer;
  }

  .cluster-circle {
    fill: var(--copx-cluster-color);
    opacity: 0.92;
    transition: opacity 0.15s;
    /* drop-shadow set dynamically in JS so it counteracts zoom scale */
  }

  .cluster-group:hover .cluster-circle {
    opacity: 1;
  }

  .cluster-label {
    fill: var(--copx-cluster-text);
    font-family: var(--copx-font-main);
    /* font-size set dynamically in JS to counteract zoom scale */
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
  }

  /* ============================================================
     FILTER BUTTONS
     ============================================================ */
  /* Outer wrapper — wraps filter bar and map section together */
  #copx-map-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }

  /* Full / wide alignment.
     We deliberately do NOT apply a manual 100vw + transform breakout to the
     native classes. Modern WordPress block (FSE) themes already pull
     .alignfull / .alignwide out to the edges via their own negative-margin
     rules, e.g.:

         .has-global-padding > .alignfull {
             margin-left:  calc(var(--wp--style--root--padding-left)  * -1);
             margin-right: calc(var(--wp--style--root--padding-right) * -1);
         }

     Doing our own 100vw/transform on top of that applies the breakout TWICE
     (and a transform also traps position:fixed) — that double-handling caused
     a gap down one side. So for supported themes we let the theme break it out
     and just allow the element to size itself to that width. */
  #copx-map-wrapper.alignfull,
  #copx-map-wrapper.alignwide {
    width: auto;
  }

  /* Fallback full-bleed for CLASSIC themes that do NOT support alignfull.
     class-map-display.php adds .copx-map-force-full instead of .alignfull when
     current_theme_supports( 'align-wide' ) is false, so the theme's own
     alignfull rule is NOT present to double up with this one.

     margin: calc(50% - 50vw) is the symmetric, scrollbar-safe breakout: unlike
     100vw it doesn't include the scrollbar width, so it won't cause a
     horizontal scrollbar, and it needs no transform (so no stacking context
     and no trapped position:fixed). */
  #copx-map-wrapper.copx-map-force-full {
    width: auto;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Filter bar — lives outside the map container so it can be repositioned
     freely (e.g. move above/below map, change z-index) without affecting
     the map SVG or its overlays */
  #copx-map-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--copx-color-bg);
    z-index: 20;
    /* To place filters OVER the map instead, set position:absolute on
       #copx-map-filter-bar and give it a top/left, and set position:relative on
       #copx-map-wrapper */
  }

  #copx-map-filter-container {
    display: contents; /* passthrough — buttons sit directly in #copx-map-filter-bar */
  }

  .filter-button {
    font-family: var(--copx-font-main);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.02em;
    padding: 7px 18px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    outline: none;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  /* Legend SVG inside filter buttons */
  .filter-legend {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    margin-top: -0.04em;
    margin-left: -0.8em;
  }

  /* Outer circle — always red (accent colour) */
  .legend-outer {
    fill: var(--copx-color-accent);
  }

  /* Inner path — matches respective category inner colour */
  .legend-inner-individual {
    fill: var(--copx-color-cat-individual);
  }

  .legend-inner-institution {
    fill: var(--copx-color-cat-institution);
  }

  /* All — red when active */
  .filter-button.filter-all {
    background: var(--copx-color-accent);
    color: #fff;
    border-color: var(--copx-color-accent);
  }
  .filter-button.filter-all:not(.active) {
    background: transparent;
    color: var(--copx-color-accent);
    border-color: var(--copx-color-accent);
  }
  .filter-button.filter-all.active {
    background: var(--copx-color-accent);
    color: #fff;
  }

  /* Climate Heroes — black */
  .filter-button.filter-individual {
    background: var(--copx-color-filter-all-bg);
    color: var(--copx-color-filter-all-text);
    border-color: var(--copx-color-filter-all-bg);
  }
  .filter-button.filter-individual:not(.active) {
    background: transparent;
    color: var(--copx-color-filter-all-bg);
    border-color: var(--copx-color-filter-all-bg);
  }
  .filter-button.filter-individual.active {
    background: var(--copx-color-filter-all-bg);
    color: var(--copx-color-filter-all-text);
  }

  /* Institutions — light grey */
  .filter-button.filter-institution {
    background: var(--copx-color-filter-3-bg);
    color: var(--copx-color-filter-3-text);
    border-color: #bbb;
  }
  .filter-button.filter-institution:not(.active) {
    background: transparent;
    color: var(--copx-color-text);
    border-color: #bbb;
  }
  .filter-button.filter-institution.active {
    background: var(--copx-color-filter-3-bg);
    color: var(--copx-color-filter-3-text);
    border-color: #bbb;
  }

  /* ============================================================
     ZOOM CONTROLS
     ============================================================ */
  #copx-map-zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
  }

  .zoom-btn {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    font-family: var(--copx-font-main);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: background 0.12s;
    line-height: 1;
    padding: 0;
  }

  .zoom-btn:hover { background: #f0f0f0; }
  .zoom-btn:disabled { opacity: 0.35; cursor: default; }

  /* ============================================================
     OVERLAY / POPUP
     ============================================================ */
  #copx-map-overlay {
    display: none;
    position: fixed;  /* fills the full viewport, not just the map container */
    inset: 0;
    background: var(--copx-color-overlay-backdrop);
    z-index: 1000;    /* above everything including WordPress nav etc. */
    align-items: center;
    justify-content: center;
  }

  #copx-map-overlay.visible {
    display: flex;
  }

  #copx-map-overlay-box {
    background: var(--copx-color-overlay-bg);
    display: flex;
    flex-direction: row;
    max-width: 780px;
    width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow: hidden;
    position: relative;
  }

  /* Image panel — always square.
     flex-shrink:0 prevents flexbox compressing it;
     width sets one dimension and aspect-ratio drives the other. */
  #copx-map-overlay-image-wrap {
    flex: 0 0 auto;
    width: 260px;
    aspect-ratio: 1 / 1;
    background-color: var(--copx-color-countries); /* tertiary fallback */
    background-size: cover;
    background-position: center;
    position: relative;
  }
  @media (min-width: 900px) {
    #copx-map-overlay-image-wrap{
      width: 320px;
    }
  }

  /* Pattern fallback — diagonal stripes using category colour */
  #copx-map-overlay-image-wrap.fallback-individual {
    background-image: repeating-linear-gradient(
      45deg,
      var(--copx-color-cat-individual) 0px,
      var(--copx-color-cat-individual) 2px,
      transparent 2px,
      transparent 12px
    );
    background-color: #222;
  }
  #copx-map-overlay-image-wrap.fallback-institution {
    background-image: repeating-linear-gradient(
      45deg,
      var(--copx-color-cat-institution) 0px,
      var(--copx-color-cat-institution) 2px,
      transparent 2px,
      transparent 12px
    );
    background-color: #ccc;
  }

  /* Content panel */
  #copx-map-overlay-content {
    flex: 1 1 auto;
    padding: 32px 28px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
  }
  @media (min-width: 900px) {
    #copx-map-overlay-content {
      max-height: 320px;
    }
  }


  /* Mobile: stack image above content */
  @media (max-width: 500px) {
    #copx-map-overlay-box {
      flex-direction: column;
      /* On mobile the whole box scrolls (including image) */
      max-height: 90%;
      overflow-y: auto;
    }
    #copx-map-overlay-image-wrap {
      /* Square: full width of the box, height matches via aspect-ratio */
      flex: 0 0 auto;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
    /* Content area doesn't need its own scroll on mobile —
       the whole box scrolls instead */
    #copx-map-overlay-content {
      overflow-y: visible;
      max-height: none;
    }
  }

  /* Close button */
  #copx-map-overlay-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-family: var(--copx-font-main);
    font-size: 18px;
    cursor: pointer;
    color: var(--copx-color-text);
    z-index: 10;
    line-height: 1;
  }

  #copx-map-overlay-close:hover { color: var(--copx-color-accent); }

  /* Fields wrapper — carries the gap between all dynamic content elements */
  #copx-map-overlay-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
  }

  /* Content elements */
  .overlay-title {
    font-family: var(--copx-font-main);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--copx-color-text);
    margin-bottom: 0.8rem;
  }

  .overlay-subtitle {
    font-family: var(--copx-font-main);
    font-size: 14px;
    color: #666;
  }

  .overlay-description {
    font-family: var(--copx-font-main);
    font-size: 13px;
    line-height: 1.6;
    color: var(--copx-color-text);
  }

  /* All link types in overlay share base styles */
  .overlay-link,
  .overlay-blog,
  .overlay-video,
  .overlay-contact {
    font-family: var(--copx-font-main);
    font-size: 13px;
    color: var(--copx-color-link);
    text-decoration: none;
    display: block;
  }

  .overlay-link:hover,
  .overlay-blog:hover,
  .overlay-video:hover,
  .overlay-contact:hover { text-decoration: underline; }

  /* Video + blog flex group — side by side on wider screens,
     stacked on narrow; adjust gap and breakpoint as needed */
  .overlay-media-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1.8em;
    margin-top: 0.8rem;
  }
  .overlay-video, .overlay-blog {
    font-weight: bold;
  }

  /* Globe icon before location name */
  .overlay-icon {
    display: inline-block;
    vertical-align: middle;
  }

  .overlay-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    position: relative;
    top: -0.15em; /* optical alignment with text baseline */
  }