/* ==========================================================================
   Deer Texas Region Locator
   Every selector is namespaced under .dt-region-locator / .dt-region-counties.
   No element, tag or utility selectors that could reach Salient, WPBakery,
   AWPCP, MemberPress or anything else on the site.
   ========================================================================== */

.dt-region-locator,
.dt-region-counties{
  --dt-rl-gold:       var(--dt-yellow, #e8c33c);
  --dt-rl-gold-deep:  var(--dt-yellow-strong, #cfa724);
  --dt-rl-ink:        var(--dt-ink, #1b1b1b);
  --dt-rl-body:       var(--dt-body, #575757);
  --dt-rl-muted:      var(--dt-muted, #8d8d8d);
  --dt-rl-line:       #e2e0da;
  --dt-rl-surface:    #fff;
  --dt-rl-fill:       #f3f2ed;
  --dt-rl-radius:     8px;

  box-sizing: border-box;
  color: var(--dt-rl-body);
}

.dt-region-locator *,
.dt-region-counties *{ box-sizing: inherit; }

.dt-region-locator__heading,
.dt-region-counties__heading{
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--dt-rl-ink);
}

/* --- seven-region colour system ------------------------------------------
   Each region owns three tones, carried on CSS custom properties:

     --dtx-r        the identifying colour (active counties, main-map fill)
     --dtx-r-soft   lightened/desaturated (counties with no listings)
     --dtx-r-deep   darker (borders, labels on soft fills, hover)

   They are declared on BOTH a slug class and the matching data attribute.
   Either alone is sufficient, so the colour survives if one is ever dropped
   from the markup. The class is listed first and is what the map relies on.

   On the state map each <a> carries .dtx-region--<slug>, so the seven shapes
   resolve seven different values. On a region page the wrapper carries it, and
   every county inside inherits that one family.

   Restyling a region is a change in this block only - no PHP, no template.
   -------------------------------------------------------------------------- */

.dt-region-locator .dtx-region--panhandle,
.dt-region-counties.dtx-region--panhandle,
.dt-region-locator [data-dt-region="panhandle"],
.dt-region-counties[data-dt-region="panhandle"]{
  --dtx-r: #d9a01b; --dtx-r-soft: #f4e6bf; --dtx-r-deep: #8a6006;
}
.dt-region-locator .dtx-region--big-bend,
.dt-region-counties.dtx-region--big-bend,
.dt-region-locator [data-dt-region="big-bend"],
.dt-region-counties[data-dt-region="big-bend"]{
  --dtx-r: #c0432d; --dtx-r-soft: #f2cfc8; --dtx-r-deep: #7a2514;
}
.dt-region-locator .dtx-region--hill-country,
.dt-region-counties.dtx-region--hill-country,
.dt-region-locator [data-dt-region="hill-country"],
.dt-region-counties[data-dt-region="hill-country"]{
  --dtx-r: #2b6ea8; --dtx-r-soft: #c6dbee; --dtx-r-deep: #17456a;
}
.dt-region-locator .dtx-region--brush-country,
.dt-region-counties.dtx-region--brush-country,
.dt-region-locator [data-dt-region="brush-country"],
.dt-region-counties[data-dt-region="brush-country"]{
  --dtx-r: #d4752a; --dtx-r-soft: #f6ddc3; --dtx-r-deep: #8c4610;
}
.dt-region-locator .dtx-region--prairies,
.dt-region-counties.dtx-region--prairies,
.dt-region-locator [data-dt-region="prairies"],
.dt-region-counties[data-dt-region="prairies"]{
  --dtx-r: #8a4291; --dtx-r-soft: #e4cde7; --dtx-r-deep: #59275f;
}
.dt-region-locator .dtx-region--piney-woods,
.dt-region-counties.dtx-region--piney-woods,
.dt-region-locator [data-dt-region="piney-woods"],
.dt-region-counties[data-dt-region="piney-woods"]{
  --dtx-r: #468a41; --dtx-r-soft: #cce4c9; --dtx-r-deep: #275423;
}
.dt-region-locator .dtx-region--coastal-bend,
.dt-region-counties.dtx-region--coastal-bend,
.dt-region-locator [data-dt-region="coastal-bend"],
.dt-region-counties[data-dt-region="coastal-bend"]{
  --dtx-r: #23888e; --dtx-r-soft: #c3e2e4; --dtx-r-deep: #10585c;
}

/* Fallback so an unrecognised slug is never invisible. Lowest specificity of
   the set, so any region above always wins. */
.dt-region-locator,
.dt-region-counties{
  --dtx-r: #7d7a72; --dtx-r-soft: #e4e2dc; --dtx-r-deep: #4a4842;
  --dtx-edge: rgba(255,255,255,.92);
  --dtx-halo: rgba(255,255,255,.9);
}

/* --- vector map ----------------------------------------------------------- */

.dt-region-locator__map,
.dt-region-counties__map{
  max-width: 760px;
  margin: 0 auto 26px;
}

.dt-region-locator__svg,
.dt-region-counties__svg{
  display: block;
  width: 100%;
  height: auto;          /* responsive: geometry scales, no pixel coordinates */
  overflow: visible;
}

/* --- main Texas map ------------------------------------------------------
   The fill selectors are deliberately long. A parent theme that styles bare
   `svg polygon` would otherwise outrank a single-class rule and flatten all
   seven regions to one colour. Matching container + link + element + class
   puts these comfortably above anything a theme is likely to declare, without
   resorting to !important.
   -------------------------------------------------------------------------- */

.dt-region-locator .dt-region-locator__svg a polygon.dt-region-locator__poly{
  fill: var(--dtx-r);
  stroke: var(--dtx-edge);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill .15s ease, stroke-width .15s ease;
}

.dt-region-locator .dt-region-locator__svg a:hover polygon.dt-region-locator__poly,
.dt-region-locator .dt-region-locator__svg a:focus polygon.dt-region-locator__poly,
.dt-region-locator .dt-region-locator__svg a.is-active polygon.dt-region-locator__poly{
  fill: var(--dtx-r-deep);
  stroke: #fff;
  stroke-width: 2.4;
}

.dt-region-locator .dt-region-locator__svg a:focus-visible polygon.dt-region-locator__poly{
  stroke: var(--dt-rl-ink);
  stroke-width: 3;
}

/* --- labels ---------------------------------------------------------------
   pointer-events is ALSO set as an SVG attribute in PHP, so a label can never
   create a dead zone even with no CSS at all. These rules repeat it for the
   group and every descendant as belt and braces.
   -------------------------------------------------------------------------- */

.dt-region-locator__labels,
.dt-region-counties__labels,
.dt-region-locator__labels *,
.dt-region-counties__labels *,
.dt-region-locator__label,
.dt-region-counties__label,
.dt-region-locator__label tspan,
.dt-region-counties__label tspan{
  pointer-events: none !important;   /* interaction safety, not a paint fix */
}

.dt-region-locator__label,
.dt-region-counties__label{
  user-select: none;
  font-family: "Helvetica Neue", Arial, sans-serif;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

/* Map labels, not headings: medium weight, quiet tracking. */
.dt-region-locator__label{
  font-weight: 700;
  fill: #fff;
  stroke: rgba(0,0,0,.4);
  stroke-width: .8;
  letter-spacing: .005em;
}

.dt-region-counties__label{
  font-weight: 600;
  letter-spacing: 0;
}

/* --- region maps: county states ------------------------------------------
   Active vs empty is decided in PHP from the live published listing count and
   expressed as a class plus data-listings. Nothing here names a county, so a
   county changes state on its own as listings come and go. Both states use the
   SAME region family - never a global gold.
   -------------------------------------------------------------------------- */

.dt-region-counties .dt-region-counties__svg polygon.dt-region-counties__poly{
  stroke-linejoin: round;
  transition: fill .15s ease, stroke-width .15s ease;
}

.dt-region-counties .dt-region-counties__svg .dtx-county--has-listings polygon.dt-region-counties__poly{
  fill: var(--dtx-r);
  stroke: var(--dtx-edge);
  stroke-width: 1.4;
}

.dt-region-counties .dt-region-counties__svg .dtx-county--empty polygon.dt-region-counties__poly{
  fill: var(--dtx-r-soft);
  stroke: var(--dtx-r-deep);
  stroke-opacity: .4;
  stroke-width: 1;
}

.dt-region-counties .dt-region-counties__svg a{ cursor: pointer; }

.dt-region-counties .dt-region-counties__svg a.dtx-county--has-listings:hover polygon.dt-region-counties__poly,
.dt-region-counties .dt-region-counties__svg a.dtx-county--has-listings:focus polygon.dt-region-counties__poly,
.dt-region-counties .dt-region-counties__svg a.dtx-county--has-listings.is-active polygon.dt-region-counties__poly{
  fill: var(--dtx-r-deep);
  stroke: #fff;
  stroke-width: 2.2;
}

.dt-region-counties .dt-region-counties__svg a.dtx-county--empty:hover polygon.dt-region-counties__poly,
.dt-region-counties .dt-region-counties__svg a.dtx-county--empty:focus polygon.dt-region-counties__poly,
.dt-region-counties .dt-region-counties__svg a.dtx-county--empty.is-active polygon.dt-region-counties__poly{
  fill: var(--dtx-r);
  fill-opacity: .6;
  stroke-opacity: .9;
  stroke-width: 1.6;
}

.dt-region-counties .dt-region-counties__svg a:focus-visible polygon.dt-region-counties__poly{
  stroke: var(--dt-rl-ink);
  stroke-width: 2.8;
  stroke-opacity: 1;
}

.dt-region-counties .dt-region-counties__svg .is-unresolved polygon.dt-region-counties__poly{
  fill: #ebe9e3;
  stroke: #cbc8c0;
  stroke-width: 1;
}

/* County label colour follows the fill it sits on, for contrast both ways. */
.dtx-label--has-listings{
  fill: #fff;
  stroke: rgba(0,0,0,.34);
  stroke-width: .5;
}

.dtx-label--empty{
  fill: var(--dtx-r-deep);
  stroke: var(--dtx-halo);
  stroke-width: .62;
}

/* Region swatch in the text list, so colour identity carries beyond the map. */
.dt-region-locator__swatch{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 9px;
  border-radius: 3px;
  background: var(--dtx-r);
  vertical-align: baseline;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce){
  .dt-region-locator__poly,
  .dt-region-counties__poly{ transition: none; }
}

/* --- quick-jump select (revealed by JS only) ------------------------------ */

.dt-region-locator__quick,
.dt-region-counties__quick{
  max-width: 420px;
  margin: 0 auto 24px;
}

.dt-region-locator__quick[hidden],
.dt-region-counties__quick[hidden]{ display: none; }

.dt-region-locator__quick-label,
.dt-region-counties__quick-label{
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dt-rl-muted);
}

.dt-region-locator__select,
.dt-region-counties__select{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--dt-rl-surface);
  border: 1px solid var(--dt-rl-line);
  border-radius: var(--dt-rl-radius);
  font-size: 15px;
  color: var(--dt-rl-ink);
}

.dt-region-locator__select:focus,
.dt-region-counties__select:focus{
  border-color: var(--dt-rl-gold);
  box-shadow: 0 0 0 3px rgba(232,195,60,.25);
  outline: none;
}

/* --- region list ---------------------------------------------------------- */

.dt-region-locator__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-region-locator__item{ margin: 0; padding: 0; list-style: none; }

.dt-region-locator__link{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 62px;
  padding: 14px 18px;
  background: var(--dt-rl-surface);
  border: 1px solid var(--dt-rl-line);
  border-left: 4px solid var(--dtx-r);
  border-radius: var(--dt-rl-radius);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.dt-region-locator__link:hover,
.dt-region-locator__link:focus{
  border-left-color: var(--dt-rl-gold);
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.5);
  transform: translateY(-1px);
}

.dt-region-locator__link:focus-visible{
  outline: 2px solid var(--dt-rl-gold-deep);
  outline-offset: 2px;
}

.dt-region-locator__swatch + .dt-region-locator__name{ display: inline; }

.dt-region-locator__name{
  font-size: 16px;
  font-weight: 700;
  color: var(--dt-rl-ink);
}

.dt-region-locator__count{
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dt-rl-muted);
}

/* --- county list ---------------------------------------------------------- */

.dt-region-counties__list{
  display: grid;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-region-counties__list--cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.dt-region-counties__list--cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.dt-region-counties__list--cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.dt-region-counties__list--cols-5{ grid-template-columns: repeat(5, minmax(0,1fr)); }
.dt-region-counties__list--cols-6{ grid-template-columns: repeat(6, minmax(0,1fr)); }

.dt-region-counties__item{ margin: 0; padding: 0; list-style: none; min-width: 0; }

.dt-region-counties__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;           /* comfortable touch target */
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 15px;
  color: var(--dt-rl-ink);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}

a.dt-region-counties__link:hover,
a.dt-region-counties__link:focus{
  background: #fffdf3;
  border-color: var(--dt-rl-gold);
}

a.dt-region-counties__link:focus-visible{
  outline: 2px solid var(--dt-rl-gold-deep);
  outline-offset: 2px;
}

.dt-region-counties__count{
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  background: var(--dt-rl-fill);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dt-rl-muted);
  text-align: center;
}

.dt-region-counties__link.is-unresolved{
  color: var(--dt-rl-muted);
  cursor: default;
}

/* --- administrator-only diagnostics --------------------------------------- */

.dt-region-locator__admin-notice{
  margin: 20px 0 0;
  padding: 12px 14px;
  background: #fffaea;
  border: 1px dashed var(--dt-rl-gold);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #6b5309;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1024px){
  .dt-region-counties__list--cols-5,
  .dt-region-counties__list--cols-6{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 782px){
  .dt-region-locator__map,
  .dt-region-counties__map{ max-width: 100%; margin-bottom: 20px; }

  .dt-region-counties__list--cols-3,
  .dt-region-counties__list--cols-4,
  .dt-region-counties__list--cols-5,
  .dt-region-counties__list--cols-6{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px){
  .dt-region-locator__list{ grid-template-columns: minmax(0,1fr); }

  .dt-region-counties__list,
  .dt-region-counties__list--cols-2,
  .dt-region-counties__list--cols-3,
  .dt-region-counties__list--cols-4,
  .dt-region-counties__list--cols-5,
  .dt-region-counties__list--cols-6{ grid-template-columns: minmax(0,1fr); }

  .dt-region-counties__link{ min-height: 46px; }
  .dt-region-locator__heading,
  .dt-region-counties__heading{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce){
  .dt-region-locator__link,
  .dt-region-locator__shape polygon,
  .dt-region-counties__shape polygon,
  .dt-region-counties__link{
    transition: none !important;
    transform: none !important;
  }
}

/* --- county text list: the same active/empty language as the map ---------- */

.dt-region-counties__item.dtx-county--has-listings .dt-region-counties__link{
  border-left: 4px solid var(--dtx-r);
  font-weight: 600;
}

.dt-region-counties__item.dtx-county--empty .dt-region-counties__link{
  border-left: 4px solid var(--dtx-r-soft);
  color: var(--dt-rl-body);
}

.dt-region-counties__item.dtx-county--has-listings .dt-region-counties__count{
  background: var(--dtx-r);
  color: #fff;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
}

/* --- responsive: labels stay legible as the SVG scales -------------------- */

@media (max-width: 1024px){
  .dt-region-locator__map,
  .dt-region-counties__map{ max-width: 640px; }
}

@media (max-width: 782px){
  .dt-region-locator__map,
  .dt-region-counties__map{ max-width: 100%; }
}

/*
 * Below ~430px a county label in a small polygon stops being readable at any
 * size that still fits. Rather than run separate mobile logic, the county
 * labels are simply dropped there - the polygons keep their colour, so the
 * active/empty picture survives, and the full labelled list underneath becomes
 * the way to identify a county. Region labels on the main map always stay.
 */
@media (max-width: 430px){
  .dt-region-counties__labels{ display: none; }
  .dt-region-locator__label{ stroke-width: 1.1; }
}