/* 1. Global Reset & Map Setup */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#map {
  height: 100vh;
  width: 100vw;
  z-index: 1;
}

/* 2. Custom Marker & Animations */
.custom-marker div {
  transition: opacity 600s linear; /* 10-minute fade */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

#brand-text {
  position: absolute;
  top: 10px;
  left: 60px;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  height: 66px;              /* EXACT height of + / - control */
  pointer-events: none;
}

/* Shared text styling */
#brand-text span {
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-weight: bold;
  display: block;
  color: #cc0000;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
  white-space: nowrap;
}

/* DAVID */
#brand-text .line-1 {
  font-size: 42px;           /* Slightly reduced so both fit nicely */
  line-height: 1;
  margin-bottom: -2px;       /* 👈 makes them almost touch (≈ 2px gap) */
  text-transform: uppercase;
}

/* MAP.org */
#brand-text .line-2 {
  font-size: 31px;           /* Tuned so width ≈ DAVID */
  line-height: 1;
  text-transform: none;      /* keeps MAP.org casing */
}

#brand-text span {
  font-family: 'Impact', 'Arial Black', sans-serif;
  color: #cc0000; /* solid red */
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.25); /* subtle depth, works everywhere */
}

#brand-text span:first-child {
  font-size: 46px;
  line-height: 0.9;
}

#brand-text span:last-child {
  font-size: 18px;
  line-height: 1.1;
  margin-top: -2px; /* Tightens the gap by half */
}

/* 4. 'About' Button - Top Right */
#about-trigger {
  position: absolute;
  top: 55px;          /* Sits just below the Recenter button */
  right: 10px;        /* Aligns with the standard Leaflet margin */
  left: auto;         /* Clear any left positioning */
  
  z-index: 1001;
  background: white;
  border: 2px solid #ccc; /* Matches your Recenter button border */
  padding: 4px 10px;      /* Slightly smaller padding for hierarchy */
  border-radius: 4px;     /* Subtle rounded corners */
  
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  text-decoration: none;  /* Remove underline */
  cursor: pointer !important;
  pointer-events: auto !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4); /* Adds a small 'pop' */
}

#about-trigger:hover {
  background: #f4f4f4;    /* subtle hover effect */
}
/* 5. Instructions Popup Overlay */
#about-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999 !important; /* Always on top */
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  width: 280px;
  box-shadow: 0 0 100px rgba(0,0,0,0.5);
}

#about-popup h3 {
  margin: 0 0 10px 0;
  font-family: 'Impact', sans-serif;
  color: #cc0000;
}

#about-popup p {
  font-family: sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

#about-popup button {
  cursor: pointer;
  margin-top: 15px;
  padding: 8px 20px;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
}

/* Logic to hide the popup */
.hidden {
  display: none !important;
}