/* =============================================================================
   Interactive Map — Frontend CSS  v0.5.1-beta
   =============================================================================
   0.  Design tokens & scoped reset (theme isolation)
   1.  Root & view switching
   2.  View 1 — Two-column floor selector
   2a. Cards header (supertitle + title)
   2b. Left column — floor cards
   2c. Right column — stacked floor image slices + info bar
   3.  View 2 — Floor map
   3a. Top bar (title + back button)
   3b. Map outer wrapper (centers narrow maps)
   3c. Map inner wrap (relative, pins, overlays)
   3d. Select An Area pill
   3e. Floor info card (floating, bottom-centered)
   3f. Exhibits & Areas panel (floating, right side)
   3g. Bottom legend bar
   4.  Pins & tooltips
   5.  Responsive
   =============================================================================
   THEME ISOLATION STRATEGY
   - Every selector is prefixed with .im-root so plugin rules always beat the
     theme's element/class selectors on specificity.
   - The scoped reset below neutralizes properties themes commonly set on
     bare elements (h2, p, ul, button, img...).
   - All colors, sizes and fonts are set explicitly via tokens — nothing
     visual is left to inherit from the theme except nothing at all.
   ============================================================================= */

/* ─── 0. DESIGN TOKENS ──────────────────────────────────────────────────────── */
.im-root {
    --im-navy:        #2d2680;  /* headings, primary text            */
    --im-purple:      #7c3aed;  /* floor subtitle accent             */
    --im-bar-purple:  #4527a0;  /* info / legend bars                */
    --im-cream:       #fbfae9;  /* cards & panels background         */
    --im-yellow:      #ffd973;  /* "See Inside!" pill                */
    --im-orange:      #f6a21c;  /* pins                              */
    --im-pink:        #e2377b;  /* pin hover / active                */
    --im-text:        #5b5b6b;  /* body copy                         */
    --im-radius:      14px;
    --im-font:        "Montserrat", "Poppins", "Nunito Sans", -apple-system,
                      "Segoe UI", system-ui, sans-serif;
}

/* ─── 0b. SCOPED RESET — isolates from theme ────────────────────────────────── */
.im-root h1, .im-root h2, .im-root h3,
.im-root h4, .im-root h5, .im-root h6 {
    margin: 0; padding: 0; border: none; background: none;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    line-height: 1.2; color: inherit; text-transform: none;
    letter-spacing: normal; text-shadow: none;
}
.im-root p {
    margin: 0; padding: 0;
    font-size: inherit; line-height: 1.5; color: inherit;
}
.im-root ul, .im-root ol { list-style: none; margin: 0; padding: 0; }
.im-root li              { list-style: none; margin: 0; padding: 0; }
.im-root button {
    font-family: inherit; font-size: inherit; font-weight: inherit;
    color: inherit; background: none; border: none; border-radius: 0;
    padding: 0; margin: 0; cursor: pointer; line-height: 1;
    text-transform: none; letter-spacing: normal;
    box-shadow: none; text-shadow: none;
    -webkit-appearance: none; appearance: none;
}
.im-root a             { text-decoration: none; color: inherit; box-shadow: none; }
.im-root img           { max-width: 100%; height: auto; vertical-align: middle; border: 0; box-shadow: none; }
.im-root strong, .im-root b { font-weight: 700; }
.im-root em, .im-root i     { font-style: italic; }
.im-root svg           { display: block; overflow: visible; }

/* ─── 1. ROOT & VIEW SWITCHING ──────────────────────────────────────────────── */
.im-root {
    font-family: var(--im-font);
    font-size: 16px;
    color: var(--im-text);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.im-root *, .im-root *::before, .im-root *::after { box-sizing: inherit; }
.im-root .im-view        { display: none; }
.im-root .im-view.active { display: flex; }

/* ─── 2. VIEW 1 — TWO-COLUMN FLOOR SELECTOR ─────────────────────────────────── */
.im-root .im-view-floors { align-items: stretch; gap: 32px; }

/* ── 2a. CARDS HEADER ─────────────────────────────────────────────────────────  */
.im-root .im-cards-header { margin-bottom: 24px; }
.im-root .im-cards-supertitle {
    font-size: 15px; font-weight: 700; color: var(--im-navy);
    margin: 0 0 6px; letter-spacing: 0;
}
.im-root .im-cards-title {
    font-size: 32px; font-weight: 800; color: var(--im-navy);
    margin: 0; line-height: 1.15;
}

/* ── 2b. LEFT COLUMN ──────────────────────────────────────────────────────────  */
.im-root .im-floors-left {
    flex: 0 0 auto; width: 42%;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.im-root .im-floors-cards { display: flex; flex-direction: column; gap: 18px; }

.im-root .im-floor-card {
    background: var(--im-cream); border-radius: var(--im-radius);
    padding: 22px 24px;
    cursor: pointer; display: flex; flex-direction: column; gap: 10px;
    border: 2px solid transparent;
    box-shadow: none;
    transition: box-shadow .2s, transform .15s, border-color .15s;
}
.im-root .im-floor-card:hover {
    box-shadow: 0 6px 22px rgba(45,38,128,.14);
    transform: translateY(-2px);
    border-color: var(--im-purple);
}
.im-root .im-floor-card-header {
    display: flex; align-items: center; gap: 14px;
}
.im-root .im-floor-badge {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 17px; color: #fff; flex-shrink: 0;
    background: var(--im-orange); /* fallback; overridden inline per floor */
}
.im-root .im-floor-card-title {
    font-size: 22px; font-weight: 800; margin: 0; color: var(--im-navy);
    line-height: 1.2;
}
.im-root .im-floor-card-sub  { color: var(--im-purple); font-weight: 800; }
.im-root .im-floor-card-sep  { font-weight: 400; color: var(--im-navy); margin: 0 2px; }
.im-root .im-floor-card-desc {
    font-size: 14px; color: var(--im-text); margin: 0; line-height: 1.6;
}
.im-root .im-floor-card-link {
    font-size: 15px; font-weight: 800; color: var(--im-navy);
    background: none; border: none; cursor: pointer; padding: 0;
    align-self: flex-start;
}
.im-root .im-floor-card-link:hover { text-decoration: underline; }

/* ── 2c. RIGHT COLUMN — OVERVIEW STACK ───────────────────────────────────────  */
.im-root .im-floors-right {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0; align-self: flex-start;
}

/* "See Inside!" pill overlapping the top of the image stack */
.im-root .im-overview-header {
    text-align: center; font-weight: 800; font-size: 16px; color: var(--im-navy);
    background: var(--im-yellow); border-radius: 999px; padding: 9px 34px;
    align-self: center; box-shadow: 0 2px 8px rgba(45,38,128,.15);
    position: relative; z-index: 100; margin-bottom: -20px;
    white-space: nowrap;
}
.im-root .im-overview-stack {
    position: relative; display: flex; flex-direction: column; flex: 1;
    overflow: hidden; border-radius: var(--im-radius) var(--im-radius) 0 0;
}
.im-root .im-load-error {
    padding: 48px 24px 64px; text-align: center;
    font-size: 15px; font-weight: 700; color: var(--im-navy); background: var(--im-cream);
}
.im-root .im-overview-slice       { position: relative; width: 100%; cursor: pointer; transition: filter .15s; }
.im-root .im-overview-slice:hover { filter: brightness(1.06); }
.im-root .im-overview-slice img   { display: block; width: 100%; height: auto; }

.im-root .im-overview-info-bar {
    background: var(--im-bar-purple); color: #fff; padding: 14px 20px;
    border-radius: 0 0 var(--im-radius) var(--im-radius);
    font-size: 14px; line-height: 1.6;
    display: flex; gap: 4px; flex-wrap: wrap; align-items: baseline;
}
.im-root .im-overview-info-label { font-weight: 800; font-size: 15px; white-space: nowrap; color: #fff; }
.im-root .im-overview-info-label::after { content: ' |'; font-weight: 400; margin-right: 6px; opacity: .7; }
.im-root .im-overview-info-desc { opacity: .92; color: #fff; }

/* ─── 3. VIEW 2 — FLOOR MAP ─────────────────────────────────────────────────── */
.im-root .im-view-floor-map.active { display: flex; flex-direction: column; align-items: center; }

/* ── 3b. MAP OUTER — constrained column (topbar + map + legend) ───────────────  */
.im-root .im-floor-map-outer {
    display: flex;
    flex-direction: column;
    width: 100%;   /* overridden inline by JS (floormap_width) */
}

/* ── 3a. TOP BAR ──────────────────────────────────────────────────────────────  */
.im-root .im-floormap-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px; gap: 12px; width: 100%;
}
.im-root .im-floormap-title { font-size: 28px; font-weight: 800; color: var(--im-navy); margin: 0; }
.im-root .im-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 2px solid var(--im-purple); border-radius: 999px;
    padding: 8px 22px; font-size: 14px; font-weight: 700; color: var(--im-navy);
    cursor: pointer; white-space: nowrap; transition: background .15s; flex-shrink: 0;
}
.im-root .im-back-btn:hover { background: #f0edff; }

/* ── 3c. MAP INNER WRAP ───────────────────────────────────────────────────────  */
.im-root .im-floor-map-wrap {
    position: relative;
    width: 100%;
    overflow: visible; /* pill and info card can protrude */
}
/* Image + pins. Pin positions are % of this box. No z-index here: the pins
   layer must share a stacking context with the floating panels (see below). */
.im-root .im-floor-map-canvas {
    position: relative;
    background: #6ecb3b;
    border-radius: var(--im-radius);
}
.im-root .im-floor-img {
    display: block; width: 100%; height: auto;
    min-height: 200px; object-fit: cover;
    border-radius: var(--im-radius);
    /* Neutralize theme rules (lazy-load fades, lightboxes) that position or
       transform images — they would put the img above the pin layer in
       hit-testing even when the pins paint on top. */
    position: static; z-index: auto; transform: none;
}
.im-root .im-pins-container {
    position: absolute; inset: 0; pointer-events: none;
    z-index: 5; /* always above the map image, below floating panels */
}
/* The container is its own stacking context, so a pin's z-index can never beat
   the info card / areas panel from inside it. When a pin is hovered or its
   tooltip is open, lift the WHOLE pins layer above both panels. */
.im-root .im-pins-container:has(.im-pin.active),
.im-root .im-pins-container:has(.im-pin:hover) {
    z-index: 30;
}

/* ── 3d. "SELECT AN AREA" PILL ────────────────────────────────────────────────  */
.im-root .im-select-area-pill {
    position: absolute;
    top: -20px; left: 50%; transform: translateX(-50%);
    background: var(--im-cream); border-radius: 999px; padding: 9px 32px;
    font-size: 15px; font-weight: 800; color: var(--im-navy);
    box-shadow: 0 2px 10px rgba(45,38,128,.16);
    white-space: nowrap; z-index: 20; pointer-events: none;
}

/* ── 3e. FLOOR INFO CARD (floating, bottom-centered) ──────────────────────────  */
.im-root .im-floor-info-card {
    position: absolute;
    left: 50%; bottom: 28px;
    transform: translate(-50%, 0);
    background: var(--im-cream); border-radius: var(--im-radius);
    padding: 20px 24px; width: 370px; max-width: calc(100% - 32px);
    box-shadow: 0 6px 28px rgba(0,0,0,.16); z-index: 15;
    /* Solid in hit-testing too — clicks on the card no longer fall through
       to the map image underneath. */
    pointer-events: auto;
}
.im-root .im-floor-info-card-title {
    font-size: 21px; font-weight: 800; color: var(--im-navy); margin: 0 0 8px;
}
.im-root .im-floor-info-card-text {
    font-size: 13px; color: var(--im-text); line-height: 1.6; margin: 0;
}

/* ── 3f. EXHIBITS & AREAS PANEL ───────────────────────────────────────────────  */
.im-root .im-areas-panel {
    position: absolute; top: 16px; right: 16px;
    background: var(--im-cream); border-radius: var(--im-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    min-width: 220px; max-width: 280px; z-index: 10; overflow: hidden;
}
.im-root .im-areas-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer; user-select: none;
}
.im-root .im-areas-title  { font-weight: 800; font-size: 17px; color: #17123a; }
.im-root .im-areas-toggle { font-size: 18px; color: #17123a; transition: transform .2s; }
.im-root .im-areas-panel.collapsed .im-areas-toggle { transform: rotate(180deg); }
.im-root .im-areas-panel.collapsed .im-areas-list  { display: none; }

.im-root .im-areas-list {
    list-style: none; margin: 0; padding: 0 0 10px;
    max-height: 320px; overflow-y: auto;
}
.im-root .im-areas-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 18px; cursor: pointer; transition: background .15s;
    font-size: 14px; font-weight: 700; color: #1a1a2e;
}
/* Mouse only — on touch screens :hover sticks to the last tapped row. */
@media (hover: hover) {
    .im-root .im-areas-list li:hover { background: rgba(124,58,237,.08); }
}
.im-root .im-areas-list li.active { color: var(--im-pink); }
.im-root .im-area-dot {
    width: 24px; height: 24px; border-radius: 50%; background: var(--im-orange);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.im-root .im-area-dot svg { width: 12px; height: 12px; fill: #fff; }
.im-root .im-areas-list li.active .im-area-dot { background: var(--im-pink); }

/* ── 3g. BOTTOM LEGEND BAR — separate rounded pill bar ────────────────────────  */
.im-root .im-floor-legend-bar {
    width: 100%;
    background: var(--im-bar-purple);  /* overridden inline from floormap_legend_color */
    color: #fff; text-align: center;
    padding: 15px 24px; border-radius: var(--im-radius);
    margin-top: 18px;
    font-size: 13px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.im-root .im-floor-legend-text { display: block; color: #fff; }

/* ─── 4. PINS & TOOLTIPS ────────────────────────────────────────────────────── */
.im-root .im-pin {
    position: absolute; transform: translate(-50%, -100%);
    pointer-events: all; cursor: pointer;
    transition: transform .15s; z-index: 5; overflow: visible;
}
.im-root .im-pin:hover  { transform: translate(-50%, -104%) scale(1.1); z-index: 8; }
.im-root .im-pin.active { z-index: 40; } /* open dialog wins over sibling pins and overlays */

.im-root .im-pin-circle {
    width: 42px; height: 42px; border-radius: 50%; background: var(--im-orange);
    display: flex; align-items: center; justify-content: center;
    /* soft halo ring + drop shadow, as in the design */
    box-shadow: 0 0 0 6px rgba(246,162,28,.30), 0 3px 10px rgba(0,0,0,.25);
    transition: background .2s, box-shadow .2s;
}
.im-root .im-pin-circle svg { width: 20px; height: 20px; fill: #fff; }

.im-root .im-pin-tail {
    width: 0; height: 0;
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 9px solid var(--im-orange); margin: 0 auto;
    transition: border-top-color .2s;
    position: relative; top: 5px;
}

/* Hover → pink, like the design's hover variant */
.im-root .im-pin:hover .im-pin-circle,
.im-root .im-pin.active .im-pin-circle {
    background: var(--im-pink);
    box-shadow: 0 0 0 6px rgba(226,55,123,.28), 0 3px 10px rgba(0,0,0,.25);
}
.im-root .im-pin:hover .im-pin-tail,
.im-root .im-pin.active .im-pin-tail { border-top-color: var(--im-pink); }

/* Hover label (bold navy name above the pin) — hidden once tooltip is open.
   Mouse/trackpad only: on iOS, content that appears on :hover makes the first
   tap act as a hover, so the tooltip would need a second tap. */
@media (hover: hover) {
    .im-root .im-pin:hover:not(.active)::before {
        content: attr(data-label);
        position: absolute;
        bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
        font-size: 14px; font-weight: 800; color: var(--im-navy);
        white-space: nowrap; pointer-events: none; z-index: 25;
        text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(255,255,255,.85),
                     1px 0 0 rgba(255,255,255,.85), -1px 0 0 rgba(255,255,255,.85);
    }
    .im-root .im-pin[data-label=""]:hover::before { content: none; }
}

/* Tooltip (on click) */
.im-root .im-pin-tooltip {
    display: none; position: absolute;
    bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--im-cream); border-radius: 10px; padding: 12px 30px 12px 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,.18); z-index: 20;
    width: 300px; white-space: normal;
    pointer-events: none;
}
/* When open, the dialog itself is interactive so clicks (✕ included) never
   fall through to the map image underneath. */
.im-root .im-pin.active .im-pin-tooltip { pointer-events: auto; }
.im-root .im-pin-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--im-cream);
}
.im-root .im-pin.flip-down  .im-pin-tooltip        { bottom: auto; top: calc(100% + 8px); }
.im-root .im-pin.flip-down  .im-pin-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--im-cream); }
.im-root .im-pin.flip-left  .im-pin-tooltip        { left: auto; right: 0; transform: none; }
.im-root .im-pin.flip-left  .im-pin-tooltip::after { left: auto; right: 14px; transform: none; }
.im-root .im-pin.flip-right .im-pin-tooltip        { left: 0; transform: none; }
.im-root .im-pin.flip-right .im-pin-tooltip::after { left: 14px; transform: none; }
.im-root .im-pin.active .im-pin-tooltip { display: block; }

.im-root .im-pin-tooltip-title { display: block; font-weight: 800; font-size: 14px; color: var(--im-navy); margin-bottom: 4px; }
.im-root .im-pin-tooltip-desc  { display: block; font-size: 12px; color: var(--im-text); line-height: 1.5; }
.im-root .im-tooltip-close {
    position: absolute; top: 7px; right: 9px; background: none; border: none;
    font-size: 13px; cursor: pointer; color: #a5a2b8; line-height: 1; pointer-events: auto;
    padding: 4px; /* larger hit area */
}
.im-root .im-tooltip-close:hover { color: var(--im-navy); }

/* ─── 5. RESPONSIVE ─────────────────────────────────────────────────────────── */
/* Phones and portrait tablets (up to the 834px iPad Pro 11"): the panels move
   BELOW the floor map (map, areas list, floor card). Overlaid on a narrower
   map they covered pins (2 of 8 on Floor 2 even on 768–834px iPads). */
@media (max-width: 900px) {
    .im-root .im-floor-map-wrap  { display: flex; flex-direction: column; gap: 12px; height: auto !important; }
    .im-root .im-floor-map-canvas { order: 0; }
    .im-root .im-areas-panel,
    .im-root .im-floor-info-card {
        position: static; transform: none;
        width: auto; min-width: 0; max-width: none;
        box-shadow: none;
    }
    .im-root .im-areas-panel     { order: 1; }
    .im-root .im-floor-info-card { order: 2; padding: 16px 18px; }
    .im-root .im-floor-info-card-title { font-size: 17px; }
    .im-root .im-floor-info-card-text  { font-size: 13px; }

    .im-root .im-areas-title   { font-size: 15px; }
    .im-root .im-areas-list li { font-size: 14px; padding: 9px 18px; break-inside: avoid; } /* comfortable tap targets */
    /* No scroll inside the page scroll; two columns on the wider tablet panel. */
    .im-root .im-areas-list    { max-height: none; overflow: visible; column-count: 2; column-gap: 0; }
}

@media (max-width: 680px) {

    /* ── View 1: stacked image first, floor cards below it ── */
    .im-root .im-view-floors { flex-direction: column; gap: 24px; }
    .im-root .im-floors-left  { order: 2; width: auto; margin: 0 16px; }
    /* The page around the map already has its own heading on mobile. */
    .im-root .im-cards-header { display: none; }
    .im-root .im-floors-cards { gap: 12px; }
    .im-root .im-floor-card   { padding: 16px 18px; gap: 8px; }
    .im-root .im-floor-card-header { gap: 12px; }
    .im-root .im-floor-card-title  { font-size: 19px; }
    .im-root .im-floor-card-desc   { font-size: 13px; line-height: 1.5; }
    .im-root .im-floors-right {
        /* Desktop sets align-self: flex-start, which in a column layout makes
           the element shrink-to-fit its images' natural width and overflow.
           Stretch it to the available width instead. */
        align-self: stretch;
        width: auto; min-width: 0;
        margin: 0 16px;
    }

    /* ── View 2: floor map fills the container ── */
    .im-root .im-view-floor-map.active {
        width: 100%;
        height: auto;
        align-items: stretch;
    }
    /* floormap_width / floormap_height from the admin are desktop values —
       neutralize the inline styles injected by JS so the map scales fluidly. */
    .im-root .im-floor-map-outer { width: 100% !important; }
    .im-root .im-floor-img       { width: 100%; height: auto !important; min-height: 0; }

    /* ── Internal component tweaks ── */
    .im-root .im-floormap-title   { font-size: 20px; }
    .im-root .im-select-area-pill { font-size: 13px; padding: 6px 20px; }
    .im-root .im-areas-list       { column-count: 1; }

    .im-root .im-pin-tooltip { width: 220px; }
    .im-root .im-pin-circle  { width: 34px; height: 34px; }
    .im-root .im-pin-circle svg { width: 16px; height: 16px; }
}