/* ==========================================================================
   OUR BRANCHES PAGE — styles scoped to /our-branches/ only.
   ========================================================================== */

/* ===== Search box ===== */
.branches-search-wrap { max-width: 560px; margin: 0 auto var(--space-8); }
.branches-search-field { position: relative; }
.branches-search-field svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-on-dark-muted); pointer-events: none; }
.branches-search-field input { width: 100%; background: var(--navy-800); border: 1.5px solid var(--border-on-dark); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) * 2 + 20px); color: var(--white); font-family: var(--font-body); font-size: var(--fs-md); }
.branches-search-field input:focus { border-color: var(--accent); }
.branches-search-field input::placeholder { color: var(--text-on-dark-muted); }
.branches-count { text-align: center; font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: var(--space-3); }

/* ===== Branch card grid ===== */
.branches-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
@media (max-width: 1024px) { .branches-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .branches-grid { grid-template-columns: 1fr; } }

.branch-card { background: var(--navy-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.branch-card h3 { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
/* City name links through to that branch's individual page for the 19 cities that have
   one (see branches.js CITY_PAGE_SLUGS) — the other 11 stay plain text, inheriting the
   same color already set above. */
.branch-card h3 a:hover, .branch-card h3 a:focus-visible { text-decoration: underline; }
.branch-card address, .branch-card .branch-card-pending { font-style: normal; font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: var(--lh-normal); }
.branch-card .branch-card-pending { font-style: italic; }
.branch-card-contact { font-size: var(--fs-sm); }
.branch-card-contact a { color: var(--text-on-dark-muted); text-decoration: none; }
.branch-card-contact a:hover { color: var(--accent); text-decoration: underline; }
.branch-card-phones a { display: block; }
.branch-card .btn { align-self: flex-start; margin-top: var(--space-2); }
/* .btn-outline-light is styled for light card backgrounds elsewhere on the
   site — these cards have a dark background, so it needs the inverse
   treatment, scoped to avoid touching the shared class (same fix as the
   product hero CTA and Contact Us "Get Directions" button). */
.branch-card .btn-outline-light { border-color: var(--white); color: var(--white); }
.branch-card .btn-outline-light:hover { border-color: var(--accent); background: var(--white); color: var(--navy-900); }

.branches-empty { text-align: center; color: var(--text-on-dark-muted); padding: var(--space-8) 0; }
.branches-empty[hidden] { display: none; }

/* ===== Cities without a published address yet ===== */
.branches-unlisted-note { text-align: center; font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: var(--space-6); }