/*
 * Stylised directory map (no external map tiles/APIs) — replaces the old
 * Leaflet + OpenStreetMap embed. Pins are placed by directory-map.js using a
 * simple lat/lng projection onto this canvas; sizing/glow approximate a
 * heatmap from published_count without a real tile-based density layer.
 */
.directory-map {
    position: relative;
    margin-block: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-2);
    overflow: hidden;
    isolation: isolate;
}

.directory-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.directory-map-crumbs { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 700; }
.directory-map-crumbs button {
    padding: .35rem .8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.directory-map-crumbs button.is-current {
    color: var(--color-accent-text, #fff);
    background: var(--color-accent-gradient);
    border-color: transparent;
}
.directory-map-crumbs button:disabled { cursor: default; }

.directory-map-legend { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--color-text-dim); }
.directory-map-legend-dot { display: inline-block; border-radius: 50%; background: var(--color-accent-gradient); }
.directory-map-legend-dot-sm { width: .5rem; height: .5rem; }
.directory-map-legend-dot-lg { width: 1rem; height: 1rem; margin-left: .5rem; }

.directory-map-stage {
    position: relative;
    /* Must exactly match the world <svg>'s own viewBox width/height ratio
       (see map.php) — with preserveAspectRatio="xMidYMid meet", any mismatch
       here letterboxes the map inside the stage, which would throw it out of
       alignment with the percentage-positioned pins/markers below
       (directory-map.js assumes the stage's edges *are* the world viewBox's
       bounds — that's what lets zooming to any country or city be a plain
       CSS transform instead of a viewBox change). */
    aspect-ratio: 784.077 / 458.627;
    max-height: min(70vh, 40rem);
    overflow: hidden;
}

.directory-map-canvas {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.directory-map-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* Every country renders muted by default; directory-map.js adds
   .is-active-market to whichever ones actually have published locations
   (just Australia today) — the map is visually ready for more markets
   without a redesign each time one goes live. */
.directory-map-lines path {
    fill: color-mix(in srgb, var(--color-surface-1) 88%, transparent);
    stroke: var(--color-border);
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
    transition: fill var(--duration-base) var(--ease-out), stroke var(--duration-base) var(--ease-out);
}
.directory-map-lines g.is-active-market path,
.directory-map-lines path.is-active-market {
    fill: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-3));
    stroke: color-mix(in srgb, var(--color-accent) 55%, var(--color-border-strong));
    stroke-width: 1.1;
}

.directory-map-glow {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--color-pop-orange), transparent 72%);
    filter: blur(14px);
    mix-blend-mode: var(--map-glow-blend, normal);
    pointer-events: none;
}
.directory-map-glow.is-featured { background: radial-gradient(closest-side, var(--color-pop-pink), transparent 72%); }

.directory-map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-bg) 70%, transparent);
    background: var(--color-accent-gradient);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
    cursor: pointer;
    padding: 0;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.directory-map-pin:hover, .directory-map-pin:focus-visible { transform: translate(-50%, -50%) scale(1.25); }
.directory-map-pin.is-active { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 38%, transparent); }
.directory-map-pin.is-featured { background: linear-gradient(135deg, var(--color-pop-pink), var(--color-pop-orange)); }
.directory-map-pin.is-country { border-width: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 26%, transparent); }
.directory-map-pin.is-country .directory-map-pin-label { font-size: .78rem; padding: .3rem .75rem; }

.directory-map-pin-label {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: .35rem;
    transform: translateX(-50%);
    padding: .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg) 78%, transparent);
    backdrop-filter: blur(6px);
    font-size: .65rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text);
    pointer-events: none;
}

.directory-map-card {
    position: absolute;
    left: var(--space-md);
    bottom: var(--space-md);
    max-width: 16rem;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-1) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    z-index: 2;
}
.directory-map-card span { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: .04em; }
.directory-map-card h3 { margin: .2rem 0; font-family: var(--font-serif); font-size: var(--fs-lg); }
.directory-map-card p { margin: 0 0 var(--space-xs); color: var(--color-text-dim); font-size: var(--fs-sm); }

.directory-map-empty { padding: var(--space-xl); text-align: center; color: var(--color-text-dim); }

.map-fallback { margin-top: var(--space-xl); }

@media (max-width: 700px) {
    /* Same aspect-ratio as the desktop rule (must match the SVG viewBox,
       see the comment above) — only max-height shrinks on mobile. */
    .directory-map-stage { max-height: 30rem; }
    .directory-map-card { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); max-width: none; }
}