/* SE-F 12 — locations index + regional pages (/locations, /locations/{region}).
   Shares the storefront design language: mobile-first, and every colour resolved from the tenant
   theme tokens ThemeCss emits server-side — no hardcoded values, no var() fallbacks. The page
   always emits the full token set, so a fallback would only hide a missing declaration while
   making the token unreachable for per-tenant overrides. */

/* Pin the canvas: nothing else on these pages sets a page background, so a dark-mode
   browser (or WebView force-dark) would render the page's own colours unreadable. */
html {
    /* Meta/secondary text: a dimmed mix of the foreground it sits on. ThemeCss's --muted-color
       is a 55% mix, which lands at 3.8:1 on the neutral light canvas — below AA for labels this
       small — so these dim less. */
    --meta-color: color-mix(in srgb, var(--on-background-color) 70%, transparent);
    --meta-on-surface-color: color-mix(in srgb, var(--on-surface-color) 70%, transparent);

    background: var(--background-color);
    color-scheme: light;
}

body {
    margin: 0;
}

/* ---------- Page container ---------- */
/* The header is the shared .site-nav from ssr-chrome.css; the horizontal measure comes from
   .ssr-content on the same element, so this page is exactly as wide as the menu and landing
   pages (37950 AC3). Only the vertical rhythm is this page's own. */
.locations-index {
    padding-block: 1rem 3rem;
    color: var(--on-background-color);
    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-background-color);
}

/* Regional intro copy block — sits directly on the page canvas, so it takes the theme's muted
   token (derived from the canvas foreground) rather than a fixed grey. */
.local-copy {
    max-width: 48rem;
    margin-bottom: 1.5rem;
    color: var(--meta-color);
}

.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;
}

/* A card is a surface, so it sets both halves of the pair: the card used to be a fixed white
   panel, which left its Surface-derived text colours contrasting against a colour the tenant
   had not configured (38424). Everything inside it now resolves from Surface. */
.locations-index__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--surface-color);
    color: var(--on-surface-color);
    border: 1px solid var(--border-color);
    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);
    text-decoration: none;
}

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

/* Open/closed pill. Open is the semantic success pair; closed is a neutral chip — a faint tint
   over the card, carrying the card's own text colour. */
.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-color);
    color: var(--on-success-color);
}

.locations-index__badge--closed {
    background: var(--border-color);
    color: var(--on-surface-color);
}

/* Secondary text inside the card takes the surface's own dimmed foreground, not the canvas's:
   the card paints Surface, and the two need not be anywhere near each other. */
.locations-index__address,
.locations-index__phone {
    margin: 0;
    color: var(--meta-on-surface-color);
    font-size: 0.9375rem;
}

.locations-index__phone a {
    color: var(--primary-color);
    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: var(--meta-on-surface-color);
    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: var(--meta-on-surface-color);
}

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

/* ---------- 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;
}

/* --primary-text-color was never emitted by ThemeCss, so the label was always the fallback
   white whatever the tenant's Primary pair said. The emitted pair is --on-primary-color. */
.locations-index__cta a {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background: var(--primary-color);
    color: var(--on-primary-color);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

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