/* ============================================================
 * Venetes - Map plugin styles (v2.0)
 * Per-pin inline SVG, recolored via --vm-pin-bg / --vm-pin-fg variables
 * ============================================================ */

/* ---------- Wrapper (outer container, normal flow for stage + panel) ---------- */
.venetes-map-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    line-height: 0;
    user-select: none;
    font: inherit;
}

/* ---------- Viewport — clips the cropped overflow (left/right only) ----------
 * The stage is made WIDER than the viewport when --vm-zoom > 1. The viewport
 * keeps 100% width and clips whatever spills past the left/right edges. Its
 * height follows the (taller) stage, so the FULL height is always shown — only
 * the sides are trimmed.
 */
.venetes-map-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ---------- Stage (contains the map ONLY: bg + svg + pins) ----------
 * The SVG map is the IN-FLOW element — it defines the stage's height AND is the
 * coordinate system the pins are positioned against. The background photo is a
 * decorative layer placed behind it. Pins and map islands stay locked together
 * because they share one coordinate system.
 *
 * --vm-zoom widens the whole stage (map + pins together): the SVG grows, the
 * pins grow with it (see .venetes-map-pin height calc), the viewport trims the
 * sides. --vm-focus-x slides which horizontal slice stays visible (50 = centre).
 */
.venetes-map-stage {
    position: relative;
    width: calc(var(--vm-zoom, 1) * 100%);
    margin-left: calc( (100% - var(--vm-zoom, 1) * 100%) * var(--vm-focus-x, 50) / 100 );
    isolation: isolate; /* self-contained stacking context for the z-index layers below */
    container-type: inline-size; /* query container: pins are sized in cqw (% of the
        stage width) so they scale WITH the map and stay locked to the islands at
        every screen width. cqw is measured on the zoomed stage, so pins also follow
        the crop/zoom automatically. */
}

/* Background photo — decorative texture, sits BEHIND the SVG map.
 * Displayed at FULL HEIGHT of the stage; the width follows the photo's natural
 * ratio. If the photo ends up wider than the stage it overflows left/right and
 * gets trimmed (centered). min-width keeps it from leaving side gaps if the photo
 * is narrower than the stage; object-fit:cover avoids distortion in that case. */
.venetes-map-bg {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 100% !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0;
    -webkit-user-drag: none;
    user-drag: none;
}

/* ---------- SVG map — THE sizing + coordinate reference ---------- */
.venetes-map-svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    z-index: 1;
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Placeholder shown when no SVG map is set (the SVG is now mandatory for sizing) */
.venetes-map-svg-placeholder {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    color: #999;
    border: 1px dashed #ccc;
    font: inherit;
    line-height: 1.4;
    padding: 24px;
    text-align: center;
    box-sizing: border-box;
}

/* ---------- Pins layer — matches the stage = matches the SVG map exactly ---------- */
.venetes-map-pins {
    position: absolute;
    inset: 0;
    z-index: 2;
    line-height: normal;
}

.venetes-map-pin-wrap {
    position: absolute;
    /* Position driven by PHP-computed CSS variables: desktop / tablet / mobile.
     * All three are always set inline (cascade handled in PHP), so no Elementor
     * CSS regeneration is needed — positions are baked into the HTML. */
    top:  var(--vm-top-d,  50%);
    left: var(--vm-left-d, 50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    /* CSS variables that drive recoloring of the inline SVG.
     * Defaults match Sam's initial design (white bg, black outline/text).
     * Overridden per state by Elementor controls.
     */
    --vm-pin-bg: #ffffff;
    --vm-pin-fg: #000000;
    --vm-tt-offset: 8px;
}
.venetes-map-pin-wrap.is-active {
    z-index: 10;
}

/* ---------- Pin button (just a clickable wrapper around the SVG) ----------
 * Aggressive resets with !important to defeat theme button styling (Astra, etc).
 * Without these, themes inject border/padding/background that creates a visible
 * rectangle around the SVG.
 */
.venetes-map-pin,
.venetes-map-pin:hover,
.venetes-map-pin:focus,
.venetes-map-pin:active,
.venetes-map-pin:focus-visible {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    text-shadow: none !important;
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .2s ease, opacity .2s ease;
    overflow: visible;
    /* Sized in cqw = % of the map (stage) width, so the pin scales with the map.
     * This is the fallback; the Elementor "Taille des puces" control overrides it. */
    height: 3.2cqw;
    width: auto;
}

/* Focus indicator for keyboard navigation only (kept subtle, accessibility) */
.venetes-map-pin:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 3px !important;
}

/* The inline SVG inside the pin button — height drives the size, width auto-derives
 * from the SVG's intrinsic aspect ratio (viewBox). This way every badge has the same
 * height regardless of its island name length. */
.venetes-map-pin > svg {
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none; /* clicks bubble to the button */
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
.venetes-map-pin > svg * {
    opacity: 1 !important;
    fill-opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Placeholder when no SVG uploaded yet */
.venetes-map-pin-placeholder {
    display: inline-block;
    padding: 6px 12px;
    background: var(--vm-pin-bg, #f3f3f3);
    color: var(--vm-pin-fg, #999);
    border: 1px dashed currentColor;
    font: inherit;
    line-height: 1.2;
    font-size: 12px;
    white-space: nowrap;
}

/* ---------- Hover effects (driven by prefix class on the widget root) ----------
 * Scoped to pins that are NOT active, so a hover doesn't perturb an open tooltip's
 * state (no opacity drop / scale wobble while reading the tooltip).
 */
.vm-hover-scale .venetes-map-pin-wrap:not(.is-active) .venetes-map-pin:hover {
    transform: scale(1.05);
}
.vm-hover-opacity .venetes-map-pin-wrap:not(.is-active) .venetes-map-pin:hover {
    opacity: 0.85;
}
/* vm-hover-none → no transform/opacity change, only the color swap from :hover state */

/* ---------- Tooltip (BELOW pin by default, aligned on the BADGE edges) ---------- */
.venetes-map-tooltip {
    position: absolute;
    top: calc(100% + var(--vm-tt-offset, 8px));
    width: 260px;
    max-width: 90vw;
    background: #000000;
    padding: 14px 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 5;
    font: inherit;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

/* Default horizontal alignment, driven by where the bird sits in the SVG */
.venetes-map-pin-wrap[data-icon-position="left"] .venetes-map-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0);
}
.venetes-map-pin-wrap[data-icon-position="right"] .venetes-map-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.venetes-map-pin-wrap.is-active .venetes-map-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Flip ABOVE if pin is too low */
.venetes-map-pin-wrap.tooltip-above .venetes-map-tooltip {
    top: auto;
    bottom: calc(100% + var(--vm-tt-offset, 8px));
}

/* Edge-case overrides — force the opposite anchor when the default overflows */
.venetes-map-pin-wrap.tooltip-anchor-left .venetes-map-tooltip {
    left: 0;
    right: auto;
    transform: translateX(0);
}
.venetes-map-pin-wrap.tooltip-anchor-right .venetes-map-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}

/* ---------- Smart corner radius — rounds the corner UNDER the bird's head ----------
 * The radius value comes from the Elementor slider, stored in --vm-tt-corner-radius.
 * It applies automatically to the right corner based on bird position + tooltip flip.
 *
 *   Bird on RIGHT  + tooltip BELOW  → round TOP-RIGHT    (under bird's head)
 *   Bird on LEFT   + tooltip BELOW  → round TOP-LEFT     (under bird's head)
 *   Bird on RIGHT  + tooltip ABOVE  → round BOTTOM-RIGHT (above bird's head)
 *   Bird on LEFT   + tooltip ABOVE  → round BOTTOM-LEFT  (above bird's head)
 *
 * Anchor flips (.tooltip-anchor-left / -right) override icon-position to match the
 * actual tooltip side. Default is 0 on all corners.
 */
.venetes-map-tooltip {
    border-radius: 0;
}

/* Default by icon-position (tooltip BELOW) */
.venetes-map-pin-wrap[data-icon-position="right"] .venetes-map-tooltip {
    border-top-right-radius: var(--vm-tt-corner-radius, 0);
}
.venetes-map-pin-wrap[data-icon-position="left"] .venetes-map-tooltip {
    border-top-left-radius: var(--vm-tt-corner-radius, 0);
}

/* Anchor overrides (placed after — win at equal specificity) */
.venetes-map-pin-wrap.tooltip-anchor-right .venetes-map-tooltip {
    border-top-right-radius: var(--vm-tt-corner-radius, 0);
    border-top-left-radius: 0;
}
.venetes-map-pin-wrap.tooltip-anchor-left .venetes-map-tooltip {
    border-top-left-radius: var(--vm-tt-corner-radius, 0);
    border-top-right-radius: 0;
}

/* When tooltip is flipped ABOVE the pin, the rounded corner moves to the BOTTOM */
.venetes-map-pin-wrap.tooltip-above[data-icon-position="right"] .venetes-map-tooltip {
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--vm-tt-corner-radius, 0);
}
.venetes-map-pin-wrap.tooltip-above[data-icon-position="left"] .venetes-map-tooltip {
    border-top-left-radius: 0;
    border-bottom-left-radius: var(--vm-tt-corner-radius, 0);
}
.venetes-map-pin-wrap.tooltip-above.tooltip-anchor-right .venetes-map-tooltip {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--vm-tt-corner-radius, 0);
    border-bottom-left-radius: 0;
}
.venetes-map-pin-wrap.tooltip-above.tooltip-anchor-left .venetes-map-tooltip {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--vm-tt-corner-radius, 0);
    border-bottom-right-radius: 0;
}

/* ---------- Close button (X) — positioned on the side AWAY from the bird ----------
 * Default: top-right of tooltip (for bird on the left → tooltip extends right → X far on right).
 * Overrides flip X to top-left when tooltip extends LEFT (bird on right OR anchor-right).
 */
.venetes-map-tooltip-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    opacity: .75;
    transition: opacity .15s ease;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
}

/* X moves to LEFT when the tooltip extends LEFT (bird is on the right of the badge) */
.venetes-map-pin-wrap[data-icon-position="right"] .venetes-map-tooltip-close {
    right: auto !important;
    left: 0 !important;
}

/* Anchor overrides (after, win at equal specificity) */
.venetes-map-pin-wrap.tooltip-anchor-right .venetes-map-tooltip-close {
    right: auto !important;
    left: 0 !important;
}
.venetes-map-pin-wrap.tooltip-anchor-left .venetes-map-tooltip-close {
    right: 0 !important;
    left: auto !important;
}

.venetes-map-tooltip-close:hover,
.venetes-map-tooltip-close:focus-visible {
    opacity: 1;
    outline: none;
    background: transparent !important;
}

.venetes-map-tooltip-close-icon {
    display: block;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

/* Tooltip text — padding follows the X position so the text never overlaps it */
.venetes-map-tooltip-text {
    display: block;
    font: inherit;
    color: #fff;
    margin: 0;
    padding-right: 22px;
    padding-left: 0;
}

.venetes-map-pin-wrap[data-icon-position="right"] .venetes-map-tooltip-text {
    padding-right: 0;
    padding-left: 22px;
}

.venetes-map-pin-wrap.tooltip-anchor-right .venetes-map-tooltip-text {
    padding-right: 0;
    padding-left: 22px;
}
.venetes-map-pin-wrap.tooltip-anchor-left .venetes-map-tooltip-text {
    padding-right: 22px;
    padding-left: 0;
}

/* Editor: keep things clickable in Elementor preview */
.elementor-editor-active .venetes-map-pin,
.elementor-editor-active .venetes-map-tooltip-close {
    pointer-events: auto;
}

/* ============================================================================
 * MOBILE PANEL — replaces floating tooltips below 768px
 * Layout: [icon][title] on row 1, [description spanning full width] on row 2.
 * Adapts gracefully when no icon is set (title takes the full row).
 * ============================================================================ */

/* Hidden by default everywhere; becomes flex on mobile when .is-active */
.venetes-map-mobile-panel {
    display: none;
    margin-top: 20px;
}

/* Icon slot — holds the JS-injected pin SVG badge (or the optional uploaded image).
 * :empty hides it automatically when nothing has been injected yet, so the title
 * takes the full row without any gap. */
.venetes-map-mobile-panel-icon {
    flex: 0 0 auto;
    line-height: 0;
    /* Active-state colours so the badge looks selected in the panel */
    --vm-pin-bg: #1a1a1a;
    --vm-pin-fg: #ffffff;
}
.venetes-map-mobile-panel-icon:empty {
    display: none;
}
.venetes-map-mobile-panel-icon svg,
.venetes-map-mobile-panel-icon img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 120px;
}

/* Title — sits on the same flex row as the icon */
.venetes-map-mobile-panel-title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font: inherit;
    font-size: 1.4em;
    font-weight: 700;
    align-self: center;
}

/* Description — always on its own full-width row (flex-basis:100% wraps it) */
.venetes-map-mobile-panel-text {
    flex: 0 0 100%;
    margin: 0;
    font: inherit;
}

/* Mobile breakpoint: hide floating tooltips, show panel when a pin is active */
/* Tablet: switch pin positions to tablet variables */
@media (max-width: 1024px) {
    .venetes-map-pin-wrap {
        top:  var(--vm-top-t,  var(--vm-top-d,  50%));
        left: var(--vm-left-t, var(--vm-left-d, 50%));
    }
}

/* Mobile: switch pin positions to mobile variables (≤767px, aligns with Elementor default) */
@media (max-width: 767px) {
    .venetes-map-pin-wrap {
        top:  var(--vm-top-m,  var(--vm-top-t,  var(--vm-top-d,  50%)));
        left: var(--vm-left-m, var(--vm-left-t, var(--vm-left-d, 50%)));
    }
    .venetes-map-tooltip {
        display: none !important;
    }
    /* Panel becomes a flex container so icon+title share row 1 and text wraps full-width */
    .venetes-map-mobile-panel.is-active {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px 14px;
    }
}