/**
 * Topo Map Block Styles
 * 
 * Styles for the embedded topo map block in posts/pages
 */
/* Scoped to topo map block only — never style the rest of the page. */
.wp-block-bri-topographics-topo-map,
.bri-topo-map-editor-preview-frame .bri-topo-map-block {
    .bri-topo-map-block {
        position: relative;
        background: transparent;
        border-radius: 8px;
        overflow: hidden;
        max-width: 100%;
        min-height: 280px;
        margin-bottom: 12px;
        padding: 0;
    }

    .bri-topo-map-block,
    .bri-topo-map-block .bri-topo-map-title,
    .bri-topo-map-block .bri-topo-map-legend,
    .bri-topo-map-block .bri-topo-map-caption,
    .bri-topo-map-block .bri-topo-map-footer {
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }

/* Header with title */
    .bri-topo-map-header {
        background: transparent;
        padding: 6px 0 4px;
        border-bottom: 0;
    }

    .bri-topo-map-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        letter-spacing: 0.02em;
    }

/* Map container */
    .bri-topo-map-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 250px;
        overflow: hidden;
        border-radius: 6px;
        background: transparent;
    }

/* Snapshot = static SVG only (no live resize / min-height bounce) */
    .bri-topo-map-block.is-delivery-snapshot,
    .bri-topo-map-block.is-static[data-has-snapshot="true"],
    .bri-topo-map-block[data-has-snapshot="true"],
    .bri-topo-map-editor-preview-frame .bri-topo-map-block {
        min-height: 0 !important;
        margin-bottom: 12px;
        contain: none;
    }

    .bri-topo-map-block.is-delivery-snapshot .bri-topo-map-container,
    .bri-topo-map-block.is-static[data-has-snapshot="true"] .bri-topo-map-container,
    .bri-topo-map-block[data-has-snapshot="true"] .bri-topo-map-container,
    .bri-topo-map-editor-preview-frame .bri-topo-map-container {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        aspect-ratio: unset;
        overflow: hidden;
    }

    .bri-topo-map-snapshot-wrap {
        width: 100%;
        max-width: 100%;
        position: relative;
        z-index: 1;
        line-height: 0;
        font-size: 0;
        display: block;
    }

/* All topo maps (snapshot + live): SVG fills its container, uniform scale via preserveAspectRatio. */
    .bri-topo-map-container svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

/* Block height (e.g. 400px) = map frame; tight viewBox content scales up to fit inside (meet). */
    .bri-topo-map-block.bri-topo-map-has-frame-height .bri-topo-map-container {
        width: 100%;
        height: var(--bri-map-frame-height);
        max-height: var(--bri-map-frame-height);
        min-height: var(--bri-map-frame-height);
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bri-topo-map-block.bri-topo-map-has-frame-height .bri-topo-map-snapshot-wrap {
        width: 100%;
        height: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bri-topo-map-block.bri-topo-map-has-frame-height .bri-topo-map-container svg {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

    .bri-topo-map-block.bri-topo-map-is-editor-preview {
        min-height: 0 !important;
    }

/* Kill theme/editor ocean tint on block wrappers */
    .wp-block-bri-topographics-topo-map,
    .bri-topo-map-editor-preview-frame,
    .bri-topo-map-block,
    .bri-topo-map-container,
    .bri-topo-map-snapshot-wrap {
        background: transparent !important;
        background-color: transparent !important;
    }

/* Snapshot hexes: stroke scales with viewBox (non-scaling-stroke made previews look grid-heavy). */
    .bri-topo-map-snapshot path.bri-tile-hex,
    .bri-topo-map-block.is-delivery-snapshot path.bri-tile-hex,
    .bri-topo-map-block[data-has-snapshot="true"] path.bri-tile-hex {
        vector-effect: none;
    }

    .bri-topo-map-block.is-delivery-snapshot .bri-topo-map-loading {
        display: none !important;
    }

/* Legend overlays (inside map container) — must match bri-topo-map-legend-pos-* classes from render.php */
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-overlay-br,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-overlay-bl,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-overlay-tr,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-overlay-tl,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-bottom-left,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-bottom-right,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-top-left,
    .bri-topo-map-container .bri-topo-map-legend.bri-topo-map-legend-pos-top-right {
        position: absolute !important;
        z-index: 12;
        margin: 0;
        padding: 8px 10px !important;
        background: rgba(255, 255, 255, 0.94);
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
        max-width: min(220px, 42vw);
        pointer-events: none;
        border-top: 0;
    }

    .bri-topo-map-legend-pos-overlay-br,
    .bri-topo-map-legend-pos-bottom-right { bottom: 10px; right: 10px; }
    .bri-topo-map-legend-pos-overlay-bl,
    .bri-topo-map-legend-pos-bottom-left { bottom: 10px; left: 10px; }
    .bri-topo-map-legend-pos-overlay-tr,
    .bri-topo-map-legend-pos-top-right { top: 10px; right: 10px; }
    .bri-topo-map-legend-pos-overlay-tl,
    .bri-topo-map-legend-pos-top-left { top: 10px; left: 10px; }

/* Caption + footer (under map) */
    .bri-topo-map-meta {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #e5e7eb;
        width: 100%;
    }

    .bri-topo-map-caption {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 400;
        color: #6b7280;
        line-height: 1.45;
        font-style: normal;
    }

/* Footer: logo (left) + © line beside it */
    .bri-topo-map-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 12px 16px;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .bri-topo-map-footer-logo {
        flex: 0 0 auto;
        line-height: 0;
    }

    .bri-topo-map-footer-logo img,
    .bri-topo-map-footer-logo .bri-topo-map-footer-logo-img {
        display: block !important;
        width: auto !important;
        height: 36px !important;
        max-height: 48px !important;
        min-height: 20px;
        opacity: 1;
        visibility: visible;
        filter: none;
    }

    .bri-topo-map-branding-raven-intel .bri-topo-map-footer-logo img {
        max-height: 28px;
    }

    .bri-topo-map-branding-broad-horizon .bri-topo-map-footer-logo img,
    .bri-topo-map-branding-broad_horizon .bri-topo-map-footer-logo img {
        max-height: 36px;
    }

/* Legend */
    .bri-topo-map-legend {
        background: transparent;
        padding: 10px 0 0;
        border-top: 0;
    }

/* Legacy class names (pre-1.0.40 markup) — keep scoped under .bri-topo-map-legend only */
    .bri-topo-map-legend .legend-title,
    .bri-topo-map-legend .bri-topo-legend-title {
        font-size: 12px;
        font-weight: 600;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

    .bri-topo-map-legend .legend-layer-label,
    .bri-topo-map-legend .bri-topo-legend-layer-label {
        font-size: 11px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }

    .bri-topo-map-legend-vertical .legend-item,
    .bri-topo-map-legend-vertical .bri-topo-legend-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .bri-topo-map-legend-vertical .legend-color,
    .bri-topo-map-legend-vertical .bri-topo-legend-color {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.12);
    }

    .bri-topo-map-legend-vertical .legend-label,
    .bri-topo-map-legend-vertical .bri-topo-legend-label {
        font-size: 12px;
        line-height: 1.3;
    }

    .bri-topo-map-legend .legend-items,
    .bri-topo-map-legend .bri-topo-legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .bri-topo-map-legend-vertical .legend-items,
    .bri-topo-map-legend-vertical .bri-topo-legend-items {
        flex-direction: column;
        gap: 6px;
    }

    .bri-topo-map-legend .legend-item,
    .bri-topo-map-legend .bri-topo-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bri-topo-map-legend .legend-color,
    .bri-topo-map-legend .bri-topo-legend-color {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        flex-shrink: 0;
    }

    .bri-topo-map-legend .legend-label,
    .bri-topo-map-legend .bri-topo-legend-label {
        font-size: 12px;
        color: #374151;
    }

    .bri-topo-map-snapshot-wrap svg > rect {
        display: none;
    }


    .bri-topo-map-methods {
        margin-top: 10px;
    }

    .bri-topo-map-methods .bri-methods-box-wrap {
        margin: 0;
    }

    .bri-topo-map-footer-text {
        flex: 1 1 200px;
        margin: 0;
        font-size: 11px;
        color: #6b7280;
        line-height: 1.35;
    }

/* Placeholder/loading states */
    .bri-topo-map-placeholder,
    .bri-topo-map-loading,
    .bri-topo-map-error {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        background: transparent;
        color: inherit;
        font-size: 14px;
    }

    .bri-topo-map-error {
        color: inherit;
    }

/* Interactive mode */
    .bri-topo-map-block.is-interactive .bri-topo-map-container {
        cursor: grab;
    }

    .bri-topo-map-block.is-interactive .bri-topo-map-container:active {
        cursor: grabbing;
    }

/* Responsive */
@media (max-width: 768px) {
        .bri-topo-map-block {
            min-height: 250px;
        }

    /* Overlay legend: stack below map (same flow as methods box), not on top of tiles */
        .bri-topo-map-block.bri-topo-map-has-overlay-legend .bri-topo-map-container {
            display: flex;
            flex-direction: column;
            overflow: visible;
        }

        .bri-topo-map-block.bri-topo-map-has-overlay-legend .bri-topo-map-snapshot-wrap {
            order: 1;
            flex: 0 0 auto;
            width: 100%;
            min-height: 0;
        }

        .bri-topo-map-block.bri-topo-map-has-overlay-legend .bri-topo-map-container > .bri-topo-map-legend {
            position: static !important;
            order: 2;
            z-index: auto;
            max-width: 100% !important;
            width: 100%;
            margin: 10px 0 0;
            pointer-events: auto;
            box-shadow: none;
            border-top: 1px solid #e5e7eb;
            border-radius: 0;
            padding: 10px 0 0 !important;
            background: transparent;
        }

        .bri-topo-map-footer-logo img {
            max-height: 24px;
        }

        .bri-topo-map-legend .bri-topo-legend-items {
            gap: 8px;
        }
    }

/* Full-width alignment */
    .alignfull .bri-topo-map-block {
        border-radius: 0;
    }

    .alignfull .bri-topo-map-block .bri-topo-map-container {
        overflow: hidden;
    }

    .alignwide .bri-topo-map-block {
        border-radius: 8px;
    }

/* ========================================
       CALLOUT LABELS (Eurasia Group Style)
       ======================================== */

    .bri-map-callouts {
        position: absolute;
    /* Match the map block box only — negative insets spilled over following article content. */
        inset: 0;
        pointer-events: none;
        z-index: 20;
    }

    .bri-map-callout {
        position: absolute;
        display: flex;
        align-items: center;
        gap: 4px;
        pointer-events: auto;
        --callout-text-color: #333;
        --callout-bg-color: #fff;
        --callout-x-offset: 0px;
        --callout-y-offset: 0px;
    }

    .bri-map-callout .callout-label {
        background: var(--callout-bg-color);
        color: var(--callout-text-color);
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        white-space: nowrap;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

/* Leader line */
    .bri-map-callout.has-leader-line .callout-leader-line {
        width: 40px;
        height: 2px;
        flex-shrink: 0;
        color: var(--callout-text-color);
        opacity: 0.6;
    }

/* Position variants — scoped under map block (generic .callout-position-* broke other editor blocks) */
    .bri-topo-map-block .callout-position-right,
    .bri-topo-map-block .bri-map-callout.callout-position-right {
        flex-direction: row;
    }

    .bri-topo-map-block .callout-position-left,
    .bri-topo-map-block .bri-map-callout.callout-position-left {
        flex-direction: row-reverse;
    }

    .bri-topo-map-block .callout-position-top,
    .bri-topo-map-block .callout-position-top-left,
    .bri-topo-map-block .callout-position-top-right,
    .bri-topo-map-block .bri-map-callout.callout-position-top,
    .bri-topo-map-block .bri-map-callout.callout-position-top-left,
    .bri-topo-map-block .bri-map-callout.callout-position-top-right {
        flex-direction: column-reverse;
    }

    .bri-topo-map-block .callout-position-bottom,
    .bri-topo-map-block .callout-position-bottom-left,
    .bri-topo-map-block .callout-position-bottom-right,
    .bri-topo-map-block .bri-map-callout.callout-position-bottom,
    .bri-topo-map-block .bri-map-callout.callout-position-bottom-left,
    .bri-topo-map-block .bri-map-callout.callout-position-bottom-right {
        flex-direction: column;
    }

    .bri-topo-map-block .callout-position-top .callout-leader-line,
    .bri-topo-map-block .callout-position-bottom .callout-leader-line {
        width: 2px;
        height: 30px;
    }

    .bri-topo-map-block .callout-position-top-left .callout-leader-line,
    .bri-topo-map-block .callout-position-top-right .callout-leader-line,
    .bri-topo-map-block .callout-position-bottom-left .callout-leader-line,
    .bri-topo-map-block .callout-position-bottom-right .callout-leader-line {
        width: 30px;
        height: 20px;
    }

    .bri-topo-map-block .callout-position-top-left .callout-leader-line line,
    .bri-topo-map-block .callout-position-bottom-right .callout-leader-line line {
        transform: rotate(-30deg);
        transform-origin: center;
    }

    .bri-topo-map-block .callout-position-top-right .callout-leader-line line,
    .bri-topo-map-block .callout-position-bottom-left .callout-leader-line line {
        transform: rotate(30deg);
        transform-origin: center;
    }

/* Category-based coloring (Eurasia Group style) */
    .bri-map-callout[data-category="rewarded"] .callout-label {
        background: #28a745;
        color: #fff;
        border-color: #1e7e34;
    }

    .bri-map-callout[data-category="pressured"] .callout-label {
        background: #dc3545;
        color: #fff;
        border-color: #bd2130;
    }

    .bri-map-callout[data-category="mixed"] .callout-label {
        background: #ffc107;
        color: #212529;
        border-color: #d39e00;
    }

    .bri-topo-map-snapshot-wrap .bri-callout-link {
        cursor: pointer;
        text-decoration: none;
    }

    .bri-topo-map-snapshot-wrap .bri-callout-link:hover .bri-callout-title {
        text-decoration: underline;
    }

    .bri-map-callout[data-category="neutral"] .callout-label {
        background: #6c757d;
        color: #fff;
        border-color: #545b62;
    }

/* Horizontal legend bar (top of map) */
    .bri-topo-map-legend-top {
        position: static;
        background: transparent;
        padding: 8px 0 6px;
        border-bottom: 0;
        z-index: auto;
    }

    .bri-topo-map-legend-top .legend-items,
    .bri-topo-map-legend-top .bri-topo-legend-items {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .bri-topo-map-legend-top .legend-title,
    .bri-topo-map-legend-top .bri-topo-legend-title {
        display: none; /* Hide title in horizontal mode */
    }

    .bri-topo-map-legend-top .legend-item,
    .bri-topo-map-legend-top .bri-topo-legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bri-topo-map-legend-top .legend-color,
    .bri-topo-map-legend-top .bri-topo-legend-color {
        width: 20px;
        height: 12px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0.2);
    }

    .bri-topo-map-legend-top .legend-label,
    .bri-topo-map-legend-top .bri-topo-legend-label {
        font-size: 11px;
        font-weight: 500;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

}