/* V1.2 — shared Leaflet chrome polish, loaded by every template that can host a map
   (template.xhtml · template-directory.xhtml · template-portal.xhtml). Keeping it in one
   file means a new map page inherits the fix instead of re-introducing the bug.

   The problem: clicking a polygon or a marker leaves the browser's default focus
   rectangle — a hard black/blue square around the shape — on the directory split/map/
   clusters views, the admin bioregion list map view, the bioregion detail map, the
   community-boundary overview, the land-node map, the dashboard map and the portal
   geopicker.

   The fix: suppress the default ring on pointer interaction, and give KEYBOARD users a
   soft Mycelium-green ring instead (:focus-visible). Removing the indicator outright
   would undo the S1 accessibility work. */

.leaflet-container:focus,
.leaflet-container path:focus,
.leaflet-container .leaflet-interactive:focus,
.leaflet-marker-icon:focus,
.leaflet-container a:focus {
    outline: none;
}

.leaflet-container:focus-visible,
.leaflet-container path:focus-visible,
.leaflet-container .leaflet-interactive:focus-visible,
.leaflet-marker-icon:focus-visible,
.leaflet-container a:focus-visible {
    outline: 2px solid rgba(0, 89, 76, .55);
    outline-offset: 2px;
    border-radius: 6px;
}

/* SVG paths ignore border-radius; a rounded ring is meaningless on a polygon outline,
   so keyboard focus there reads as a slightly heavier, brand-tinted stroke halo. */
.leaflet-container path:focus-visible {
    outline: none;
    filter: drop-shadow(0 0 3px rgba(0, 89, 76, .85));
}

/* ---------------------------------------------------------------------------
   V1.2 — shared map popup (bioregion / community). Used by the public directory
   "learn more" popup and by the admin map view's right-click "Edit Bioregion".
   Styled here rather than per page so both surfaces read as one component. */
.mln-map-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
.mln-map-popup-wrap .leaflet-popup-content { margin: 12px 14px; min-width: 200px; }

.mln-map-popup-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #1a2b25;
}
.mln-map-popup-code {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.7rem;
    letter-spacing: .04em;
    color: #6b7280;
}
.mln-map-popup-teaser {
    margin: 6px 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #4b5563;
}
.mln-map-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.mln-map-popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    border: 1px solid rgba(0, 89, 76, .28);
    border-radius: 8px;
    background: #fff;
    color: #00594c;
    font: 600 0.78rem/1 inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.mln-map-popup-btn:hover { background: rgba(0, 89, 76, .07); border-color: rgba(0, 89, 76, .5); }
.mln-map-popup-btn--primary { background: #00594c; border-color: #00594c; color: #fff; }
.mln-map-popup-btn--primary:hover { background: #00473d; border-color: #00473d; }
.mln-map-popup-btn i { font-size: 0.8rem; }


/* ============================================================================
 * Node markers — styling for the markup mln-map.js creates (addPointLayer dots and
 * addLandNodeMarker pins).
 *
 * These lived in mln-directory.css, which ONLY template-directory.xhtml loads. The
 * admin land node detail page uses the same mln-map.js, so its pin rendered as an
 * unstyled empty <span> — present in the DOM, invisible on screen. mln-map.css is
 * loaded by template.xhtml, template-directory.xhtml AND template-portal.xhtml, so
 * the rules now travel with the JS that emits them.
 *
 * Every --mln-* token carries an inline fallback: those custom properties are declared
 * in mln-directory.css's :root, which is absent on the admin and portal templates.
 * Without fallbacks the colours would resolve to nothing and the pin would stay
 * invisible even after the move.
 * ==========================================================================*/

.mln-node-marker .mln-node-dot {
    display: block; width: 16px; height: 16px; border-radius: 50%;
    background: var(--mln-realm, var(--mln-primary, #00594c)); border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(19,36,32,.45); transition: transform .12s ease, box-shadow .12s ease;
    /* The pin opens the detail page on click; the default arrow cursor read as decoration. */
    cursor: pointer;
}
.mln-node-marker:hover .mln-node-dot { transform: scale(1.25); box-shadow: 0 3px 10px rgba(19,36,32,.5); }
.mln-node-organization .mln-node-dot { background: var(--mln-accent, #bc4e2c); }
.mln-node-dot--hot { transform: scale(1.45); box-shadow: 0 3px 10px rgba(19,36,32,.5); }
.mln-node-marker { z-index: 650 !important; }

/* Land-node detail pin (DIR-6) — CSP-safe CSS teardrop, no external image. */
.mln-node-pin { background: transparent; border: 0; }
.mln-node-pin-shape {
    position: absolute; left: 2px; top: 2px; width: 22px; height: 22px;
    background: var(--mln-accent, #bc4e2c); border: 2px solid #fff; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); transform-origin: center; box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.mln-node-pin-shape::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
    background: #fff; border-radius: 50%;
}