/* MAP PAGE STYLESHEET (load after main_stylesheet.css to override)
   - Uses site-wide tokens (colors/fonts/shadows/radius) from main :root
   - Map layout + Leaflet UI patterns
*/

/* ---------------------------------------
   TOKENS + FIXED BAR HEIGHTS (NO JUMP)
----------------------------------------- */

:root{
  --white-color:                  #ffffff;
  --primary-color:                #2C6E91;
  --secondary-color:              #5C946E;
  --third-color:                  #A3B18A;
  --fourth-color:                 #A0522D;
  --fifth-color:                  #7F5539;
  --p-color:                      #030303;

  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-title: "agenda", sans-serif;

  --font-weight-bold:     bold;
  --font-weight-normal:   normal;
  --font-weight-boldish:  500;
  --font-weight-light:    300;
  --font-weight-thin:     100;

  --h1-font-size:         51px;
  --h2-font-size:         43px;
  --h3-font-size:         31px;
  --h4-font-size:         25px;
  --h5-font-size:         25px;
  --h6-font-size:         23px;
  --p-font-size:          21px;
  --small-txt:            17px;
  --smallest-txt:         14px;

  --less-line-height:     1.2em;

  --border-radius-img:    10px;
  --border-radius-btn:    90px;

  --shadow-reg:           0 6px 18px rgba(0,0,0,0.18);
  --shadow-bottom:        0 6px 10px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-bottom-small:  0 5px 9px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);

  /* lock these so layout is correct BEFORE fonts finish loading */
  --nav-h:                64px;
  --subnav-h:             52px;
  --footer-h:             56px;
}

/* ---------------------------------------
   PAGE BASICS
----------------------------------------- */

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden;
}
html{ scrollbar-gutter: stable; }

/* ---------------------------------------
   COMPACT TOP NAV BAR
----------------------------------------- */

.navbar.navbar-expand-lg.fixed-top{
  padding-top: 0.30rem !important;
  padding-bottom: 0.30rem !important;
}
.navbar-expand-lg .navbar-nav .nav-link{
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.navbar .nav-link{
  padding-top: 0.40rem !important;
  padding-bottom: 0.40rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  font-size: 1.15rem !important;
}
.navbar-logo{ height: 34px !important; }

/* ---------------------------------------
   SUB NAV (MAP) — FIXED HEIGHT (NO JUMP)
----------------------------------------- */

.map-subnav{
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: var(--subnav-h);
  z-index: 1025;

  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.map-subnav-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  flex-wrap: nowrap;
}

.map-subnav-title{
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary-color);
  font-size: 1.1rem;
  line-height: 1;
  white-space: nowrap;
}

.map-subnav-right{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* tab buttons */
.map-tab{
  appearance: none;
  border: 1px solid rgba(44,110,145,0.35);
  background: rgba(255,255,255,0.92);
  color: var(--primary-color);
  border-radius: var(--border-radius-btn);
  padding: 0.4rem 0.85rem;
  font: 600 0.95rem/1 var(--font-body);
  line-height: 1;
  cursor: pointer;
  outline: none;
  user-select: none;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, text-decoration-color .15s ease;
}

.map-tab:hover{
  border-color: rgba(44,110,145,0.6);
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 1.5px;
}

.map-tab.is-active{
  background: var(--primary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* mobile: allow wrap, and let subnav be auto height */
@media (max-width: 575.98px){
  :root{ --subnav-h: 72px; } /* a stable default that fits 2 rows */

  .map-subnav{
    height: auto;
    overflow: visible;
  }
  .map-subnav-inner{
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 0.75rem;
    padding: 6px 0;
  }
  .map-subnav-left{
    width: 100%;
    text-align: center;
  }
  .map-subnav-right{
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------
   MAP CANVAS — BELOW SUBNAV, ABOVE FOOTER
----------------------------------------- */

#map{
  position: fixed;
  top: calc(var(--nav-h) + var(--subnav-h));
  left: 0;
  right: 0;
  bottom: var(--footer-h);
  z-index: 1;
}

.leaflet-container{
  width: 100%;
  height: 100%;
}

/* Leaflet controls should be positioned INSIDE the map,
   not offset by subnav again (prevents "double offset") */
.leaflet-top{
  top: 12px !important;
}

/* ---------------------------------------
   FOOTER (overlay)
----------------------------------------- */

.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  z-index: 1025;

  margin: 0 !important;
  padding: 0.70rem 0 !important;

  background: rgba(255,255,255,0.78);
  border-top: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.site-footer p,
.site-footer .tiny-text{
  font-size: var(--smallest-txt) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.nserc-logo{ height: 26px !important; }

.nserc-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.mail-block{ white-space: nowrap; }

@media (max-width: 991.98px){
  .site-footer .container,
  .site-footer .row{
    text-align: center !important;
    justify-content: center !important;
  }
  .site-footer [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .nserc-wrap{
    justify-content: center !important;
    flex-wrap: wrap;
  }
  .mail-block{
    white-space: normal;
    text-align: center;
  }
}

/* ---------------------------------------
   LEAFLET: LEFT ZOOM + SEARCH ROW
----------------------------------------- */

.leaflet-left-zoom-and-search{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* =========================================================
   LEAFLET: ZOOM CONTROL
========================================================= */

.leaflet-control-zoom.leaflet-bar{
  border-radius: var(--border-radius-img) !important;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: var(--shadow-bottom-small);
  background: rgba(255,255,255,0.92);
}

.leaflet-control-zoom.leaflet-bar a{
  border-radius: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  background: rgba(255,255,255,0.92) !important;
  transition: background-color .12s ease;
  outline: none !important;
  box-shadow: none !important;
}

.leaflet-control-zoom.leaflet-bar a:hover{
  background-color: rgba(0,0,0,0.06) !important;
}

.leaflet-control-zoom.leaflet-bar a:focus,
.leaflet-control-zoom.leaflet-bar a:focus-visible,
.leaflet-control-zoom.leaflet-bar a:active{
  outline: none !important;
  box-shadow: none !important;
}

.leaflet-control-zoom.leaflet-bar a + a{
  border-top: 1px solid rgba(0,0,0,0.10) !important;
}

/* =========================================================
   LEAFLET SEARCH (leaflet-search plugin)
========================================================= */

.leaflet-control-search{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
}

.leaflet-control-search .search-button{
  display: none !important;
}

.leaflet-control-search::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;

  background-color: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-bottom-small);
  backdrop-filter: blur(10px);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%236a6a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.3-4.3m1.8-5.2a7 7 0 1 1-14 0a7 7 0 0 1 14 0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;

  pointer-events: none;
  z-index: 2;
}

.leaflet-control-search input.search-input{
  width: 260px;
  max-width: 56vw;
  height: 34px;
  padding: 7px 10px 7px 44px;
  margin: 0 !important;

  border-radius: var(--border-radius-img);
  border: 1px solid rgba(0,0,0,0.12);

  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-bottom-small);

  font: 600 13px/1 var(--font-body);
  outline: none;
}

.leaflet-control-search input.search-input::placeholder{
  color: rgba(0,0,0,0.55);
}

.leaflet-control-search input.search-input:focus{
  border-color: rgba(44,110,145,0.40);
  background: rgba(255,255,255,0.78);
}

.leaflet-control-search .search-tooltip{
  border-radius: var(--border-radius-img);
  box-shadow: var(--shadow-reg);
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;
}

/* ---------------------------------------
   LEAFLET: RIGHT UI CARD + STACK
----------------------------------------- */

.leaflet-ui-hidden{ display: none !important; }

.leaflet-ui-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.leaflet-ui-card{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--border-radius-img);
  box-shadow: var(--shadow-reg);
  backdrop-filter: blur(10px);
  padding: 10px 12px;
  min-width: 210px;
  max-width: 210px;
  position: relative;
}

.leaflet-ui-stack > .leaflet-ui-card{
  min-width: 210px;
  max-width: 210px;
}

#leaflet-right-controls{ order: 1; }
#leaflet-right-overview{ order: 2; }

.leaflet-ui-card .ui-section{
  display: grid;
  gap: 6px;
  margin: 0 0 10px 0;
}
.leaflet-ui-card .ui-section:last-child{ margin-bottom: 0; }
.leaflet-ui-card .ui-section--spaced{ margin-bottom: 14px; }

.leaflet-ui-card .ui-label{
  font: 700 13px/1.1 var(--font-body);
  color: rgba(0,0,0,0.78);
  letter-spacing: 0.01em;
}

.leaflet-ui-card select,
.leaflet-ui-card input[type="range"]{
  width: 100%;
  font: 600 13px/1.1 var(--font-body);
}

.leaflet-ui-card select{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--border-radius-img);
  padding: 7px 10px;
  outline: none;
}

.leaflet-ui-card input[type="range"]{
  margin: 2px 0 0;
}

.leaflet-ui-card .ui-close{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  margin: 0;
  font: 900 18px/1 var(--font-body);
  color: rgba(0,0,0,0.55);
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 8px;
}
.leaflet-ui-card .ui-close:hover{ color: rgba(0,0,0,0.85); }

/* ---------------------------------------
   LEGEND (segmented bar + boundary ticks)
----------------------------------------- */

.leaflet-ui-card .ui-legend{
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.10);
}

.leaflet-ui-card .ui-legend-title{
  font: 800 13px/1.2 var(--font-body);
  color: rgba(0,0,0,0.85);
}

.leaflet-ui-card .legend-bar{
  display: flex;
  height: 18px;
  border-radius: var(--border-radius-img);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.6);
}

.leaflet-ui-card .legend-seg{
  flex: 1 1 0;
  border-right: 1px solid rgba(0,0,0,0.30);
}
.leaflet-ui-card .legend-seg:last-child{
  border-right: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}

.leaflet-ui-card .legend-ticks{
  position: relative;
  height: 14px;
  margin-top: 2px;
  font: 700 12px/1 var(--font-body);
  color: rgba(0,0,0,0.75);
}

.leaflet-ui-card .legend-ticks span{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.leaflet-ui-card .legend-ticks span.is-first{ transform: translateX(0); }
.leaflet-ui-card .legend-ticks span.is-last{  transform: translateX(-100%); }

/* ---------------------------------------
   RESET BUTTON (below zoom)
----------------------------------------- */

.leaflet-control-reset.leaflet-bar{
  margin-top: 8px;
  border-radius: var(--border-radius-img) !important;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: var(--shadow-bottom-small);
  background: rgba(255,255,255,0.92);
}

.leaflet-control-reset a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  background: rgba(255,255,255,0.92) !important;
  outline: none !important;
  box-shadow: none !important;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

.leaflet-control-reset a:hover{
  background-color: rgba(0,0,0,0.06) !important;
}

.leaflet-control-reset a:focus,
.leaflet-control-reset a:focus-visible,
.leaflet-control-reset a:active{
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------
   OPACITY SLIDER: blue thumb + white→blue track
----------------------------------------- */

.leaflet-ui-card .ui-range{
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}

.leaflet-ui-card .ui-range::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(84, 39, 143,1) 100%);
}

.leaflet-ui-card .ui-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border-radius: 999px;
  background: rgba(84, 39, 143,1);
  border: 2px solid #3a1b6e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.leaflet-ui-card .ui-range::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(84, 39, 143,1) 100%);
}

.leaflet-ui-card .ui-range::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(84, 39, 143,1);
  border: 2px solid #3a1b6e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.leaflet-ui-card .ui-range::-moz-focus-outer{
  border: 0;
}

/* ---------------------------------------
   OVERVIEW CARD CONTENT
----------------------------------------- */

.leaflet-ui-card--overview{
  width: 100%;
  max-width: 100%;
}

.ui-overview-body{
  display: grid;
  gap: 8px;
}

.ui-overview-p{
  margin: 0;
  padding-top: 5%;
  font: 500 13px/1.35 var(--font-body);
  color: rgba(0,0,0,0.80);
}

.ui-overview-list{
  margin: 4px 0 2px;
  padding-left: 1.1rem;
  font: 600 13px/1.35 var(--font-body);
  color: rgba(0,0,0,0.78);
}

.ui-overview-list li{
  margin: 0 0 4px 0;
}

.ui-overview-hint{
  margin: 2px 0 0;
  font: 600 12.5px/1.35 var(--font-body);
  color: rgba(0,0,0,0.65);
}

/* ---------------------------------------
   LEAFLET TOOLTIP (marker hover)
----------------------------------------- */

.leaflet-tooltip{
  border-radius: var(--border-radius-img) !important;
  overflow: hidden;
}

.leaflet-tooltip:before{
  border-radius: 3px;
}





/* ---------------------------------------
   TREND
----------------------------------------- */

.map-subnav-right--trend{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; /* left actions, right tabs */
  gap: 10px;
}

.trend-subnav-actions,
.trend-subnav-tabs{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* let the right tabs stay right aligned */
.trend-subnav-tabs{ justify-content: flex-end; }

/* mobile: stack */
@media (max-width: 768px){
  .map-subnav-right--trend{
    flex-direction: column;
    align-items: stretch;
  }
  .trend-subnav-actions,
  .trend-subnav-tabs{
    justify-content: space-between;
  }
}



/* Remove browser focus outline on Leaflet vector features (SVG paths) */
#map .leaflet-interactive,
#map .leaflet-interactive:focus,
#map .leaflet-interactive:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Some browsers apply it specifically to SVG elements */
#map svg path.leaflet-interactive:focus,
#map svg path.leaflet-interactive:active {
  outline: none !important;
}

/* If the orange ring is coming from "focus-visible" */
#map .leaflet-interactive:focus-visible {
  outline: none !important;
}