/*
 * Mapa mundial (etapa F7) -- 36 países, um uso só.
 *
 * Transcrito de `main.css:715-757` (desktop) e `815-830` (celular).
 *
 * **As cores do mapa são as duas que a B2 deixou de fora dos tokens de propósito** -- o cinza
 * `#C0C0C0` do país sem presença e o azul `#1B5B80` do hover. Elas existem só aqui: aquela
 * etapa registrou que cor de uso único chega com o componente que a usa, e é este.
 */

.mapa__desenho {
  position: relative;
  margin: 0 auto;
}

.mapa__svg {
  display: block;
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

/*
 * O país sem presença é o estado normal de **toda** forma do mapa: são 181, e as 36 que
 * acendem recebem a classe do script.
 */
.mapa__svg path {
  fill: #c0c0c0;
  stroke: none;
  transition: fill linear 0.15s;
}

/*
 * **A classe está sempre num `<path>`**, e isso mudou na G12b: a F7 a punha no elemento que
 * tem o `id` -- que em 8 dos 36 países é um `<g>` com várias formas dentro -- e deixava o CSS
 * pintar todos os `<path>` de dentro. Aquilo acendia mais país do que o original: as 22 formas
 * do Canadá, as 7 dos Estados Unidos, os Açores e a Madeira, a Tasmânia, Cabinda, Hainan e a
 * Malásia oriental. Hoje quem escolhe as partes é o script, com a regra do original (ver
 * `js/mapa.js`), e aqui basta um seletor.
 */
.mapa__svg path.mapa__forma--ativa {
  fill: var(--seb-azul);
}

/*
 * **O hover é do país inteiro, e não da parte** -- é o que o original faz: lá o `mouseenter` de
 * qualquer parte põe `country-hover` em **todas** as partes daquele país. Entre os 36, o único
 * caso em que isso se vê são as Filipinas, que têm 7 partes acesas; nos outros 35 a lista de
 * partes tem uma só.
 *
 * O `g[id]:has(> …:hover)` é o que diz "as partes acesas do país cuja parte acesa está sob o
 * ponteiro". **O `[id]` é o que limita a regra ao país, e não é decoração:** o mapa inteiro está
 * dentro de um `<g>` **sem `id`**, e os 28 países que são `<path>` solto são filhos **diretos**
 * dele -- sem o `[id]`, passar o ponteiro no Brasil satisfaria o `:has()` daquele `<g>` raiz e
 * acenderia os 28 de uma vez. Os 8 grupos de país têm `id`; o raiz não (ele é o único `<g>` sem,
 * e o `id="world-map"` do original saiu para o `<svg>` na F7).
 *
 * O `>` continua necessário pela mesma razão, um nível acima: com descendente, o `<g>` raiz
 * voltaria a casar por conter as formas dos grupos.
 *
 * `:has()` é o mesmo recurso que o `banner.css` e a folha do learning já usam.
 */
.mapa__svg path.mapa__forma--ativa:hover,
.mapa__svg g[id]:has(> path.mapa__forma--ativa:hover) > path.mapa__forma--ativa {
  fill: #1b5b80;
  stroke: var(--seb-branco);
  stroke-width: 1.5;
  cursor: pointer;
}

/*
 * A dica nasce escondida e o script a posiciona. `pointer-events: none` porque ela segue o
 * ponteiro e não pode roubar o hover da forma que a produziu.
 *
 * **O fundo é `#e9edff`, e a G12b corrigiu isto:** a F7 havia escrito `#c0c0c0` aqui, que é o
 * cinza das formas sem presença, e no original (`.map-tooltip`) a dica é o lilás claro
 * `#e9edff`. Erro de transcrição, e não decisão -- ele só apareceu quando a dica foi vista
 * numa página, que é o que esta etapa faz. Como as outras duas cores deste arquivo, ela é de
 * uso único e mora aqui, e não nos tokens.
 */
.mapa__dica {
  position: absolute;
  display: none;
  padding: 4px 14px;
  border: 1px solid var(--seb-azul);
  border-radius: 20px;
  background-color: #e9edff;
  color: var(--seb-azul);
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.mapa__dica--visivel {
  display: block;
}

/*
 * **A lista de países não tem regra neste arquivo, e o celular não tem bloco nenhum.** As duas
 * ausências são a mesma correção, da G12c.
 *
 * A F7 escondia a lista com sete declarações copiadas da `.sr-only` e a fazia **reaparecer** no
 * celular, em duas colunas, dizendo que era o que o original fazia. A G12b conferiu no `map.js`
 * que não é -- lá a `.countries--is-mobile` é `display: none` em toda largura, e quem a mostra é
 * o JavaScript da animação guiada, depois de um toque --, mas manteve a lista visível e
 * registrou a consequência: a faixa do mapa saía **554px mais alta** que a do original. Montada
 * a página inteira, aquela era a maior diferença da home.
 *
 * A correção é não fazer nada: a lista fica escondida do olho nas duas larguras, pela `.sr-only`
 * do template, e continua sendo o que o leitor de tela lê e a fonte que o script usa para
 * acender as formas. Sem o reaparecimento, as sete declarações não precisam ser desfeitas em
 * lugar nenhum -- e aí a utilitária do `base.css` diz a mesma coisa em zero linha aqui.
 *
 * O desenho encolhe por conta própria, pelo `max-width: 100%` do `<svg>`. O que o `main.css`
 * esconde no celular é a instrução "Explore nossa presença global", e isso é da folha da página:
 * em tela de toque não há hover para explorar.
 */