html {
    scroll-behavior: smooth;
}

/*
 * .hero-locations — Full-viewport hero banner for the Locations page.
 * Uses flexbox to vertically center content inside an 82vh tall section.
 * overflow: hidden clips the absolutely-positioned background image and overlay.
 * Horizontal padding keeps text away from the viewport edges.
 */
.hero-locations {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

/*
 * .hero-bg-wrapper, picture, img — Background image layer for the hero banner.
 * All three elements are stretched to fill the full hero container via absolute
 * positioning and 100% dimensions. object-fit: cover ensures the image crops
 * rather than distorts. z-index: 1 keeps it beneath the overlay and content.
 */
.hero-bg-wrapper,
.hero-bg-wrapper picture,
.hero-bg-wrapper img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/*
 * .hero-bg-overlay — Transparent color overlay that sits above the background image.
 * Positioned to cover the full hero area at z-index 2, between the image and content.
 * background: none is a placeholder — change to a semi-transparent color or gradient
 * to darken or tint the hero image for better text legibility.
 */
.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;

    background: none;
}

/*
 * .hero-locations-content — Foreground text container inside the hero banner.
 * Positioned at z-index 3 to sit above both the background image and the overlay.
 * max-width constrains the readable line length on wide screens.
 * White text color provides contrast against the darker hero background.
 */
.hero-locations-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    color: #ffffff;
}

/*
 * .hero-locations-title — Large bold headline displayed in the hero section.
 * clamp() scales the font fluidly from 3.5rem on small screens up to 5.5rem on large.
 * font-weight: 900 and letter-spacing: -1px give it a tight, impactful appearance.
 * text-shadow adds a subtle drop shadow to keep white text readable over any image.
 * white-space: nowrap prevents the title from wrapping on wider viewports.
 */
.hero-locations-title {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 900;
    line-height: 1.0;
    margin: 0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero-locations-subhead {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    font-weight: 900;
    margin: 0;
    line-height: 1.0;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.hero-word {
    display: inline;
}

/*
 * .hero-locations-subtext — Supporting body text shown beneath the hero headlines.
 * The smallest of the three text elements, scaled from 1.4rem to 1.8rem via clamp().
 * font-weight: 300 gives it a delicate appearance compared to the bold headings above.
 * opacity: 1 keeps the text fully visible despite the lighter weight.
 */
.hero-locations-subtext {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    max-width: 680px;
    margin: 0 0 28px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.hero-locations-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1C48AA;
    color: #ffffff;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    transition: background 0.2s;
    width: fit-content;
}

.hero-locations-btn:hover {
    background: #1C48AA;
    color: #ffffff;
}

/*
 * Mobile breakpoint (max-width: 768px) — Adjusts the hero section layout for small screens.
 * Switches from a fixed viewport height to auto height with vertical padding so the hero
 * grows naturally around its content. Content alignment shifts to flex-start so text
 * anchors to the top rather than being centered in a potentially short container.
 * Allows the title to wrap onto multiple lines and adds top margin to the subtext.
 */
@media (max-width: 768px) {
    .hero-locations {
        height: 82vh;
        min-height: 520px;
        align-items: center;
        padding: 40px 24px 60px;
        overflow: hidden;
    }



    .hero-locations-content {
        text-align: left;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .hero-locations-title {
        font-size: clamp(3rem, 14vw, 5rem);
        white-space: normal;
    }

    .hero-locations-subhead {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .hero-word {
        display: block;
    }

    .hero-locations-subtext {
        max-width: 100%;
        font-size: 1.1rem;
        margin-top: 15px;
    }
}

/*
 * :root — Global CSS custom properties (design tokens) for the Store Locator module.
 * --bbos-blue is the primary brand blue used for headings, buttons, and accents.
 * --bbos-blue-light is a pale tint used for hover/active background highlights.
 * --bbos-blue-mid is a darker shade used for hover states on blue buttons.
 * --bbos-gray is a neutral mid-grey for supporting text and secondary content.
 * --bbos-border is a very light grey used for dividing lines and borders throughout the module.
 */
:root {
    --bbos-blue: #1C48AA;
    --bbos-blue-light: #dce8ff;
    --bbos-blue-mid: #1C48AA;
    --bbos-gray: #6b7280;
    --bbos-border: #e5e7eb;
}

/*
 * .store-locator-module — Outermost wrapper for the entire Store Locator section.
 * Uses flex column layout so the intro text stacks above the main locator layout box.
 * Height is set to 85vh with a 700px minimum so the module fills most of the viewport
 * without overflowing on very short screens. Centered with auto horizontal margins
 * and capped at 1400px wide to suit the wide three-column design.
 */
.store-locator-module {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 85vh;
    min-height: 700px;
    max-width: 1400px; /* Fits the wide layout in the mockup */
    margin: 40px auto;
    padding: 0 20px;
    background: #fff;
    font-family: inherit;
}

/*
 * .locator-intro — Introductory text area above the map/list layout.
 * flex-shrink: 0 prevents this section from being compressed when the layout
 * box below grows to fill remaining space. Bottom padding separates it visually
 * from the locator layout and search controls below.
 */
.locator-intro {
    box-sizing: border-box;
    padding: 0 0 30px 0;
    flex-shrink: 0;
}

/*
 * .locator-intro h2 — Large section heading inside the intro area.
 * Font scales fluidly from 2.5rem to 4.5rem using clamp() for responsive sizing.
 * color uses the --bbos-blue token with !important to override any theme-level heading styles.
 * Tight letter-spacing and heavy font-weight give it a bold, brand-aligned appearance.
 */
.locator-intro h2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: var(--bbos-blue) !important; /* Overrides theme defaults */
    margin: 0 0 10px 0;
    letter-spacing: -1px;
}

/*
 * .locator-intro p — Descriptive paragraph beneath the intro heading.
 * Uses a lighter blue (#4A72B2) to distinguish it from the primary heading color.
 * Font size scales between 1.2rem and 1.8rem, keeping it readable at all widths.
 * !important ensures the custom color overrides any inherited theme paragraph styles.
 */
.locator-intro p {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #4A72B2 !important; /* The lighter blue from the mockup */
    margin: 0 0 30px 0;
    font-weight: 400;
}

/*
 * .search-controls — Flex row container wrapping the search input and submit button.
 * Uses relative positioning so the autocomplete dropdown can be absolutely placed
 * directly beneath the input. max-width caps the search bar at 450px on desktop.
 */
.search-controls {
    display: flex;
    align-items: center;
    max-width: 450px;
    position: relative;
}

/*
 * .search-autocomplete — Dropdown suggestion panel that appears below the search input.
 * Hidden by default (display: none) and shown by adding the .is-open class via JS.
 * Positioned absolutely to align with the left edge of the input and ends before
 * the search button (right: 80px). A box-shadow separates it visually from the page.
 * max-height and overflow-y allow scrolling when there are many suggestions.
 */
.search-autocomplete {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 80px; /* lines up under the input, not the button */
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 200;
    max-height: 300px;
    overflow-y: auto;
}

/*
 * .search-autocomplete.is-open — Visible state for the autocomplete dropdown.
 * Added dynamically via JavaScript when the input has matching suggestions.
 * Overrides display: none to render the dropdown panel.
 */
.search-autocomplete.is-open {
    display: block;
}

/*
 * .autocomplete-item — Individual suggestion row inside the autocomplete dropdown.
 * Padding gives each row comfortable tap/click targets. A subtle bottom border
 * visually separates each suggestion. The background transition smooths hover feedback.
 */
.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}

/*
 * .autocomplete-item:last-child — Removes the divider border from the final suggestion row.
 * Prevents a double-border effect at the bottom of the dropdown panel.
 */
.autocomplete-item:last-child {
    border-bottom: none;
}

/*
 * .autocomplete-item:hover and .autocomplete-item.is-focused — Highlight states for suggestions.
 * A pale blue tint (#eef3ff) is applied on mouse hover or keyboard focus navigation,
 * providing clear visual feedback for which item is about to be selected.
 */
.autocomplete-item:hover,
.autocomplete-item.is-focused {
    background: #eef3ff;
}

/*
 * .autocomplete-item-name — Store name label within an autocomplete suggestion row.
 * Displayed in bold with a blue color to visually prioritize the store name
 * over the secondary city line. Slightly reduced font-size fits two lines compactly.
 */
.autocomplete-item-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1C48AA;
}

/*
 * .autocomplete-item-city — City/location detail shown beneath the store name in a suggestion row.
 * Smaller and grey to act as secondary information, visually subordinate to the store name.
 * A small top margin separates it from the name line above.
 */
.autocomplete-item-city {
    font-size: 0.82rem;
    color: #777;
    margin-top: 2px;
}

/*
 * #store-search-input — Text input field for the store search bar.
 * flex: 1 lets it grow to fill available space next to the fixed-width button.
 * border-right: none and a left-only border-radius create a seamless join
 * between the input and the adjacent search button. Height matches the button at 60px.
 */
#store-search-input {
    flex: 1;
    height: 60px;
    padding: 0 20px;
    font-size: 1.1rem;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
    color: #333;
}

/*
 * #btn-search — Icon-only submit button attached to the right side of the search input.
 * The button text is hidden (color: transparent) and replaced by an SVG magnifying glass
 * icon embedded as a data URI background-image. background-size and background-position
 * center the icon within the 80×60px button. Transitions the background color on hover.
 */
#btn-search {
    width: 80px;
    height: 60px;
    background-color: var(--bbos-blue) !important;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    /* This replaces the "Search" text with an SVG magnifying glass */
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s;
}

/*
 * #btn-search:hover — Darkened state for the search button on mouse hover.
 * Switches to the mid-blue token to give clear interactive feedback.
 */
#btn-search:hover {
    background-color: var(--bbos-blue-mid) !important;
}

/*
 * #btn-geolocate — Geolocation trigger button hidden from the UI.
 * Removed from layout entirely with display: none to match the design mockup,
 * which does not include a geolocation option in the search bar.
 */
#btn-geolocate { display: none; }

/*
 * .locator-layout — Three-column layout box containing the store card, list, and map.
 * flex-grow: 1 causes it to expand and fill all remaining vertical space in the module.
 * overflow: hidden clips map tiles and card content to the rounded border-radius corners.
 * The light grey background (#f4f5f7) shows through the transparent middle column.
 */
.locator-layout {
    display: flex;
    flex-grow: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bbos-border);
    background: #f4f5f7; /* Sets the grey background for the middle list */
}

/*
 * .locator-top-row — Desktop wrapper that acts as a transparent flex pass-through.
 * display: contents removes this element from the layout box model, so its children
 * (the active store card and the store list) participate directly in the parent flex row.
 * This allows mobile and desktop to use the same markup with different layout strategies.
 */
.locator-top-row {
    display: contents;
}

/*
 * .active-store::-webkit-scrollbar — Custom narrow scrollbar for the active store card.
 * Reduces the default scrollbar width to 4px so it does not visually crowd
 * the card's content when the store details overflow the card height.
 */
.active-store::-webkit-scrollbar {
    width: 4px;
}

/*
 * .active-store::-webkit-scrollbar-track — Background track of the custom scrollbar.
 * Light grey with rounded corners so the track blends with the card background.
 */
.active-store::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

/*
 * .active-store::-webkit-scrollbar-thumb — Draggable scroll indicator on the card scrollbar.
 * Uses the brand blue to signal interactivity, with rounded corners matching the track.
 */
.active-store::-webkit-scrollbar-thumb {
    background: #1C48AA;
    border-radius: 4px;
}

/*
 * .active-store::-webkit-scrollbar-thumb:hover — Darkened scrollbar thumb on hover.
 * Deepens to the dark blue brand tone for clear hover feedback on the scroll handle.
 */
.active-store::-webkit-scrollbar-thumb:hover {
    background: #1C48AA;
}

/*
 * .active-store — Left column card that displays the selected store's full details.
 * A fixed 320px width with flex-shrink: 0 keeps it stable alongside the list and map.
 * Internal margin and padding inset the card from the layout container edges.
 * box-shadow lifts it visually above the grey background. z-index: 3 ensures it
 * renders above the map layer when layouts overlap on smaller screens.
 */
.active-store {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #ffffff;
    margin: 20px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    z-index: 3;
    border: none;
}

/*
 * .active-store h3 — Store name heading inside the active store detail card.
 * Large bold text in the primary brand blue draws the eye to the selected store name.
 * line-height: 1.25 keeps the heading compact when the store name wraps to two lines.
 */
.active-store h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--bbos-blue) !important;
    margin: 0 0 16px 0;
    line-height: 1.25;
}

/*
 * .store-details, .store-hours, .distance-metric — Body text elements within the store card.
 * Shares a consistent grey text color, comfortable line-height, and no extra bottom margin
 * so spacing is controlled by the headings and wrappers above each block rather than
 * by collapsing margins between these elements.
 */
.store-details, .store-hours, .distance-metric {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 0;
}

/*
 * .active-actions — Container for the action buttons at the bottom of the store card.
 * Top margin pushes the button group away from the details content above it,
 * creating a clear visual break before the primary call-to-action.
 */
.active-actions { margin-top: 30px; }

/*
 * .btn-primary — Full-width blue call-to-action button used in the store card.
 * display: block and width: 100% stretch it across the card's padding box.
 * !important flags on color, background, and text-decoration override inherited
 * theme anchor styles. Smooth background transition provides hover feedback.
 */
.btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0;
    background-color: var(--bbos-blue) !important;
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background 0.2s;
}

/*
 * .btn-primary:hover — Darkened state for the primary CTA button on hover.
 * Uses --bbos-blue-mid to darken the button background and signal interactivity.
 */
.btn-primary:hover {
    background-color: var(--bbos-blue-mid) !important;
}

/*
 * .store-list — Middle scrollable column listing all available store locations.
 * Fixed at 300px wide with flex-shrink: 0 to stay stable next to the map.
 * overflow-y: auto enables vertical scrolling when the list exceeds the layout height.
 * transparent background lets the grey of .locator-layout show through between items.
 * A right border visually separates the list from the map column.
 */
.store-list {
    width: 300px;
    flex-shrink: 0;
    overflow-y: auto;
    background: transparent; /* Lets the grey background show through */
    border-right: 1px solid #d1d5db;
    z-index: 2;
}

/*
 * .store-list-item — Individual row in the store list middle column.
 * Generous padding makes each item easy to tap or click. A bottom border separates
 * rows visually. A fast background transition provides smooth hover feedback.
 */
.store-list-item {
    padding: 25px 20px;
    border-bottom: 1px solid var(--bbos-border);
    cursor: pointer;
    transition: background 0.15s;
}

/*
 * .store-list-item.is-active — Highlighted state for the currently selected store row.
 * The pale blue background and prominent left border accent together indicate
 * which store corresponds to the detail card currently shown on the left.
 */
.store-list-item.is-active {
    background: var(--bbos-blue-light);
    border-left: 4px solid var(--bbos-blue);
}

/*
 * .store-list-item .store-item-address — Address text inside a store list row.
 * Slightly smaller and darker grey than card body text so it reads clearly
 * in the compact list without competing with the store name above it.
 */
.store-list-item .store-item-address {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin: 0 0 8px 0;
}

/*
 * .locator-map-container — Right column that fills remaining space with the map.
 * flex-grow: 1 causes it to take all horizontal space not claimed by the card
 * and the store list. position: relative is required so the absolutely-positioned
 * #bbos-map canvas fills this container correctly.
 */
.locator-map-container {
    flex-grow: 1;
    position: relative;
}

/*
 * #bbos-map — The map canvas element rendered by the mapping library.
 * Absolutely fills its relative-positioned container so the map tiles
 * cover the entire right column at all viewport sizes. The light blue-grey
 * background color shows while map tiles are still loading.
 */
#bbos-map {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #e8edf2;
}

/*
 * .card-heading — Blue subheading labels used inside the active store detail card.
 * Separates sections such as "Hours" and "Address" from their body text.
 * Heavy font-weight and the primary brand blue create clear visual hierarchy
 * between these labels and the grey body text beneath them.
 */
.card-heading {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--bbos-blue) !important;
    margin: 22px 0 8px 0;
    letter-spacing: 0;
}

/*
 * .store-details — General body text style for address, hours, and other detail content.
 * Slightly larger line-height (1.75) than the shared rule above improves readability
 * for multi-line address and hours blocks inside the card.
 */
.store-details {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.75;
    margin-bottom: 0;
}

/*
 * .address-text — Address paragraph directly below the store name heading.
 * margin-top: 0 removes any extra top gap since the h3 above already
 * provides sufficient spacing via its own bottom margin.
 */
.address-text {
    margin-top: 0;
}

/*
 * .hours-list strong, .hours-list b — Day-of-week labels inside the hours list.
 * A darker near-black color (--bbos contrasted against #374151) distinguishes the
 * day names from the lighter grey time values beside them. Heavy font-weight
 * ensures the labels remain legible at the card's compact body text size.
 */
.hours-list strong,
.hours-list b {
    color: #374151;
    font-weight: 700;
}

/*
 * .active-store .active-actions — Action button container scoped to the store detail card.
 * Slightly more top margin than the global .active-actions rule, providing
 * additional breathing room between the last detail block and the CTA button.
 */
.active-store .active-actions {
    margin-top: 28px;
}

/*
 * .active-store .btn-primary — Get Directions button styled specifically within the card.
 * Overrides the generic .btn-primary with card-scoped sizing, heavier font-weight,
 * and a slightly larger border-radius to match the card's rounded aesthetic.
 * letter-spacing adds a subtle optical refinement to the button label text.
 */
.active-store .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--bbos-blue) !important;
    color: #ffffff !important;
    padding: 15px 20px;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
    letter-spacing: 0.01em;
}

/*
 * .active-store .btn-primary:hover — Hover state for the scoped card CTA button.
 * Darkens to --bbos-blue-mid for consistent hover feedback across all blue buttons.
 */
.active-store .btn-primary:hover {
    background-color: var(--bbos-blue-mid) !important;
}

/*
 * .active-store .distance-metric — Hides the distance readout from the store detail card.
 * The distance value is not part of the card design and is removed from view
 * with display: none while remaining in the DOM for potential JS use.
 */
.active-store .distance-metric {
    display: none;
}

/*
 * Mobile breakpoint (max-width: 768px) — Reorganizes the three-column layout for small screens.
 * The module switches to auto height and removes the fixed vh constraint.
 * The locator layout becomes a single column: the card and list sit side by side in a
 * flex row on top (row 1), with the map spanning full width below them (row 2).
 * Column widths switch from fixed pixels to flex fractions so both halves share space equally.
 * The map is given a fixed pixel height instead of growing to fill remaining space.
 */
@media (max-width: 768px) {
    .store-locator-module {
        height: auto;
        min-height: auto;
        margin: 20px 16px;
        padding: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .locator-layout {
        flex-direction: column;
        overflow: hidden;
        border: none;
        background: transparent;
    }

    /* Row 1: card + list side by side */
    .locator-top-row {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-bottom: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .active-store {
        width: 0;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.10);
        box-sizing: border-box;
    }

    .active-store h3 {
        font-size: 1rem;
    }

    .card-heading {
        font-size: 0.95rem;
        margin: 14px 0 4px;
    }

    .store-details {
        font-size: 0.85rem;
    }

    .active-store .btn-primary {
        padding: 10px 0;
        font-size: 0.9rem;
    }

    .store-list {
        display: none;
    }

    .store-list-item {
        padding: 14px 16px 14px 12px;
        font-size: 0.85rem;
    }

    /* Row 2: map full width */
    .locator-map-container {
        height: 280px;
        flex-grow: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    #bbos-map {
        position: relative;
        height: 280px;
    }

    .search-autocomplete {
        right: 0;
    }

    .search-controls {
        max-width: 100%;
    }
}