/* =============================================================================
   Horticulture Map for Elementor — hort-map.css  v2.1.0
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

.hort-map-wrap { width:100%; box-sizing:border-box; }
.hort-map-header { text-align:center; margin-bottom:2rem; }
.hort-map-title {
    font-family:'Cormorant Garamond',Georgia,serif !important;
    font-size:clamp(1.75rem,4vw,3rem) !important; font-weight:400 !important;
    letter-spacing:-0.01em; line-height:1.1;
    margin:0 !important; padding:0 !important; border:none !important; background:none !important;
    /* colour set inline from PHP */
}
.hort-map-subtitle {
    margin:0.5rem 0 0 !important; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
    /* colour set inline from PHP */
}

/* =============================================================================
   MAP CONTAINER
   position:relative + aspect-ratio set inline.
   Pins are position:absolute children using % left/top.
   ============================================================================= */
.hort-map-container {
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 4px;
    /* No default background — set via Elementor colour picker or leave transparent */
}

/* =============================================================================
   PINS — HTML div with absolute % positioning
   transform: translate(-50%, -100%) centres the bottom of the pot on the pin point
   ============================================================================= */
.hort-pin {
    cursor: pointer;
    /* position/size/transform all set inline from PHP */
}
.hort-pin .pin-img {
    display: block;
    width: 100%;
    height: auto;
    /* Static pot — always visible. The video overlays it from above.
       No opacity changes needed — video covers the pot when playing. */
}

.pin-shadow {
    position: absolute;
    bottom: -4px;
    left: 50%;
    height: 8px;
    pointer-events: none;
    /* width, background and filter all set inline from PHP */
}

/* =============================================================================
   POPUP — absolutely positioned inside container by JS
   Flex column, order varies by tooltip position:
     below: video → tooltip
     above: tooltip → video  (via flex-direction:column-reverse)
     left:  tooltip | video  (via flex-direction:row-reverse)
     right: video | tooltip  (via flex-direction:row)
   ============================================================================= */
.hort-popup {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    /* No scale/transform — that was causing the squish glitch between pins */
    transition: opacity 0.15s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
}

/* Direction variants */
.hort-popup                           { flex-direction: column; }
.hort-popup[data-tooltip-pos="above"] { flex-direction: column-reverse; }
.hort-popup[data-tooltip-pos="left"]  { flex-direction: row-reverse; align-items: flex-end; }
.hort-popup[data-tooltip-pos="right"] { flex-direction: row;         align-items: flex-end; }

.hort-popup.is-visible { opacity: 1; }

/* Video wrap — width set in % by JS via inline style */
.hort-popup__video-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 847 / 2000;
    flex-shrink: 0;
    align-self: center; /* centre video horizontally when tooltip is wider */
}
.hort-popup__video {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}

/* =============================================================================
   TOOLTIP label
   Uses a CSS @keyframes animation (not transition) so it always plays from
   opacity:0 when triggered, even when switching rapidly between pins.
   ============================================================================= */

/* Fade+slide in from below (default) */
@keyframes hortTooltipBelow  { from { opacity:0; transform:translateY(var(--tt-dist,6px)); } to { opacity:1; transform:translateY(0); } }
@keyframes hortTooltipAbove  { from { opacity:0; transform:translateY(calc(-1 * var(--tt-dist,6px))); } to { opacity:1; transform:translateY(0); } }
@keyframes hortTooltipLeft   { from { opacity:0; transform:translateX(calc(-1 * var(--tt-dist,6px))); } to { opacity:1; transform:translateX(0); } }
@keyframes hortTooltipRight  { from { opacity:0; transform:translateX(var(--tt-dist,6px)); } to { opacity:1; transform:translateX(0); } }

.hort-popup__tooltip {
    text-align: center;
    padding: 6px 13px 7px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
    flex-shrink: 0;
    line-height: 1.3;
    position: relative;
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
}

/* Visible: show and enable pointer events */
.hort-popup__tooltip.is-visible {
    pointer-events: auto;
}

/* Animation triggered by .is-animating — plays from scratch every time it's added */
.hort-tooltip--below.is-animating  { animation: hortTooltipBelow  var(--tt-dur,0.3s) var(--tt-ease,ease-out) forwards; }
.hort-tooltip--above.is-animating  { animation: hortTooltipAbove  var(--tt-dur,0.3s) var(--tt-ease,ease-out) forwards; }
.hort-tooltip--left.is-animating   { animation: hortTooltipLeft   var(--tt-dur,0.3s) var(--tt-ease,ease-out) forwards; }
.hort-tooltip--right.is-animating  { animation: hortTooltipRight  var(--tt-dur,0.3s) var(--tt-ease,ease-out) forwards; }

/* Carets */
.hort-tooltip--below  { }
.hort-tooltip--below:not(.hort-tooltip--no-arrow)::before {
    content: ''; position: absolute;
    top: -7px; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top: none;
    border-bottom-color: var(--tt-bg, #fff);
}
.hort-tooltip--above  { }
.hort-tooltip--above:not(.hort-tooltip--no-arrow)::before {
    content: ''; position: absolute;
    bottom: -7px; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-bottom: none;
    border-top-color: var(--tt-bg, #fff);
}
.hort-tooltip--left   { }
.hort-tooltip--left:not(.hort-tooltip--no-arrow)::after {
    content: ''; position: absolute;
    right: -7px; top: 50%; transform: translateY(-50%);
    border: 7px solid transparent; border-right: none;
    border-left-color: var(--tt-bg, #fff);
}
.hort-tooltip--right  { }
.hort-tooltip--right:not(.hort-tooltip--no-arrow)::after {
    content: ''; position: absolute;
    left: -7px; top: 50%; transform: translateY(-50%);
    border: 7px solid transparent; border-left: none;
    border-right-color: var(--tt-bg, #fff);
}

/* Tooltip image */
.hort-tooltip__img {
    display: block;
    width: 100%;
    height: auto; /* overridden by inline style */
    object-fit: cover;
    margin-bottom: 8px;
    /* border-radius set inline from PHP */
}

.hort-tooltip__name { display: block; }

/* Legend — colours/size set inline from PHP */
.hort-map-legend {
    margin:1rem 0 0 !important; text-align:center;
    font-family:'DM Sans','Helvetica Neue',sans-serif;
    letter-spacing:0.08em; text-transform:uppercase;
    display:flex !important; align-items:center; justify-content:center; gap:8px;
}
.hort-map-legend__dot {
    display:inline-block; width:8px; height:8px;
    border-radius:50%; flex-shrink:0;
    /* background set inline from PHP */
}

/* =============================================================================
   MOBILE — touch interaction
   ============================================================================= */
@media (max-width: 767px) {

    /* Larger tap targets — minimum 44px as per Apple/Google guidelines */
    .hort-pin {
        /* Expand clickable area beyond the visual pin using padding */
        padding: 8px;
        margin: -8px;
        /* Counteract the margin so position stays correct */
        box-sizing: content-box;
    }

    /* Ensure pins are always a reasonable size on small screens */
    .hort-pin .pin-img {
        min-width: 36px;
    }

    /* Bigger video on mobile so animation is clearly visible */
    .hort-popup__video-wrap {
        /* JS sets width in px — override to % of viewport on mobile */
        width: 40vw !important;
        max-width: 180px;
    }

    /* Tooltip: slightly larger text, more padding for readability */
    .hort-popup__tooltip {
        font-size: 13px !important;
        padding: 8px 16px !important;
        white-space: normal !important;   /* allow wrapping on small screens */
        max-width: 44vw !important;
        text-align: center;
    }

    /* Popup should be visible above other content */
    .hort-popup {
        z-index: 99999;
    }

    /* Hint text: tell users to tap */
    .hort-map-legend::before {
        content: 'Tap';
    }
    /* Hide the default "Hover" wording — replaced above */
    .hort-map-legend {
        /* legend text itself is still shown from PHP */
    }
}

/* Touch active state — brief visual feedback when pin is tapped */
@media (hover: none) and (pointer: coarse) {
    .hort-pin:active .pin-img {
        transform: scale(0.92);
        transition: transform 0.1s ease;
    }
}