/* Standalone styles for the Regional Representatives map. */
.regional-map {
  --map-background: #c3d3f2;
  --map-title: #1c2653;
  --map-state: #1c2653;
  --map-label: #1c2653;
  --map-contact: #1c2653;
  --map-marker: #00a2a5;
  --map-fill: #8da4d2;
  --regional-map-state-fill: var(--map-fill);
  --map-outline: #c3d3f2;
  --map-select-rule: var(--map-marker);
  --map-scroll-track: transparent;
  --map-scroll-thumb: #d9d9d9;
  box-sizing: border-box;
  background: var(--map-background);
  color: var(--map-label);
  font-family: Sailec, Arial, sans-serif;
}

.regional-map--dark {
  --map-background: #1c2653;
  --map-title: #fef9fb;
  --map-state: #fef9fb;
  --map-label: #fef9fb;
  --map-contact: #fef9fb;
  --map-marker: #00a2a5;
  --map-fill: #8da4d2;
  --map-outline: #1c2653;
}

.regional-map *,
.regional-map *::before,
.regional-map *::after { box-sizing: border-box; }

.regional-map__layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: 40px;
  column-gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 5.6vw, 80px) 0;
}

.regional-map__panel {
  width: 400px;
  flex: 0 1 385px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.regional-map__title,
.regional-map__state,
.regional-map__label,
.regional-map__contact p { margin: 0; }

.regional-map__title {
  color: var(--map-title);
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
}

.regional-map__state {
  width: 100%;
  color: var(--map-state);
  font-size: 30px;
  font-weight: 800;
  line-height: 40px;
}

.regional-map__select { display: none; width: 100%; position: relative; }

.regional-map__select-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--map-state);
  font: inherit;
  font-size: 30px;
  font-weight: 800;
  line-height: 40px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--map-state);
  cursor: pointer;
}

.regional-map__chevron {
  display: inline-flex;
  width: 18px;
  height: 15px;
  transform: rotate(0);
  transition: transform .2s ease;
}

.regional-map__chevron svg { display: block; width: 100%; height: 100%; }
.regional-map--dark .regional-map__chevron svg path { fill: #fef9fb; }

.regional-map__select-button[aria-expanded="true"] .regional-map__chevron { transform: rotate(0deg); }

.regional-map__options {
  position: absolute;
  z-index: 2;
  width: 232px;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 8px 10px 0;
  background: var(--map-background);
  border-bottom: 1px solid var(--map-select-rule);
  scrollbar-width: none;
}

.regional-map__options::-webkit-scrollbar { display: none; }

.regional-map__scroll-thumb {
  position: absolute;
  top: 50px;
  right: 0;
  width: 15px;
  height: 50px;
  background: var(--map-scroll-thumb);
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
}

.regional-map__scroll-thumb:active { cursor: grabbing; }

.regional-map__option {
  display: block;
  width: 217px;
  min-height: 25px;
  padding: 0;
  color: #1c2653;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.regional-map--light .regional-map__option { color: #1c2653; }
.regional-map--dark .regional-map__option { color: #fef9fb; }
.regional-map__option[aria-selected="true"] { color: var(--map-state); font-weight: 600; }

.regional-map__contact-group { width: 100%; }
.regional-map__label { margin-bottom: 10px; color: var(--map-label); font-size: 16px; font-weight: 700; line-height: 20px; }
.regional-map__contact-list { display: grid; gap: 16px; }

.regional-map__contact { display: flex; align-items: flex-start; gap: 18px; }
.regional-map__marker { width: 15px; height: 15.68px; flex: 0 0 auto; margin-top: 2px; background: var(--map-marker); }
.regional-map__contact p { color: var(--map-contact); font-size: 16px; line-height: 20px; }
.regional-map.is-state-selected .regional-map__contact p { color: var(--map-label); }
.regional-map__contact a { color: inherit; font-weight: 800; text-decoration: none; }
.regional-map__contact a:hover, .regional-map__contact a:focus-visible { text-decoration: underline; }

.regional-map__canvas { width: min(100%, 760px); flex: 1 1 760px; min-width: 0; }
.regional-map__canvas > p { margin: 0; }
.regional-map__canvas svg { display: block; width: 100%; height: auto; max-width: 100%; }
.regional-map__canvas svg path { fill: var(--map-fill); stroke: var(--map-outline); stroke-linejoin: round; cursor: pointer; transition: fill .15s ease; }
.regional-map__canvas svg path:hover, .regional-map__canvas svg path:focus-visible { fill: var(--map-state) !important; outline: none; }
.regional-map__canvas svg path.is-active { fill: var(--map-state) !important; outline: none; }
.regional-map--light.is-state-selected .regional-map__state { color: #1c2653; }
.regional-map--dark.is-state-selected .regional-map__state,
.regional-map--dark.is-state-selected .regional-map__select-button,
.regional-map--dark.is-state-selected .regional-map__option[aria-selected="true"],
.regional-map--dark.is-state-selected .regional-map__contact p { color: #fef9fb; }
.regional-map--light .regional-map__canvas svg path:hover,
.regional-map--light .regional-map__canvas svg path:focus-visible,
.regional-map--light .regional-map__canvas svg path.is-active,
.regional-map--light .regional-map__canvas svg path.is-active:hover,
.regional-map--light .regional-map__canvas svg path.is-active:focus-visible { fill: #1c2653 !important; }
.regional-map--dark .regional-map__canvas svg path:hover,
.regional-map--dark .regional-map__canvas svg path:focus-visible,
.regional-map--dark .regional-map__canvas svg path.is-active,
.regional-map--dark .regional-map__canvas svg path.is-active:hover,
.regional-map--dark .regional-map__canvas svg path.is-active:focus-visible { fill: #fef9fb !important; }
.regional-map__canvas svg path:focus-visible { stroke: var(--map-title); stroke-width: 2.5px; }
.regional-map__legal { flex: 0 0 100%; color: var(--map-label); font-size: 16px; line-height: 24px; }
.regional-map__legal a{
  text-decoration: underline;
}
.regional-map__legal p { margin: 0; }
.regional-map__legal p + p { margin-top: 20px; }

@media (max-width: 1024px) {
  .regional-map__layout { padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 768px) {
  .regional-map__layout { display: grid; grid-template-areas: "title" "canvas" "select" "representatives" "managers" "mac" "legal"; gap: 0; padding: 20px 20px 28px; overflow: visible; }
  .regional-map__panel { display: contents; }
  .regional-map__title { grid-area: title; margin-bottom: 8px; font-size: 24px; line-height: 30px; text-align: left; }
  .regional-map__canvas { grid-area: canvas; width: 100%; max-width: none; margin-bottom: 12px; transform: none; }
  .regional-map__state { display: none; }
  .regional-map__select { display: block; grid-area: select; width: 232px; max-width: 100%; justify-self: start; margin-bottom: 10px;        margin-inline: auto; }
  .regional-map__select-button { justify-content: space-between; gap: 10px; color: var(--map-label); font-size: 30px; line-height: 40px; border-bottom-color: transparent; }
  .regional-map__select-button[aria-expanded="true"] { border-bottom-color: var(--map-select-rule); }
  .regional-map__chevron { width: 20px; height: 40px; align-items: center; justify-content: center;    transform: rotate(180deg); }
  .regional-map__options { position: relative; width: 232px; max-width: 100%; max-height: 165px; padding: 10px 0 0; background: transparent; border-bottom: 0; }
  .regional-map__contact-group { margin-right: -4px; margin-left: -4px; padding: 13px 0; }
  .regional-map__contact-group:first-of-type { border-top: 1px solid var(--map-marker); }
  .regional-map__contact-group[data-representatives-group] { grid-area: representatives; }
  .regional-map__contact-group[data-managers-group] { grid-area: managers; }
  .regional-map__contact-group[data-mac-group] { grid-area: mac; }
  .regional-map__label { display: none; }
  .regional-map__contact-list { gap: 10px; }
  .regional-map__contact { gap: 10px; }
  .regional-map__marker { width: 10px; height: 10px; margin-top: 2px; }
  .regional-map__contact p { font-size: 12px; line-height: 15px; }
  .regional-map__legal { grid-area: legal; padding-top: 10px; font-size: 10px; line-height: normal; }
  .regional-map__legal p + p { margin-top: 11px; }
}