/*
 * Cabeçalho — modo "texto escuro" e popup "Marcar Reunião"
 */

/* ---------------- Cabeçalho preto (páginas de fundo bege claro) ----------------
 * O texto do menu vem branco por defeito (pensado para o hero escuro da
 * home) — aqui força-se a preto para ficar legível sobre o fundo bege
 * das páginas novas (Loja, Produto, Checkout, Conta, About).
 *
 * NOTA: não mexemos no logótipo (nada de filter:invert aqui). O tema
 * tem, noutras páginas antigas, um filter:invert(1) que assume que o
 * ficheiro do logótipo carregado é branco — se afinal for preto (parece
 * ser o caso, já que sem inversão o logótipo "desaparecia"), aplicar
 * esse filtro só o torna invisível sobre fundo claro. Mais seguro:
 * mostrar sempre o logótipo tal como foi carregado.
 */
body.elephant-header-dark-text #main-menu li a,
body.elephant-header-dark-text #mobile-menu li a {
	color: var(--black);
}

/* Em páginas claras o logo tem de ficar sempre preto, independentemente
   de o ficheiro de origem ser branco ou preto. */
body.elephant-header-dark-text .site-lelephant img {
	filter: none !important;
}

/* O header continua fixo, mas em páginas sem imagem de fundo recebe o
   mesmo fundo da página para o conteúdo nunca ficar visualmente por trás. */
body.elephant-header-dark-text header.menu-transparente {
	background: transparent;
	z-index: 50;
}

/* ---------------- Header a reservar espaço (sem tocar no position) ----------------
 * O <header> é position:fixed + left:50%/transform:translateX(-50%) para
 * ficar centrado (truque usado em todo o site) — mudar o "position" (ex:
 * para sticky) parte essa centragem, porque left/transform passam a
 * significar outra coisa. Por isso NÃO tocamos no <header>: em vez
 * disso, um espaçador vazio logo a seguir (ver header.php) ocupa o
 * espaço real no fluxo da página nas páginas novas (Loja, Produto,
 * Checkout, Conta, About), com a altura medida por js/header-offset.js.
 */
.elephant-header-spacer {
	display: none;
}

body.elephant-header-dark-text .elephant-header-spacer {
	display: none;
}

/* ---------------- Popup Marcar Reunião ---------------- */
.elephant-meeting-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elephant-meeting-popup[hidden] {
	display: none;
}

.elephant-meeting-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.elephant-meeting-popup__panel {
	position: relative;
	width: min(900px, 92vw);
	height: min(760px, 88vh);
	background: var(--white);
	border-radius: var(--border-radius-big);
	overflow: hidden;
	z-index: 1;
}

.elephant-meeting-popup__close {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--black);
}

.elephant-meeting-popup__body,
.elephant-meeting-popup__body iframe {
	width: 100%;
	height: 100%;
	border: none;
}

body.elephant-meeting-popup-open {
	overflow: hidden;
}

/* =====================================================================
 * Páginas claras: header no fluxo normal
 * =====================================================================
 * Na home e nas páginas em que o header vive sobre imagem/vídeo mantém-se
 * o comportamento legado. Nas páginas claras, o header ocupa a sua altura
 * real no topo e sobe naturalmente com o resto da página ao fazer scroll.
 */
body.elephant-header-dark-text header.menu-transparente {
	position: fixed !important;
	top: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 98%;
	height: var(--elephant-header-h);
	min-height: var(--elephant-header-h);
	margin: 0;
	background: transparent;
	z-index: 50;
}

body.elephant-header-dark-text .elephant-header-spacer {
	display: block;
	height: var(--elephant-header-h);
}

body.admin-bar.elephant-header-dark-text header.menu-transparente {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar.elephant-header-dark-text header.menu-transparente {
		top: 46px !important;
	}
}


/* =====================================================================
 * LOGÓTIPO OFICIAL — usar ficheiros reais, nunca filtros de cor.
 * O JS troca entre a versão preta e branca quando o header muda de estado.
 * ===================================================================== */
.site-lelephant,
.site-lelephant.inverter,
.inverter .site-lelephant,
body.elephant-header-dark-text .site-lelephant {
    filter: none !important;
}

.site-lelephant img,
.site-lelephant.inverter img,
.inverter .site-lelephant img,
body.elephant-header-dark-text .site-lelephant img,
body.elephant-about-page .site-lelephant img {
    filter: none !important;
}