/**
 * Correções e refinamentos de interface — cabeçalho, menu e rodapé.
 *
 * Refinamento sobre a linguagem do OceanWP: nada de trocar as cores definidas
 * no Personalizar, só consertar o que está quebrado e acertar alinhamento,
 * espaçamento e ritmo.
 */

/* =========================================================================
   1. RODAPÉ — as colunas não empilhavam no celular
   =========================================================================
   O OceanWP tem `body .oceanwp-row .span_1_of_4 { width:25% }` com
   especificidade (0,2,1). As regras que deveriam empilhar no celular —
   `.col:not(.swiper-slide){width:100%}` (0,2,0) e `.col{width:100%}` (0,1,0) —
   perdem por causa do `body` no seletor, mesmo casando a media query. Efeito:
   quatro colunas de 98px num aparelho de 390px, com o endereço quebrando uma
   letra por linha e o rodapé passando de 2000px de altura.

   Um seletor de classe a mais (0,3,1) resolve sem !important. */

@media only screen and (max-width: 767px) {
	body .oceanwp-row .footer-box.span_1_of_4,
	body .oceanwp-row .footer-box.span_1_of_3,
	body .oceanwp-row .footer-box.span_1_of_2 {
		width: 100%;
		float: none;
	}

	#footer-widgets .footer-box + .footer-box {
		margin-top: 2.25rem;
	}

	#footer-widgets .footer-box .widget-title {
		margin-bottom: 0.9rem;
	}

	/* O logo do rodapé ocupava a largura toda. O widget de imagem do WordPress
	   escreve `max-width:100%` no atributo style da própria imagem, e estilo
	   inline vence qualquer seletor — então limitamos o contêiner. */
	#footer-widgets .footer-box .widget_media_image {
		max-width: 200px;
	}
}

/* Ritmo do rodapé em qualquer largura: título respira mais acima que abaixo. */
#footer-widgets .widget-title {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Os títulos estavam em branco sobre fundo claro — invisíveis, contraste 1:1.
   Quem pinta de branco é `#footer-widgets .footer-box .widget-title` (1,2,0)
   do OceanWP, pensado para um rodapé escuro que não é o caso aqui; por isso o
   seletor abaixo precisa da mesma profundidade. Se o rodapé virar escuro um
   dia, é este bloco que sai. */
#footer-widgets .footer-box .widget-title {
	color: #2b2b2b;
}

#footer-widgets .footer-widget ul li {
	line-height: 1.9;
}

/* A lista de contato alinhava ícone e texto pelo topo, e a largura variável
   dos ícones deixava as linhas com recuos diferentes (10px de diferença entre
   o endereço e as demais). Coluna de ícone fixa resolve os dois. */
#footer-widgets .contact-info-widget li {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

#footer-widgets .contact-info-widget li > i {
	flex: 0 0 2.75rem;
	width: 2.75rem;
	margin: 0;
	text-align: center;
}

#footer-widgets .contact-info-widget li .oceanwp-info-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

#footer-widgets .contact-info-widget .oceanwp-contact-title {
	display: block;
	letter-spacing: 0.04em;
}

/* =========================================================================
   2. BUSCA DUPLICADA
   ========================================================================= */

/* Desktop: o cabeçalho "medium" é de três colunas (busca | logo | vazio).
   Com a terceira coluna sem conteúdo, a caixa de busca sozinha à esquerda
   desequilibrava o logo central. A lupa do menu já cobre a busca.
   (O style.css do tema filho já pedia isso — mas nunca foi carregado.) */
@media only screen and (min-width: 768px) {
	#site-header.medium-header #medium-searchform {
		display: none;
	}

	#site-header.medium-header .top-header-inner .top-col.col-1,
	#site-header.medium-header .top-header-inner .top-col.col-3 {
		min-height: 1px;
	}
}

/* Celular: a busca do cabeçalho e a de dentro do menu não competem mais —
   o menu virou painel de tela cheia (menu.css), então quando ele está aberto
   o campo do cabeçalho fica coberto e só um está visível de cada vez. */

/* =========================================================================
   3. BARRA DO CABEÇALHO NO CELULAR
   =========================================================================
   Carrinho e menu ficavam centralizados por `text-align:center`, flutuando no
   meio com vazio dos dois lados. Vão para a borda, onde o polegar alcança. */

/* Nota: este site define a raiz em 10px (`html{font-size:10px}`), então `rem`
   aqui não vale 16px. Medidas em px para não depender disso. */

@media only screen and (max-width: 767px) {
	/* `body.default-breakpoint .oceanwp-mobile-menu-icon{display:block}` do
	   OceanWP tem especificidade (0,2,1); sem empatar, o flex não pega e o
	   alinhamento não acontece. */
	body.default-breakpoint .oceanwp-mobile-menu-icon,
	#site-header .oceanwp-mobile-menu-icon {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0 4px;
		padding: 4px 16px 12px;
		text-align: left;
	}

	#site-header .oceanwp-mobile-menu-icon > a {
		padding: 0 8px;
		line-height: 1;
	}

	#site-header .oceanwp-mobile-menu-icon > a.mobile-menu {
		padding-right: 0;
		letter-spacing: 0.14em;
	}

	/* o bloco de busca injetado no tema ocupa a linha de baixo, inteira */
	#site-header .oceanwp-mobile-menu-icon .right.clr {
		flex: 1 0 100%;
		margin-top: 10px;
	}

	/* O campo de busca fica dentro de um <a> que o tema deixou como
	   inline-block: ele encolhe para o conteúdo (215px) e estrangula tudo
	   que está dentro. Vira bloco de largura cheia para o campo ocupar a
	   linha inteira. */
	#site-header .oceanwp-mobile-menu-icon .right .inner,
	#site-header .oceanwp-mobile-menu-icon .search-toggle-li,
	#site-header .oceanwp-mobile-menu-icon a.site-search-toggle,
	#site-header .oceanwp-mobile-menu-icon .aws-container,
	#site-header .oceanwp-mobile-menu-icon .aws-search-form,
	#site-header .oceanwp-mobile-menu-icon .aws-wrapper,
	#site-header .oceanwp-mobile-menu-icon .aws-search-field {
		display: block;
		width: 100%;
		max-width: none;
	}

	#site-header .oceanwp-mobile-menu-icon a.site-search-toggle {
		padding: 0;
	}

	/* Sobravam ~25px em dois níveis — exatamente o line-height herdado (25,2px)
	   das quebras de linha entre as tags. Zerado nos invólucros e restaurado
	   no campo, que é quem realmente tem texto. */
	#site-header .oceanwp-mobile-menu-icon .right.clr,
	#site-header .oceanwp-mobile-menu-icon .right .inner,
	#site-header .oceanwp-mobile-menu-icon .search-toggle-li,
	#site-header .oceanwp-mobile-menu-icon a.site-search-toggle {
		line-height: 0;
		font-size: 0;
	}

	#site-header .oceanwp-mobile-menu-icon .aws-search-field {
		line-height: normal;
		font-size: 15px;
	}

	#site-header .oceanwp-mobile-menu-icon .aws-search-form {
		display: flex;
	}

	/* uma instância de busca basta na barra */
	#site-header .oceanwp-mobile-menu-icon .aws-container.aws-js-seamless {
		display: none;
	}

	/* o cabeçalho respirava demais para a altura útil de um celular */
	#site-header .top-header-wrap .container {
		padding-top: 6px;
		padding-bottom: 6px;
	}
}

/* =========================================================================
   3b. O HERO ENCOSTA NO CABEÇALHO (celular)
   =========================================================================
   Sobravam 75px de respiro: 50px do #content-wrap, 10px do wrap do widget e
   ~15px da seção. Num celular isso empurra o vídeo para fora da primeira
   dobra. Zeramos só nos ancestrais que realmente contêm o hero. */

@media only screen and (max-width: 767px) {
	/* `#main #content-wrap{padding-top:50px}` usa dois IDs (2,0,0); o seletor
	   abaixo precisa dos mesmos dois para vencer. */
	#main #content-wrap:has(.cme-hero) {
		padding-top: 0;
	}

	/* Sobram 15px entre o cabeçalho e o #main que não vêm de margem, padding,
	   borda nem deslocamento relativo — verifiquei os quatro, e bloquear o
	   colapso de margem no #main não muda nada. Com o cabeçalho oculto o
	   #main continua começando em 15px, então o espaço é dele.
	   Sem uma declaração para corrigir na origem, compensamos aqui. O valor
	   fica em variável: se um dia a origem aparecer, é só zerar. */
	#main:has(.cme-hero) {
		padding-top: 0;
		margin-top: calc(-1 * var(--cme-hero-pull, 15px));
	}

	#content-wrap .elementor-section:has(.cme-hero),
	#content-wrap .elementor-container:has(.cme-hero),
	#content-wrap .elementor-widget-wrap:has(.cme-hero) {
		padding-top: 0;
		margin-top: 0;
	}

	#content-wrap .elementor-widget:has(.cme-hero) {
		margin-bottom: 0;
	}
}

/* =========================================================================
   4. FOCO — a borda preta que aparecia ao tocar o menu
   =========================================================================
   Era o anel de foco padrão do navegador, disparado pelo toque. Removê-lo
   sem substituto quebraria a navegação por teclado, então o foco continua
   visível — só para quem navega por teclado, via :focus-visible. */

.oceanwp-mobile-menu-icon a:focus,
#mobile-dropdown a:focus {
	outline: none;
}

.oceanwp-mobile-menu-icon a:focus-visible,
#mobile-dropdown a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* =========================================================================
   5. CAMPO DE BUSCA
   ========================================================================= */

.aws-container .aws-search-field {
	height: 2.875rem;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 2px;
	background: #fff;
	padding: 0 0.9375rem;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	transition: border-color 0.25s ease;
}

.aws-container .aws-search-field:hover {
	border-color: rgba(0, 0, 0, 0.28);
}

.aws-container .aws-search-field:focus {
	border-color: rgba(0, 0, 0, 0.55);
	outline: none;
}

/* contraste do placeholder: o padrão do navegador não alcança 4.5:1 */
.aws-container .aws-search-field::placeholder {
	color: #6b6b6b;
	opacity: 1;
}

/* =========================================================================
   6. MENU MOBILE ABERTO
   ========================================================================= */

@media only screen and (max-width: 767px) {
	#mobile-dropdown ul li a {
		padding-top: 0.9375rem;
		padding-bottom: 0.9375rem;
		letter-spacing: 0.1em;
	}

	#mobile-dropdown ul li {
		border-bottom-color: rgba(0, 0, 0, 0.07);
	}

	/* submenu recuado, para o nível se ler sem depender só do "+" */
	#mobile-dropdown ul li ul li a {
		padding-left: 1.75rem;
		font-size: 0.875rem;
		letter-spacing: 0.06em;
	}
}