/*
 * Theme-aware styling for Leaflet maps. Colours come from daisyUI's CSS
 * variables, with fallbacks for pages that don't load the site stylesheet
 * (e.g. the Wagtail admin map picker).
 */

.dinkwads-map {
    /* Own stacking context so Leaflet's z-indexed panes stay under the sticky header. */
    isolation: isolate;
    z-index: 0;
    background: var(--color-base-200, #e5e7eb);
    font: inherit;
}

/* Dark theme: invert the OSM tiles into a dim night map. */
[data-theme="dark"] .dinkwads-map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.85);
}

.dinkwads-map .leaflet-popup-content-wrapper,
.dinkwads-map .leaflet-popup-tip,
.dinkwads-map .leaflet-control-layers,
.dinkwads-map .leaflet-bar a {
    background: var(--color-base-100, #fff);
    color: var(--color-base-content, #1f2937);
}

.dinkwads-map .leaflet-bar a {
    border-bottom-color: var(--color-base-300, #ccc);
}

.dinkwads-map .leaflet-bar a.leaflet-disabled {
    background: var(--color-base-200, #f4f4f4);
}

.dinkwads-map .leaflet-control-attribution {
    background: color-mix(in oklab, var(--color-base-100, #fff) 80%, transparent);
    color: var(--color-base-content, #333);
}

.dinkwads-map .leaflet-control-attribution a,
.dinkwads-map .leaflet-popup-content a.dinkwads-popup-title {
    color: var(--color-primary, #2563eb);
}

.dinkwads-map .leaflet-popup-content {
    margin: 0.75rem;
}

/* Place pin: a teardrop in the theme's primary colour. */
.dinkwads-pin span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--color-primary, #2563eb);
    border: 3px solid var(--color-base-100, #fff);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}

/* Photo pin: a small dot in the secondary colour. */
.dinkwads-photo-pin span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-secondary, #db2777);
    border: 2px solid var(--color-base-100, #fff);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

.dinkwads-popup {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}

.dinkwads-popup-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

.dinkwads-popup-thumb-square {
    aspect-ratio: 1;
}

.dinkwads-popup-title {
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
}

.dinkwads-popup-title:hover {
    text-decoration: underline;
}

.dinkwads-popup-caption {
    font-weight: 500;
}

.dinkwads-popup-meta {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Wagtail admin coordinate picker (MapPickerPanel). */
.dinkwads-map-picker {
    height: 320px;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
}