/**
 * Pin List Sidebar (Pro-only). Two independent concerns:
 *
 * 1. Layout: a flex row placing the existing .granpai-globe-wrapper next
 *    to a new sidebar column (js/pro-sidebar.js moves the wrapper into
 *    this container at runtime - the free plugin's own PHP output is
 *    never touched). Stacks to a single column below ~780px, regardless
 *    of Left/Right, since the wrapper is always the first DOM child.
 *
 * 2. The accordion component itself, built with a grid-template-rows
 *    0fr -> 1fr transition - no JS height measurement needed, and it
 *    handles dynamically-sized content correctly (unlike a max-height
 *    guess).
 *
 * This file's selectors never touch .granpai-globe-wrapper's own
 * internals - it only lays out AROUND it and styles the new sidebar.
 */

/* ----------------------------------------------------------------------
 * The docked/floating modal (free plugin) is replaced by the accordion
 * in this mode - hidden entirely rather than left to coexist, since its
 * content is now shown inline per accordion item instead. The free
 * plugin's modal JS keeps running underneath exactly as it always does
 * (it has no idea this mode exists) - only its visual presentation is
 * suppressed here.
 *
 * Scoped to above the sidebar's own 780px mobile-stacking breakpoint
 * (see the @media block further down) - below that, the sidebar stacks
 * BELOW the globe instead of sitting beside it, and the modal is
 * restored there instead of staying suppressed. Tapping a list item on
 * mobile then opens the same modal every other map already uses there,
 * rather than only expanding the accordion item inline, which could
 * leave the newly-opened content sitting off-screen below the fold
 * with no automatic way back up to see it.
 * ------------------------------------------------------------------- */
@media screen and (min-width: 781px) {
    .granpai-globe-wrapper[data-pin-list-sidebar="left"] .granpai-modal-overlay,
    .granpai-globe-wrapper[data-pin-list-sidebar="right"] .granpai-modal-overlay {
        display: none !important;
    }
}

.granpai-pls-layout {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
}

/* Default (no explicit side, shouldn't normally happen since the PHP
   side only ever sets data-pls-side to 'left' or 'right') falls back to
   the same row order as 'right'. */
.granpai-pls-layout,
.granpai-pls-layout[data-pls-side="right"] {
    flex-direction: row;
}
.granpai-pls-layout[data-pls-side="left"] {
    /* Sidebar is always the 2nd DOM child (see pro-sidebar.js) - reversing
       the row visually puts it on the left without touching DOM order,
       so the ~780px stack below always keeps the map on top regardless
       of this setting. */
    flex-direction: row-reverse;
}

.granpai-pls-layout > .granpai-globe-wrapper {
    /* flex-grow:3 vs the sidebar's flex-grow:2 below gives roughly a
       60/40 split. flex-basis:0 (not a percentage) is deliberate - a
       percentage basis resolves against the main axis, which is
       vertical in the column (mobile) layout below; with no explicit
       height on the container, that made the sidebar collapse to
       nothing there. Growing from a 0 basis avoids that entirely, in
       both directions. */
    flex: 3 1 0;
    min-width: 0; /* let the globe/map shrink below its intrinsic size in the flex row */
}

.granpai-pls-sidebar {
    flex: 2 1 0;
    min-width: 280px;
    max-width: 480px;
    max-height: min(80vh, 700px);
    overflow-y: auto;
    border-radius: 12px;
    padding: 6px 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Modern standard (Firefox, Chrome 121+) - thin, uses the theme's
       own accent color instead of the browser's default scrollbar look. */
    scrollbar-width: thin;
    scrollbar-color: var(--gp-pls-accent) transparent;
}
/* WebKit fallback (Safari, older Chrome) - scrollbar-color above has no
   effect there, so this covers the same look via its own pseudo-elements. */
.granpai-pls-sidebar::-webkit-scrollbar {
    width: 6px;
}
.granpai-pls-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.granpai-pls-sidebar::-webkit-scrollbar-thumb {
    background: var(--gp-pls-accent);
    border-radius: 999px;
    opacity: 0.6;
}
.granpai-pls-sidebar::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

@media screen and (max-width: 780px) {
    .granpai-pls-layout,
    .granpai-pls-layout[data-pls-side="left"],
    .granpai-pls-layout[data-pls-side="right"] {
        flex-direction: column;
    }
    .granpai-pls-layout > .granpai-globe-wrapper,
    .granpai-pls-sidebar {
        /* Explicit auto/100% here (rather than relying on the row
           values above) is what actually fixes the stacked layout -
           see the comment on flex-basis:0 above for why the row values
           alone don't carry over correctly to column mode. */
        flex: 0 0 auto;
        width: 100%;
    }
    .granpai-pls-sidebar {
        max-width: none;
        max-height: none; /* stacked below the map - let the page scroll instead of a tiny internal scrollbox */
    }
    /* The modal (restored above, at this same breakpoint) is now the
       one place pin content shows on mobile - without this, tapping a
       list item would ALSO expand that item's own panel inline here,
       showing the same content twice at once (once in the modal, once
       underneath it in the sidebar) rather than the clean single
       expand mobile visitors get on every other map. The chevron
       toggle now also routes through the modal at this width instead
       of toggling this panel (see pro-sidebar.js), so nothing is left
       relying on this panel actually expanding down here. */
    .granpai-pls-item[data-open="true"] .granpai-pls-item-panel {
        grid-template-rows: 0fr;
    }
}

/* ----------------------------------------------------------------------
 * Theme tokens, kept independent from the free plugin's own --gp-* vars
 * (those are scoped to .granpai-globe-wrapper.granpai-theme-*, which the
 * sidebar sits OUTSIDE of as a DOM sibling, so it can't inherit them).
 * js/pro-sidebar.js sets data-pls-theme to match the map's own theme
 * setting.
 * ------------------------------------------------------------------- */
.granpai-pls-sidebar[data-pls-theme="dark"] {
    --gp-pls-bg: #0a0c18;
    --gp-pls-border: rgba(255, 255, 255, 0.1);
    --gp-pls-text: #ffffff;
    --gp-pls-text-muted: #b9bad0;
    --gp-pls-accent: #00ffcc;
    --gp-pls-accent-soft: rgba(0, 255, 204, 0.1);
}
.granpai-pls-sidebar[data-pls-theme="light"] {
    --gp-pls-bg: #ffffff;
    --gp-pls-border: rgba(20, 21, 31, 0.12);
    --gp-pls-text: #14151f;
    --gp-pls-text-muted: #565971;
    --gp-pls-accent: #0d9488;
    --gp-pls-accent-soft: rgba(13, 148, 136, 0.08);
}

.granpai-pls-sidebar {
    background: var(--gp-pls-bg);
    color: var(--gp-pls-text);
}

/* Neutralizes the free plugin's setBlurOutsideMap() effect: it walks up
   from the globe wrapper toggling .granpai-blur-sibling on every OTHER
   child at each ancestor level, so once the sidebar becomes a DOM
   sibling of the wrapper (see pro-sidebar.js), it gets caught by that
   walk too - the free plugin has no idea the sidebar exists, so it
   can't skip it on its own. Un-doing the effect here (rather than at
   the source) is deliberate: it keeps that file's logic simple and
   correct for its own primary case (the docked modal) and leaves this
   Pro-only exception entirely on the Pro side. Compound selector wins
   on specificity over the free plugin's single-class rule regardless of
   stylesheet load order. */
.granpai-pls-sidebar.granpai-blur-sibling {
    filter: none !important;
    pointer-events: auto !important;
}

/* ---------------------------- Nav bar ---------------------------- */

.granpai-pls-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Bleeds into .granpai-pls-sidebar's own 4px side / 6px bottom
       padding (negative margin), then adds that same amount back as
       padding of its own - otherwise that padding is a gap right below
       this sticky bar with no background of its own, letting scrolled
       content peek through underneath it. */
    margin-left: -4px;
    margin-right: -4px;
    margin-bottom: -6px;
    padding: 12px 12px 18px;
    /* Last DOM child (see pro-sidebar.js) - sticky to the sidebar's own
       scrollbox (its nearest scrolling ancestor, since .granpai-pls-sidebar
       has overflow-y:auto), so it stays reachable no matter how far the
       accordion list itself is scrolled. A solid background is required
       for this to look right - otherwise items scrolling underneath
       would show through. */
    position: sticky;
    bottom: -6px;
    margin-top: auto;
    background: var(--gp-pls-bg);
    border-top: 1px solid var(--gp-pls-border);
}
.granpai-pls-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--gp-pls-border);
    background: transparent;
    color: var(--gp-pls-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex: none;
}
.granpai-pls-nav-btn:hover {
    border-color: var(--gp-pls-accent);
}
.granpai-pls-nav-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.granpai-pls-nav-position {
    font-size: 12.5px;
    color: var(--gp-pls-text-muted);
    letter-spacing: 0.02em;
}

/* --------------------------- Accordion --------------------------- */

.granpai-pls-item {
    border-bottom: 1px solid var(--gp-pls-border);
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-left-color 0.2s ease;
}
.granpai-pls-item:last-child {
    border-bottom: none;
}
.granpai-pls-item[data-open="true"] {
    background: var(--gp-pls-accent-soft);
    border-left-color: var(--gp-pls-accent);
}

.granpai-pls-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
/* Reset styles shared by both buttons inside the header - the heading
   (click = select/open this pin, moves the camera) and the toggle
   (click = open/close only, see js/pro-sidebar.js's setItemOpen()). Kept
   as two separate buttons rather than one, since a button can't nest
   inside another button, and this is what lets each have its own
   distinct click behavior in the first place. */
.granpai-pls-item-heading-btn,
.granpai-pls-item-toggle {
    background: none;
    border: none;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.granpai-pls-item-heading-btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 16px 0 16px 18px;
}
.granpai-pls-item-toggle {
    flex: none;
    padding: 16px 18px 16px 6px;
    display: flex;
    align-items: flex-start;
}
.granpai-pls-item-heading-btn:hover .granpai-pls-item-title {
    color: var(--gp-pls-accent);
}

.granpai-pls-item-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.granpai-pls-item-location {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--gp-pls-text-muted);
}
.granpai-pls-item-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gp-pls-text);
    transition: color 0.15s ease;
}

.granpai-pls-item-chevron {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    transition: transform 0.25s ease;
    color: var(--gp-pls-text-muted);
}
.granpai-pls-item-chevron svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.granpai-pls-item[data-open="true"] .granpai-pls-item-chevron {
    transform: rotate(180deg);
    color: var(--gp-pls-accent);
}

/* The 0fr -> 1fr grid trick: animates open/close without ever measuring
   scrollHeight in JS, and adapts correctly to content of any length. */
.granpai-pls-item-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}
.granpai-pls-item[data-open="true"] .granpai-pls-item-panel {
    grid-template-rows: 1fr;
}
.granpai-pls-item-panel-inner {
    overflow: hidden;
}
.granpai-pls-item-body {
    padding: 0 18px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gp-pls-text);
    white-space: pre-line;
}

.granpai-pls-item-media {
    margin: 0 18px 14px;
    border-radius: 8px;
    overflow: hidden;
}
.granpai-pls-item-media img {
    display: block;
    width: 100%;
    height: auto;
}

.granpai-pls-item-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 18px 14px;
}
.granpai-pls-item-contacts[hidden] {
    display: none;
}
.granpai-pls-item-contacts a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--gp-pls-border);
    color: var(--gp-pls-text);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.granpai-pls-item-contacts a:hover {
    border-color: var(--gp-pls-accent);
    color: var(--gp-pls-accent);
}
.granpai-pls-item-contacts a svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.granpai-pls-item-directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 18px 20px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--gp-pls-accent);
    color: var(--gp-pls-bg);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
/* Without this, the `display: inline-flex` above always wins over the
   browser's own built-in `[hidden] { display: none }` rule (author CSS
   beats the user-agent stylesheet regardless of selector specificity) -
   so JS setting directionsEl.hidden = true (no directions_url set for
   this pin) had no visible effect at all; the button showed up on every
   pin regardless. Same reasoning applies to .granpai-pls-item-media and
   .granpai-pls-item-contacts below, which set display too. */
.granpai-pls-item-directions[hidden] {
    display: none;
}
.granpai-pls-item-directions svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.granpai-pls-items {
    padding-bottom: 12px;
}