/**
 * Elephants Deli Store Locator — Frontend Styles
 *
 * Loaded after wp-store-locator/css/styles.css (priority 20)
 * so these rules override plugin defaults cleanly.
 *
 * Naming convention: .edsl-* for all companion-plugin classes.
 *
 * @package ElephantsDeli_StoreLocator
 * @version 1.3.0
 */

/* =========================================================================
   1. Location-type badge
   Appears at the top of each store listing card in the results panel.
   Colour palette mirrors the map marker colours:
     Deli      → dark-green  (#3d6b35 approximation of the marker)
     Grab & Go → orange      (#cc6600 approximation of the marker)
     Airport   → red         (#fa4339)
     New Seasons → green     (#5CE65C)
   ========================================================================= */

.edsl-location-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
    line-height: 1.6;
    color: #ffffff;
}

/* Elephants Delicatessens — dark green */
.edsl-location-badge--deli {
    background-color: #3d6b35;
}

/* Grab and Go — orange */
.edsl-location-badge--grabandgo {
    background-color: #cc6600;
}

/* Airport Locations — red (#fa4339) */
.edsl-location-badge--airport {
    background-color: #fa4339;
}

/* New Seasons — green (#5CE65C) */
.edsl-location-badge--newseasons {
    background-color: #5CE65C;
    color: #ffffff; /* White text for better contrast on green background */
}

/* =========================================================================
   2. Map + sidebar layout
   Default WPSL split: map 66.5% (float right) / results list 33% (float left).
   We push to a fixed 300px sidebar on the left, map takes the remainder.
   ========================================================================= */

/* Results sidebar — fixed 300px wide */
#wpsl-result-list {
    width: 300px;
}

/* Map — fills everything to the right of the 300px sidebar + 1% gutter */
#wpsl-gmap {
    width: calc(100% - 320px); /* 300px sidebar + 20px breathing room */
}

/* Bump up the map height so it feels substantial at full width.
   WPSL defaults to 400px; 520px works well for a wide map. */
#wpsl-gmap.wpsl-gmap-canvas {
    height: 520px;
}

/* =========================================================================
   3. Responsive — collapse to stacked layout on narrow screens
   ========================================================================= */

@media (max-width: 675px) {
    #wpsl-result-list {
        width: 100%;
    }

    #wpsl-gmap {
        width: 100%;
    }

    #wpsl-gmap.wpsl-gmap-canvas {
        height: 360px;
    }
}

/* =========================================================================
   4. Store listing panel — general overrides
   ========================================================================= */

/* Tighten padding inside each listing card slightly to fit the narrower sidebar */
#wpsl-wrap #wpsl-result-list li {
    padding: 10px 10px 10px 10px;
}