/* =========================================
   REGION NAVIGATION
========================================= */

.presence-regions {
  display: grid;
  flex-wrap: wrap;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
}

.presence-region {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Gotham";
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.presence-region:hover,
.presence-region.is-active {
  background: #ff0024;
  border-color: #ff0024;
  color: #fff;
}


/* =========================================
   COUNTRIES
========================================= */

.presence-countries {
  margin-top: 12px;
}

.presence-country-group {
  display: none;
}

.presence-country-group.is-active {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 20px;
  row-gap: 3px;
}

.presence-country {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: "Gotham";
}

.presence-country:hover,
.presence-country.is-active {
  color: #ff0024;
}


/* =========================================
   MAP
========================================= */

#presence-map {
  position: relative;

  width: 100%;

  overflow: hidden;
}


/**
 * All maps hidden by default.
 */
.region-map {
  display: none;

  width: 100%;
}


/**
 * Selected region map.
 */
.region-map.is-active {
  display: block;
}


/**
 * Inline SVG.
 */
.region-map svg {
  display: block;

  width: 100%;
  height: auto;

  overflow: visible;
}


/* =========================================
   COUNTRY PATHS
========================================= */

.region-map [data-country] {
  fill: #bababa;

  stroke: #231f20;
  stroke-width: 0.75;

  vector-effect: non-scaling-stroke;

  transition:
    fill 0.2s ease,
    opacity 0.2s ease;
}


/**
 * Optional:
 * slightly emphasize selected country.
 */
.region-map [data-country].is-active-country {
  fill: #a9a9a9;
}


/* =========================================
   RED DOT
========================================= */

.presence-map-dot {
  fill: #ff0024;

  stroke: rgba(255, 0, 36, 0.22);

  vector-effect: non-scaling-stroke;

  pointer-events: none;

  animation: presence-dot-in 0.2s ease;
}


@keyframes presence-dot-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {

  .presence-region {
    padding: 7px 9px;
    font-size: 11px;
  }

  .presence-country-group.is-active {
    column-gap: 14px;
    row-gap: 5px;
    grid-template-columns: repeat(4, 1fr);
  }

  .presence-country {
    font-size: 11px;
  }

}


/* Caribbean */
.presence-country-group[data-region="caribbean"].is-active {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 20px;
  row-gap: 3px;
}

/* Oceania */
.presence-country-group[data-region="oceania"].is-active {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 20px;
  row-gap: 3px;
}

.presence-country-group[data-region="caribbean"] .presence-country,
.presence-country-group[data-region="oceania"] .presence-country {
  white-space: nowrap;
}

@media (max-width: 576px) {
  .presence-regions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    scroll-snap-type: x proximity;
  }

  .presence-regions::-webkit-scrollbar {
    display: none;
  }

  .presence-region {
    flex: 0 0 auto;
    white-space: nowrap;

    scroll-snap-align: start;
  }
}

.presence-map-wrapper [data-country] {
  transition:
    fill 0.25s ease,
    opacity 0.25s ease;
}

.presence-map-wrapper svg {
  width: 100%;
}

/* Click Area */
/* .presence-map-wrapper
[data-region].is-active-region {
  fill: #ff0024;
} */

/* Click Country */
.presence-map-wrapper
[data-country].is-active-country {
  fill: #928a8c;
}

/* Dot */
.presence-map-dot {
  fill: #ff0024;
  stroke: rgba(255, 0, 36, 0.22);
  pointer-events: none;
}