/**
 * JIP Leaflet Map — Styles
 *
 * Uses CSS custom properties from the JIP theme (_variables.css)
 * so the map UI stays consistent with the rest of the site.
 *
 * @package JIP_Core
 * @since   1.5.0
 */


/* ══════════════════════════════════════════════════════════
   MAP CONTAINER
   ══════════════════════════════════════════════════════════ */

.jip-map__container {
    width: 100%;
    height: 500px;
    /* overridden by Elementor responsive control */
    position: relative;
    z-index: 0;
}


/* Force border-radius + clipping on Leaflet's own container class */

.jip-map__container.leaflet-container {
    border-radius: 16px !important;
    overflow: hidden !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    /* Safari clip fix */
}


/* Ensure tile pane respects the rounded clip */

.jip-map__container .leaflet-pane,
.jip-map__container .leaflet-tile-pane,
.jip-map__container .leaflet-tile-container {
    border-radius: inherit;
}


/* Elementor responsive border-radius override */

.elementor-widget-jip-map-leaflet .jip-map__container.leaflet-container {
    border-radius: var(--jip-map-radius, 16px) !important;
}


/* ── No-token fallback ── */

.jip-map__no-token {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--jip-primary-light, #eef4eb);
    color: var(--jip-dark-normal, #304422);
    font-family: var(--jip-font-primary, sans-serif);
    font-size: var(--jip-paragraph-m, 16px);
    font-weight: var(--jip-paragraph-weight, 400);
    line-height: var(--jip-paragraph-lh, 135%);
    text-align: center;
    padding: 32px;
}


/* ══════════════════════════════════════════════════════════
   DEFAULT PIN (SVG div-icon)
   ══════════════════════════════════════════════════════════ */

.jip-map__pin-default {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════
   POPUP
   ══════════════════════════════════════════════════════════ */


/* Outer Leaflet wrapper — override defaults */

.jip-map__popup-wrapper .leaflet-popup-content-wrapper {
    background: var(--jip-dark-normal, #304422);
    color: var(--jip-secondary-light, #fdfef9);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    font-family: var(--jip-font-primary, sans-serif);
    padding: 0;
}

.jip-map__popup-wrapper .leaflet-popup-content {
    margin: 0;
    padding: 0;
}

.jip-map__popup-wrapper .leaflet-popup-tip {
    background: var(--jip-dark-normal, #304422);
}


/* Close button */

.jip-map__popup-wrapper .leaflet-popup-close-button {
    color: var(--jip-secondary-light-active, #fafcec) !important;
    font-size: 18px;
    top: 8px !important;
    right: 10px !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.jip-map__popup-wrapper .leaflet-popup-close-button:hover {
    opacity: 1;
}


/* Inner popup content */

.jip-map-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
}

.jip-map-popup__title {
    font-size: var(--jip-subhead-xs, 16px);
    font-weight: var(--jip-subhead-weight, 500);
    line-height: var(--jip-subhead-lh, 120%);
    color: var(--jip-secondary-normal, #eff4c1);
}

.jip-map-popup__text {
    font-size: var(--jip-paragraph-s, 14px);
    font-weight: var(--jip-paragraph-weight, 400);
    line-height: var(--jip-paragraph-lh, 135%);
    color: var(--jip-secondary-light, #fdfef9);
    opacity: 0.8;
}

.jip-map-popup__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: var(--jip-cta-desktop-size, 14px);
    font-weight: var(--jip-cta-desktop-weight, 600);
    font-stretch: var(--jip-cta-desktop-stretch, expanded);
    color: var(--jip-tertiary-normal, #74c959) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.jip-map-popup__link:hover {
    color: var(--jip-tertiary-light, #f1faee) !important;
    text-decoration: none;
}


/* ══════════════════════════════════════════════════════════
   LEAFLET OVERRIDES — keep controls on-brand
   ══════════════════════════════════════════════════════════ */

.jip-map__container .leaflet-control-zoom a {
    background: var(--jip-dark-normal, #304422);
    color: var(--jip-secondary-light, #fdfef9);
    border: none;
    font-weight: 600;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    transition: background 0.15s ease;
}

.jip-map__container .leaflet-control-zoom a:hover {
    background: var(--jip-dark-normal-hover, #2b3d1f);
}

.jip-map__container .leaflet-control-zoom {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}


/* Attribution — subtle */

.jip-map__container .leaflet-control-attribution {
    background: rgba(253, 254, 249, 0.7) !important;
    color: var(--jip-dark-dark, #24331a);
    font-family: var(--jip-font-primary, sans-serif);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px 0 0 0;
}

.jip-map__container .leaflet-control-attribution a {
    color: var(--jip-primary-normal, #529239);
}