/**
 * Google Maps viewer styles.
 *
 * Includes resets for site-wide theme styles (box-sizing, button, and img
 * rules) that break the controls rendered by the Google Maps API. Properties
 * that the API sets inline are unaffected by these resets.
 */

/* The Google Maps API lays out its UI expecting default content-box sizing. */
.mapping-map .gm-style,
.mapping-map .gm-style * {
    box-sizing: content-box;
}

/* Reset global theme button styles on Google controls. */
.mapping-map .gm-style button,
.mapping-map .gm-style button:hover:not(.disabled),
.mapping-map .gm-style button:focus {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    margin: 0;
    padding: 0;
    transition: none;
}

/* Reset global theme image styles on Google control sprites and icons. */
.mapping-map .gm-style img {
    max-width: none;
    max-height: none;
}

/* Feature detail panel: slides in from the right of the map, and up from the
   bottom on a narrow screen. It sits inside the map element, outside the
   API's own .gm-style subtree, so it needs its own resets for the theme's
   global button and box-sizing rules. */
.mapping-map .mapping-feature-panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    z-index: 5;
    /* Desktop: full height, against the right edge. */
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 85%;
    transform: translateX(100%);
    /* Keep the closed panel out of the tab order and off any scrollbar, but
       only once it has finished sliding away. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.mapping-map .mapping-feature-panel--open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}
@media (max-width: 700px) {
    .mapping-map .mapping-feature-panel {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 65%;
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }
    /* Restate the open state: it would otherwise be overridden by the closed
       transform above, which shares its specificity and comes later. */
    .mapping-map .mapping-feature-panel--open {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mapping-map .mapping-feature-panel {
        transition: none;
    }
}
.mapping-map .mapping-feature-panel__close,
.mapping-map .mapping-feature-panel__close:hover:not(.disabled),
.mapping-map .mapping-feature-panel__close:focus {
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: #444;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    margin: 0;
    padding: 6px 12px;
    text-transform: none;
    transition: none;
    width: auto;
}
.mapping-map .mapping-feature-panel__close:hover {
    color: #000;
}
.mapping-map .mapping-feature-panel__content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 40px 20px 20px;
}
.mapping-map .mapping-feature-panel__loading {
    color: #666;
}

/* Feature detail content. */
.mapping-map .mapping-feature-popup-content,
.mapping-map .mapping-feature-popup-content * {
    box-sizing: border-box;
}
.mapping-map .mapping-feature-popup-content {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;
}
.mapping-map .mapping-feature-popup-content .group-type,
.mapping-map .mapping-feature-popup-content .group-value {
    display: block;
}
.mapping-map .mapping-feature-popup-content .group-value {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.mapping-map .mapping-feature-popup-content img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Nearby results listed in the feature panel below the clicked feature. The
   buttons need resets for the theme's global button styles, like the panel's
   close button above. */
.mapping-map .mapping-nearby {
    border-top: 1px solid #ddd;
    margin-top: 1.5rem;
    padding-top: 1rem;
}
.mapping-map .mapping-nearby,
.mapping-map .mapping-nearby * {
    box-sizing: border-box;
}
.mapping-map .mapping-nearby__heading {
    font-size: 1rem;
    margin: 0 0 0.75rem;
}
.mapping-map .mapping-nearby__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mapping-map .mapping-nearby__result {
    /* display: block drops the list marker box: the theme draws an arrow
       glyph on li::marker that list-style: none alone doesn't remove. */
    display: block;
    margin: 0 0 0.25rem;
    padding: 0;
}
.mapping-map .mapping-nearby__item,
.mapping-map .mapping-nearby__item:hover:not(.disabled),
.mapping-map .mapping-nearby__item:focus {
    appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: 0.9rem;
    gap: 10px;
    line-height: 1.3;
    margin: 0;
    padding: 6px;
    text-align: left;
    text-transform: none;
    transition: none;
    width: 100%;
}
.mapping-map .mapping-nearby__item:hover {
    background-color: #f2f2f2;
}
.mapping-map .mapping-nearby__thumbnail {
    flex: 0 0 auto;
}
.mapping-map .mapping-nearby__thumbnail img {
    border-radius: 4px;
    display: block;
    height: 48px;
    object-fit: cover;
    width: 48px;
}