/**
 * Cabeçalho do site.
 */

.oju-header {
	background-color: var(--oju-white);
	position: sticky;
	top: 0;
	z-index: 10;
	transition: box-shadow 0.2s ease;
}

.oju-header.is-scrolled {
	box-shadow: 0 1px 0 var(--oju-border);
}

/* Grid de 3 colunas iguais (nav | marca | ações): garante que a marca
   fique no centro exato da página, independente da largura do menu à
   esquerda ou dos ícones à direita. */
.oju-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* Respiro generoso: afasta menu, marca e carrinho da borda de
	   cima e dá ao masthead a altura de uma capa editorial. */
	padding: var(--oju-space-lg) var(--oju-space-lg);
}

.oju-header__nav-list {
	display: flex;
	gap: var(--oju-space-md);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 300;
}

.oju-header__nav-list a {
	transition: color 0.15s ease;
}

.oju-header__nav-list a:hover {
	color: var(--oju-gold);
}

.oju-header__branding {
	text-align: center;
}

/* Símbolo (olho) coroando o wordmark, ambos centrados num só link. */
.oju-header__logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Seletor com dois níveis (branding + símbolo) de propósito: precisa
   vencer a regra ".woocommerce-page img { height: auto }" do WooCommerce,
   que senão devolve o olho ao tamanho original nas páginas de loja. */
.oju-header__branding .oju-header__logo-symbol {
	display: block;
	height: 34px;
	width: auto;
}

.oju-header__logo-text {
	font-family: var(--oju-font-serif);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: 12px;
	text-transform: uppercase;
	/* O letter-spacing acrescenta um vão à direita da última letra; a
	   margem negativa o cancela, deixando o wordmark opticamente
	   centrado e alinhado ao olho logo acima. */
	margin-right: -12px;
}

.oju-header__actions {
	display: flex;
	gap: var(--oju-space-sm);
	align-items: center;
	justify-self: end;
}

.oju-header__icon-button {
	font-size: 16px;
	color: var(--oju-text);
	position: relative;
	display: inline-flex;
}

.oju-header__cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	font-size: 9px;
	background: var(--oju-gold);
	color: var(--oju-white);
	border-radius: 50%;
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	/* No celular o grid de 3 colunas dá lugar a um layout que quebra:
	   marca e ícones na primeira linha, navegação centralizada abaixo. */
	.oju-header__inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--oju-space-sm);
	}

	.oju-header__nav {
		order: 3;
		width: 100%;
	}

	.oju-header__nav-list {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* Na home, o header flutua transparente por cima do hero. */
.home .oju-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
	box-shadow: none;
}

.home .oju-header.is-scrolled {
	background: transparent;
	box-shadow: none;
}

/* Ícones com borda quadrada fina, como no design aprovado. */
.oju-header__icon-button {
	border: 1px solid var(--oju-text);
	padding: 8px;
}