/* ============================================================================
   Joenit public site — dealer locator page.
   Layered on top of styles.css (shares the :root palette + top chrome). Owns
   only the locator: filter sidebar, dealer cards and the Leaflet map.
   ========================================================================== */

/* page intro band */
.dealers__head{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1rem,4vw,2.5rem) .6rem;
}
.dealers__head h1{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.5rem)}
.dealers__head p{color:var(--text-soft); max-width:60ch; margin-top:.5rem}

/* a "this is placeholder data" ribbon — shown only while dealers.json is sample */
.sampleribbon{
  max-width:var(--maxw); margin:.8rem auto 0;
  padding:.55rem .9rem; border-radius:var(--radius-sm);
  background:#fff6e5; border:1px solid #f1d59a; color:#8a5a00;
  font-size:.86rem; font-weight:600;
}
.sampleribbon[hidden]{display:none}

/* =============================== locator layout ========================== */
.locator{
  max-width:var(--maxw); margin:1rem auto clamp(2rem,6vw,4rem);
  padding:0 clamp(1rem,4vw,2.5rem);
  display:grid; grid-template-columns:minmax(300px,360px) 1fr; gap:1.2rem;
  align-items:start;
}

.locator__panel{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column;
  max-height:calc(100vh - var(--chrome-h) - 2rem);
  position:sticky; top:calc(var(--chrome-h) + 1rem);
}

/* filters */
.filters{padding:1rem 1.1rem; border-bottom:1px solid var(--panel-edge)}
.filters__row{margin-bottom:.85rem}
.filters__row:last-child{margin-bottom:0}
.filters__label{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grey-500); margin-bottom:.4rem;
}
.search{
  width:100%; padding:.6rem .75rem; font:inherit;
  border:1px solid var(--grey-300); border-radius:var(--radius-sm);
  background:var(--grey-50); color:var(--text);
}
.search:focus{outline:2px solid var(--accent-hi); outline-offset:1px; background:#fff}

.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  --c:var(--steel);
  border:1px solid var(--grey-300); background:#fff; color:var(--grey-700);
  font:inherit; font-weight:600; font-size:.82rem; cursor:pointer;
  padding:.34rem .7rem; border-radius:999px; transition:.15s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.chip::before{content:""; width:.6rem; height:.6rem; border-radius:50%; background:var(--c)}
.chip:hover{border-color:var(--c)}
.chip.on{background:var(--c); color:#fff; border-color:var(--c)}
.chip.on::before{background:#fff}
.chip--plain::before{display:none}

.locate{
  width:100%; margin-top:.2rem; padding:.6rem .75rem; font:inherit; font-weight:600;
  border:1px solid var(--grey-300); border-radius:var(--radius-sm);
  background:var(--grey-100); color:var(--blue-800); cursor:pointer; transition:.15s;
}
.locate:hover{background:var(--grey-200)}
.locate__note{font-size:.74rem; color:var(--grey-500); margin-top:.35rem}

/* dealer list */
.listhead{
  padding:.6rem 1.1rem; font-size:.78rem; font-weight:700; color:var(--text-soft);
  border-bottom:1px solid var(--panel-edge); background:var(--grey-50);
}
.dealerlist{overflow-y:auto; flex:1}
.dealercard{
  padding:.85rem 1.1rem; border-bottom:1px solid var(--grey-100); cursor:pointer; transition:.12s;
}
.dealercard:hover,.dealercard.active{background:var(--grey-50)}
.dealercard__name{font-weight:700; color:var(--ink); font-size:.98rem}
.dealercard__addr{font-size:.85rem; color:var(--text-soft); margin-top:.15rem}
.dealercard__links{display:flex; gap:.9rem; margin-top:.4rem; font-size:.82rem; font-weight:600}
.dealercard__links a{color:var(--accent)}
.dealercard__links a:hover{text-decoration:underline}
.dealercard__brands{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem}
.empty{padding:1.4rem 1.1rem; color:var(--text-soft); font-size:.9rem}

/* tier chips (color = brand accent; label = brand tier from the data) */
.tierchip{
  --c:var(--steel);
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; color:#fff; background:var(--c);
  padding:.16rem .5rem; border-radius:999px; white-space:nowrap;
}

/* map */
.locator__map{
  height:calc(100vh - var(--chrome-h) - 2rem);
  min-height:460px;
  position:sticky; top:calc(var(--chrome-h) + 1rem);
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--panel-edge); box-shadow:var(--shadow-sm); background:var(--grey-100);
}
#map{width:100%; height:100%}
.leaflet-popup-content{font-family:var(--font)}
.leaflet-popup-content .pop__name{font-weight:700; color:var(--ink)}
.leaflet-popup-content .pop__addr{color:var(--text-soft); margin:.2rem 0 .35rem}
.leaflet-popup-content .dealercard__brands{margin-top:.3rem}

/* =============================== responsive ============================== */
@media (max-width:860px){
  .locator{grid-template-columns:1fr}
  .locator__map{
    position:static; height:54vh; min-height:340px; order:-1; /* map first on phone */
  }
  .locator__panel{position:static; max-height:none}
  .dealerlist{max-height:60vh}
}