/* Single Service Area detail page ------------------------------ */
main.service-areas {
  border-top: 4px solid var(--ws-orange-2);
  padding-top: 2em;
}

main.service-areas h1 {
  margin: 0 0 1rem;
}

main.service-areas .wysiwyg-content-wrap {
  margin-bottom: 1.5em;
}



/* Main Service Area landing page ------------------------------ */

/* Intro --------------- */
.service-areas-maps {
  overflow: hidden;
  padding-block: 0 clamp(3em, 1.545em + 7.27vw, 7em);
  text-align: center;
}

.service-areas-maps h1 {
  font-size: clamp(1.5em, 1.227em + 1.36vw, 2.25em);
}

.service-areas-maps .textbox.top {
  margin: 0 auto 2em;
  max-width: 63.5em;
}

.service-areas-maps .textbox.top p {
  font-weight: 600;
}


/* Tab Buttons --------------- */
.service-areas-maps .tab-buttons {
  margin: 0 0 2.5em;
}

.service-areas-maps :is(button, .button):focus-visible {
  background: var(--ws-navy);
  border-color: var(--ws-navy);
  color: #FFF;
}

.service-areas-maps .tab-buttons button.active {
  background: var(--ws-orange);
  border-color: var(--ws-orange);
  color: #FFF;
}



/* Tabs --------------- */
.service-areas-maps .tabs {
  margin-inline: auto;
  max-width: 63.5em;
  position: relative;
}

.service-areas-maps .tabs>div {
  display: none;
}

.service-areas-maps .tabs>div.active {
  display: block;
}

.service-areas-maps .tab-northeast {
  text-align: left;
}

.service-areas-maps .tab-usa .textbox {
  margin-inline: auto;
  max-width: 57.3125em;
}

.service-areas-maps .tabs p {
  font-size: 1.125em;
  line-height: 1.667;
}


/* Maps --------------- */

.service-areas-maps .radius,
.service-areas-maps .map .states a {
  pointer-events: none;
}

.service-areas-maps .map .states a.clickable {
  pointer-events: all;
}

/* Clickable states */
.service-areas-maps .map a.clickable path {
  fill: var(--ws-orange-4);
  transition: fill .3s ease;
}

/* MA and RI are a different shade of orange */
.service-areas-maps .map a:is(.massachusetts, .rhode-island).clickable path {
  fill: var(--ws-orange);
}

/* Non-clickable states in northeast map */
.service-areas-maps .tab-northeast .map .states a:not(.clickable) path {
  fill: #AAA;
}

/* Non-clickable states in USA map */
.service-areas-maps .tab-usa .map .states a:not(.clickable) path {
  fill: #EEA281;
}

/* Map pins */
.service-areas-maps .map .map-markers a {
  transition: fill .3s ease;
}

/* Dialog popup */
.service-areas-maps #map-dialog {
  background: #FFF;
  border: 0;
  display: none;
  margin: 0;
  min-width: 15.625em;
  outline: 0;
  padding: 0;
  position: absolute;
  transform: translateX(-100%);
}

.service-areas-maps .dialog-content {
  background: linear-gradient(#FFF, rgba(216, 216, 216, .5));
  border-block: .25em solid var(--ws-orange);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  text-align: left;
}

.service-areas-maps .dialog-content::before {
  aspect-ratio: 1;
  background: var(--ws-navy) url('/wp-content/themes/figpress-child/images/icons/map-marker.svg') no-repeat center / auto 1.5em;
  border: 2px solid #FFF;
  border-radius: 50%;
  content: '';
  inset: 0 1.5em auto auto;
  position: absolute;
  transform: translateY(-50%);
  width: 3.125em;
}

.service-areas-maps .dialog-content>a {
  display: block;
  outline: 0;
  padding: 1.375em 2em 1.7em 1.25em;
}

.service-areas-maps .dialog-content strong {
  color: #000;
  display: block;
  font-size: 1.25em;
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 .25em;
  transition: color .3s ease;
}

.service-areas-maps .dialog-content address {
  color: #444;
  font-size: 1.125em;
  font-style: normal;
  line-height: 1.33;
  transition: color .3s ease;
  white-space: nowrap;
}




/* State Link Buttons --------------- */
.service-areas-maps .buttons {
  margin: clamp(2em, 1.636em + 1.82vw, 3em) 0 0;
  text-align: center;
}




/* ########## ========== SERVICE-AREAS.CSS ========== ########## */