/*
* Searchable locations map.
*
* Layout/visuals come from the Webflow "map-concept" classes in css/webflow.css
* (.map-section, .location-search-column, .search-loc, .location-link-block,
* .map-column). The rules below are the glue that wires those classes to the live
* Google map: filling the map column, styling the live search input/button and the
* info window, and adapting the standalone concept page for in-page use.
* */

/* ------------------------------------------------------------------ *
 * Google InfoWindow chrome (Google injects this markup around our HTML)
 * ------------------------------------------------------------------ */
.gm-style-iw-ch {
    padding: 0 !important;
}

/* Close (X) button. Google masks button.gm-ui-hover-effect > span into the X and
   its background-color paints it; the default here was white-on-white (invisible),
   so force a visible color — navy, gold on hover. */
body .gm-style-iw-chr button.gm-ui-hover-effect {
    position: absolute !important;
    top: -8px;
    right: -8px;
    opacity: 1 !important;
}

body .gm-style-iw-chr button.gm-ui-hover-effect > span {
    background-color: var(--color-2, #001543) !important;
    opacity: 1 !important;
    transition: background-color .15s;
}

body .gm-style-iw-chr button.gm-ui-hover-effect:hover > span {
    background-color: var(--color-6, #d29f13) !important;
}

.gm-style .gm-style-iw-d {
    overflow-y: auto !important;
}

.gm-style-iw-d {
    padding: 0 !important;
    margin: 0 !important;
}

.gm-style {
    font-family: inherit !important;
}

.gm-style-iw {
    width: 320px !important;
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--color, #fff);
    border-radius: 0 !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    font-size: 16px !important;
}

/* Info window content — matches the concept's .map-info-div card */
.map-info-window {
    padding: 18px 20px;
    font-size: .95em;
    line-height: 1.45;
}

.map-info-window .h3-marg {
    margin: 0 0 10px;
}

/* ------------------------------------------------------------------ *
 * Two-column map section
 * ------------------------------------------------------------------ */
section.map-section {
    /* Webflow's 100vh/800px is for a standalone page; bound it for in-page use. */
    height: 80vh;
    min-height: 560px;
    max-height: 860px;
}

/* Webflow pads the column 175px to clear the standalone page's fixed navbar;
   in-page it already sits below the page title, so reclaim that space. */
section.map-section .location-search-column {
    padding-top: 0;
}

/* ----- Page heading (theme override prints the page's <h1> above the search) -----
   Webflow's map-concept has no h1 and webflow.css styles h2/h3 only, so give it
   the inner-page display face. Side padding matches .search-loc so the heading,
   the search bar and the cards share one left edge. */
.location-search-column .location-search-heading {
    margin: 0 0 18px;
    padding: 0 30px;
    font-family: trajan-sans-pro, sans-serif;
    font-size: 2em;
    font-weight: 300;
    line-height: 1.2em;
    color: var(--color-2, #001543);
}

/* ----- Search bar ----- */
.search-loc {
    gap: 12px;
}

#locationSearch {
    position: relative; /* anchor for the clear (X) button */
    flex: 1;
    min-width: 0; /* allow the field to shrink instead of overflowing the row */
    line-height: 1;
}

#locationSearch input,
#pac-input {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 34px 0 12px; /* right padding leaves room for the clear (X) button */
    border: 1px solid #c9c9c9;
    background: #fff;
    font-size: 1em;
    line-height: 40px;
}

#clearSearch {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #75787b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s;
}

#clearSearch:hover {
    color: var(--color-2, #001543);
}

#clearSearch[hidden] {
    display: none; /* beats the display:flex above so the attribute hides it */
}

#locationSearch input:focus,
#pac-input:focus {
    outline: none;
    border-color: var(--color-2, #001543);
}

/* ----- Google Places Autocomplete dropdown -----
   Google appends .pac-container to <body> and ships its own stylesheet, so these
   need !important to win. (The "powered by Google" logo row is left untouched.) */
.pac-container {
    margin-top: 4px;
    border: 1px solid #c9c9c9 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit !important;
}

.pac-item {
    padding: 9px 12px !important;
    border-top: 1px solid #ededed !important;
    color: #4a4f5a !important;
    font-size: .9em !important;
    line-height: 1.4 !important;
    cursor: pointer;
}

.pac-item:first-child {
    border-top: 0 !important;
}

.pac-item:hover,
.pac-item-selected,
.pac-item-selected:hover {
    background-color: var(--color-2, #001543) !important;
    color: #fff !important;
}

.pac-item-query {
    color: #1a1a1a !important;
    font-size: 1em !important;
}

.pac-item:hover .pac-item-query,
.pac-item-selected .pac-item-query {
    color: #fff !important;
}

.pac-matched {
    font-weight: 700 !important;
}

/* hide Google's default grey pin sprite for a cleaner, text-only list */
.pac-icon {
    display: none !important;
}

#getLocation {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    color: #fff;
    background-color: var(--color-2, #001543);
    cursor: pointer;
    transition: background-color .2s;
}

#getLocation:hover {
    background-color: var(--color-10, #002d72);
}

#getLocation svg {
    width: 22px;
    height: 22px;
}

#getLocation.is-loading {
    pointer-events: none;
    cursor: wait;
    opacity: 0.35;
}

/* ----- Location cards ----- */
#panel {
    display: flex;
    flex-direction: column;
}

.location-link-block {
    cursor: pointer; /* whole card opens the info window */
    transition: background-color .15s, color .15s;
}

.location-link-block .open-info-window {
    display: block;
    text-decoration: none;
}

.location-link-block .location-title {
    margin: 0 0 10px;
    cursor: pointer;
    transition: color .15s;
}

.location-link-block:hover .location-title,
.location-link-block.is-open .location-title {
    color: var(--color-6, #d29f13);
}

/* Active card — the one whose info window is open on the map — plus hover.
   Scoped under #panel so it overrides the .color stripe regardless of
   stylesheet load order. */
#panel .location-link-block:hover,
#panel .location-link-block.is-open {
    background-color: #001543;
    color: #fff;
}

#panel .location-link-block:hover a:not(.open-info-window),
#panel .location-link-block.is-open a:not(.open-info-window) {
    color: #fff;
}

.location-data-container {
    padding: 0;
    font-size: 16px;
}

/* The address, the phone/text/fax lines and the links are all <br>-separated
 * siblings in one container, so the address needs a block wrapper of its own
 * before anything can be spaced away from it. Emitted by BOTH the server panel
 * and the GeoJSON `address` the JS builders interpolate. */
.location-address {
    display: block;
    margin-bottom: .55em;
}

/* ⚠ The first contact line still carries a leading <br> — phoneLine(),
 * textLine() and faxLine() each begin with one, and so does the panel, because
 * they were written to follow an INLINE address. Now that .location-address is
 * a block that <br> renders an empty line on top of its margin. Hiding it here
 * keeps all four builders untouched and works whichever line comes first when
 * an office has no phone. */
.location-address + br {
    display: none;
}

.location-links {
    margin-top: 12px;
}

.location-distance {
    margin: 8px 0 0;
    font-weight: 700;
}

body .map-section p {
    line-height: 1.4;
    margin-bottom: 0;
}

/* ----- Map column ----- */
section.map-section .map-column {
    position: relative;
}

.glacial-map-div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------ *
 * Responsive — stack the search column above a full-width map. We set
 * this explicitly (higher specificity than Webflow's base .map-section)
 * so the map always gets full width on phones/small tablets.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
    section.map-section {
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    /* Until a search returns something the column holds only the heading and
       the ZIP field, so let it size to its content rather than reserving 55vh
       of empty box. Webflow's own `overflow: scroll` at this width is reset
       for the same reason — the scroller moves onto #panel below. */
    section.map-section .location-search-column {
        width: 100%;
        max-height: none;
        overflow: visible;
        padding-top: 20px;
    }

    /* webflow.css narrows .search-loc to 15px side padding here; keep the h1 flush. */
    .location-search-column .location-search-heading {
        margin-bottom: 12px;
        padding: 0 15px;
        font-size: 1.6em;
    }

    /* ----- Card list: hidden on phones until a search (GSD, 2026-09-15) -----
       Client: a phone should open on the ZIP field and the map, not on 48
       A–Z cards the visitor has to scroll past to reach either. The list is
       still in the DOM (crawlable, and the desktop layout is untouched) —
       it is only display:none at this width.

       Hiding is CSS, and the default state needs no class, so the full list
       can never flash before g-maps.js runs; that script only flips
       .map-has-results on the section (setMapResultsState()) when a ZIP or
       "use my location" search produces results, and back off when the
       search is cleared.

       #panel is an id (1,0,0), so every rule here has to out-specify the
       `#panel { display: flex }` base rule — hence the element+class prefix. */
    section.map-section #panel {
        display: none;
    }

    /* Capped and self-scrolling rather than free-flowing: the search radius
       is 200 miles (maxDistance in g-maps.js), which from anywhere in the Bay
       Area ranks most of the ~46 offices — several thousand pixels of cards
       between the ZIP field and the map. 50vh shows three cards and leaves the
       top of the map within one flick. */
    section.map-section.map-has-results #panel {
        display: flex;
        max-height: 50vh;
        overflow-y: auto;
        margin-bottom: 20px;
        border-top: 1px solid #ededed;
    }

    section.map-section .map-column {
        width: 100%;
        min-height: 0;
    }

    /* Drop the absolute fill on mobile; render the map as a normal block.
       The 65vh box this replaced was taller than it was wide (549px on an
       844px phone); the client asked for a square, so aspect-ratio pins it to
       1:1 at every phone width and gives the container a definite height for
       the Maps API to size to.
       ⚠ Shrinking the map broke the initial zoom once: fitBounds() applies its
       padding PER SIDE, and g-maps.js passed a flat 110 — 220px in each axis,
       which a short map cannot give up, so Google fell back to the world view.
       boundsPadding() in that file now caps it at 18% of the smaller side. */
    section.map-section .glacial-map-div {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

@media screen and (max-width: 479px) {
    .gm-style-iw {
        width: 250px !important;
    }
}

/* ------------------------------------------------------------------ *
 * Affiliate byline (GSD, 2026-09-01)
 * ------------------------------------------------------------------ */

/* Many GSD offices still trade under the practice brand they were acquired as
   — "Duncan Dermatology", "Allura Skin & Laser Center" — and the client wanted
   that reading under the office name. Emitted by the theme's
   gsd_location_affiliate_html() into #panel, and by affiliateLine() in
   g-maps.js for the search-rebuilt cards and the map info window. Offices with
   no acquired brand fall back to "Golden State Dermatology", so the line is
   always present and the spacing below can assume it. */

/* The title now leads a two-line name block, so the gap under it moves to the
   byline instead of sitting between the two halves of the same name. */
.location-link-block .location-title,
.map-info-window .h3-marg {
    margin-bottom: 2px;
}

/* The `body .map-section p` reset above zeroes margin-bottom at (0,2,1), so
   this needs to match that specificity and follow it — a bare .location-affiliate
   would silently lose. */
.map-section p.location-affiliate,
.map-info-window p.location-affiliate {
    margin: 0 0 10px;
    font-size: 1.05em;
    font-style: italic;
    font-weight: 700; /* client, 2026-09-23: affiliate names in bold */
    line-height: 1.3;
    color: var(--color-14, #75787b);
}

/* Hover/open turns the card navy — keep the byline legible on it, a shade below
   the white the rest of the card switches to so it stays secondary. */
#panel .location-link-block:hover .location-affiliate,
#panel .location-link-block.is-open .location-affiliate {
    color: rgba(255, 255, 255, .82);
}

/* Card status ("Now Open", "Opening October 15th"): ACF location_status, client
   2026-10-12. A small gold badge under the byline. Navy on gold is ~7.3:1, and it
   stays readable when the card turns navy on hover/open, so it needs no hover
   override. (0,2,1) to beat the same `body .map-section p` reset as the byline. */
.map-section p.location-status,
.map-info-window p.location-status {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 8px;
    background-color: var(--color-6, #d29f13);
    color: var(--color-2, #001543);
    font-size: .85em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
}