/**
 * Freshpaint Map — defensive fallback for the MapLibre core CSS.
 *
 * The plugin enqueues maplibre-gl@3.x/dist/maplibre-gl.css from the
 * external CDN. Aggressive CSS combiners (e.g. NitroPack on staging/prod)
 * can drop or fail to inline that external stylesheet, leaving
 * .maplibregl-* elements with browser defaults — markers then escape
 * the map container and float over the rest of the page.
 *
 * These rules duplicate the minimum positioning/clipping guarantees
 * MapLibre relies on, so the map keeps working even if the upstream
 * CSS fails to load.
 */

.maplibregl-map {
    position: relative;
    overflow: hidden;
}

.maplibregl-canvas-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.maplibregl-canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.maplibregl-marker {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.maplibregl-control-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.maplibregl-control-container > * {
    pointer-events: auto;
}

/**
 * Layout rules mirrored from the theme's _locations.scss for #locationmap.
 * The Freshpaint migration renamed #locationmap → #fp-locationmap on the
 * locations listing template, which detached the map from the theme's
 * original layout (height, position, top offsets per breakpoint /
 * topbar / admin-bar combination). These selectors reapply the same
 * styles to the new id without requiring a SCSS rebuild.
 *
 * Breakpoints replicated from _variables.scss:
 *   $tablet-sm: 992px
 *   $laptop-sm: 1199px
 */

/* Mobile / tablet (≤992px) */
@media (max-width: 992px) {
    .right-col #fp-locationmap {
        background-color: #e5e3df;
        height: 420px !important;
        position: relative;
    }
}

/* Desktop (≥993px) */
@media (min-width: 993px) {
    .page-template-template-locations .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations .locations-listing #fp-locationmap {
        background-color: #e5e3df;
        /* The map fills .right-col, which is position:relative and — via the
         * flex `.row.d-flex` — stretched to the height of the listing column,
         * so the map ends up the same height as the side listing. Absolute
         * top+bottom define the height; height/width:auto override the inline
         * `width:100%;height:600px` on the div. Absolute is still a positioning
         * context, so MapLibre's zoom/compass controls stay anchored inside the
         * map (they escaped upward when this was the fragile `inherit`).
         * NOTE: container height now changes with the listing, so the JS adds a
         * ResizeObserver that calls map.resize() to keep the canvas in sync. */
        position: absolute !important;
        top: 170px;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto !important;
        width: auto !important;
    }

    .page-template-template-locations.topbar-in .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.topbar-in .locations-listing #fp-locationmap {
        top: 177px;
    }

    .page-template-template-locations.admin-bar .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.admin-bar .locations-listing #fp-locationmap {
        top: 170px;
    }

    .page-template-template-locations.topbar-in.admin-bar .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.topbar-in.admin-bar .locations-listing #fp-locationmap {
        top: 182px;
    }
}

/* Laptop-sm (993px–1199px) */
@media (min-width: 993px) and (max-width: 1199px) {
    .page-template-template-locations .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations .locations-listing #fp-locationmap {
        top: 99px;
    }

    .page-template-template-locations.topbar-in .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.topbar-in .locations-listing #fp-locationmap {
        top: 145px;
    }

    .page-template-template-locations.admin-bar .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.admin-bar .locations-listing #fp-locationmap {
        top: 103px;
    }

    .page-template-template-locations.topbar-in.admin-bar .locations-listing #fp-locationmap,
    .page-template.page-template-template-locations.topbar-in.admin-bar .locations-listing #fp-locationmap {
        top: 148px;
    }
}

/**
 * Hide the duplicate Weglot switcher injected by the plugin.
 *
 * The theme renders the language switcher via [weglot_switcher] shortcode
 * inside .secondory-header (header.php:502). The Weglot plugin admin has
 * an additional auto-switcher configured (name: "weglot-container") that
 * gets injected into the same area, producing two switchers — one of
 * which appears as a stray "EN >" floating in the page corner.
 *
 * The shortcode-rendered switcher carries the class .weglot-shortcode;
 * the auto-injected one does not. Hiding any non-shortcode Weglot
 * dropdown leaves only the intended switcher visible.
 *
 * Definitive fix: remove the "weglot-container" entry from
 * Weglot → Customize in /wp-admin. Once removed there, this rule
 * becomes redundant but harmless.
 */
.country-selector.weglot-dropdown:not(.weglot-shortcode) {
    display: none !important;
}

/**
 * Doctor name line inside the locations listing popup card.
 *
 * loc[7] (doctors_joined, e.g. "Dr. Irish Abigail Tongco") is rendered by
 * freshpaint-locations.js between the location title and the address. The
 * theme's _locations.scss has no rule for .location-doctor, so the styling
 * is owned here (plugin-side, no SCSS rebuild required).
 *
 * Values mirror the theme's _variables.scss so the line matches the rest
 * of the card:
 *   $navy3: #48425E   (same color as the location title above it)
 *   $ff:    'Smile Doctors Mabry'
 *   $fs16:  16px
 * Horizontal padding (0 15px) lines the text up with the title and address.
 */
.location_info_popup .location-doctor {
    color: #48425E;
    font-family: 'Smile Doctors Mabry';
    font-size: 16px;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 12px;
    padding: 0 15px;
}

/**
 * Tighten the gap between the location title and the doctor name.
 *
 * The theme's _locations.scss gives .location-details (the title row) a
 * 16px bottom margin, which left too large a gap above the new
 * .location-doctor line. Zero it out (scoped to the popup card so the
 * sidebar listing items, which reuse .location-details, are untouched).
 */
.location_info_popup .location-details {
    margin-bottom: 0;
}

/**
 * Stack phone and distance vertically (distance below phone).
 *
 * The theme makes .location-meta a d-flex (row), so phone and distance sit
 * side by side. Switch it to a column inside the popup card so the distance
 * drops under the phone. Scoped to .location_info_popup so the sidebar
 * listing's .location-meta keeps its original row layout.
 */
.location_info_popup .location-meta {
    flex-direction: column;
}

.location_info_popup .location-meta .location-phone {
    margin-bottom: 6px;
    margin-right: 0;
}

/**
 * Locations popup card: 8px rounded corners with a full-bleed hero image.
 *
 * MapLibre's .maplibregl-popup-content ships with ~3px corners and
 * 10px/15px padding, which insets the image and leaves near-square corners.
 * Zero the padding so the image (.location-image img is width:100%) reaches
 * the card edges, round to 8px, and clip with overflow:hidden so the image's
 * top corners follow the rounding. The inner text blocks keep their own
 * 0 15px padding, so only the image goes edge to edge; the last block's
 * mb-20 provides the bottom breathing room.
 *
 * Scoped to the locations template (same body-class convention used for
 * #fp-locationmap above) so the single-marker shortcode popup and the
 * PerkSpot popup keep MapLibre's default chrome.
 */
.page-template-template-locations .maplibregl-popup-content,
.page-template.page-template-template-locations .maplibregl-popup-content {
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}

/**
 * Circular close button floating over the hero image (top-right).
 *
 * MapLibre's default close button is a bare "×" flush in the corner, which
 * gets lost over a photo. Restyle it as a white circle with a soft shadow
 * and the navy "×" centered, inset 10px from the edges. Scoped to the
 * locations template to match the rounded-card treatment above.
 */
.page-template-template-locations .maplibregl-popup-close-button,
.page-template.page-template-template-locations .maplibregl-popup-close-button {
    align-items: center;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: #48425E;
    display: flex;
    font-size: 20px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    /* Only the bottom — nudges the "×" glyph up to the optical center of the
     * circle (it sits slightly low due to font metrics). Padding (not margin)
     * because the button is absolutely positioned and flex-centers its glyph. */
    padding: 0 0 5px;
    right: 10px;
    top: 10px;
    width: 28px;
}

.page-template-template-locations .maplibregl-popup-close-button:hover,
.page-template.page-template-template-locations .maplibregl-popup-close-button:hover {
    background: #f5f4f6;
    color: #f93822;
}

/**
 * Hero image base size (desktop).
 *
 * Without a height cap the popup image is only width:100%, so a landscape
 * storefront photo renders ~240px tall (fine) but a portrait doctor headshot
 * (the "Search by doctor" results) balloons to 400px+ and overflows the popup.
 * Pin the height with object-fit:cover so both crop to a consistent hero box.
 * The ≤992px / ≤767px blocks below shrink it further for tablet/mobile.
 */
.location_info_popup .location-image img {
    height: 240px;
    object-fit: cover;
    width: 100%;
}

/**
 * Responsive image sizing for the popup card.
 *
 * Below 993px the map container is fixed at 350px tall (per the mobile/tablet
 * rule above), so the desktop full-bleed image (natural ~240px at the 320px
 * card width) plus the text content would overflow the map. Cap the image
 * height with object-fit:cover so it crops nicely instead of stretching, and
 * the card fits comfortably.
 *
 * This ALSO overrides the theme's _locations.scss ≤767px rule that switches
 * to a tiny 60px absolute thumbnail. A landscape storefront photo cropped
 * to a ~60px square becomes unrecognizable, so we keep the full-bleed hero
 * layout on every size — just shorter on smaller screens — for a consistent
 * look across desktop / tablet / mobile.
 */
/* Tablet + mobile (≤992px) share the same card design: full-bleed hero,
 * narrower 240px width, smaller typography, meta in row with space-between.
 * Only the image height differs (140px tablet / 100px mobile — see ≤767px
 * block at the very end). */
@media (max-width: 992px) {
    /* Hero image — capped height with object-fit:cover so it crops nicely. */
    .location_info_popup .location-image img {
        height: 140px;
        object-fit: cover;
        width: 100%;
    }

    /* Override the theme's ≤767px absolute-thumbnail layout (no-op on tablet,
     * resets the full-bleed hero on mobile). */
    .location_info_popup {
        padding: 0;
        position: static;
    }
    .location_info_popup .location-image {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        margin-bottom: 0;
    }

    /* Title 15px / rest 14px. The title also resets the theme's mobile rule
     * (margin-bottom:10 / width:137 → 0 / auto). */
    .location_info_popup .location-title {
        font-size: 18px;
        margin-bottom: 0;
        width: auto;
    }
    /* Tighter vertical rhythm + smaller fonts. The .add selector mirrors the
     * theme's specificity (.add.label-xs) so it actually overrides — `.add`
     * alone loses to `.location_info_popup .add.label-xs` (0,3,0). */
    .location_info_popup .location-doctor {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .location_info_popup .add.label-xs {
        font-size: 14px;
        margin-bottom: 4px;
    }
    /* Phone + distance side-by-side, spaced apart (replaces the desktop
     * column layout). */
    .location_info_popup .location-meta {
        font-size: 14px;
        margin-bottom: 12px;
        flex-direction: row;
        justify-content: space-between;
    }
    .location_info_popup .location-meta .location-phone {
        margin-bottom: 0;
    }

    /* Narrower card — MapLibre sets the popup's max-width inline at creation
     * (320px from the JS), so we need !important to beat it. Scoped to the
     * locations template to leave other map popups alone. */
    .page-template-template-locations .maplibregl-popup,
    .page-template.page-template-template-locations .maplibregl-popup {
        max-width: 240px !important;
    }
}

/* Mobile only — the single rule that differs from tablet: image even
 * shorter (object-fit + width inherit from the ≤992px block above). */
@media (max-width: 767px) {
    .location_info_popup .location-image img {
        height: 100px;
    }
}