/* =====================================================================
   Section chrome: wrapper, title block, legend, footnote.
   Everything is scoped under #dt-where-we-buy so it cannot leak into the
   host page. The map internals below are scoped under #dt-map.
   ===================================================================== */

#dt-where-we-buy {
  background: transparent;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #2A2464;
  padding: 0;
}

#dt-where-we-buy * {
  box-sizing: border-box;
}

/* Helper line above the map. Remove if the host section already has intro copy. */
#dt-where-we-buy .dt-lede {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #6E6A8A;
  margin: 18px auto 0;
  max-width: 560px;
}


/* ==========================================================
   Main map container
   ========================================================== */

#dt-map {
  max-width: 1120px;
  margin: clamp(20px, 4vw, 40px) auto 0;
  position: relative;

  --dt-indigo: #2A2464;
  --dt-gold: #B8862B;
  --dt-pale: #A9A3D1;
  --dt-ink: #2A2464;
  --dt-muted: #6E6A8A;

  --dt-serif: Georgia, "Times New Roman", serif;
  --dt-sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}


/* ==========================================================
   Title block + back button
   ========================================================== */

#dt-where-we-buy .dt-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 16px;
  padding: 4px 2px;

  pointer-events: none;
  z-index: 2;
}


/* ==========================================================
   Interactive SVG map
   ========================================================== */

#dt-map svg {
  width: 100%;
  height: auto;
  display: block;

  /* Soft wash improves county/state readability
     while preserving some of the site's aerial background. */
  background: rgba(255, 255, 255, 0.68);
}

#dt-map .county {
  fill: rgba(255, 255, 255, 0.62);
  stroke: #D3CCBC;
}

#dt-map .county.core {
  fill: var(--dt-indigo);
  stroke: #FFFFFF;
}

#dt-map .state {
  fill: none;
  stroke: #B9B2A2;
}

#dt-map .nation {
  fill: none;
  stroke: #9C957F;
}

#dt-map .basin {
  cursor: pointer;
  transition: fill-opacity 0.2s;
  outline: none;
}

#dt-map .basin path {
  stroke: #FFFFFF;
  stroke-linejoin: round;
}

#dt-map .basin.active path {
  fill: var(--dt-gold);
  fill-opacity: 0.55;
}

#dt-map .basin.other path {
  fill: var(--dt-pale);
  fill-opacity: 0.45;
}

#dt-map .basin:hover path,
#dt-map .basin:focus-visible path {
  fill-opacity: 0.85;
}

#dt-map.zoomed .basin path {
  fill-opacity: 0.10;
  pointer-events: none;
}

#dt-map.zoomed .basin.selected path {
  fill-opacity: 0.22;
  stroke: var(--dt-gold);
}


/* ==========================================================
   Map labels
   ========================================================== */

#dt-map .basin-label {
  font-family: var(--dt-serif);
  fill: var(--dt-ink);
  pointer-events: none;
}

#dt-map.zoomed .basin-label {
  display: none;
}

#dt-map .county-label {
  font-family: var(--dt-sans);
  fill: #FFFFFF;
  text-anchor: middle;
  pointer-events: none;
}

#dt-map .area-label {
  font-family: var(--dt-serif);
  fill: var(--dt-ink);
  text-anchor: middle;
  pointer-events: none;

  paint-order: stroke;
  stroke: rgba(244, 239, 229, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}


/* ==========================================================
   Zoomed title block
   ========================================================== */

#dt-map .dt-title {
  pointer-events: auto;
  max-width: 340px;
}

#dt-map .dt-title .eyebrow {
  font: 600 11px/1.2 var(--dt-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dt-gold);
  margin: 0 0 6px;
}

#dt-map .dt-title h3 {
  font-family: var(--dt-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.12;
  margin: 0;
  color: var(--dt-ink);
}

#dt-map .dt-title .sub {
  font: 400 13.5px/1.5 var(--dt-sans);
  color: var(--dt-muted);
  margin: 7px 0 0;
  max-width: 290px;
}


/* ==========================================================
   All Basins button
   ========================================================== */

#dt-map .dt-back {
  pointer-events: auto;
  display: none;

  font: 600 11px var(--dt-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;

  color: var(--dt-indigo);
  background: #FFFFFF;

  border: 1px solid var(--dt-indigo);
  border-radius: 2px;

  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}

#dt-map.zoomed .dt-back {
  display: inline-block;
}

#dt-map .dt-back:hover,
#dt-map .dt-back:focus-visible {
  background: var(--dt-indigo);
  color: #FFFFFF;
  outline: none;
}


/* ==========================================================
   Legend
   ========================================================== */

#dt-where-we-buy .dt-legend {
  max-width: 780px;
  margin: 22px auto 0;

  border-top: 1px solid #E2DCCB;
  padding-top: 18px;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px 28px;
  white-space: nowrap;

  font-size: 14px;
  color: #6E6A8A;
}

#dt-where-we-buy .dt-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

#dt-where-we-buy .dt-legend span::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
}

#dt-where-we-buy .dt-legend .a::before {
  background: #B8862B;
  opacity: 0.8;
}

#dt-where-we-buy .dt-legend .o::before {
  background: #A9A3D1;
  opacity: 0.7;
}

#dt-where-we-buy .dt-legend .c::before {
  background: #2A2464;
}


/* ==========================================================
   Bottom note
   ========================================================== */

#dt-where-we-buy .dt-foot {
  text-align: center;
  margin: 16px auto 0;
  max-width: 540px;

  font-size: 15px;
  line-height: 1.65;

  color: #6E6A8A;
  text-wrap: pretty;
}

#dt-where-we-buy .dt-foot a {
  color: #2A2464;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 640px) {

  /* On phones the title/back controls move above the map
     rather than overlaying the geography. */

  #dt-map .dt-top {
    position: static !important;
    padding: 0 0 10px !important;
    align-items: center !important;
    min-height: 34px;
  }

  #dt-map .dt-title h3 {
    font-size: 18px;
  }

  #dt-map .dt-title .eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.12em;
    margin: 0 0 2px;
  }

  #dt-map .dt-title .sub {
    display: none;
  }

  #dt-map .dt-back {
    padding: 8px 12px;
    font-size: 10px;
  }
}