/* Map text follows the visitor's font size, 14px by default, so pop-up text is about 15px.
   It was fixed at 11px with !important, which no theme or browser setting could change
   (MP-062). Each rem size has a floor in pixels, since themes that set the page's root size
   to 62.5%, such as Twenty Twenty, would otherwise make it 8.75px (MP-187). The plain rem
   size before each is for browsers too old for max(). */
.wpmp-map {
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
}

/* The credit in the map's corner stays at 11px with the browser's usual text size, as it was
   before MP-062, and grows with a visitor's larger text. It took the map's 14px, which nothing
   asks for: OpenStreetMap asks only that its credit be easy to read (MP-234). */
.wpmp-map .leaflet-control-attribution {
  font-size: 0.6875rem;
  font-size: max(0.6875rem, 11px);
}

.wpmp-map {
  height: 470px;
}

/* Fix for theme underlines on zoom controls */
.wpmp-map .leaflet-control-zoom a {
  text-decoration: none !important;
}

.wpmp-map .leaflet-control-layers-toggle {
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}

.wpmp-map .leaflet-control-layers-expanded {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
}

.wpmp-map .leaflet-control-layers label {
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.2;
  color: #111827;
}

.wpmp-map .leaflet-control-layers-list>div {
  margin: 6px 0;
}

.wpmp-map .leaflet-control-layers input {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: #4f46e5;
  cursor: pointer;
}

.wpmp-map .leaflet-control-layers label span {
  cursor: pointer;
}

.wpmp-map .leaflet-control-layers label:hover {
  background: #f9fafb;
  border-radius: 8px;
}

.wpmp-map .leaflet-control-layers-list {
  max-height: 260px;
  overflow: auto;
}

.wpmp-map .leaflet-control-search {
  position: relative;
  overflow: visible;
  background: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 0;
  border-color: rgba(0, 0, 0, .3);
}

/* The text box fills the search box, which the search library set 4px inside it, 22px high,
   so the focus ring below can go round the whole box (MP-235). */
.wpmp-map .leaflet-control-search .search-input {
  width: 304px;
  height: 30px;
  margin: 0;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 10px;
  border: none;
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
  box-shadow: none;
}

.wpmp-map .leaflet-control-search .search-input::placeholder {
  color: #6b7280;
}

.wpmp-map .leaflet-control-search .search-button {
  -webkit-tap-highlight-color: transparent;
  width: 30px;
  height: 30px;
  background: #fff center / 20px 20px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='21' y1='21' x2='15.65' y2='15.65'/%3E%3C/svg%3E") !important;
}

.wpmp-map .leaflet-control-search .search-button:hover {
  background-color: #f3f4f6;
}

.wpmp-map .leaflet-control-search.search-exp .search-input {
  padding-right: 58px;
}

.wpmp-map .leaflet-control-search.search-exp .search-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.wpmp-map .leaflet-control-search.search-exp .search-cancel {
  top: -1px;
  right: 32px;
  z-index: 2;
}

.wpmp-map .leaflet-control-search .search-tooltip {
  position: absolute;
  top: calc(100% + 3px);
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  z-index: 1002;
  max-height: 280px;
  overflow: auto;
  margin-top: -1px;
  border-radius: 0 0 3px 3px;
  background: #fff;
  padding: 6px 0;
}

.wpmp-map .leaflet-control-search .search-tip {
  padding: 8px 12px;
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
  color: #111827;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
}

.wpmp-map .leaflet-control-search .search-tip:hover {
  background: #f3f4f6;
}

.wpmp-map .leaflet-control-search .search-tip-select {
  background: #e0e7ff;
  color: #111827;
}

/* "Not found" in the map's search, in text large enough to read and a red with enough
   contrast. It was 8px, and bright red (MP-066). */
.wpmp-map .leaflet-control-search .search-alert {
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
  color: #d63638;
  padding: 4px 8px;
}

.wpmp-map .leaflet-control-resetview .leaflet-control-resetview-btn {
  display: block;
  width: 30px;
  height: 30px;
  background: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

/* Cluster numbers are dark on the pale bubbles, whatever the theme's text colour: on a dark
   theme they took its near-white and fell to 1.33:1. The map's own Cluster text color still
   wins (MP-068). */
.wpmp-map .marker-cluster div {
  color: #111;
}

.wpmp-map .leaflet-control-resetview .leaflet-control-resetview-btn:hover {
  background-color: #f3f4f6;
}

/* Keyboard focus shows on every control on the map, in a blue ring, 5.17:1 on white. The
   search box and button showed none, and the reset button a pale ring, 1.33:1 (MP-028). */
.wpmp-map .leaflet-control-search .search-button:focus-visible,
.wpmp-map .leaflet-control-search .search-cancel:focus-visible,
.wpmp-map .leaflet-bar a:focus-visible,
.wpmp-map .leaflet-control-layers-toggle:focus-visible,
.wpmp-map .leaflet-control-layers input:focus-visible,
.wpmp-map .leaflet-control-attribution a:focus-visible,
.wpmp-map .leaflet-popup-close-button:focus-visible,
.wpmp-map .leaflet-popup-content a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* While its text box has focus, the search box's ring goes round the whole box, outside its
   magnifying glass. It was drawn round the text box, which sat inside the box, under the
   magnifying glass (MP-235). Browsers without :has() ring the box whenever anything in it
   has focus. */
.wpmp-map .leaflet-control-search .search-input:focus-visible {
  outline: none;
}

.wpmp-map .leaflet-control-search:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@supports selector(:has(*)) {
  .wpmp-map .leaflet-control-search:focus-within {
    outline: none;
  }

  .wpmp-map .leaflet-control-search:has(.search-input:focus-visible) {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
}

/* Pins, cluster bubbles and pop-ups sit on the streets, dark or light, so their ring has a
   white edge inside the blue. */
.wpmp-map .leaflet-marker-icon:focus-visible,
.wpmp-map .leaflet-popup-content:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

#wpmp-export-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wpmp-cf-row em {
  font-style: normal;
  color: #666;
  margin-right: 4px;
}

.wpmp-cf-row .wpmp-cf-handle {
  vertical-align: middle !important;
}

/* A long word in a pop-up, such as a web address, wraps onto the next line instead of running
   out of the pop-up. "Restrict tooltip width" did this for the maps that had it ticked; the
   pop-ups themselves fit their map on every screen (MP-057, MP-241). */
.wpmp-map .leaflet-popup-content {
  overflow-wrap: break-word;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea p {
  margin: 0 0 0.5em;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea p:last-child {
  margin-bottom: 0;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0.5em 0;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea ol {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 0.5em 0;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea li {
  margin-bottom: 0.25em;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea b,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea strong {
  font-weight: bold;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea i,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea em {
  font-style: italic;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h1,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h2,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h3,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h4,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h5,
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h6 {
  margin: 0.5em 0 0.25em;
  font-weight: bold;
  line-height: 1.2;
}

.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h1 { font-size: 1.5em; }
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h2 { font-size: 1.4em; }
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h3 { font-size: 1.3em; }
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h4 { font-size: 1.2em; }
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h5 { font-size: 1.1em; }
.wpmp-map .leaflet-popup-content .wpmp-cf-textarea h6 { font-size: 1em; }

.wpmp-map .leaflet-popup-content .wpmp-item--title {
  font-weight: 600;
  font-size: 1.15em;
  margin-bottom: 2px;
}

.wpmp-map .leaflet-popup-content .wpmp-item--address {
  font-style: italic;
  /* An address typed on several lines shows on them (MP-076). */
  white-space: pre-line;
}

@media (hover: hover) and (pointer: fine) {
  .wpmp-map .leaflet-control-search .search-button:hover {
    background-color: #f3f4f6;
  }
}

@media (hover: none) {

  .wpmp-map .leaflet-control-search .search-button,
  .wpmp-map .leaflet-control-search .search-button:hover,
  .wpmp-map .leaflet-control-search .search-button:active,
  .wpmp-map .leaflet-control-search .search-button:focus {
    background-color: #fff !important;
  }
}

/* =========================================
   Custom Field Types — v1.0
   ========================================= */

/* Image field */
.wpmp-map .leaflet-popup-content .wpmp-cf-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin: 4px 0;
}

/* Button / CTA field */
.wpmp-map .leaflet-popup-content .wpmp-cf-btn {
  display: inline-block;
  padding: 7px 16px;
  background: #2271b1;
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1em;
  transition: filter 0.15s ease;
  margin-top: 4px;
  align-self: flex-start;
}
.wpmp-map .leaflet-popup-content .wpmp-cf-btn:hover {
  filter: brightness(1.15);
}

/* Field label text */
.wpmp-map .leaflet-popup-content .wpmp-cf-label {
  font-weight: 600;
  margin-right: 3px;
}

/* Label position: inline */
.wpmp-map .leaflet-popup-content .wpmp-label-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
}

/* Label position: stacked */
.wpmp-map .leaflet-popup-content .wpmp-label-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Inline button specific alignment */
.wpmp-map .leaflet-popup-content .wpmp-cf-button.wpmp-label-inline {
  align-items: center;
}
.wpmp-map .leaflet-popup-content .wpmp-cf-button.wpmp-label-inline .wpmp-cf-btn {
  align-self: center;
  margin-top: 0;
}

/* A note over the map, such as when the streets can't be drawn (MP-048). */
.wpmp-map .wpmp-map-status {
  max-width: 320px;
  margin: 0 0 10px 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1d2327;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 0.8125rem;
  font-size: max(0.8125rem, 13px);
  line-height: 1.4;
}

/* How to zoom or move the map, shown over it while the page scrolls past (MP-020). */
.wpmp-map .wpmp-gesture-hint {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  font-size: max(1.25rem, 20px);
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wpmp-map .wpmp-gesture-hint.is-visible {
  opacity: 1;
}

/* Less motion, when the visitor asks for it: the map's script turns its animations off, and
   these catch any a change of setting leaves (MP-067). */
@media (prefers-reduced-motion: reduce) {
  .wpmp-map .wpmp-gesture-hint,
  .wpmp-map .wpmp-cf-btn,
  .wpmp-map.leaflet-fade-anim .leaflet-popup,
  .wpmp-map.leaflet-fade-anim .leaflet-tile,
  .wpmp-map .leaflet-zoom-anim .leaflet-zoom-animated,
  .wpmp-map .leaflet-cluster-anim .leaflet-marker-icon,
  .wpmp-map .leaflet-cluster-anim .leaflet-marker-shadow {
    transition: none !important;
  }
}

/* Hidden on screen but read by screen readers: the list of a map's places, and words such as
   "(opens in a new tab)" (MP-025, MP-027). */
.wpmp-sr-only,
.wpmp-places,
.wpmp-skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* A map, its list of places and the link that skips past both (MP-025). */
.wpmp-map-wrap {
  position: relative;
}

.wpmp-skip-link:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1100;
  padding: 8px 12px;
  background: #fff;
  color: #1d2327;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 0.875rem;
  font-size: max(0.875rem, 14px);
  line-height: 1.4;
  text-decoration: underline;
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Where the skip link lands: focus moves here, but there's nothing to see. */
.wpmp-map-end {
  height: 0;
  outline: none;
}

/* MapTiler's logo, on maps that use MapTiler (MP-088). */
.wpmp-map .wpmp-maptiler-logo {
  display: block;
  margin: 0 0 8px 10px;
  line-height: 0;
}

.wpmp-map .wpmp-maptiler-logo img {
  display: block;
  width: 88px;
  height: 23px;
}

.wpmp-map .wpmp-maptiler-logo:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}