/*
 * ESB Loja: correções do tema Bliize (ver includes/modules/tema/module.php).
 * Só faz efeito com as classes que o plugin adiciona no <body>.
 */

/* ---------------------------------------------------------------------------
 * 1. Menu do cabeçalho em uma linha só.
 *
 * O tema dá col-lg-5 (41,6%) para o menu e col-lg-5 para o bloco da direita, que fica
 * quase vazio. Com 6 itens de primeiro nível o menu quebrava em 2 linhas (1440px) ou
 * 3 linhas (1200px), esticando o cabeçalho de 154px para 232px ou 319px e encavalando
 * no banner. Aqui o menu ganha espaço e a fonte encolhe até caber numa linha.
 * O seletor precisa passar do #navbar do tema, por isso a classe no body.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	body.esb-menu-linha .wpo-site-header .navigation .row > [class*="col-"].order-1 {
		flex: 0 0 56%;
		max-width: 56%;
	}
	body.esb-menu-linha .wpo-site-header .navigation .row > [class*="col-"].order-3 {
		flex: 0 0 27.33%;
		max-width: 27.33%;
	}
	body.esb-menu-linha .wpo-site-header #navbar > ul {
		flex-wrap: nowrap;
	}
	body.esb-menu-linha .wpo-site-header #navbar > ul > li > a {
		font-size: 16px;
		padding-left: 12px;
		padding-right: 12px;
		white-space: nowrap;
	}
}

@media (min-width: 992px) and (max-width: 1500px) {
	body.esb-menu-linha .wpo-site-header .navigation .row > [class*="col-"].order-1 {
		flex: 0 0 62%;
		max-width: 62%;
	}
	body.esb-menu-linha .wpo-site-header .navigation .row > [class*="col-"].order-3 {
		flex: 0 0 21.33%;
		max-width: 21.33%;
	}
	body.esb-menu-linha .wpo-site-header #navbar > ul > li > a {
		font-size: 14px;
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Ícones de redes sociais.
 *
 * O tema imprime classes do Font Awesome (fab fa-instagram, fab fa-linkedin-in,
 * far fa-envelope...) mas só carrega a fonte Themify, então esses ícones ficam com
 * 0x0px e somem. Aqui cada classe recebe o glifo Themify equivalente.
 * ------------------------------------------------------------------------- */
body.esb-icones-ti .fab,
body.esb-icones-ti .fas,
body.esb-icones-ti .far {
	font-family: 'themify' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: none;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.esb-icones-ti .fa-instagram::before { content: "\e73d"; }
body.esb-icones-ti .fa-facebook::before,
body.esb-icones-ti .fa-facebook-f::before { content: "\e741"; }
body.esb-icones-ti .fa-linkedin::before,
body.esb-icones-ti .fa-linkedin-in::before { content: "\e735"; }
body.esb-icones-ti .fa-pinterest::before,
body.esb-icones-ti .fa-pinterest-p::before { content: "\e731"; }
body.esb-icones-ti .fa-twitter::before { content: "\e72a"; }
body.esb-icones-ti .fa-youtube::before { content: "\e728"; }
body.esb-icones-ti .fa-envelope::before,
body.esb-icones-ti .fa-envelope-o::before { content: "\e75a"; }
body.esb-icones-ti .fa-whatsapp::before { content: "\e761"; }

/* Deixa os ícones sociais do topo e do rodapé no mesmo tamanho do resto. */
body.esb-icones-ti .social-media .social-link,
body.esb-icones-ti .social-media a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
body.esb-icones-ti .social-media i {
	font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * 3. Contatos do topo em uma linha só no celular.
 *
 * O tema empilha "Gostaria de um orçamento? (35)99754-8519" e o e-mail em duas
 * linhas, deixando o topo com 151px. Abaixo de 992px a lista vira um letreiro
 * que desliza para o lado; a linha dos ícones sociais continua acima, como está.
 * O JS (tema-topbar.js) envolve a lista em .esb-marquee e clona os itens.
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
	body.esb-topbar-marquee .topbar {
		padding-top: 3px;
		padding-bottom: 3px;
		font-size: 12px;
		line-height: 1.3;
	}
	body.esb-topbar-oculta .topbar {
		display: none !important;
	}
	body.esb-topbar-marquee .topbar .row > [class*="col-"] {
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Linha 1: redes sociais, centralizadas e compactas. */
	body.esb-topbar-marquee .topbar .contact-into .social-media {
		display: flex;
		justify-content: center;
		gap: 14px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body.esb-topbar-marquee .topbar .contact-into .social-media li {
		margin: 0;
		padding: 0;
	}
	body.esb-topbar-marquee .topbar .contact-into .social-media li::after {
		content: none;
	}

	/* Linha 2: contatos em uma linha só, sem quebra e sem estouro. */
	body.esb-topbar-marquee .topbar .esb-marquee {
		position: relative;
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	}
	body.esb-topbar-marquee .topbar .esb-marquee__trilho {
		--esb-marquee-tempo: 22s;
		display: flex;
		width: max-content;
		flex-wrap: nowrap;
	}
	body.esb-topbar-marquee .topbar .esb-marquee--animado .esb-marquee__trilho {
		animation: esb-marquee var(--esb-marquee-tempo) linear infinite;
	}
	body.esb-topbar-marquee .topbar .esb-marquee.is-pausado .esb-marquee__trilho {
		animation-play-state: paused;
	}
	body.esb-topbar-marquee .topbar .contact-info {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0 10px 0 0;
		list-style: none;
		white-space: nowrap;
	}
	body.esb-topbar-marquee .topbar .contact-info li {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 0;
		white-space: nowrap;
		float: none;
		border: 0;
	}
	body.esb-topbar-marquee .topbar .contact-info li::after,
	body.esb-topbar-marquee .topbar .contact-info li::before {
		content: none;
	}
	body.esb-topbar-marquee .topbar .contact-info li + li::before {
		content: "•";
		display: inline-block;
		margin-right: 6px;
		opacity: .5;
	}
	body.esb-topbar-marquee .topbar .contact-info .info-link {
		white-space: nowrap;
		font-size: 12px;
	}
	body.esb-topbar-marquee .topbar .contact-info li i {
		font-size: 12px;
	}
	body.esb-topbar-marquee .topbar .contact-into .social-media a {
		font-size: 13px;
		line-height: 1;
	}
	/* Sem JS ou com "reduzir movimento": uma linha só, com rolagem por toque. */
	body.esb-topbar-marquee .topbar .esb-marquee--estatico {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body.esb-topbar-marquee .topbar .esb-marquee--estatico::-webkit-scrollbar { display: none; }
}

@keyframes esb-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.esb-topbar-marquee .topbar .esb-marquee__trilho { animation: none !important; }
}

/* ---------------------------------------------------------------------------
 * 4. Rodapé: coluna "Contato" duplicada (menu com link morto) e respiro no celular.
 * ------------------------------------------------------------------------- */
body.esb-rodape-limpo .esb-rodape-oculto,
body.esb-rodape-limpo [hidden].esb-rodape-oculto {
	display: none !important;
}

@media (max-width: 767px) {
	body.esb-rodape-limpo .wpo-site-footer .widget {
		margin-bottom: 28px;
	}
	body.esb-rodape-limpo .wpo-site-footer .widget-title {
		margin-bottom: 12px;
	}
}