/**
 * Author: Rafael Silva
 * Version: 1.7
 *
 * Header JOOG — grid desktop: marca | .col-full-nav (menu) | ações.
 * Mobile: drawer Shoptimizer em .col-full-nav; marca + ícones na mesma faixa.
 * Fixo: #masthead com position fixed (evita falha de sticky por overflow em ancestrais).
 */

/* -------------------------------------------------------------------------
   Header fixo ao rolar — position: fixed + espaçador (#joog-header-spacer)
   ------------------------------------------------------------------------- */
body.joog-custom-header #masthead.joog-site-header {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	top: 0;
	z-index: 10050;
	background-color: #fff;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: box-shadow 0.25s ease;
	box-sizing: border-box;
}

/* Altura reservada no fluxo (valor padrão até o JS medir) */
body.joog-custom-header #joog-header-spacer.joog-header-spacer {
	height: var(--joog-header-spacer-h, 88px);
	pointer-events: none;
	flex-shrink: 0;
}

/* Sombra ao rolar (classe via JS) */
body.joog-custom-header #masthead.joog-site-header.joog-masthead--scrolled {
	box-shadow: 0 4px 20px rgba(26, 39, 68, 0.12);
}

/*
 * Sticky desktop (sticky-d): só em ≥993px. Em mobile, manter position:fixed do .col-full-nav
 * (senão o menu vira bloco no fluxo: altura enorme, carets soltos, drawer quebrado).
 */
@media (min-width: 993px) {
	body.joog-custom-header.sticky-d .joog-site-header .joog-header__nav-drawer.col-full-nav {
		position: relative;
		top: auto;
	}

	body.joog-custom-header .joog-site-header .joog-header__nav-drawer .shoptimizer-primary-navigation.is_stuck {
		position: relative !important;
		top: auto !important;
		z-index: auto;
		border-bottom: none;
	}

	body.joog-custom-header.sticky-d .joog-site-header .joog-header__nav-drawer.col-full-nav.is_stuck {
		box-shadow: none;
	}
}

/* Menu central não herda barra escura do tema */
body.joog-custom-header:not(.header-4) .joog-site-header .joog-header__nav-drawer.col-full-nav {
	background: #fff;
	border-top-color: transparent;
}

/* -------------------------------------------------------------------------
   Desktop — uma linha
   ------------------------------------------------------------------------- */
@media (min-width: 993px) {
	.joog-site-header .joog-header-body {
		display: grid;
		grid-template-columns: minmax(100px, auto) 1fr minmax(130px, auto);
		align-items: center;
		column-gap: 1.5rem;
		min-height: 72px;
	}

	.joog-site-header .joog-header__brand {
		justify-self: start;
	}

	.joog-site-header .joog-header__nav-drawer {
		justify-self: stretch;
		width: 100%;
		max-width: 100%;
	}

	.joog-site-header .joog-header__nav-drawer .shoptimizer-primary-navigation {
		justify-content: center;
		background: transparent;
	}

	.joog-site-header .joog-header__nav-drawer .main-navigation {
		width: 100%;
	}

	.joog-site-header .joog-header__nav-drawer .primary-navigation {
		display: flex;
		justify-content: center;
	}

	.joog-site-header .joog-header__nav-drawer .menu-primary-menu-container > ul > li > a {
		color: #2c3e50;
		font-weight: 500;
	}

	.joog-site-header .joog-header__nav-drawer .menu-primary-menu-container > ul > li.current-menu-item > a span,
	.joog-site-header .joog-header__nav-drawer .menu-primary-menu-container > ul > li > a:hover span {
		box-shadow: 0 2px 0 0 #1a2744;
	}

	.joog-site-header .joog-header__actions {
		justify-self: end;
		display: flex;
		align-items: center;
		gap: 1.25rem; /* entre [lupa+carrinho] e conta */
	}

	/* Lupa e carrinho colados no desktop */
	.joog-site-header .joog-header__search-cart {
		display: inline-flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 0.35rem;
	}

	.joog-site-header .joog-header__search-cart .site-header-cart {
		margin: 0 !important;
	}

	.joog-site-header .joog-search-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.35rem;
		border: none;
		background: transparent;
		color: #1a2744;
		cursor: pointer;
		line-height: 0;
	}

	.joog-site-header .joog-search-toggle svg {
		width: 24px;
		height: 24px;
	}

	.joog-site-header .joog-header__actions .shoptimizer-myaccount a,
	.joog-site-header .joog-header__actions .site-header-cart a {
		color: #1a2744;
	}

	.joog-site-header .joog-header__actions .shoptimizer-myaccount svg {
		width: 24px;
		height: 24px;
	}

	.joog-site-header .joog-header__actions .site-header-cart {
		position: static;
	}
}

/* -------------------------------------------------------------------------
   Painel de busca — direita → esquerda (absolute dentro do masthead fixo)
   ------------------------------------------------------------------------- */
.joog-site-header .joog-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 10100;
	overflow: hidden;
	pointer-events: none;
}

.joog-site-header .joog-search-panel.is-open {
	pointer-events: auto;
	overflow: visible;
}

.joog-site-header .joog-search-panel__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0 1.25rem;
	background: #fff;
	box-shadow: 0 12px 40px rgba(26, 39, 68, 0.12);
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.joog-site-header .joog-search-panel__inner.is-visible {
	transform: translateX(0);
}

.joog-site-header .joog-search-panel__close {
	flex: 0 0 auto;
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	border: none;
	background: transparent;
	color: #1a2744;
	cursor: pointer;
	margin-left: auto;
}

.joog-site-header .joog-search-panel__field {
	flex: 1;
	order: 1;
	min-width: 0;
}

.joog-site-header .joog-search-panel__field .site-search,
.joog-site-header .joog-search-panel__field .widget_product_search {
	width: 100%;
	margin: 0;
}

.joog-site-header .joog-search-panel__field input[type='search'],
.joog-site-header .joog-search-panel__field .search-field {
	width: 100%;
	max-width: none;
	padding: 0.85rem 1rem;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
   Mobile — drawer só no .col-full-nav; topo com logo + ícones
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
	/* Overlay acima do conteúdo da loja, ainda abaixo do masthead fixo (10050). */
	body.joog-custom-header .mobile-overlay {
		z-index: 10040;
	}

	.joog-site-header .joog-header-main {
		overflow: visible;
	}

	.joog-site-header .joog-header-body {
		display: block;
		position: relative;
		min-height: 70px;
		max-height: none;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		overflow: visible;
	}

	/* Drawer fora do fluxo; só a faixa do logo ocupa espaço no masthead */
	.joog-site-header .joog-header__nav-drawer.col-full-nav {
		margin: 0;
	}

	/* Shoptimizer esconde todo .site-search no mobile; nosso painel fica fora do .col-full-nav */
	body.joog-custom-header .joog-search-panel .site-search,
	body.joog-custom-header .joog-search-panel .widget.widget_product_search,
	body.joog-custom-header .joog-search-panel .woocommerce-product-search,
	body.joog-custom-header .joog-search-panel form.search-form {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	body.joog-custom-header .joog-search-panel input[type='search'],
	body.joog-custom-header .joog-search-panel input.search-field {
		display: block !important;
		visibility: visible !important;
		min-height: 48px;
		-webkit-appearance: textfield;
		appearance: textfield;
	}

	/* Rótulo “MENU” do Shoptimizer — fora do layout JOOG */
	body.joog-custom-header .joog-header__brand .menu-toggle .bar-text {
		display: none !important;
	}

	/*
	 * Uma linha: sanduíche à esquerda | logo centralizado na tela | ícones no .joog-header__actions.
	 * O tema usa flex-direction:column em .site-branding no mobile — isso encavala ícone + logo.
	 */
	body.joog-custom-header .joog-header__brand {
		position: relative;
		width: 100%;
		min-height: 56px;
	}

	body.joog-custom-header .joog-site-header .joog-header__brand .site-branding {
		display: block;
		position: relativ !important;
		width: 100%;
		min-height: 56px;
		height: auto;
		max-height: none;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		padding: 0.35rem 9rem 0.35rem 0.25rem; /* espaço para cluster direito (busca+carrinho+conta) */
		box-sizing: border-box;
	}

	body.joog-custom-header .joog-site-header .joog-header__brand .menu-toggle {
		position: absolute !important;
		left: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		z-index: 130;
		min-width: 48px;
		min-height: 48px;
		width: 48px;
		height: 48px;
		padding: 0;
		margin: 0;
		display: block;
		box-sizing: border-box;
	}

	body.joog-custom-header .joog-site-header .joog-header__brand .site-branding .logo,
	body.joog-custom-header .joog-site-header .joog-header__brand .site-branding .custom-logo-link,
	body.joog-custom-header .joog-site-header .joog-header__brand .site-branding .site-title {
		position: absolute !important;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		line-height: 1;
		max-width: min(55vw, 200px);
		pointer-events: auto;
	}

	body.joog-custom-header .joog-site-header .joog-header__brand .site-branding .custom-logo-link img {
		display: block;
		max-height: 44px;
		width: auto;
		margin: 0 auto;
		height: 44px !important;
	}

	.joog-site-header .joog-header__actions {
		position: absolute;
		top: 50%;
		right: 0.75rem;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		gap: 0.35rem;
		z-index: 120;
	}

	.joog-site-header .joog-search-toggle {
		display: flex;
		padding: 0.35rem;
		border: none;
		background: transparent;
		color: #1a2744;
	}

	.joog-site-header .joog-search-toggle svg {
		width: 22px;
		height: 22px;
	}

	.joog-site-header .joog-header__actions .site-header-cart {
		position: static;
	}

	.joog-site-header .joog-header__actions .shoptimizer-myaccount {
		position: static;
		display: flex;
	}

	.joog-site-header .joog-header__search-cart {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		order: 1;
	}

	.joog-site-header .joog-header__actions .shoptimizer-myaccount {
		order: 2;
	}
}