/* =====================================================================
 * Dig Fire — acessibilidade: contraste e area de toque
 *
 * POR QUE ESTE ARQUIVO EXISTE
 * O Lighthouse apontou texto abaixo do contraste minimo e alvos de toque
 * pequenos demais. Onde a cor tinha dono num arquivo nosso, corrigi na
 * origem (digfire-header.css). Sobrou aqui o que nasce em lugar que nao
 * da para editar com seguranca: <style> embutido em widget do Elementor
 * e CSS de plugin de terceiro.
 *
 * COMO ELE VENCE
 * O <style> do hero e embutido NO CORPO da pagina e ja usa !important.
 * Um arquivo do <head> perde o empate por ordem — quem vem depois manda.
 * Por isso os seletores daqui levam "body" na frente: mais especifico,
 * entao vence mesmo carregando antes.
 *
 * PARA DESLIGAR
 * Apague este arquivo. O functions.php so carrega o que existe.
 * ===================================================================== */

/* ---- 0. Barra superior do cabecalho -------------------------------- */
/* A MESMA regra de cor existe em TRES lugares:
 *   digfire-header.css               #5B6472  (corrigido na origem)
 *   <style id="digfire-a11y-fix">    #5C6370  (tentativa anterior)
 *   <style> do widget Elementor      #6B7280  (era quem vencia)
 *
 * O do widget e embutido no CORPO da pagina. Em empate de especificidade
 * manda quem vem depois, e nada carregado no <head> vem depois do corpo —
 * por isso as duas tentativas anteriores nao surtiram efeito. A saida nao
 * e repetir o seletor mais uma vez: e subir de peso.
 *
 * O :is(#id, .classe) vale como ID (1,0,0), entao ganha de qualquer
 * quantidade de classes e a ordem deixa de importar. O #dgf-a11y nem
 * precisa existir no HTML — ele so empresta o peso.
 *
 * Numeros: #6B7280 sobre #F3F4F6 da 4,39:1, logo abaixo do minimo de
 * 4,5:1. #5B6472 leva a 5,44:1 sem sair do mesmo cinza.
 *
 * Repare que .dgf-topbar-info i ficou de fora de proposito: aqueles
 * icones sao laranja da marca e devem continuar laranja.
 *
 * E NADA de -webkit-text-fill-color aqui. Eu tinha posto "por seguranca"
 * e quebrou justamente esses icones: a propriedade e HERDADA e manda mais
 * que o color do filho. Os tres icones laranja ficaram com color laranja
 * e pintando cinza, porque herdavam o fill do contêiner. O CSS de origem
 * do topbar usa color puro; aqui tambem. */
:is(#dgf-a11y, .dgf-topbar-custom),
:is(#dgf-a11y, .dgf-topbar-item),
:is(#dgf-a11y, .dgf-topbar-contact) a,
:is(#dgf-a11y, .dgf-topbar-contact) i{
	color:#5B6472!important;
}

/* ---- 1. Hero: legenda dos quatro numeros --------------------------- */
/* rgba(60,60,67,.66) sobre branco da 4,02:1, e o minimo para texto
   pequeno e 4,5:1. #6D6D71 leva a 5,15:1 sem sair do mesmo cinza neutro.
   ATENCAO: a regra de origem define -webkit-text-fill-color junto com
   color, e no Chrome quem manda na cor pintada e ele. Trocar so o color
   nao mudaria nada na tela. */
body .df-hero-v3__stat small{
	color:#6D6D71!important;
	-webkit-text-fill-color:#6D6D71!important;
}

/* ---- 2. Menu da conta: "Criar conta gratis" ------------------------ */
/* NAO fica aqui de proposito. O contraste daquele link (3,03:1) foi
   corrigido dentro do bloco "Dig Fire: menu da conta" em
   wc-account-dashboard/assets/css/account-dropdown.css.
   Motivo: aquele arquivo usa :is(#wcad-specificity, .wcad-...-wrap) como
   prefixo, o que da peso de ID. Uma regra daqui so venceria inventando
   peso ainda maior, e ficariam dois donos brigando pela mesma cor. */

/* ---- 3. "Ir para o conteudo" --------------------------------------- */
/* Fica escondido ate receber foco pelo teclado, e ai aparecia em laranja
   sobre branco (4,32:1). E o primeiro elemento focavel do site inteiro,
   ou seja, exatamente quem mais precisa ser legivel. */
a.skip-link:focus,
a.skip-link:focus-visible{
	background:#0D1B3E!important;
	color:#FFFFFF!important;
	outline:3px solid #F5620A!important;
	outline-offset:2px!important;
}

/* ---- 4. Areas de toque --------------------------------------------- */
/* O Lighthouse so mede area de toque na emulacao de celular. Por isso
   tudo aqui vive dentro do media query: no desktop nada muda.
   O minimo e 24x24; uso 26 para ter folga contra arredondamento. */
@media (max-width:767px){

	/* BUSCA — sao DOIS criterios, nao um so.
	 *
	 * O Lighthouse reprova area de toque por tamanho abaixo de 24x24 OU
	 * por sobreposicao com outro alvo. No relatorio, o botao aparece como
	 * alvo que falha e o proprio input logo abaixo como alvo sobreposto:
	 * o caso aqui e o SEGUNDO. Aumentar o botao nao resolvia — so
	 * aumentava a area sobreposta.
	 *
	 * Geometria medida no site a 375px:
	 *   wrapper  x 10..365   e ele que tem borda e raio; e o campo que se ve
	 *   input    x 11..364   transparente, sem borda, padding-left 58px
	 *   botao    x 29..65    absoluto, 36x36, por cima do input
	 * Sobreposicao: 1296 px2, o botao inteiro.
	 *
	 * ESCOPO: a pagina tem duas buscas. A instancia 1 fica oculta no
	 * celular e usa padding 15px 20px, sem gutter nenhum — aplicar isto
	 * nela desalinharia o campo. O que separa as duas de forma estavel e o
	 * div.elementor-shortcode, que so a instancia 2 tem. Preferi isso a
	 * escopar por .elementor-element-6a14afa3: id de elemento do Elementor
	 * muda se o widget for recriado, e o conserto sumiria em silencio. */

	/* O botao NAO e mexido. Medido sem esta folha, ele nasce 55x40 — bem
	   acima do minimo de 24, entao nao ha nada a corrigir no tamanho.
	   Cheguei a encolhe-lo para 36x36 numa tentativa anterior; era
	   desnecessario e mudava a aparencia. Fica so um piso, para o caso de
	   a regra concorrente que manda 22x22 nesse mesmo botao voltar a
	   ganhar algum dia. 55x40 ja passa do piso, entao hoje isto e inerte. */
	.elementor-shortcode .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit{
		min-width:24px!important;
		min-height:24px!important;
	}

	/* O conserto: tirar a caixa do input de debaixo do botao.
	 *
	 * Medidas nativas: input 11..364 (padding-left 58, texto comeca em
	 * 69) e botao opaco em 29..84. Ou seja, os primeiros 15px do texto JA
	 * ficam escondidos atras do laranja — o texto so aparece a partir de
	 * 84. Entao encostar a caixa do input em 88 nao muda nada do que se
	 * ve: o texto continua comecando onde ja comecava aos olhos, e ainda
	 * deixa de escorregar para debaixo do botao quando e longo.
	 *
	 * 77px de margem = 11 + 77 = 88, contra o botao terminando em 84.
	 * Sobra uma folga de 4px, para nao depender de arredondamento de
	 * subpixel na hora de o Lighthouse decidir se ha sobreposicao. */
	.elementor-shortcode .dgwt-wcas-sf-wrapp .dgwt-wcas-search-input{
		margin-left:77px!important;
		width:calc(100% - 77px)!important;
		padding-left:0!important;
	}

	/* "Ver todos" da vitrine: era 54x16 */
	.mgm-view-all-link{
		display:inline-flex!important;
		align-items:center!important;
		min-height:26px!important;
	}

	/* Listas de icones do Elementor (rodape e afins): eram 21px de altura */
	.elementor-icon-list-items > .elementor-icon-list-item > a{
		display:flex!important;
		align-items:center!important;
		min-height:26px!important;
	}
}