@import "style.css";

.map {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 120px;
}

/* contatos */
.map__contact div p {
    font-size: var(--font-base);
    font-weight: 300;
}

.map__contact div i {
    color: var(--dark-blue);
    font-size: var(--font-base);
}

.map__contact {
    display: flex;
    flex-direction: column;
}

.map__contact div {
    display: flex;
    align-items: center;
    gap: 5px;
}


.map__container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* Título */
.map__title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.map__title i {
    font-size: var(--font-xl);
}

.map__title div {
    color: var(--dark-blue);
    font-size: var(--font-subtitle);
    font-weight: 500;
}


/* Conteúdo */
.map__content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.map__content div div p {
    font-size: var(--font-md);
    font-weight: 300;
}

.map__content div i {
    font-size: var(--font-xl);
}

.map__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map__city {
    font-size: var(--font-xl);
}

.map__address {
    display: flex;
    align-items: self-start;
    gap: 8px;
    margin-bottom: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

/* Estilo base */
svg path {
    fill: rgba(0, 79, 122, 1);
    fill-opacity: 0.25;
    transition: fill 0.3s, fill-opacity 0.3s;
    stroke: white;
    cursor: default;
}

/* Clicáveis */
svg path[id="BR-PB"],
svg path[id="BR-SP"],
svg path[id="BR-DF"] {
    fill-opacity: 0.5;
    cursor: pointer;
}

svg path[id="BR-PB"]:hover,
svg path[id="BR-SP"]:hover,
svg path[id="BR-DF"]:hover {
    fill-opacity: 1 !important;
}

/* Selecionado */
svg path.selected {
    fill-opacity: 1 !important;
    stroke-width: 2px;
}

svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1024px) {
    .map {
        padding: 30px 60px;
    }
}

@media (max-width: 768px) {
    .map__container {
        gap: 20px;
    }
    .map {
        padding: 20px 20px;
    }
}

@media (max-width: 500px) {
    .map {
        flex-direction: column;
    }
    .map__contact {
        display: none;
    }
    #city {
        display: none;
    }
    .map__title {
        justify-content: center;
    }
}