/* SE-F 12 — locations index + regional pages (/locations, /locations/{region}).
   Shares the storefront design language: mobile-first, WCAG-AA dark-on-light, tenant
   design tokens (var(--primary-color, …)) with neutral fallbacks. */

/* Pin the canvas: nothing else on these pages sets a page background, so a dark-mode
   browser (or WebView force-dark) would render the dark-on-light design unreadable. */
html {
    background: var(--surface-color, #fff);
    color-scheme: light;
}

body {
    margin: 0;
}

/* ---------- Header ---------- */
/* Cap the brand logo: an uncapped <img> renders at the asset's natural size (often huge). */
.location-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e7e7e7);
}

.location-header img {
    max-height: 2.5rem;
    width: auto;
}

/* ---------- Page container ---------- */
.locations-index {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
    color: var(--on-surface-color, #1a1a1a); /* AA: ~16:1 on white */
    font-family: var(--base-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.5;
}

.locations-index h1 {
    margin: 0.5rem 0 0.75rem;
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--on-surface-color, #111);
}

/* Regional intro copy block. */
.local-copy {
    max-width: 48rem;
    margin-bottom: 1.5rem;
    color: #555;
}

.local-copy p {
    margin: 0;
}

/* ---------- Branch cards ---------- */
.locations-index__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.locations-index__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border-color, #e7e7e7);
    border-radius: 0.75rem;
}

.locations-index__name {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

.locations-index__name a {
    color: var(--on-surface-color, #111);
    text-decoration: none;
}

.locations-index__name a:hover,
.locations-index__name a:focus-visible {
    text-decoration: underline;
}

/* Open/closed pill. AA on their surfaces. */
.locations-index__badge {
    align-self: flex-start;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.locations-index__badge--open {
    background: var(--success-surface, #e3f4e9);
    color: var(--success-color, #0a5c2b);
}

.locations-index__badge--closed {
    background: #efefef;
    color: #555;
}

.locations-index__address,
.locations-index__phone {
    margin: 0;
    color: #555;
    font-size: 0.9375rem;
}

.locations-index__phone a {
    color: var(--primary-color, #b3001b);
    text-decoration: none;
}

.locations-index__phone a:hover,
.locations-index__phone a:focus-visible {
    text-decoration: underline;
}

/* ---------- Opening hours (collapsed by default) ---------- */
.locations-index__hours-details summary {
    cursor: pointer;
    color: #555;
    font-size: 0.875rem;
}

.locations-index__hours {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.locations-index__hours th {
    padding: 0.125rem 0;
    font-weight: 500;
    text-align: left;
    color: #555;
}

.locations-index__hours td {
    padding: 0.125rem 0;
    text-align: right;
    color: var(--on-surface-color, #1a1a1a);
}

/* ---------- CTA ---------- */
/* margin-top auto pins the CTA to the card bottom so a grid row's buttons align. */
.locations-index__cta {
    margin: 0.25rem 0 0;
    margin-top: auto;
    padding-top: 0.75rem;
}

.locations-index__cta a {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background: var(--primary-color, #b3001b);
    color: var(--primary-text-color, #fff);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.locations-index__cta a:hover,
.locations-index__cta a:focus-visible {
    filter: brightness(0.92);
}