/* Market selector — region → state → market drill-down.
   Behaviour: assets/js/components/market-selector.js
   Notes: docs/component-market-selector-notes.md
   Full hierarchy renders in HTML; script toggles visibility only. */

/* ── Shell ── */

.hub-markets{
  background:#faf9f6;
  color:var(--charcoal);
  padding:3rem 2rem 4rem;
  text-align:center;
}
.hub-markets-inner{max-width:1200px;margin:0 auto}
.hub-markets :focus-visible{outline-color:var(--charcoal)}
.hub-region-btn,.hub-state-btn{min-height:44px}
.hub-region-btn.active,.hub-state-btn.active{text-decoration:underline;text-underline-offset:5px}
.hub-markets-title{
  font-family:var(--display);
  font-size:clamp(2rem,4.5vw,3.8rem);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--charcoal);
  line-height:1.1;
  margin-bottom:.6rem;
}
.hub-markets-title .gold{color:var(--gold-dark)}
.hub-markets-sub{
  font-family:var(--body);
  font-size:.95rem;
  font-weight:400;
  color:#6b6b6b;
  margin-bottom:2.2rem;
}

/* ── Region row ── */

.hub-regions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
  margin-bottom:0;
}
.hub-region-btn{
  font-family:var(--display);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#444;
  background:transparent;
  border:none;
  padding:.5rem 1rem;
  cursor:pointer;
  transition:color .25s;
}
.hub-region-btn:hover{color:var(--charcoal)}
.hub-region-btn.active{color:var(--gold-dark)}
.hub-region-sep{
  color:rgba(42,42,42,.18);
  font-size:1rem;
  padding:0 .5rem;
  user-select:none;
}

/* ── State rows — one set per region. .no-js shows every set. ── */

.hub-state-set{
  display:none;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  padding:1.4rem 0 0;
  margin-top:1.4rem;
  border-top:1px solid rgba(10,10,10,.06);
}
.hub-state-set.visible{display:flex}
.no-js .hub-state-set{display:flex}
.hub-state-btn{
  font-family:var(--display);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#555;
  background:transparent;
  border:none;
  padding:.45rem .9rem;
  cursor:pointer;
  transition:color .25s;
}
.hub-state-btn:hover{color:var(--charcoal)}
.hub-state-btn.active{color:var(--gold-dark)}

/* ── Market lists — one set per state. .no-js shows every set. ── */

.hub-market-set{
  display:none;
  max-width:700px;
  margin:1.6rem auto 0;
  padding-top:1.4rem;
  border-top:1px solid rgba(10,10,10,.06);
}
.hub-market-set.visible{display:block}
.no-js .hub-market-set{display:block}
.hub-market-results-heading{
  font-family:var(--display);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:1rem;
  text-align:center;
}
.hub-market-list{
  list-style:none;
  padding:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.3rem 1.5rem;
}
.hub-market-list li{padding:.25rem 0}
.hub-market-list a{
  font-family:var(--body);
  font-size:1.05rem;
  color:#333;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:color .2s;
}
.hub-market-list a:hover{color:var(--gold-dark)}
.hub-market-arrow{
  font-size:.7rem;
  color:var(--gold-dark);
  opacity:0;
  transform:translateX(-3px);
  transition:opacity .15s,transform .15s;
}
.hub-market-list a:hover .hub-market-arrow{opacity:1;transform:translateX(0)}

/* ── Breakpoints ── */

@media(max-width:768px){
  .hub-regions{gap:4px}
  .hub-region-btn{padding:.4rem .7rem;font-size:.82rem}
  .hub-state-btn{padding:.35rem .6rem;font-size:.78rem}
  .hub-market-list{flex-direction:column;align-items:center;gap:.2rem}
}
@media(max-width:420px){
  .hub-region-btn{padding:.4rem .5rem;font-size:.82rem;letter-spacing:.14em}
  .hub-state-btn{padding:.3rem .5rem;font-size:.78rem;letter-spacing:.1em}
}