/* Hill Country Dairies: the home page Texas map band.
   Ben E. Keith's flat map style, our own Texas (tools/texas_map.py). The
   map box is wider than the band and the band clips it, so Texas bleeds off
   the right edge at 1024 and up, and is centred and zoomed below that.
   Markers sit at --x/--y percentages of the map box (their centre).
   Values come from the "Texas map" block in tokens.css. */

.texas-map {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
  background: var(--map-ground);
  /* The map's lines run past the band on every side; clip them at the
     band's edges. overflow-x stops the bleed from making the page scroll
     sideways. */
  overflow-x: clip;
  clip-path: inset(0);
}
/* Home: the band's own top edge is the milk wave. It starts one scallop
   higher, and a mask cuts that strip into bumps, so the background and
   the map lines are shaped together and no line can show in the gaps
   between bumps (they did with a separate ::before wave). */
.texas-map--wave {
  margin-top: calc(var(--wave-r) * -1);
  padding-top: calc(var(--header-h) + var(--wave-r));
  clip-path: none;
  -webkit-mask:
    radial-gradient(circle var(--wave-r) at 50% 100%, black 98%, transparent 100%) 0 0 / calc(var(--wave-r) * 2) var(--wave-r) repeat-x,
    linear-gradient(black, black) 0 var(--wave-r) / 100% 100% no-repeat;
          mask:
    radial-gradient(circle var(--wave-r) at 50% 100%, black 98%, transparent 100%) 0 0 / calc(var(--wave-r) * 2) var(--wave-r) repeat-x,
    linear-gradient(black, black) 0 var(--wave-r) / 100% 100% no-repeat;
}

/* ---- The map ---- */
.texas-map__map {
  position: relative; flex: none;
  width: var(--map-w);
}
.texas-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.texas-map__land {
  fill: var(--map-land);
  stroke: var(--map-edge); stroke-width: var(--map-edge-w);
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.texas-map__states {
  fill: none; stroke: var(--map-line); stroke-width: var(--map-line-w);
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}

/* ---- Branch markers ---- */
.texas-map__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pin {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--pin-size); height: var(--pin-size);
  transform: translate(-50%, -50%);
}
.pin:is(:hover, :focus-within, .is-lit) { z-index: 2; }
.pin__mark {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--pin-bg); box-shadow: var(--pin-shadow);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.pin__star { width: 100%; height: 100%; fill: var(--pin-star); }
.pin__mark:hover, .pin__mark:focus-visible, .pin.is-lit .pin__mark { transform: scale(var(--pin-grow)); }
.pin__mark:focus-visible { outline: var(--pin-ring); outline-offset: var(--pin-ring-gap); border-radius: 50%; }

/* ---- 768 to 1023: map centred and zoomed ---- */
@media (max-width: 1023px) {
  .texas-map__map { width: var(--map-w-md); margin-left: calc(50% - var(--map-w-md) * var(--map-tx-mid)); }
  .pin { width: var(--pin-size-md); height: var(--pin-size-md); }
}
/* ---- Under 768: Texas fills the width, no bleed ---- */
@media (max-width: 767px) {
  .texas-map { min-height: 0; }
  .texas-map__map { width: var(--map-w-sm); margin-left: calc(50% - var(--map-w-sm) * var(--map-tx-mid)); }
  .pin { width: var(--pin-size-sm); height: var(--pin-size-sm); }
}

/* ---- Hover card ("cliff notes") ----
   Centred above its marker; the arrow fills the gap down to the marker and
   a clear bridge under the card keeps the hover alive across it. Opens on
   hover (mouse only: touch taps go straight to the branch page) and on
   keyboard focus. texas-map.js hides it while the page scrolls and on
   Escape. */
.pin__card {
  position: absolute; left: 50%; bottom: calc(100% + var(--map-card-gap));
  width: var(--map-card-w); padding: var(--map-card-pad);
  transform: translateX(-50%);
  display: grid; gap: var(--space-1); justify-items: start;
  background: var(--white); color: var(--ink);
  border-radius: var(--map-card-r); box-shadow: var(--map-card-shadow);
  text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-map-card) var(--ease-map-card);
}
.pin__card::before { /* hover bridge */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--map-card-gap);
}
.pin__card::after { /* arrow */
  content: ""; position: absolute; left: 50%; top: 100%;
  width: var(--map-card-arrow); height: var(--map-card-gap);
  margin-left: calc(var(--map-card-arrow) / -2);
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pin__city {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-lead);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow); line-height: var(--lh-heading);
  color: var(--red); margin-bottom: var(--space-1);
}
.pin__label {
  font-size: var(--fs-eyebrow); font-weight: var(--weight-semi); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--muted);
}
.pin__value { font-size: var(--fs-small); font-weight: var(--weight-semi); line-height: var(--lh-heading); color: var(--ink); }
a.pin__value { color: var(--red); text-decoration: none; }
a.pin__value:hover { text-decoration: underline; }

@media (hover: hover) {
  .pin:hover .pin__card { opacity: 1; pointer-events: auto; }
}
.pin:has(:focus-visible) .pin__card { opacity: 1; pointer-events: auto; }
.pin.is-dismissed .pin__card,
.texas-map.is-scrolling .pin__card { opacity: 0; pointer-events: none; }

/* ---- Locations list, bottom-left ---- */
.texas-map__list {
  position: absolute; left: var(--gutter); bottom: var(--space-7);
  color: var(--map-ink);
}
.texas-map__title {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h3);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow); line-height: var(--lh-heading);
  color: var(--map-ink);
}
.texas-map__title::before {
  content: ""; display: block; width: var(--map-bar-w); height: var(--map-bar-h);
  margin-bottom: var(--space-3); background: var(--map-land);
}
.texas-map__list ul {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start;
  column-gap: var(--space-7); row-gap: var(--space-2);
}
.texas-map__list > ul a {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--fs-h4);
  text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--map-ink); text-decoration: none;
  text-decoration-thickness: var(--map-bar-h); text-underline-offset: var(--space-1);
}
.texas-map__list > ul a:hover, .texas-map__list > ul a:focus-visible, .texas-map__list > ul a.is-lit {
  text-decoration-line: underline; text-decoration-color: var(--map-land);
}
.texas-map__list > ul a:focus-visible { outline-color: var(--map-ink); }

@media (max-width: 1023px) {
  .texas-map__list { position: static; padding: var(--space-6) var(--gutter) var(--space-7); }
}
@media (prefers-reduced-motion: reduce) {
  .pin__mark, .pin__card { transition: none; }
}

/* ---- As a page hero (Locations and each branch page) ----
   The header sits above it in the flow here, so the band fills the rest
   of the first screen. The bottom-left panel holds the breadcrumbs, the
   h1 and its lead. On a branch page that branch's star is inverted (red
   circle, white star, as on Ben E. Keith's branch map) and larger. */
.texas-map--hero { min-height: calc(100vh - var(--header-h)); padding-top: var(--space-6); }
.texas-map--hero .crumbs { color: var(--on-dark-muted); margin-bottom: var(--space-3); }
.texas-map--hero .crumbs a { color: var(--on-dark-muted); }
.texas-map__title--hero { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.texas-map__lead { max-width: var(--measure); margin-top: var(--space-4); color: var(--on-dark); }
.texas-map--hero .texas-map__list { max-width: var(--measure); }
.pin--here { z-index: 1; }
.pin--here .pin__mark { background: var(--pin-star); transform: scale(var(--pin-here-grow)); }
.pin--here .pin__star { fill: var(--pin-bg); }
/* On a branch page the other branches step back: half size, faded. They
   come up to full strength on hover or focus so they stay usable links. */
.texas-map--branch .pin:not(.pin--here) .pin__mark {
  transform: scale(var(--pin-other-scale)); opacity: var(--pin-other-alpha);
  transition: transform var(--dur-hover) var(--ease-hover), opacity var(--dur-hover) var(--ease-hover);
}
.texas-map--branch .pin:not(.pin--here) .pin__mark:is(:hover, :focus-visible),
.texas-map--branch .pin.is-lit:not(.pin--here) .pin__mark { transform: none; opacity: 1; }
@media (max-width: 767px) {
  .texas-map--hero { padding-top: 0; }
}

/* ---- Locations: counties, delivery regions and city dots ----
   Inside Texas: one fill per delivery region and every county line,
   clipped to the outline; the green edge is drawn again on top so the
   fills never cover it. City dots and labels sit under the branch stars. */
.texas-map--counties .texas-map__land { stroke: none; }
.texas-map__edge {
  fill: none; stroke: var(--map-edge); stroke-width: var(--map-edge-w);
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.texas-map__counties {
  fill: none; stroke: var(--county-line); stroke-width: var(--county-line-w);
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.texas-map__region--dfw { fill: var(--region-dfw); }
.texas-map__region--waco_austin { fill: var(--region-waco-austin); }
.texas-map__region--sa { fill: var(--region-sa); }
.texas-map__region--houston { fill: var(--region-houston); }
.texas-map__region--victoria { fill: var(--region-victoria); }
.texas-map__region--corpus { fill: var(--region-corpus); }

.texas-map__cities { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.city { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.city__dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: var(--city-dot-size); height: var(--city-dot-size);
  border-radius: 50%; background: var(--city-dot); border: var(--city-dot-ring);
}
.city__name {
  position: absolute; top: 0; right: var(--city-label-gap); transform: translateY(-50%);
  white-space: nowrap; font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--city-label); text-shadow: var(--city-label-halo);
}
.city--right .city__name { right: auto; left: var(--city-label-gap); }
/* Phones: too small for eight labels beside six stars; the dots and the
   coloured counties stay, and the branch list sits right below. */
@media (max-width: 767px) {
  .city__name { display: none; }
}