/* NIGHT MODE FOR THE MAP SECTION */
.mapsec--night {
  position: relative;
  color: var(--moon);
  padding: 80px 0 88px;
  text-align: center;
  overflow: hidden;

  /* Night sky gradient */
  background: radial-gradient(78% 62% at 84% -12%, rgba(255, 240, 200, 0.22), transparent 60%),
              radial-gradient(100% 80% at 6% 112%, rgba(95, 224, 208, 0.09), transparent 62%),
              linear-gradient(168deg, #001c45 0%, #102554 52%, #17346f 100%);
}

/* Optional subtle glow overlay */
.mapsec--night::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 20%, rgba(246, 213, 138, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.mapsec--night h2 {
  color: var(--moon);
}

.mapsec--night h2 em {
  color: var(--gold-bright);
}

.mapsec--night .map-sub {
  color: #dbe2f2;
}

/* Stats boxes in night mode */
.mapsec--night .mstat {
  background: rgba(27, 58, 124, 0.55);
  border-color: rgba(95, 224, 208, 0.28);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}

.mapsec--night .mstat .v {
  color: var(--gold-bright);
}

.mapsec--night .mstat .k {
  color: #cfe6f8;
}

/* Map container in night mode */
.mapsec--night .mapbox {
  background: #0b1f3a;
  border-color: rgba(95, 224, 208, 0.25);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

/* Optional: make pins slightly brighter on dark background */
.mapsec--night .pin svg path {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.mapsec--night .pin:hover,
.mapsec--night .pin:focus {
  filter: drop-shadow(0 3px 10px rgba(246, 213, 138, 0.5));
}

/* Popup in night mode */
.mapsec--night .popup {
  background: #112547;
  border-color: rgba(95, 224, 208, 0.28);
  color: #dbe2f2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.mapsec--night .popup .pt {
  color: #eaf2ff;
}

.mapsec--night .popup .pm {
  color: #cfe6f8;
}

.mapsec--night .popup .pc {
  color: var(--gold-bright);
  background: rgba(246, 213, 138, 0.12);
}

.mapsec--night .popup .pmedia {
  background: rgba(11, 31, 58, 0.6);
  border-color: rgba(95, 224, 208, 0.25);
}

.mapsec--night .popup .pmedia:hover {
  background: rgba(17, 37, 71, 0.8);
  border-color: rgba(95, 224, 208, 0.45);
}

.mapsec--night .popup .pnav-b {
  background: #0b1f3a;
  border-color: rgba(95, 224, 208, 0.35);
  color: #cfe6f8;
}

.mapsec--night .popup .pnav-b:hover {
  background: #102554;
  border-color: var(--gold-bright);
  color: #fff;
}

.mapsec--night .popup .x {
  color: #9dbdd6;
}

/* Legend in night mode */
.mapsec--night .legend {
  color: #cfe6f8;
}

/* Zoom controls in night mode */
.mapsec--night .map-zoom button {
  background: rgba(11, 31, 58, 0.85);
  border-color: rgba(95, 224, 208, 0.35);
  color: #cfe6f8;
}

.mapsec--night .map-zoom button:hover {
  background: rgba(17, 37, 71, 0.95);
  border-color: var(--gold-bright);
  color: #fff;
}

.mapsec--night .map-hint {
  background: rgba(11, 31, 58, 0.7);
  color: #cfe6f8;
  border: 1px solid rgba(95, 224, 208, 0.25);
}

/* Night mode for the actual map image */
.mapsec--night .map-plate-base {
  /* Darken and cool the map colors */
  filter:
    brightness(0.55)
    contrast(1.1)
    saturate(0.7)
    hue-rotate(190deg);
}

/* Optional: slightly lighter oceans */
.mapsec--night .mapbox {
  background: #0b1f3a;
}