/* GENERATED by build/locations/make.py from build/locations/regions.json. Do not edit by hand.

   The state directory, one design for every page that has one: the console chrome the page heroes
   use, the four regions down the left with their states beneath them, and Google's own map filling
   the right. Every colour is a page token, so the console belongs to the page rather than sitting on
   top of it. */

.bhp-states{width:100%;border:1px solid var(--line-light,rgba(23,29,58,.12));border-radius:16px;
  overflow:hidden;background:#fff;font-family:var(--body,'Geist',sans-serif);
  box-shadow:0 18px 48px rgba(23,29,58,.06)}

/* ---- the chrome bar ---- */
.bhp-states .bst-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:linear-gradient(180deg,#FBF8F1,#F5F1EA);
  border-bottom:1px solid var(--line-light,rgba(23,29,58,.12))}
.bhp-states .bst-lights{display:inline-flex;gap:5px;flex:none}
.bhp-states .bst-lights i{width:9px;height:9px;border-radius:50%;background:#DCD5C4}
.bhp-states .bst-lights i:first-child{background:var(--gold,#FFB000)}
.bhp-states .bst-t{font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--navy,#171D3A)}
.bhp-states .bst-s{margin-left:auto;font-size:12px;color:var(--on-light-3,rgba(23,29,58,.55))}

/* ---- the body: regions and their states on the left, the map on the right ---- */
.bhp-states .bst-body{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,30px);padding:clamp(20px,2.6vh,26px) clamp(18px,2vw,24px);align-items:start}

.bhp-states .bst-tabs{display:grid;gap:6px}
.bhp-states .bst-tab{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  font-family:inherit;font-size:14.5px;line-height:1.5;color:var(--navy,#171D3A);background:transparent;
  border:1px solid transparent;border-radius:12px;cursor:pointer;text-align:left;
  transition:background .16s,border-color .16s}
.bhp-states .bst-tab:hover{background:#FBF8F1}
.bhp-states .bst-tab.on{background:rgba(255,176,0,.12);border-color:rgba(255,176,0,.55)}
.bhp-states .bst-tab:focus-visible{outline:2px solid var(--gold,#FFB000);outline-offset:2px}
.bhp-states .bst-dot{width:8px;height:8px;border-radius:50%;background:#DCD5C4;flex:none;
  transition:background .16s}
.bhp-states .bst-tab.on .bst-dot{background:var(--gold,#FFB000)}
.bhp-states .bst-nm{font-weight:500}
.bhp-states .bst-ct{margin-left:auto;font-size:12px;letter-spacing:.08em;
  color:var(--on-light-3,rgba(23,29,58,.55))}

/* the states sit under their region, which is what fills the column */
.bhp-states .bst-panels{margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line-light,rgba(23,29,58,.12))}
.bhp-states .bst-panel{display:none;flex-wrap:wrap;gap:7px}
.bhp-states .bst-panel.on{display:flex}
.bhp-states .bst-state{font-family:inherit;font-size:13.5px;line-height:1.2;
  color:var(--navy,#171D3A);background:#FBF8F1;
  border:1px solid var(--line-light,rgba(23,29,58,.12));border-radius:999px;padding:7px 13px;
  cursor:pointer;text-align:left;text-decoration:none;
  transition:background .16s,border-color .16s,color .16s}
.bhp-states .bst-state:hover,.bhp-states .bst-state.on{background:rgba(255,176,0,.14);
  border-color:rgba(255,176,0,.6)}
.bhp-states .bst-state:focus-visible{outline:2px solid var(--gold,#FFB000);outline-offset:2px}
/* a state whose guide has published is a link, and says so */
.bhp-states a.bst-state{border-color:rgba(255,176,0,.5);font-weight:500}
.bhp-states a.bst-state::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold,#FFB000);display:inline-block;margin-left:7px;vertical-align:middle}
/* the one state a page's brief calls out carries a mark, not a different design */
.bhp-states .bst-state.flag{border-color:rgba(255,176,0,.55);background:rgba(255,176,0,.08)}

/* ---- the map ---- */
.bhp-states .bst-mapcol{display:grid;gap:12px}
.bhp-states .bst-map{border-radius:12px;overflow:hidden;
  border:1px solid var(--line-light,rgba(23,29,58,.12));background:#EDE9DF}
.bhp-states .bst-map iframe{display:block;width:100%;border:0;aspect-ratio:16/11;
  min-height:320px;max-height:460px}
.bhp-states .bst-read{display:flex;align-items:baseline;gap:10px;margin:0;
  font-size:12.5px;color:var(--on-light-3,rgba(23,29,58,.55))}
.bhp-states .bst-rk{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep,#E29C00);flex:none}
.bhp-states .bst-rv{font-family:var(--disp,'Fraunces',Georgia,serif);font-weight:600;font-size:16px;
  line-height:1.5;letter-spacing:-.01em;color:var(--navy,#171D3A);font-optical-sizing:auto}

/* Elementor wraps the shortcode in its own widget div; the console still owns the column */
.elementor-widget-shortcode .bhp-states{margin-inline:auto}
.elementor-widget-shortcode .elementor-shortcode{display:block}

@media (max-width:1024px){
  .bhp-states .bst-body{grid-template-columns:minmax(0,1fr)}
  .bhp-states .bst-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bhp-states .bst-map iframe{aspect-ratio:16/10;min-height:280px}
}
@media (max-width:560px){
  .bhp-states .bst-tabs{grid-template-columns:minmax(0,1fr)}
  .bhp-states .bst-s{display:none}
  .bhp-states .bst-state{font-size:13px;padding:6px 11px}
}