/* ==========================================================================
   Header Styles - Hello Elementor Child
   ========================================================================== */

.site-header {
	background-color: var(--color-brown-text);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--page-container-width);
	margin: 0 auto;
	padding: 20px var(--page-container-padding);
}

/* Logo (shared markup lives in template-parts/components/logo.php) */
.site-logo-link {
	display: inline-flex;
	text-decoration: none;
}

.site-logo-fallback {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-logo-icon {
	display: block;
	width: 32px;
	height: 40px;
}

.site-logo-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.site-logo-title {
	font-size: 18px;
	letter-spacing: 0.06em;
	color: var(--color-brand-green);
}

.site-logo-subtitle {
	font-size: 9px;
	letter-spacing: 0.3em;
	color: var(--color-brand-tan);
}

/* Navigation */
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	color: var(--color-gold-dark);
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.02em;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-gold-light);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Mobile menu toggle */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: var(--color-gold-light);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	flex-direction: column;
}

.menu-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 3px auto;
	background-color: #fff;
}

@media (max-width: 768px) {
	.main-navigation,
	.site-header-cta {
		display: none;
	}

	.main-navigation.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--color-brown-text);
		padding: 16px 24px;
		z-index: 100;
	}

	.main-navigation.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.menu-toggle {
		display: flex;
	}

	.site-header {
		position: relative;
	}
}

/* ==========================================================================
   AP-03 / AP-04 — legibilidade sobre o marrom do cabeçalho e acessos de loja
   (auditoria visual 17/09/2026)

   Contrastes medidos sobre #654321 (marrom do cabeçalho):
   navegação #E8C766 = 5,38:1 · hover/atual #F7EFD2 = 7,67:1 ·
   texto da marca #F3EAC0 = 7,29:1 (antes verde #1A3A2F = 1,41:1) ·
   acessos Carrinho/Minha conta #F3EAC0 = 7,29:1 ·
   botão Comprar com texto #1A1208 sobre #D4AF37 = 8,81:1 (antes 2,0:1).
   O desenho do logo não muda — só a cor do texto na variante escura.
   Dependência: arquivo oficial do logo para fundo escuro (não existe hoje).
   ========================================================================== */

.site-header .site-logo-title { color: var(--color-cream); }
.site-header .site-logo-subtitle { color: #e8c766; }

.main-navigation a { color: #e8c766; }
.main-navigation a:hover,
.main-navigation a:focus-visible,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: #f7efd2;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 2px solid #f7efd2;
	outline-offset: 3px;
	border-radius: 4px;
}

.site-header .btn-quote { color: #1a1208; font-weight: 600; }
.site-header .btn-quote:hover,
.site-header .btn-quote:focus-visible { background-color: var(--color-brand-gold); color: #1a1208; }

/* ---- Acessos a Minha conta e Carrinho (AP-04) ---- */
.site-header-utils { display: flex; align-items: center; gap: 18px; }

.site-header .header-util,
.header-util {
	position: relative;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-cream);
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 6px 2px;
}

.site-header .header-util { color: var(--color-cream); }

.site-header .header-util:hover,
.site-header .header-util:focus-visible,
.header-util:hover,
.header-util:focus-visible { color: #f7efd2; text-decoration: underline; text-underline-offset: 5px; }

.header-util-icon svg { display: block; width: 22px; height: 22px; }

.hec-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--color-brand-gold);
	color: #1a1208;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.hec-cart-count.is-empty { display: none; }

@media (max-width: 992px) {
	.header-util-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.site-header-utils { gap: 14px; }
}

@media (max-width: 768px) {
	.site-header-inner { gap: 12px; padding: 14px var(--page-container-padding); }
	.site-header-utils { margin-left: auto; }
	.header-util { padding: 8px 4px; }
	.hec-cart-count { position: absolute; top: -2px; right: -10px; }
}

/* Correção 23/09/2026: entre 769px e 860px o cabeçalho precisava de 846px
   (logo + menu + utilitários + COMPRAR) e o botão COMPRAR passava da borda,
   gerando rolagem horizontal no tablet. Só os espaçamentos encolhem. */
@media (min-width: 769px) and (max-width: 860px) {
	.site-header-inner { gap: 16px; }
	.main-navigation ul { gap: 18px; }
}