/* Barra de cima da V2 (partes/barra.blade.php, dist/js/navegacao.js; barra nova, 30-10-2026). Só a V2: o código antigo
   (legado/inc/topBarNav.php) continua com as regras #navTopbar do main.css, que não tocam nestas classes (.topo-*).
   - Um cartão com a altura de 63px (de 4 a 67px, como antes: as notícias presas contam com isso), cantos de 12px e
     uma linha laranja da marca em baixo.
   - Computador: o logótipo, as ligações (a página atual com um traço laranja por baixo) e, à direita, o tema, a
     língua, a conta (ou "Entrar") e o carrinho. Os menus abrem por baixo do botão, encostados à direita.
   - Até 991px: o logótipo, o carrinho e o botão do menu; o painel abre por baixo da barra, num cartão, com as
     ligações em linhas, o tema numa linha com um interruptor, e a língua e a conta abertas no sítio. */

.topo {
  --topo-altura: 63px;
  --topo-traco: 3px;
  position: sticky;
  top: 0;
  z-index: 1030;
  margin: 0 0 var(--espaco-2);
  transition: transform .3s ease;
}

.topo.scrolled-down {
  transform: translateY(calc(-100% - var(--espaco-2)));
}

.topo.scrolled-up {
  transform: none;
}

.topo-barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  height: var(--topo-altura);
  padding: 0 var(--espaco-4) var(--topo-traco) var(--espaco-5);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: inset 0 calc(-1 * var(--topo-traco)) 0 var(--laranja-marca), var(--sombra-painel);
}

/* --- Logótipo ------------------------------------------------------------------------------------------------------ */

.topo-marca {
  flex: none;
  display: flex;
  align-items: center;
  border-radius: var(--raio-campo);
}

.topo-logo {
  display: block;
  width: auto;
  height: 38px;
}

/* --- Painel: no computador fica na barra ---------------------------------------------------------------------------- */

.topo-painel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--espaco-5);
  min-width: 0;
  height: 100%;
}

.topo-navegacao {
  height: 100%;
}

.topo-ligacoes {
  display: flex;
  align-items: stretch;
  gap: var(--espaco-1);
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topo-ligacoes > li {
  display: flex;
}

/* Cada ligação ocupa a altura da barra; a página atual tem o traço laranja em cima da linha laranja da barra */
.topo-ligacao,
.topo-ligacao:link,
.topo-ligacao:visited {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: 0 var(--espaco-3);
  color: var(--texto-forte);
  /* 16px como o texto do site, os botões e o rodapé (antes 15px: a letra mais pequena da página; 30-10-2026) */
  font-size: var(--tamanho-corpo);
  font-weight: var(--peso-medio);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}

/* Ao passar o rato, o efeito da barra antiga (reposto a 30-10-2026, a pedido): a linha laranja em degradê cresce da
   esquerda por baixo do texto, a 4px dele; a página atual a negrito na cor da marca, com a linha inteira */
.topo-ligacao::after {
  content: "";
  position: absolute;
  right: var(--espaco-3);
  bottom: 14px;
  left: var(--espaco-3);
  height: 3px;
  background: linear-gradient(to right, var(--laranja-vivo), var(--laranja-dourado), var(--pessego));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.topo-ligacao:hover,
.topo-ligacao:focus-visible {
  color: var(--texto-forte);
}

.topo-ligacao:hover::after,
.topo-ligacao:focus-visible::after {
  transform: scaleX(1);
}

.topo-ligacao[aria-current="page"] {
  color: var(--texto-marca);
  font-weight: var(--peso-forte);
}

.topo-ligacao[aria-current="page"]::after {
  transform: scaleX(1);
}

.topo-ligacao .tamanho-ficheiro {
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: var(--peso-normal);
}

/* As ferramentas à direita, separadas das ligações por uma linha */
.topo-ferramentas {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding-left: var(--espaco-4);
  border-left: 1px solid var(--borda);
}

/* --- Botões redondos da barra (tema, língua, conta, carrinho, menu) ------------------------------------------------- */

.topo-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0 var(--espaco-2);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--texto-forte);
  font: inherit;
  font-size: var(--tamanho-corpo);
  font-weight: var(--peso-medio);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

a.topo-botao:link,
a.topo-botao:visited {
  color: var(--texto-forte);
}

.topo-botao:hover,
.topo-menu-abrir[aria-expanded="true"] {
  border-color: var(--borda);
  background: var(--superficie-realce);
}

.topo-seta {
  font-size: 11px;
  color: var(--texto-suave);
  transition: transform .2s ease;
}

.topo-menu-abrir[aria-expanded="true"] .topo-seta {
  transform: rotate(180deg);
}

/* Tema: o sol no claro, a lua no escuro. A caixa fica escondida mas alcança-se com o Tab (o contorno vai para o botão) */
.topo-tema {
  position: relative;
  display: flex;
}

.topo-tema-caixa {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.topo-tema-botao {
  width: 40px;
  padding: 0;
}

.topo-tema-botao svg {
  width: 20px;
  height: 20px;
}

.topo-tema-sol {
  color: var(--laranja-marca);
}

.topo-tema-lua,
.topo-tema-caixa:checked + .topo-tema-botao .topo-tema-sol {
  display: none;
}

.topo-tema-caixa:checked + .topo-tema-botao .topo-tema-lua {
  display: block;
  color: var(--texto-forte);
}

.topo-tema-caixa:focus-visible + .topo-tema-botao {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* O nome ("Tema escuro") e o interruptor só aparecem no menu do telemóvel; no computador o nome fica para os leitores
   de ecrã */
.topo-rotulo-movel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.topo-interruptor {
  display: none;
}

/* Língua: a bandeira e o código */
.topo-bandeira {
  display: block;
  width: 22px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--contorno-ponto);
}

.topo-lingua-codigo {
  font-size: 14px;
}

/* O nome da língua só no menu do telemóvel (no computador, o código) */
.topo-lingua-nome {
  display: none;
}

/* Entrar: o botão principal, mais baixo que os outros */
.topo-entrar.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 40px;
  margin-left: var(--espaco-1);
  padding: 0 var(--espaco-4);
  white-space: nowrap;
}

/* Conta: a inicial num círculo laranja e o primeiro nome; com uma página da conta aberta, o nome a laranja */
.topo-conta-botao {
  padding: 0 var(--espaco-3) 0 4px;
}

.topo-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--laranja-marca);
  color: var(--texto-sobre-laranja);
  font-size: 12px;
  letter-spacing: .02em;
  font-weight: var(--peso-forte);
}

/* O nome completo; um nome muito comprido acaba em "…" */
.topo-conta-nome {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topo-conta-botao[data-ativa] .topo-conta-nome {
  color: var(--texto-marca);
}

/* Carrinho: o número num círculo laranja no canto do ícone */
.topo-carrinho {
  flex: none;
  width: 44px;
  font-size: 18px;
}

.topo-carrinho[aria-current="page"] {
  border-color: var(--laranja-marca);
}

.topo-contador {
  position: absolute;
  top: -2px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--superficie);
  border-radius: var(--raio-pilula);
  background: var(--laranja-marca);
  color: var(--texto-sobre-laranja);
  font-size: 11px;
  font-weight: var(--peso-forte);
  line-height: 1;
}

/* --- Menus da língua e da conta --------------------------------------------------------------------------------- */

.topo-menu-caixa {
  position: relative;
}

.topo-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2;
  min-width: 220px;
  margin: 0;
  padding: var(--espaco-2);
  list-style: none;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-menu);
}

.topo-menu[hidden] {
  display: none;
}

.topo-menu-opcao,
a.topo-menu-opcao:link,
a.topo-menu-opcao:visited {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--espaco-3);
  border: 0;
  border-radius: var(--raio-campo);
  background: transparent;
  color: var(--texto-forte);
  font: inherit;
  font-size: var(--tamanho-corpo);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.topo-menu-opcao > .fa-solid {
  color: var(--texto-suave);
}

.topo-menu-opcao:hover,
.topo-menu-opcao:focus-visible {
  background: var(--superficie-realce);
}

.topo-menu-opcao[aria-current] {
  font-weight: var(--peso-medio);
}

.topo-menu-opcao[aria-current] > .fa-solid {
  color: var(--laranja-marca);
}

.topo-menu-certo {
  margin-left: auto;
}

.topo-menu-separador {
  height: 1px;
  margin: var(--espaco-2) var(--espaco-1);
  background: var(--borda);
}

.topo-menu-sair:hover > .fa-solid {
  color: var(--vermelho);
}

/* --- Botão do menu (só até 991px) ----------------------------------------------------------------------------------- */

.topo-menu-botao {
  display: none;
  flex: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: var(--borda);
  border-radius: var(--raio-campo);
}

.topo-menu-traco {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto-forte);
  transition: transform .2s ease, opacity .2s ease;
}

/* Aberto: os três traços fazem um "×" */
.topo-menu-botao[aria-expanded="true"] .topo-menu-traco:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.topo-menu-botao[aria-expanded="true"] .topo-menu-traco:nth-child(2) {
  opacity: 0;
}

.topo-menu-botao[aria-expanded="true"] .topo-menu-traco:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Ordem à direita no computador (30-10-2026, a pedido): | carrinho, conta (ou "Entrar") | tema, língua. O painel e as
   ferramentas "desaparecem" (display: contents) e as peças passam a ser da barra, para o carrinho (fora do painel, por
   estar sempre à vista no telemóvel) ficar antes da conta. Uma linha antes do carrinho e outra antes do tema */
@media (min-width: 992px) {
  .topo-painel,
  .topo-ferramentas {
    display: contents;
  }

  .topo-navegacao {
    order: 1;
    margin-left: auto;
  }

  .topo-carrinho {
    order: 2;
  }

  .topo-conta,
  .topo-entrar.btn {
    order: 3;
    margin-left: 0;
  }

  .topo-tema {
    order: 4;
  }

  .topo-linguas {
    order: 5;
  }

  .topo-menu-botao {
    order: 6;
  }

  /* As duas linhas: à esquerda do primeiro do grupo (o carrinho, ou a conta / "Entrar" sem carrinho) e à esquerda do
     tema */
  .topo-navegacao::after,
  .topo-tema::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 28px;
    background: var(--borda);
  }

  .topo-navegacao {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
  }

  .topo-tema::before {
    margin-right: var(--espaco-4);
  }

  .topo-tema {
    align-items: center;
    margin-left: var(--espaco-2);
  }

  .topo-barra {
    gap: var(--espaco-2);
  }

  .topo-navegacao {
    margin-right: var(--espaco-2);
  }
}

/* Ligações com muitas letras (ex.: o francês) num ecrã de computador estreito: menos espaço entre elas */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .topo-barra {
    gap: var(--espaco-3);
  }

  .topo-painel {
    gap: var(--espaco-3);
  }

  .topo-ligacao,
  .topo-ligacao:link,
  .topo-ligacao:visited {
    padding: 0 var(--espaco-2);
  }

  .topo-ligacao::after {
    right: var(--espaco-2);
    left: var(--espaco-2);
  }

  .topo-conta-nome {
    max-width: 130px;
  }

  /* A língua só com a bandeira e a seta (o nome está no aria-label do botão) e as linhas mais perto */
  .topo-lingua-codigo {
    display: none;
  }

  .topo-navegacao {
    gap: var(--espaco-2);
  }

  .topo-tema::before {
    margin-right: var(--espaco-2);
  }

  .topo-barra {
    padding-left: var(--espaco-4);
  }
}

/* Num computador estreito, 15px nas ligações e na conta, para tudo caber numa linha */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .topo-ligacao,
  .topo-ligacao:link,
  .topo-ligacao:visited,
  .topo-botao {
    font-size: 15px;
  }
}

/* --- Telemóvel e tablet: o painel abre por baixo da barra --------------------------------------------------------- */

@media (max-width: 991.98px) {
  .topo {
    --topo-altura: 60px;
  }

  .topo-barra {
    gap: var(--espaco-2);
    padding-left: var(--espaco-4);
    padding-right: var(--espaco-3);
  }

  .topo-logo {
    height: 32px;
  }

  .topo-marca {
    margin-right: auto;
  }

  .topo-menu-botao {
    display: inline-flex;
  }

  /* O painel: um cartão por baixo da barra, com a altura do que tem dentro (e scroll se não couber no ecrã) */
  .topo-painel {
    position: absolute;
    top: calc(100% + var(--espaco-2));
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    max-height: calc(100dvh - var(--topo-altura) - var(--espaco-5));
    padding: var(--espaco-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    background: var(--superficie);
    box-shadow: var(--sombra-menu);
  }

  .topo-aberto .topo-painel {
    display: flex;
  }

  .topo-navegacao {
    height: auto;
  }

  .topo-ligacoes {
    flex-direction: column;
    gap: 0;
    height: auto;
  }

  .topo-ligacao,
  .topo-ligacao:link,
  .topo-ligacao:visited {
    min-height: 48px;
    padding: 0 var(--espaco-3);
    border-radius: var(--raio-campo);
    font-size: 16px;
  }

  .topo-ligacao:hover {
    background: var(--superficie-realce);
  }

  /* A página atual: uma barra laranja à esquerda em vez do traço por baixo */
  .topo-ligacao::after,
  .topo-ligacao:hover::after {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 0;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: var(--laranja-marca);
    transform: scaleY(0);
  }

  .topo-ligacao[aria-current="page"] {
    background: var(--superficie-realce);
  }

  .topo-ligacao[aria-current="page"]::after {
    transform: scaleY(1);
  }

  .topo-ferramentas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--espaco-1);
    margin-top: var(--espaco-2);
    padding: var(--espaco-2) 0 0;
    border-top: 1px solid var(--borda);
    border-left: 0;
  }

  /* As ferramentas em linhas da largura do painel */
  .topo-ferramentas .topo-botao,
  .topo-entrar.btn {
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--espaco-3);
    border-radius: var(--raio-campo);
  }

  .topo-entrar.btn {
    justify-content: center;
    margin: var(--espaco-2) 0 0;
  }

  /* Tema: "Tema escuro" com um interruptor à direita */
  .topo-tema-botao svg {
    flex: none;
  }

  .topo-rotulo-movel {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-weight: var(--peso-medio);
  }

  .topo-interruptor {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    margin-left: auto;
    border-radius: var(--raio-pilula);
    background: var(--borda);
    box-shadow: inset 0 0 0 1px var(--texto-suave);
    transition: background-color .2s ease;
  }

  .topo-interruptor::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--superficie);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .2s var(--mola);
  }

  .topo-tema-caixa:checked + .topo-tema-botao .topo-interruptor {
    background: var(--laranja-marca);
    box-shadow: none;
  }

  .topo-tema-caixa:checked + .topo-tema-botao .topo-interruptor::after {
    transform: translateX(20px);
  }

  .topo-lingua-codigo {
    display: none;
  }

  .topo-lingua-nome {
    display: inline;
  }

  /* Língua e conta: a lista abre no sítio, por baixo do botão */
  .topo-menu-abrir .topo-seta {
    margin-left: auto;
  }

  .topo-menu {
    position: static;
    min-width: 0;
    margin: var(--espaco-1) 0 var(--espaco-2) var(--espaco-5);
    padding: 0;
    border: 0;
    border-left: 2px solid var(--borda);
    border-radius: 0;
    box-shadow: none;
  }

  .topo-menu-opcao,
  a.topo-menu-opcao:link,
  a.topo-menu-opcao:visited {
    border-radius: 0 var(--raio-campo) var(--raio-campo) 0;
  }

  .topo-conta-nome {
    max-width: none;
  }

  /* A página por trás não desloca com o menu aberto */
  html.topo-sem-deslocar,
  html.topo-sem-deslocar body {
    overflow: hidden;
  }
}

@media (max-width: 575.98px) {
  .topo-logo {
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topo,
  .topo-ligacao,
  .topo-ligacao::after,
  .topo-seta,
  .topo-menu-traco,
  .topo-interruptor,
  .topo-interruptor::after {
    transition: none;
  }
}