/*
 * EU DELIVERY ID — site público.
 *
 * Os tokens são os mesmos de `eudeliveryid-web/src/ui/tokens.css`. Copiados, e
 * não importados: este site é estático, não partilha build com a aplicação, e
 * uma dependência entre os dois faria a página pública deixar de abrir sempre
 * que a aplicação mudasse. O preço é lembrar de os alinhar quando a marca
 * mudar — e a marca muda muito menos do que a aplicação.
 */

:root {
  --azul: #1b4298;
  --azul-texto: #15306b;
  --azul-suave: #eef2fb;
  --azul-contorno: #c9d5ee;
  --laranja: #f26522;
  --fundo: #f5f7fa;
  --superficie: #ffffff;
  --tinta: #16233f;
  --tinta-suave: #55617a;
  --linha: #e2e7f0;

  color-scheme: light dark;

  --largura: 68rem;
  --raio: 0.75rem;
}

/*
 * Tema escuro — em dois sítios, de propósito.
 *
 * O `@media` serve quem nunca escolheu nada: segue o sistema. O
 * `[data-tema="escuro"]` serve quem escolheu à mão, e tem de ganhar ao
 * sistema — daí o `:not([data-tema="claro"])` no media query, senão quem
 * pedisse claro num telemóvel escuro continuaria a ver escuro.
 *
 * Os valores são os mesmos nos dois blocos. Se mudar um, mudar o outro.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --azul-suave: #16233f;
    --azul-contorno: #2b3d63;
    --fundo: #0f1729;
    --superficie: #16233f;
    --tinta: #eef2fb;
    --tinta-suave: #a8b4cc;
    --linha: #2b3d63;
    --azul-texto: #a9c0ee;
  }
}

:root[data-tema='escuro'] {
  --azul-suave: #16233f;
  --azul-contorno: #2b3d63;
  --fundo: #0f1729;
  --superficie: #16233f;
  --tinta: #eef2fb;
  --tinta-suave: #a8b4cc;
  --linha: #2b3d63;
  --azul-texto: #a9c0ee;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A margem lateral respeita o entalhe e a barra de gestos — a mesma correcção
   que a aplicação levou a 16/08/2026. */
.largura {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

.salto-conteudo {
  position: absolute;
  left: -9999px;
}
.salto-conteudo:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--superficie);
  color: var(--tinta);
  padding: 0.75rem 1rem;
  border-radius: var(--raio);
  border: 2px solid var(--azul);
}

/* ─────────────────────────── cabeçalho ─────────────────────────── */

.cabecalho {
  border-bottom: 1px solid var(--linha);
  background: var(--superficie);
}
.cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}
.cabecalho__marca img {
  display: block;
  height: 2rem;
  width: auto;
}
.cabecalho__nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.cabecalho__nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
}
.cabecalho__nav a:hover {
  color: var(--azul-texto);
  text-decoration: underline;
}

/* ───────────────────────────── hero ───────────────────────────── */

.hero {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(27, 66, 152, 0.08), transparent),
    var(--fundo);
}
.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.hero__realce {
  color: var(--laranja);
}
.hero p {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--tinta-suave);
  max-width: 60ch;
}

/* ──────────────────────────── secções ─────────────────────────── */

.seccao {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--linha);
}
.seccao--suave {
  background: var(--azul-suave);
}
.seccao h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: -0.01em;
}
.seccao__intro {
  margin: 0 0 2rem;
  color: var(--tinta-suave);
  max-width: 65ch;
}

.cartoes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
}
.cartao h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.cartao p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

.texto-corrido {
  max-width: 68ch;
  color: var(--tinta-suave);
}

/* ─────────────────────────── conteúdo legal ─────────────────────────── */

.legal {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.legal__corpo {
  max-width: 72ch;
}
.legal__corpo h2 {
  margin-top: 2.5rem;
  font-size: 1.3rem;
  scroll-margin-top: 1rem;
}
.legal__corpo h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
}
.legal__corpo table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.legal__corpo th,
.legal__corpo td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--linha);
}
.legal__corpo th {
  color: var(--tinta);
  font-weight: 600;
}
.legal__corpo td {
  color: var(--tinta-suave);
}
.legal__envolve-tabela {
  overflow-x: auto;
}
.legal__data {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}

/* ─────────────────────────── rodapé ─────────────────────────── */

/*
 * ⚠️ O `padding-bottom` inclui `env(safe-area-inset-bottom)`.
 *
 * Sem isto, a última linha do rodapé fica por baixo da barra de gestos em
 * ecrãs com entalhe — foi o P2 medido a 15/08/2026 na aplicação, com cerca de
 * 16 px tapados. Aqui é pior do que lá: é neste rodapé que vive a ligação para
 * a Política de Privacidade, e uma ligação que não se alcança é uma ligação
 * que não existe para quem revê a app nas lojas.
 */
.rodape {
  border-top: 1px solid var(--linha);
  background: var(--superficie);
  padding-block: 2.5rem;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
}
.rodape__grelha {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.rodape img {
  display: block;
  height: 1.75rem;
  width: auto;
  margin-bottom: 0.75rem;
}
.rodape__nota,
.rodape__legal {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.9rem;
  max-width: 34ch;
}
.rodape__legal {
  margin-top: 1.75rem;
  max-width: none;
}

/*
 * As ligações do rodapé numa só lista, e a de Privacidade **entre as outras**.
 * Numa linha isolada no fim seria a primeira a ser cortada, e é justamente a
 * que as lojas exigem alcançável.
 */
.rodape__ligacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.rodape__ligacoes a {
  color: var(--azul-texto);
  text-decoration: none;
  font-weight: 500;
  /* Alvo de toque com 44 px de altura mínima — recomendação da Apple. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.rodape__ligacoes a:hover {
  text-decoration: underline;
}

a:focus-visible,
.rodape__ligacoes a:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * Marcação de rascunho.
 *
 * Existe para que um parágrafo por confirmar **não passe despercebido** a quem
 * abrir a página. Se esta regra ainda estiver aqui no dia da publicação, é
 * porque há texto que não devia estar publicado — e vê-se de longe.
 */
.nota-rascunho {
  border-left: 4px solid var(--laranja);
  background: rgba(242, 101, 34, 0.08);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--raio) var(--raio) 0;
}

/* ─────────────────────────── seletor de idioma ─────────────────────────── */

/*
 * Códigos de idioma, não bandeiras.
 *
 * Uma bandeira é um país, e um idioma não é um país: o espanhol não é a
 * Espanha, o alemão não é só a Alemanha, e o português muito menos. Códigos
 * são feios e são honestos.
 */
.cabecalho__direita {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.idiomas {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.idiomas a,
.idiomas__atual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.75rem; /* alvo de toque */
  padding-inline: 0.4rem;
  border-radius: var(--raio);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.idiomas a {
  color: var(--tinta-suave);
}
.idiomas a:hover {
  color: var(--azul-texto);
  background: var(--azul-suave);
}
.idiomas__atual {
  color: var(--azul-texto);
  background: var(--azul-suave);
  cursor: default;
}

.idiomas--grande {
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.idiomas--grande a {
  min-width: auto;
  padding-inline: 1rem;
  font-size: 1rem;
  border: 1px solid var(--linha);
}

/* ─────────────────────── bandeiras no seletor ─────────────────────── */

/*
 * A bandeira acompanha a sigla, nunca a substitui — ver `bandeiras.mjs`.
 * O contorno ténue existe para a bandeira alemã e a francesa não se
 * dissolverem no fundo: ambas têm branco ou preto nas bordas.
 */
.bandeira {
  width: 1.05rem;
  height: 0.75rem;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
  flex: none;
}
.idiomas a,
.idiomas__atual {
  gap: 0.35rem;
  min-width: 3.6rem;
}
.idiomas--grande a {
  gap: 0.5rem;
}

/* ───────────────────────── botão de tema ───────────────────────── */

/*
 * Nasce com `hidden` no HTML e só o `tema.js` o revela. Sem JavaScript não há
 * onde guardar a escolha, e um botão que não guarda nada é pior que nenhum —
 * o tema continua a seguir o sistema, que é o que faz sentido nesse caso.
 */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem; /* alvo de toque */
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta-suave);
  cursor: pointer;
}
.tema:hover {
  color: var(--azul-texto);
  border-color: var(--azul-contorno);
}
.tema svg {
  width: 1.15rem;
  height: 1.15rem;
}
.tema[hidden] {
  display: none;
}

/* ───────────────────────── lojas ───────────────────────── */

.seccao--lojas {
  background: var(--azul-suave);
}
.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*
 * Enquanto as aplicações não existirem nas lojas, isto é um `<span>` e não um
 * `<a>`: um botão que parece clicável e não leva a lado nenhum é pior do que
 * um botão que diz que ainda não está pronto. O endereço final já está no
 * `data-url`, à espera do dia da publicação.
 */
.loja {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--tinta);
  text-decoration: none;
  min-height: 3.25rem;
}
.loja[aria-disabled='true'] {
  opacity: 0.72;
  cursor: default;
}
.loja__icone {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}
.loja__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.loja__texto small {
  font-size: 0.7rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.loja__texto strong {
  font-size: 1rem;
  font-weight: 600;
}