/* ============================================================================
   SchoolsFirst FCU — Locator demo
   All brand tokens live here at the top. Change these to restyle the whole app.
   ========================================================================== */
:root {
  /* Brand palette (tuned to the live SchoolsFirst locator) */
  --brand-navy:      #2d4452;  /* logo, nav text, map pins            */
  --slate:           #2f4f63;  /* "ATM/Branch Locator" sub-bar        */
  --filters-blue:    #2f5f86;  /* Filters button                      */
  --bronze:          #b07d2b;  /* LOG IN button + action links        */
  --bronze-dark:     #946618;
  --navy-50:         #eef2f6;
  --accent-teal:     #1f7a8c;  /* SchoolsFirst ATM pin                */
  --accent-gold:     #d39b2e;  /* CO-OP ATM pin                       */

  /* Neutrals */
  --ink:        #333a40;
  --ink-soft:   #6b757d;
  --line:       #e1e5ea;
  --bg:         #ffffff;
  --bg-soft:    #f6f7f9;

  /* Type */
  --font:       "Open Sans", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", "Liberation Serif", serif;

  /* Layout */
  --header-h: 132px;
  --subbar-h: 56px;
  --panel-w: 367px;
  --radius: 5px;
  --shadow: 0 1px 4px rgba(0,0,0,.10);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px; line-height: 1.45;
}

/* ------------------------------------------------------------------ Header */
/* Grid: desktop is two rows (logo+search / nav+login). Mobile collapses to a
   single bar (burger + logo + login) with the nav behind the burger. */
.site-header {
  position: relative;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brand  search"
    "nav    login";
  align-items: center;
  column-gap: 24px; row-gap: 10px;
  padding: 16px 40px;
}

.nav-toggle { display: none; }  /* shown on mobile only */

.brand { grid-area: brand; display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 56px; width: auto; display: block; }

.header-search { grid-area: search; justify-self: end; position: relative; width: 420px; max-width: 38vw; }
.header-search input {
  width: 100%; padding: 11px 44px 11px 14px;
  border: 1px solid #c9cfd6; border-radius: 3px; font-size: 15px; font-family: inherit;
}
.header-search input:focus { outline: none; border-color: var(--brand-navy); }
.header-search button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px;
  border: none; background: none; color: var(--brand-navy); cursor: pointer;
  display: grid; place-items: center;
}

.main-nav { grid-area: nav; display: flex; align-items: center; gap: 38px; }
.main-nav a { color: var(--brand-navy); font-weight: 600; font-size: 16px; text-decoration: none; }
.main-nav a:hover { color: var(--bronze); }

/* CTA2: white button with navy border + text */
.login-btn {
  grid-area: login; justify-self: end;
  background: #fff; color: var(--brand-navy); text-decoration: none;
  border: 2px solid var(--brand-navy);
  padding: 10px 28px; border-radius: 3px; font-weight: 700; letter-spacing: .5px; font-size: 15px;
}
.login-btn:hover { background: var(--brand-navy); color: #fff; }

/* --------------------------------------------------------------- Sub-bar */
.subbar {
  height: var(--subbar-h); background: var(--slate); color: #fff;
  display: flex; align-items: center; padding: 0 40px;
  font-size: 22px; font-weight: 700;
}

/* ----------------------------------------------------------- Locator shell */
.locator {
  position: relative;
  height: calc(100vh - var(--header-h) - var(--subbar-h));
  min-height: 480px;
}

/* ------------------------------------------------------------------ Panel */
/* Freestanding white card floating over the map (like the live site). */
.panel {
  position: absolute; top: 20px; left: 20px; bottom: 20px; width: var(--panel-w);
  z-index: 1000;
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); overflow: hidden;
}
/* Search & Filters collapse behind an icon toolbar (all widths) */
.mobile-toolbar { display: flex; gap: 10px; padding: 16px 18px; }
/* CTA2: white button, navy outline + text */
.mt-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 2px solid var(--brand-navy); border-radius: 4px; padding: 10px;
  font-family: inherit; font-weight: 700; font-size: 14px; color: var(--brand-navy); cursor: pointer;
}
.mt-btn:hover { background: var(--navy-50); }
.mt-btn svg { width: 18px; height: 18px; }
.mt-btn.active { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }

.panel-controls { display: none; padding: 4px 18px 16px; border-bottom: 1px solid var(--line); }
.filters-btn { display: none; } /* replaced by the toolbar icon */
.panel.search-open .panel-controls,
.panel.filters-open .panel-controls { display: block; }
.panel.search-open .search-row { display: block; }
.panel.filters-open .type-row { display: flex; }
.panel.filters-open .filters-panel { display: block; }

/* Search with bronze underline accent */
.search-row { display: none; position: relative; border-bottom: 2px solid var(--bronze); }
.search-row input {
  width: 100%; padding: 8px 40px 10px 2px; border: none; font-size: 17px; font-family: inherit;
}
.search-row input:focus { outline: none; }
.search-row .go {
  position: absolute; right: 0; bottom: 6px; background: none; border: none;
  color: var(--bronze); cursor: pointer; padding: 4px;
}

/* Checkboxes + Filters button row (revealed via the Filters icon) */
.type-row { display: none; align-items: center; gap: 22px; margin-top: 8px; }
.checkbox { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 17px; color: var(--ink); }
.checkbox input { width: 22px; height: 22px; accent-color: var(--brand-navy); cursor: pointer; }
.filters-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 9px;
  background: var(--filters-blue); color: #fff; border: none; cursor: pointer;
  padding: 11px 22px; border-radius: 3px; font-weight: 700; font-size: 15px;
}
.filters-btn:hover { filter: brightness(1.08); }

/* Collapsible filter chips */
.filters-panel { margin-top: 14px; display: none; }
.filters-panel.open { display: block; }
.filter-group + .filter-group { margin-top: 12px; }
.filter-group h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 20px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--ink); user-select: none;
}
.chip input { display: none; }
.chip.checked { background: var(--navy-50); border-color: var(--brand-navy); color: var(--brand-navy); }

/* Results */
.results { overflow-y: auto; flex: 1; min-height: 0; padding: 4px 14px 14px; }
.result {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  margin-top: 12px; cursor: pointer; position: relative; background: #fff;
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
}
.result:hover { box-shadow: var(--shadow); }
.result.active { border-color: var(--brand-navy); box-shadow: 0 0 0 1px var(--brand-navy); }
.result .pin { width: 36px; }
.result .pin svg { width: 36px; height: 36px; }
.result .pin .pin-img { display: block; margin: 2px auto 0; width: 24px; height: auto; }
.result-body { min-width: 0; }
.result .dist { position: absolute; top: 16px; right: 18px; font-size: 14px; color: var(--ink); font-weight: 600; }
.result h3 { margin: 0 0 5px; font-size: 17px; font-weight: 700; padding-right: 46px; }
.result h3 .title-link { color: var(--bronze); text-decoration: none; }
.result h3 .title-link:hover { color: var(--bronze-dark); text-decoration: underline; }
.result .addr { color: var(--ink); font-size: 14px; line-height: 1.4; margin: 0 0 8px; }
.result .wait { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }
.result .actions { display: flex; flex-wrap: wrap; gap: 18px; }
.result .action { color: var(--bronze); font-weight: 400; font-size: 14px; text-decoration: none; }
.result .action:hover { text-decoration: underline; color: var(--bronze-dark); }
.result .action.dir { font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.result .action .chev { flex: none; margin-top: 1px; }
.result .badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--navy-50); color: var(--brand-navy); text-transform: uppercase; letter-spacing: .3px;
  margin-right: 6px;
}
.result .badge.restricted { background: #fbeccd; color: #8a5a00; }
.no-results { padding: 40px 18px; text-align: center; color: var(--ink-soft); }

/* ------------------------------------------------------------------ Map */
.map-wrap { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; }

/* Map / Satellite icon toggle */
.map-layer-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow);
  cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 700;
  color: var(--brand-navy); padding: 8px 12px; line-height: 1;
}
.map-layer-toggle:hover { background: var(--bg-soft); }
.map-layer-toggle svg { width: 18px; height: 18px; flex: none; }

.pin-marker { display: grid; place-items: center; }
.pin-marker svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pin-marker.active svg { transform: scale(1.22); transform-origin: bottom center; }

/* Popup mirrors the result card layout */
.leaflet-popup-pane { z-index: 1100; } /* above zoom/satellite controls so it isn't clipped */
.leaflet-popup-content { margin: 14px 16px; font-family: var(--font); }
.popup { display: grid; grid-template-columns: 36px 1fr; gap: 12px; }
.popup .pin { width: 36px; }
.popup .pin svg { width: 36px; height: 36px; }
.popup .pin .pin-img { display: block; margin: 2px auto 0; width: 24px; height: auto; }
.popup-body { min-width: 0; }
.popup h3 { margin: 0 0 5px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.popup h3 .title-link { color: var(--bronze); text-decoration: none; }
.popup h3 .title-link:hover { color: var(--bronze-dark); text-decoration: underline; }
.popup .addr { color: var(--ink); font-size: 14px; line-height: 1.4; margin: 0 0 8px; }
.popup .wait { font-size: 14px; color: var(--ink-soft); margin: 0 0 10px; }
.popup .actions { display: flex; flex-wrap: wrap; gap: 18px; }
.popup .action { color: var(--bronze); font-size: 14px; text-decoration: none; }
.popup .action:hover { text-decoration: underline; color: var(--bronze-dark); }
.popup .action.dir { font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.popup .action .chev { flex: none; margin-top: 1px; }

/* Clean close X like the live site */
.leaflet-popup-close-button {
  font-size: 24px; color: var(--ink-soft); width: 30px; height: 30px;
  padding: 4px 8px 0 0; font-weight: 400;
}
.leaflet-popup-close-button:hover { color: var(--ink); }
.leaflet-popup-content-wrapper { border-radius: 8px; }

/* ------------------------------------------------------------------ Footer */
.site-footer { background: #f0f1f2; padding: 48px 40px; }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; }
.footer-brand { flex: 0 0 auto; margin-right: 24px; }
.footer-brand .brand-logo { height: 52px; width: auto; }
.footer-social { display: flex; gap: 14px; margin-top: 24px; }
.footer-social a { color: var(--slate); display: inline-grid; place-items: center; }
.footer-social a:hover { color: var(--brand-navy); }
.footer-social svg { width: 28px; height: 28px; fill: currentColor; }
.footer-col { flex: 0 0 auto; min-width: 170px; }
.footer-col h3 { color: var(--brand-navy); font-size: 17px; font-weight: 700; margin: 0 0 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 13px; }
.footer-col a { color: #3f5260; text-decoration: none; font-size: 16px; }
.footer-col a:hover { color: var(--brand-navy); text-decoration: underline; }
.footer-routing { margin-left: auto; color: var(--brand-navy); font-weight: 700; font-size: 17px; white-space: nowrap; }

@media (max-width: 980px) {
  .site-footer { padding: 36px 24px; }
  .footer-inner { gap: 32px; }
  .footer-routing { margin-left: 0; flex-basis: 100%; }
}

/* Mobile view toggle */
.view-toggle { display: none; }

/* ====================================================== Branch detail page */
:root { --hero: #4c7491; }

.hero { background: var(--hero); color: #fff; }
.hero-inner {
  max-width: 1280px; margin: 0 auto; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 0.95fr) 1fr; gap: 48px; align-items: start;
}
.hero-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: #d7dde2; margin-bottom: -90px; /* overlap below band like the live site */
}
.hero-photo.placeholder {
  display: grid; place-items: center; color: #8ea2b2; aspect-ratio: 4 / 3;
}
.hero-text h1 { margin: 6px 0 14px; font-size: 44px; font-weight: 700; line-height: 1.05; }
.hero-text .addr { display: inline-block; color: #fff; text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.5; margin: 0 0 16px; }
.hero-text .svc { font-size: 17px; line-height: 1.5; opacity: .95; margin: 0 0 26px; }
.hero-text a.addr:hover { text-decoration: underline; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-actions a {
  background: #fff; color: var(--hero); text-decoration: none; font-weight: 700;
  padding: 16px 30px; border-radius: 2px; font-size: 16px; letter-spacing: .3px;
}
.hero-actions a.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.hero-actions a:hover { filter: brightness(.96); }

.detail-cols {
  max-width: 1280px; margin: 0 auto; padding: 130px 40px 60px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
}
.detail-col { padding: 0 40px; }
.detail-col + .detail-col { border-left: 1px solid var(--line); }
.detail-col:first-child { padding-left: 0; }
.detail-col h2 { color: var(--hero); font-weight: 300; line-height: 1.2; font-size: calc(1.325rem + 0.9vw); margin: 0 0 .5rem; }

.hours-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 16px; line-height: 1.4; }
.hours-row .day { color: var(--ink); }
.hours-row .time { color: var(--ink); }
.hours-row.today { font-weight: 700; }
.hours-row.today .time { color: var(--hero); }

.svc-list { list-style: disc; margin: 0; padding-left: 22px; }
.svc-list li { padding: 2px 0; font-size: 16px; line-height: 1.4; }
.svc-list li .note { display: block; font-size: 13px; color: var(--ink-soft); margin-left: 2px; }

.holiday { padding: 10px 0; font-size: 16px; }
.holiday .hdate { font-weight: 700; }
.holiday .hname { color: var(--ink-soft); }

/* Divider between the info columns and the Location section (mobile only). */
.section-sep { display: none; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.section-sep::after { content: ""; display: block; border-top: 1px solid var(--line); }

.detail-map-wrap { max-width: 1280px; margin: 36px auto 60px; padding: 0 40px; }
.detail-map-wrap .map-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px;
}
.detail-map-wrap h2 { color: var(--hero); font-weight: 300; line-height: 1.2; font-size: calc(1.325rem + 0.9vw); margin: 0; }

/* Match Bootstrap's ≥1200px heading cap used on the live site. */
@media (min-width: 1200px) {
  .detail-col h2,
  .detail-map-wrap h2 { font-size: 2rem; }
}
.full-map-link { color: var(--bronze); font-weight: 700; text-decoration: none; font-size: 15px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.full-map-link .chev { flex: none; margin-top: 1px; }
.full-map-link:hover { text-decoration: underline; color: var(--bronze-dark); }
#detail-map { height: 360px; border: 1px solid var(--brand-navy); border-radius: var(--radius); }

@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-photo { display: none; }
  .hero-text h1 { font-size: 29px; }
  .hero-text .addr { font-size: 15px; margin: 0 0 12px; }
  .hero-text .svc { font-size: 14px; margin: 0 0 20px; }
  .hero-actions a { padding: 10px 16px; font-size: 13px; }
  .section-sep { display: block; }
  .detail-cols { grid-template-columns: 1fr; padding-top: 40px; gap: 36px; }
  .detail-col { padding: 0; }
  .detail-col + .detail-col { border-left: none; border-top: 1px solid var(--line); padding-top: 28px; }
}

/* ------------------------------------------------------------- Responsive */
@media (max-width: 980px) {
  :root { --header-h: auto; }

  /* Header: single bar = burger + logo + login; nav drops down behind burger. */
  .site-header {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "burger brand spacer login";
    column-gap: 12px; padding: 10px 16px;
  }
  .nav-toggle {
    display: inline-flex; grid-area: burger; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--brand-navy); padding: 4px;
  }
  .nav-toggle svg { width: 28px; height: 28px; display: block; }
  .brand-logo { height: 34px; }
  .header-search { display: none; }
  .login-btn { padding: 8px 14px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }

  /* Align sub-bar title with the search input's left edge. */
  .subbar { padding: 0 22px; font-size: 20px; }

  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1500;
    display: none; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px rgba(0,0,0,.10);
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav a { padding: 14px 20px; border-top: 1px solid var(--line); font-size: 16px; }

  /* Fill the screen (minus header + sub-bar) so the footer stays below the
     fold and only appears once you scroll past the results. */
  .locator { height: calc(100vh - 108px); height: calc(100dvh - 108px); }
  /* Drop the floating card; panel becomes a full-width list. */
  .panel { position: static; width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; }
  .map-wrap { display: none; }
  .locator.show-map .panel { display: none; }
  .locator.show-map .map-wrap { display: block; }

  /* Search/filters toolbar tightens up a touch on mobile */
  .mobile-toolbar { padding: 12px 16px; }

  .view-toggle {
    display: flex; position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    z-index: 5000; background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.30); border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  }
  .view-toggle button { border: none; background: #fff; padding: 10px 22px; font-weight: 700; cursor: pointer; color: var(--brand-navy); }
  .view-toggle button.active { background: var(--brand-navy); color: #fff; }

  /* Minimal footer: just logo + socials, centered. */
  .site-footer { padding: 28px 20px; }
  .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .footer-col, .footer-routing { display: none; }
  .footer-brand { margin: 0; display: flex; flex-direction: column; align-items: center; }
  .footer-brand .brand-logo { height: 40px; }
  .footer-social { margin-top: 18px; gap: 16px; justify-content: center; }
  .footer-social svg { width: 26px; height: 26px; }
}