/* ==========================================================================
   Pax União - complementos
   Carrega depois do style.css. Só o que o tema original não tinha, mais os
   estilos que antes viviam em atributos style="" dentro do index.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Menu - Velório Virtual
   O bootsnav troca a barra horizontal pelo menu hambúrguer em 992px (ver
   css/bootsnav.css, @media max-width: 992px). As classes utilitárias
   hidden-xs/visible-xs-block do Bootstrap trocam em 767px, breakpoint
   diferente, por isso o controle aqui usa o mesmo valor que o bootsnav.

   O seletor usa "ul.nav > li.pax-velorio--*" (não só ".pax-velorio--*")
   de propósito: o Bootstrap tem ".nav > li{display:block}" com
   especificidade maior que uma classe sozinha, então uma classe sozinha
   perde esse empate e o item nunca some, em nenhuma largura de tela.
   -------------------------------------------------------------------------- */
ul.nav > li.pax-velorio--desktop {
	display: none;
}

@media (min-width: 993px) {
	ul.nav > li.pax-velorio--mobile {
		display: none;
	}

	ul.nav > li.pax-velorio--desktop {
		display: block;
	}

	/*
	 * #4a4794: roxo da marca (ver images/screenshot.png), não usado antes no site.
	 *
	 * Seletor e !important são obrigatórios aqui: "nav.navbar.bootsnav
	 * ul.nav > li > a" (css/bootsnav.css) já força
	 * background-color: transparent !important em todo link do menu, com
	 * especificidade (0,3,4). Uma classe sozinha como ".pax-velorio-btn"
	 * (especificidade 0,1,0), mesmo com !important, perde esse empate e o
	 * roxo nunca aparece. "nav.navbar.bootsnav ul.nav > li > a.pax-velorio-btn"
	 * sobe a especificidade pra (0,4,4), que vence.
	 *
	 * O padding também precisou de !important: existe em style.css uma regra
	 * "nav.navbar.bootsnav ul.nav > li > a:first-child" com padding-left:0
	 * e a MESMA especificidade (0,4,4) da regra abaixo (o :first-child conta
	 * como classe). Nesse empate o navegador ficou com a regra de
	 * style.css, deixando o botão com padding só de um lado (torto).
	 */
	nav.navbar.bootsnav ul.nav > li > a.pax-velorio-btn {
		background: #4a4794 !important;
		color: #fff !important;
		padding: 8px 20px !important;
		border-radius: 5px;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .03em;
		transition: background-color .2s ease;
		margin-top: 10px;
	}

	nav.navbar.bootsnav ul.nav > li > a.pax-velorio-btn:hover,
	nav.navbar.bootsnav ul.nav > li > a.pax-velorio-btn:focus {
		background: #38356e !important;
		color: #fff !important;
	}
}

/*
 * Botão mobile: fica dentro de ".navbar-header", ao lado do hambúrguer (ali
 * onde antes ficava um espaço vazio na barra). Some acima de 992px porque
 * nesse ponto a versão desktop (dentro do menu) já assume o lugar dele.
 *
 * ".navbar-header" no bootsnav usa float/margin negativa pra posicionar o
 * botão do hambúrguer (ver css/bootsnav.css, @media max-width:992px). Em vez
 * de tentar encaixar no mesmo esquema de float, viro o container pra
 * flexbox: um flex item ignora float, então isso garante botão à esquerda e
 * hambúrguer à direita sem depender do hack antigo.
 */
.pax-velorio-btn-mobile {
	display: none;
}

@media (max-width: 992px) {
	nav.navbar.bootsnav .navbar-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.pax-velorio-btn-mobile {
		display: inline-block;
		background: #4a4794 !important;
		color: #fff !important;
		padding: 8px 16px;
		border-radius: 5px;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .03em;
		margin-top: 8px;
	}

	.pax-velorio-btn-mobile:hover,
	.pax-velorio-btn-mobile:focus {
		background: #38356e !important;
		color: #fff !important;
	}
}

/* --------------------------------------------------------------------------
   Aviso flutuante (banner de currículo)
   Reproduz os estilos que antes eram inline no index.php.
   -------------------------------------------------------------------------- */
#popup {
	position: fixed;
	z-index: 99999;
	color: #fff;
	text-align: justify;
	box-shadow: none;
	max-width: 90vw;
}

#popup img {
	display: block;
	max-width: 100%;
	height: auto;
}

#close {
	float: right;
	background: #ff0000;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.wpp-float {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 998;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(37, 211, 102, .45);
	transition: transform .2s, box-shadow .2s;
}

.wpp-float:hover,
.wpp-float:focus {
	background: #25d366;
	transform: scale(1.08);
	box-shadow: 0 6px 28px rgba(37, 211, 102, .6);
}

.wpp-float svg {
	width: 28px;
	height: 28px;
	fill: #fff;
}

@media only screen and (max-width: 767px) {
	.wpp-float {
		bottom: 18px;
		right: 18px;
		width: 50px;
		height: 50px;
	}

	.wpp-float svg {
		width: 25px;
		height: 25px;
	}
}

/* --------------------------------------------------------------------------
   Formulário de contato
   -------------------------------------------------------------------------- */

/* Honeypot: fica fora da tela, só robô preenche. */
.pax-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pax-aviso {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: 3px;
	font-size: 15px;
	line-height: 1.5;
}

.pax-aviso--sucesso {
	background: #e6f4ea;
	border-left: 4px solid #1e7e34;
	color: #14532d;
}

.pax-aviso--erro {
	background: #fdecea;
	border-left: 4px solid #c0392b;
	color: #7f1d1d;
}

#call_back .call_box .btn-dark {
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Busca
   -------------------------------------------------------------------------- */
.pax-busca {
	display: inline-flex;
	gap: 8px;
	max-width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.pax-busca input[type="search"] {
	height: 46px;
	padding: 0 16px;
	border: 1px solid #ddd;
	border-radius: 3px;
	min-width: 240px;
	font-size: 15px;
}

.pax-busca button {
	height: 46px;
	padding: 0 24px;
	border: none;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Listagens, paginação e navegação entre notícias
   -------------------------------------------------------------------------- */
.pax-lista-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pax-lista-links li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.pax-nav-post {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px 0;
	border-top: 1px solid #eee;
	text-align: left;
}

.pax-nav-post__proxima {
	text-align: right;
}

.pagination,
.nav-links {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.nav-links .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 3px;
	color: #164194;
}

.nav-links .page-numbers.current {
	background: #164194;
	border-color: #164194;
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Conteúdo de páginas e notícias
   -------------------------------------------------------------------------- */
.entry-content img,
.news_details img {
	max-width: 100%;
	height: auto;
}

.entry-content p {
	margin-bottom: 16px;
}

.pax-erro .heading {
	display: inline-block;
	text-align: left;
}

/* Miniaturas da barra lateral do post */
.news_details .media-left img {
	width: 90px;
	height: auto;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Velório Virtual (embed Adiaŭ)
   Full-bleed: o PDF da Adiaŭ recomenda width próximo da largura total da
   tela, por isso essa seção sai do .container de 1170px do resto do site.
   -------------------------------------------------------------------------- */
.pax-embed-section {
	width: 100%;
}

.pax-embed-wrap {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	line-height: 0;
}

.pax-embed-wrap iframe {
	display: block;
	width: 100%;
	height: 85vh;
	min-height: 600px;
	max-height: 900px;
	border: 0;
}

@media only screen and (max-width: 767px) {
	.pax-embed-wrap iframe {
		height: 100vh;
		min-height: 600px;
		max-height: none;
	}
}