@import url(audience-map-fonts.css);

/* shared */
svg {
    width: 100%;
    height: auto;
}
.audience-map__wrapper {
    max-width: 1200px !important;
}

.audience-map__wrapper * {
    font-family: 'Source Sans Pro';
    font-weight: bold;
}

/* metro map */
.metro-map svg {
    padding: 5px;
    overflow: visible;
}
.metro-map svg * {
    pointer-events: none;
}
.metro-map svg rect, .metro-map svg rect * {
    pointer-events: all;
    cursor: pointer;
    transition: all .5s ease-in-out;
}
.metro-map rect:hover {
    filter: brightness(80%) contrast(90%);
}
.metro-map .helper {
    opacity: 0;
    font-weight: 600;
    font-size: 12px;
    fill: #fff;
    transition: opacity 0.7s ease-in;
}
.metro-map .helper.active {
    opacity: 1;
}

/* geo map */

.geographic-map svg * {
    pointer-events: none;
}
.geographic-map svg [id^="land-"], svg [id^="land-"] * {
    pointer-events: all;
}
.geographic-map svg [id^="land-"] path {
    transition: fill 0.5s ease-in-out;
}
.geographic-map svg [id^="land-"]:hover path {
    fill: #ddd;
    transition: fill 0.5s ease-in-out;
    cursor: pointer;
}
/* case for unaware and seeking */
.geographic-map svg [id^="land-"]:hover rect {
    cursor: pointer;
}
.geographic-map text[class*="-label"], .geographic-map text[class*="-label"] * {
    transition: opacity 0.6s ease-in;
}
.geographic-map text[class*="-label"].active {
    fill: #fff;
}

.geographic-map svg {
    background-color: #c1d6e5; /* ocean */
}

.geographic-map .helper {
    opacity: 0;
    font-weight: 600;
    font-size: 12px;
    fill: #fff;
    transition: opacity 0.7s ease-in;
}
.geographic-map .helper.active {
    opacity: 1;
}

.geographic-map #land-open:hover path {
    fill: var(--open-color);
}
.geographic-map #land-growing:hover path {
    fill: var(--growing-color);
}
.geographic-map #land-unclear:hover path {
    fill: var(--unclear-color);
}
.geographic-map #land-dual:hover path {
    fill: var(--dual-color);
}
.geographic-map #land-uninterested:hover path {
    fill: var(--uninterested-color);
}
.geographic-map #land-hostile:hover path {
    fill: var(--hostile-color);
}
.geographic-map #land-professing:hover path {
    fill: var(--professing-color);
}
.geographic-map #land-multiplying:hover path {
    fill: var(--multiplying-color);
}
.geographic-map #land-engaged:hover path {
    fill: var(--engaged-color);
}
.geographic-map #land-grounded:hover path {
    fill: var(--grounded-color);
}