/* FOCO VISÍVEL — EuroMóveis (27/09/2026, specs/websites/foco-visivel)
 *
 * Pedido do Nelson: o contorno aparecia ao CLICAR com o rato (no Brittany, uma caixa preta de 5 px à volta do logótipo,
 * maior do que a imagem). Medido a 27/09: nos três sites havia foco de rato visível, ou foco de TECLADO invisível, ou os dois.
 *
 * 1. RATO: sem contorno. `:focus:not(:focus-visible)` é o foco que o próprio browser classifica como de rato/toque.
 *    ⚠️ Os CAMPOS de texto são excepção do browser, e fica assim de propósito: ao clicar num campo o browser considera-o
 *    `:focus-visible` (vai-se escrever ali) e o contorno aparece — é o sinal de onde está o cursor.
 * 2. TECLADO: contorno discreto na cor da marca (#0060B0), afastado 2 px, NUNCA removido — o `!important` vence os temas
 *    que o apagavam (`outline: none`). Não se tira o foco a quem usa teclado.
 * 3. Cantos arredondados só onde o elemento não tem raio próprio: o `:where()` tem especificidade zero, por isso um
 *    cartão com 14 px continua com 14 px e só o que não tinha nada ganha 4 px.
 * 4. Link feito SÓ de imagens (o logótipo): a caixa do link é maior do que a imagem (Brittany: 396 contra 247 px;
 *    EuroMóveis: 100×65 contra 100×28, com duas imagens — a normal e a do cabeçalho fixo), por isso o contorno passa
 *    para a IMAGEM visível — acompanha o tamanho real do que se vê. A imagem escondida não desenha nada.
 */
:focus:not(:focus-visible) { outline: none !important; }

:focus-visible {
  outline: 2px solid #0060B0 !important;
  outline-offset: 2px !important;
}
:where(:focus-visible) { border-radius: 4px; }

a:focus-visible:has(> img, > picture):not(:has(> :not(img, picture))) { outline: none !important; }
a:focus-visible:not(:has(> :not(img, picture))) > img,
a:focus-visible:not(:has(> :not(img, picture))) > picture > img {
  outline: 2px solid #0060B0 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* 5. FUNDOS ESCUROS: por dentro do contorno, uma faixa BRANCA de 2 px (sombra). Em fundo claro não se vê — o aspecto é
 *    só o contorno na cor da marca; em fundo escuro é ela que garante o contraste (mínimo 3:1 para um indicador de
 *    foco, WCAG 1.4.11), onde a cor da marca sozinha ficava abaixo (medido 27/09: bordô sobre o azul-ardósia do rodapé
 *    do Brittany 1,8:1; azul sobre o rodapé do EuroMóveis 2,6:1 e sobre o verde-petróleo 1,2:1).
 *    Foi preferida a uma lista de «zonas escuras»: essa lista foi tentada e apanhava sempre um sítio claro dentro de um
 *    escuro (cartões brancos no rodapé, banners claros com o mesmo botão) — e envelhecia sem aviso.
 *    Custo, declarado: enquanto um elemento tem foco de TECLADO, a sombra própria dele é substituída por esta faixa. */
:focus-visible { box-shadow: 0 0 0 2px #fff !important; }
a:focus-visible:not(:has(> :not(img, picture))) > img,
a:focus-visible:not(:has(> :not(img, picture))) > picture > img { box-shadow: 0 0 0 2px #fff !important; }

/* 6. COMPONENTES QUE CORTAM (overflow hidden/auto): o contorno por fora ficava cortado — medido 27/09, com teclado, os
 *    separadores do rodapé do Brittany mostravam só um risco. Dentro destes componentes o contorno vai POR DENTRO do
 *    elemento (afastamento -2 px) e a faixa branca também — nunca é cortado. A lista é de COMPONENTES do tema, não de
 *    cores; o verificador (varrer-contraste.py) foca cada elemento e mede o contorno CALCULADO, não esta lista.
 *    .nav-tabs, .product-thumb .image, .module-marquee, .auto-grid-items */
.nav-tabs :focus-visible,
.product-thumb .image :focus-visible,
.module-marquee :focus-visible,
.auto-grid-items :focus-visible {
  outline-offset: -2px !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 6b. Nestes componentes, o link feito só de imagem NÃO passa o contorno para a imagem (por fora dela seria cortado,
 *     porque a imagem ocupa o componente inteiro): fica no próprio link, por dentro, desenhado por cima da imagem. */
.nav-tabs a:focus-visible,
.product-thumb .image a:focus-visible,
.module-marquee a:focus-visible,
.auto-grid-items a:focus-visible { outline: 2px solid #0060B0 !important; outline-offset: -2px !important; }
.nav-tabs a:focus-visible > img,
.nav-tabs a:focus-visible > picture > img,
.product-thumb .image a:focus-visible > img,
.product-thumb .image a:focus-visible > picture > img,
.module-marquee a:focus-visible > img,
.module-marquee a:focus-visible > picture > img,
.auto-grid-items a:focus-visible > img,
.auto-grid-items a:focus-visible > picture > img { outline: none !important; box-shadow: none !important; }