/* ======================================================================================================
 * Version: 1.4.0
 * Created: 2026-01-24 13h15 SAST
 * Updated: 2026-04-02
 * File: viridians-jurisdictions-map.css
 * Path: /assets/css/viridians/viridians-jurisdictions-map.css
 * Author: Buktika Webdesk (Binka)
 * Purpose: Map section styles - hero background, container sizing, MapLibre overlay readability, globe halo
====================================================================================================== */
/*
ChangeLog:
  - v1.4.0 (2026-04-02): Overlay removed. Viewport-height centering. Larger globe.
    - REMOVED  #viridians-jurisdictions-map-container::after loading skeleton.
               Root cause: var(--page-dark-base) is near-black. The overlay rendered
               as a solid black rectangle over the galaxy section background while the
               globe was building. MapLibre canvas is transparent before load -- the
               galaxy shows through correctly with no overlay. Overlay serves no purpose.
               Corresponding JS methods _showLoadingOverlay / _hideLoadingOverlay removed
               in viridians-jurisdictions-map.js v2.11.1.
    - CHANGED  .viridians-jurisdictions-map-section: min-height: 1000px replaced with
               height: calc(100dvh - var(--header-height, 77px)) + min-height: 37.5rem.
               Section now occupies the visible viewport below the fixed header.
               display: grid + place-items: center vertically centres the globe.
               dvh unit avoids the mobile browser chrome measurement problem.
    - CHANGED  #viridians-jurisdictions-map-container: max-width 1100px -> 1200px.
               height changed from calc(var(--hero-min) - 6rem) to
               calc(100dvh - var(--header-height, 77px) - 6rem) with
               max-height: var(--hero-min) as a cap for very tall screens.
  - v1.3.0 (2026-04-02): Map loading skeleton (superseded by v1.4.0).
  - v1.2.6: Final popup clipping fix.
    - The live map node (#viridians-jurisdictions-map) now allows overflow so
      MapLibre popups can extend beyond the globe frame without bottom cropping.
  - v1.2.5: Popup clipping fix.
    - Map section and outer map container now allow overflow so MapLibre popups
      can extend beyond the map frame without being cropped.
  - v1.2.4: Removed custom CSS halo (switched to MapLibre sky)
  - v1.2.3: Added CSS globe halo overlay (tight radius), avoids MapLibre sky ring artifacts.
  - v1.2.2: Cooperative gestures overlay styling.
*/

.viridians-jurisdictions-map-section {
  width: 100%;
  height: calc(100dvh - var(--header-height, 77px));
  min-height: 37.5rem;
  display: grid;
  place-items: center;
  padding: 3rem 1rem;
  margin: 0;
  border-radius: 0;
  position: relative;
  overflow: visible;

  background-color: rgb(11, 11, 25);
  background-image:
    linear-gradient(135deg, rgba(75, 42, 86, 0.30) 0%, rgba(47, 92, 104, 0.35) 100%),
    url('/assets/images/viridians/viridian-map-galaxy.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 50% 50%;
  background-size: cover, cover;
  background-attachment: scroll, scroll;
}

#viridians-jurisdictions-map-container {
  width: 100%;
  max-width: 1200px;
  height: calc(100dvh - var(--header-height, 77px) - 6rem);
  max-height: var(--hero-min);
  margin: 0 auto;

  border-radius: 12px;
  position: relative;

  /* No need for overflow visible; sky is internal to map */
  overflow: visible;

  transform: translateZ(0);
  will-change: transform;
}

#viridians-jurisdictions-map {
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  border-radius: 12px;
}

/* Keep controls above map */
#viridians-jurisdictions-map-container .maplibregl-control-container {
  position: relative;
  z-index: 30;
}

@media (max-width: 480px) {
  .viridians-jurisdictions-map-section {
    min-height: 700px;
    padding: 0.75rem 0.5rem 15rem;
  }

  #viridians-jurisdictions-map-container {
    width: min(100%, 26rem);
    max-width: calc(100vw - 1rem);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  #viridians-jurisdictions-map {
    height: 100%;
    border-radius: 8px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .viridians-jurisdictions-map-section {
    min-height: 760px;
    padding: 1rem 0.5rem 14rem;
  }

  #viridians-jurisdictions-map-container {
    width: min(100%, 34rem);
    max-width: calc(100vw - 1rem);
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .viridians-jurisdictions-map-section {
    min-height: 550px;
    padding: 1.5rem 0.75rem 2rem;
  }

  #viridians-jurisdictions-map-container {
    width: min(100%, 42rem);
    max-width: calc(100vw - 1.5rem);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  #viridians-jurisdictions-map {
    height: 100%;
    border-radius: 8px;
  }
}

/* ==========================================================================
   MAP CANVAS CURSOR
   ========================================================================== */

.maplibregl-canvas-container.maplibregl-interactive {
  cursor: grab;
}

.maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: grabbing;
}

.maplibregl-canvas-container.maplibregl-interactive.country-hover {
  cursor: pointer !important;
}

/* ==========================================================================
   COOPERATIVE GESTURES OVERLAY (MapLibre internal)
   ========================================================================== */

#viridians-jurisdictions-map-container .maplibregl-cooperative-gesture-screen {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 40 !important;
}

#viridians-jurisdictions-map-container .maplibregl-cooperative-gesture {
  background: rgba(17, 24, 39, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38) !important;

  color: rgba(255, 255, 255, 0.96) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.35 !important;

  padding: 12px 14px !important;
  max-width: min(520px, calc(100vw - 28px)) !important;
}

#viridians-jurisdictions-map-container .maplibregl-cooperative-gesture * {
  color: rgba(255, 255, 255, 0.96) !important;
}

#viridians-jurisdictions-map-container .maplibregl-cooperative-gesture kbd {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  padding: 2px 7px !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

/* ── MapLibre HelpControl button ────────────────────────────────────────────
   .maplibregl-ctrl-help joins the NavigationControl group at top-right.
   Inherits maplibregl-ctrl-group border-radius and border from MapLibre CSS.
   Matches the visual weight of the zoom/compass buttons.
   26px × 26px: MapLibre ctrl-icon canonical size — permanent px exception
   (same category as MapLibre navigation SVG icon dimensions). */
 
.page-viridians-jurisdictions .maplibregl-ctrl-help {
  /* width/height intentionally absent — MapLibre .maplibregl-ctrl-icon CSS owns
     the 29×29 dimensions. Overriding here caused the button to render smaller. */
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  border:           none;
  cursor:           pointer;
  font-size:        0.9375rem;
  font-weight:      700;
  color:            var(--sdx-color-slate-dark);
  transition:       background 0.15s ease, color 0.15s ease;
  padding:          0;
  line-height:      1;
}
 
.page-viridians-jurisdictions .maplibregl-ctrl-help:hover {
  background: rgba(0, 0, 0, 0.05);
  color:      var(--page-primary);
}
 
.page-viridians-jurisdictions .maplibregl-ctrl-help.is-active {
  background: color-mix(in srgb, var(--page-primary) 12%, transparent);
  color:      var(--page-primary);
}
 
.page-viridians-jurisdictions .maplibregl-ctrl-help:focus-visible {
  outline:        2px solid var(--page-primary);
  outline-offset: 1px;
}

.page-viridians-jurisdictions .maplibregl-ctrl-compass.is-active {
  opacity: 1 !important;
}

.page-viridians-jurisdictions .maplibregl-ctrl-compass.is-idle {
  opacity: 0.82 !important;
}

.page-viridians-jurisdictions .maplibregl-ctrl-compass[disabled] {
  opacity: 0.82 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
 
/* Dark backgrounds behind the map controls area — ensure legibility */
[data-theme="dark"] .page-viridians-jurisdictions .maplibregl-ctrl-help {
  color: var(--fg);
}