/* Homepage-only styles. style.css is frozen — see CLAUDE.md — so the hero
   search suggestions and map panel live here. partials/head.php loads
   css/<page>.css automatically, so there is nothing to register. */


/* Hero search suggestions. The field wraps the input so the panel can anchor
   to it; the input keeps its own flex sizing from .hero-search input. */
.hero-search-field{position:relative; flex:1 1 300px; min-width:0; text-align:left}
.hero-search-field input{width:100%}
.search-suggest{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 12px 32px rgba(26,37,48,.14);
  max-height:340px; overflow-y:auto; overscroll-behavior:contain;
}
.search-suggest[hidden]{display:none}
.search-suggest-head{
  padding:11px 16px 7px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
}
.search-suggest-list{list-style:none; margin:0; padding:0 0 6px}
.search-suggest-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 16px; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left;
}
.search-suggest-item:hover,
.search-suggest-item.is-active{background:rgba(191,155,90,.10)}
.search-suggest-item.is-active{outline:2px solid var(--gold); outline-offset:-2px}
.search-suggest-pin{color:var(--gold); font-size:14px; line-height:1}
.search-suggest-text{flex:1; min-width:0; display:flex; gap:7px; align-items:baseline; flex-wrap:wrap}
.search-suggest-name{font-weight:600; font-size:14px}
.search-suggest-sub{font-size:12.5px; color:var(--sub)}
.search-suggest-count{font-size:12px; color:var(--mute); white-space:nowrap}
.search-suggest-empty{padding:13px 16px; font-size:13px; color:var(--sub)}
.search-suggest-empty[hidden]{display:none}

/* --- The homepage panel --- */
/* The hero centres its text; the map is a block inside it, so it needs its own
   width and left-aligned link rather than inheriting text-align:center. */
/* Edge to edge. The map is its own section rather than part of .hero, so it
   escapes that 1280px column without any negative-margin trickery. */
.hero-map{margin:0}
.hero-map .map-canvas{
  /* Square off the corners and drop the side border: at full width there is
     no card to outline, and a rounded edge against the viewport reads as a
     mistake. */
  border-radius:0; border-left:0; border-right:0;
  /* Wide and short, like a banner. The artwork is 1000x620, so keeping that
     ratio at full width would be over 900px tall on a laptop.

     A plain `max-height` cannot do this: it clamps the box *after*
     aspect-ratio has sized it, so Leaflet measured a height the box never
     got — tiles loaded for the wrong size and the rest of the band stayed
     grey. Setting the height outright gives it one honest number. */
  aspect-ratio:auto; height:min(62vh, 560px);
  width:100%; margin:0 auto;
}

.hero-map-link{display:inline-block; font-size:13px}

/* Smaller pins on the homepage: the panel is a glance at the network, not the
   working map, and full-size dots crowd it at this width. */
.hero-map .map-pin{width:26px; height:26px; margin:-13px 0 0 -13px}
.hero-map .map-pin-dot{width:9px; height:9px}

@media (max-width:720px){
  .hero-map{margin-top:30px}
}

/* --- Region buttons under the search box --- */
.hero-regions{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  max-width:760px; margin:0 auto 8px;
}
.hero-region{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--white); color:var(--ink); text-decoration:none;
  font-size:13px; line-height:1; white-space:nowrap;
  box-shadow:0 1px 3px rgba(26,37,48,.05);
  transition:border-color .15s, transform .15s;
}
.hero-region:hover,
.hero-region:focus-visible{border-color:var(--gold); transform:translateY(-1px)}
.hero-region-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:21px; height:21px; padding:0 6px; border-radius:999px;
  background:var(--gold); color:#fff; font-size:11.5px; font-weight:700;
}

/* --- Caption bar under the map --- */
/* The caption sits back inside the text column, so it lines up with the hero
   above it rather than floating out at the viewport edge. */
.hero-map-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  max-width:1280px; margin:12px auto 0; padding:0 32px;
}
.hero-map-hint{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--sub);
}
.hero-map-hint-pin{color:var(--gold)}

/* The map now follows the hero directly, so the hero's own bottom padding
   would read as a gap. style.css is frozen, so it is overridden here rather
   than edited there. */
.hero{padding-bottom:36px}

@media (max-width:720px){
  /* Taller slice on a phone: a short band leaves the pins too close to read
     apart, and there is far less viewport width to spread them across. */
  .hero-map .map-canvas{height:min(70vh, 460px)}
  .hero-map-foot{padding:0 20px}
}