/* ===== Layout =========================================================
   Let the map fill the viewport. If embedded in an <iframe>, control
   the height on the iframe element instead.
====================================================================== */
html,
body {
  height: 100%;
  margin: 0;
}
#map {
  height: 100%;
  width: 100%;
}

/* ===== Map labels (Leaflet tooltip as an accessible pill) =============
   - Solid white background + dark text (WCAG text contrast).
   - Centered, supports multiline via \n (from CSV overrides).
   - Responsive type size for small screens.
====================================================================== */
.leaflet-tooltip.np-label-tooltip {
  /* Container */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  /* Text */
  color: #111111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px); /* ~14–18px based on viewport */
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-align: center;

  /* Behavior */
  white-space: pre-line; /* honor \n in labels for line breaks */
  max-width: none; /* avoid default Leaflet tooltip wrapping */
  pointer-events: none; /* presentational only */
  user-select: none; /* avoid selecting text while panning */
}

/* Prefer higher contrast if the user requests it */
@media (prefers-contrast: more) {
  .leaflet-tooltip.np-label-tooltip {
    border-color: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.35);
  }
}

/* ===== Keyboard / Focus ==============================================
   Visible focus ring on the map container for keyboard users.
====================================================================== */
#map:focus {
  outline: 3px solid #111111;
  outline-offset: 2px;
}

/* ===== Project credit control =========================================
   Separate credit element (bottom-left) added by:
     new RepoCredit().addTo(map)
   See main.js helper "RepoCredit" for markup.
   -------------------------------------------------------------------- */
.np-repo-credit.leaflet-control {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font: 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
    "Helvetica Neue", Arial, sans-serif;
  color: #111;
  /* Leaflet adds container margins; no extra margins needed here */
}

.np-repo-credit a {
  color: #111;
  text-decoration: none;
  outline: none;
}

.np-repo-credit a:hover,
.np-repo-credit a:focus {
  text-decoration: underline;
}

.np-repo-credit a:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Higher contrast preference */
@media (prefers-contrast: more) {
  .np-repo-credit.leaflet-control {
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.35);
  }
}

/* Small screens: slightly tighter paddings and font size */
@media (max-width: 480px) {
  .np-repo-credit.leaflet-control {
    padding: 3px 6px;
    font-size: 11px;
  }
}