/* ==========================================================================
   Belari — CSS do tema filho
   Use sempre as custom properties definidas em inc/marca.php.
   Nunca escreva hex direto: se a marca mudar, tem que mudar em um lugar só.
   ========================================================================== */

.belari-faixa-lojas {
	background: var(--belari-agua);
	color: var(--belari-escuro);
	font-family: var(--belari-fonte);
	padding: 2rem 1.5rem;
	text-align: center;
}

.belari-faixa-lojas p {
	font-size: clamp(1.1rem, 2.5vw, 1.6rem);
	margin: 0;
}

/* Exemplo de botão na identidade Belari. */
.belari-botao {
	background: var(--belari-magenta);
	border: 0;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-family: var(--belari-fonte);
	font-weight: 700;
	padding: 0.85em 2em;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.belari-botao:hover,
.belari-botao:focus-visible {
	filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
 * Video responsivo do [belari_video].
 *
 * O bug que originou isto: o player ficava com altura 0 e o visitante so'
 * ouvia o audio. Por isso aqui a altura e' garantida por aspect-ratio E por
 * um fallback de padding -- nao dependemos de uma unica regra dar certo.
 * ---------------------------------------------------------------------- */
.belari-video {
	aspect-ratio: 16 / 9;
	background: var(--belari-escuro);
	border-radius: 12px;
	margin-inline: auto;
	max-width: 900px;
	overflow: hidden;
	width: 100%;
}

.belari-video iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* Navegador sem aspect-ratio: mantem a proporcao 16:9 pelo padding. */
@supports not (aspect-ratio: 16 / 9) {
	.belari-video {
		height: 0;
		padding-bottom: 56.25%;
		position: relative;
	}

	.belari-video iframe {
		inset: 0;
		position: absolute;
	}
}

/* -------------------------------------------------------------------------
 * Popup de video da /franquias/: o tamanho acompanha a janela.
 *
 * O Elementor fixa a largura do popup em 640px (o padrao dele). Numa tela cheia
 * de desktop isso vira um selo no meio do monitor. Aqui a largura passa a ser o
 * MENOR entre tres limites, o que resolve os tres casos de uma vez:
 *
 *   92vw ................ no celular, quase toda a largura, com respiro
 *   1200px .............. no monitor grande, nao vira um outdoor borrado
 *   (altura util)*16/9 .. em tela baixa, o video inteiro cabe sem cortar
 *
 * A regra do Elementor e' `#elementor-popup-modal-1362 .dialog-message`. Esta
 * aqui usa o mesmo id mais duas classes, entao vence por especificidade e nao
 * depende da ordem em que os CSS carregam -- que muda conforme a pagina.
 * ---------------------------------------------------------------------- */
#elementor-popup-modal-1362 .dialog-message.dialog-lightbox-message {
	width: min(92vw, 1200px, calc((100vh - 7rem) * 16 / 9));
}

/* Dentro do popup o player ocupa tudo: quem limita e' o popup, nao o video. */
#elementor-popup-modal-1362 .belari-video {
	border-radius: 0;
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Camada "Clique para ouvir" sobre o video.
 *
 * O video comeca mudo porque nenhum navegador deixa autoplay com som. Esta
 * camada pega o primeiro clique, liga o som e sai da frente -- ver
 * assets/js/belari-video.js. Ela precisa existir do lado de FORA do iframe:
 * clique dentro de iframe de outro dominio nao chega ate' nos.
 * ---------------------------------------------------------------------- */
.belari-video {
	position: relative;
}

/* O tema pinta todo <button> de magenta, inclusive no :focus. Esta camada
 * precisa ser invisivel: quem aparece e' so' a pilula dentro dela. */
.belari-video__som,
.belari-video__som:hover,
.belari-video__som:focus,
.belari-video__som:focus-visible,
.belari-video__som:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
}

.belari-video__som {
	align-items: flex-end;
	border: 0;
	cursor: pointer;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 0 0 clamp(1rem, 5%, 3rem);
	position: absolute;
	width: 100%;
	z-index: 2;
}

.belari-video__som[hidden] {
	display: none;
}

.belari-video__som span {
	background: var(--belari-magenta);
	border-radius: 999px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	color: #fff;
	font-family: var(--belari-fonte);
	font-size: clamp(0.85rem, 1.6vw, 1rem);
	font-weight: 700;
	line-height: 1;
	padding: 0.75em 1.4em;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.belari-video__som:hover span,
.belari-video__som:focus-visible span {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

/* Um icone de alto-falante desenhado em CSS puro seria fragil; o simbolo
 * resolve e nao adiciona dependencia de fonte de icones. */
.belari-video__som span::before {
	content: "\1F50A\00A0";
}