/* ══════════════════════════════════════════════════════════════
   ACIEX — components.css
   Botões, header, footer, drawer mobile e componentes globais.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────
   Botões
   ───────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
	cursor: pointer;
}

.btn--sm { padding: 0.5rem 1rem; font-size: var(--fs-label); }
.btn--lg { padding: 1rem 2rem; font-size: 0.875rem; }

.btn--primary { background-color: var(--orange-600); color: var(--white); }
.btn--primary:hover { background-color: var(--orange-500); box-shadow: 0 4px 14px rgba(230, 81, 0, 0.3); }

.btn--secondary { background-color: var(--green-900); color: var(--white); }
.btn--secondary:hover { background-color: var(--green-700); }

.btn--outline-green { background: transparent; color: var(--green-900); border: 2px solid var(--green-900); }
.btn--outline-green:hover { background-color: var(--green-900); color: var(--white); }

.btn--outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255, 255, 255, 0.5); }
.btn--outline-white:hover { background-color: rgba(255, 255, 255, 0.1); }

.btn--outline-dark { background: transparent; color: var(--dark-900); border: 2px solid var(--dark-900); }
.btn--outline-dark:hover { background-color: var(--dark-900); color: var(--white); }

.btn--ghost { background: transparent; color: var(--gray-500); border: 1px solid var(--gray-border); }
.btn--ghost:hover { border-color: var(--green-900); color: var(--green-900); }

.btn--whatsapp { background-color: var(--whatsapp); color: var(--white); }
.btn--whatsapp:hover { opacity: 0.9; }

.btn--white { background-color: var(--white); color: var(--green-900); }
.btn--white:hover { background-color: var(--green-50); }

.btn--block { width: 100%; }

/* ─────────────────────────────
   Header / Navegação
   ───────────────────────────── */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background-color: transparent;
	transition: background-color var(--t-base), box-shadow var(--t-base);
}

/* Compensa a admin bar do WordPress (apenas quando o usuário está logado).
   A admin bar é fixa no topo: 32px no desktop, 46px em telas <= 782px. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
body.admin-bar:not(.home) .site-main { padding-top: 116px; } /* 84 + 32 */
body.admin-bar .breadcrumb-bar { margin-top: -116px; padding-top: calc(116px + var(--space-3)); }
@media screen and (max-width: 782px) {
	body.admin-bar:not(.home) .site-main { padding-top: 130px; } /* 84 + 46 */
	body.admin-bar .breadcrumb-bar { margin-top: -130px; padding-top: calc(130px + var(--space-3)); }
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
}

.site-header__logo img {
	height: 44px;
	width: auto;
	object-fit: contain;
}

.site-header__logo .logo-light { display: block; }
.site-header__logo .logo-dark { display: none; }

.site-nav {
	display: none;
	align-items: center;
	gap: 1.5rem;
}

.site-nav__menu {
	display: flex;
	gap: 1.25rem;
}

.site-nav__menu a {
	font-size: 13px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.2s ease;
}

.site-nav__menu a:hover { color: var(--white); }

.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a {
	color: var(--white);
	border-bottom: 2px solid var(--orange-600);
	padding-bottom: 2px;
}

/* CTA "Seja Associado" — tamanho conforme o design (px-5 py-2.5, text-xs). */
.site-nav__cta {
	padding: 0.625rem 1.25rem;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

/* Estado sólido: fundo branco + sombra + links escuros.
   Aplica no scroll (.is-scrolled) E sempre em páginas internas (sem hero). */
.site-header.is-scrolled,
body:not(.home) .site-header {
	background-color: var(--white);
	box-shadow: var(--shadow-header);
}
.site-header.is-scrolled .site-nav__menu a,
body:not(.home) .site-nav__menu a { color: var(--dark-700); }
.site-header.is-scrolled .site-nav__menu a:hover,
body:not(.home) .site-nav__menu a:hover { color: var(--green-700); }
.site-header.is-scrolled .site-header__logo .logo-light,
body:not(.home) .site-header__logo .logo-light { display: none; }
.site-header.is-scrolled .site-header__logo .logo-dark,
body:not(.home) .site-header__logo .logo-dark { display: block; }
.site-header.is-scrolled .site-nav__toggle span,
body:not(.home) .site-nav__toggle span { background-color: var(--dark-900); }

/* Hamburger */
.site-nav__toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.site-nav__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--white);
	transition: background-color var(--t-base);
}

@media (min-width: 1024px) {
	.site-nav { display: flex; }
	.site-nav__toggle { display: none; }
}

/* ─────────────────────────────
   Drawer mobile
   ───────────────────────────── */
.mobile-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(80vw, 320px);
	background-color: var(--green-900);
	color: var(--white);
	z-index: 60;
	transform: translateX(100%);
	transition: transform var(--t-base);
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	overflow-y: auto;
}

.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer__close {
	align-self: flex-end;
	color: var(--white);
	padding: 4px;
}

.mobile-drawer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 1rem;
}

.mobile-drawer__menu a {
	display: block;
	padding: 0.75rem 0;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer__menu a:hover { color: var(--white); }

.mobile-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 55;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-base), visibility var(--t-base);
}

.mobile-overlay.is-open { opacity: 1; visibility: visible; }

/* ─────────────────────────────
   Footer
   ───────────────────────────── */
.site-footer {
	background-color: var(--dark-900);
	color: var(--white);
	padding-block: var(--space-16);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; }
}

.site-footer__logo img { height: 48px; width: auto; margin-bottom: var(--space-4); }
.site-footer__title {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--white);
	margin-bottom: var(--space-4);
}

.site-footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__links a { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.site-footer__links a:hover { color: var(--white); }

.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-full);
	color: var(--white);
}
.site-footer__social a:hover { background-color: var(--white); color: var(--green-900); }

.site-footer__bottom {
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/* No mobile empilha e centraliza */
@media (max-width: 640px) {
	.site-footer__bottom { flex-direction: column; text-align: center; }
}

.site-footer__bottom p { margin: 0; }

/* Powered by NemIA (centralizado) */
.site-footer__powered {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.site-footer__powered .powered {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

/* Efeito só na logo + palavra NemIA */
.site-footer__nemia {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	user-select: none;
	transition: transform 0.3s ease;
}
.site-footer__nemia:hover { transform: scale(1.1); }
.site-footer__nemia .nemia-word {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	margin-left: -4px;
}
.site-footer__nemia .nemia-word .nem { color: #fff; }
.site-footer__nemia .nemia-word .ia { color: #8a2be2; }
/* Logo alinhada à altura do texto "NemIA" (logo 667x374, mantém proporção) */
.site-footer__nemia img {
	width: auto;
	height: 22px;
	object-fit: contain;
	display: block;
}

/* Compensar header fixo em páginas internas (não na home com hero) */
body:not(.home) .site-main { padding-top: 84px; }