/* =========================================
   Force Fair Header — Sticky + Drawer Mobile
   ========================================= */

/* Evita que o painel do drawer (fixed + translateX além da viewport)
   crie overflow horizontal fantasma na página inteira */
html {
	overflow-x: hidden;
}

/* Sticky header */
.ff-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Header logo */
.ff-header-logo {
	margin: 0;
	flex-shrink: 0;
}

.ff-header-logo img {
	display: block;
	height: auto;
}

/* Nav takes remaining space, pushing icons + CTA to the right together */
.ff-header .alignwide > .ff-nav-desktop {
	flex: 1;
}

/* Group icons + CTA tightly on the right */
.ff-header .alignwide > .wp-block-woocommerce-customer-account,
.ff-header .alignwide > .wc-block-mini-cart {
	margin-left: 0;
	margin-right: 0;
}

/* ---- Desktop nav ---- */
.ff-nav-desktop {
	gap: var(--wp--preset--spacing--30);
}

/* ---- Mobile: hide desktop nav & CTA, show hamburger ---- */
@media (max-width: 781px) {
	/* Hide desktop navigation and CTA (wrapper included, not just the button,
	   so it doesn't leave an empty flex item competing for space/gap with
	   the hamburger toggle) */
	.ff-header .ff-nav-desktop,
	.ff-header .ff-header-cta,
	.ff-header .alignwide > .wp-block-buttons {
		display: none !important;
	}

	/* Smaller logo to leave room for the hamburger toggle */
	.ff-header-logo {
		width: 130px !important;
	}

	/* Show hamburger button */
	.ff-drawer-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: var(--wp--preset--color--light-neutral-text);
		cursor: pointer;
		padding: 8px;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}

	.ff-drawer-toggle svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}
}

/* ---- Desktop: hide hamburger ---- */
@media (min-width: 782px) {
	.ff-drawer-toggle {
		display: none;
	}
}

/* ---- Drawer overlay (backdrop) ---- */
.ff-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ff-drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* ---- Drawer panel ---- */
.ff-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	max-width: 80vw;
	background: var(--wp--preset--color--brand-primary-bg, #1F261F);
	color: var(--wp--preset--color--light-neutral-text, #FAFAFA);
	z-index: 201;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

/* Close button inside drawer */
.ff-drawer-close {
	align-self: flex-end;
	background: none;
	border: none;
	color: var(--wp--preset--color--light-neutral-text, #FAFAFA);
	cursor: pointer;
	padding: 8px;
	width: 44px;
	height: 44px;
}

.ff-drawer-close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Drawer nav links */
.ff-drawer-nav {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ff-drawer-nav a {
	display: block;
	padding: 14px 0;
	color: var(--wp--preset--color--light-neutral-text, #FAFAFA);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid rgba(250, 250, 250, 0.1);
}

.ff-drawer-nav a:hover {
	opacity: 0.8;
}

/* Drawer CTA button */
.ff-drawer-cta {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 24px;
	background: var(--wp--preset--color--light-neutral-text, #FAFAFA);
	color: var(--wp--preset--color--brand-primary-bg, #1F261F);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	border-radius: 4px;
	text-align: center;
}

.ff-drawer-cta:hover {
	opacity: 0.9;
}

/* Prevent body scroll when drawer is open */
body.ff-drawer-is-open {
	overflow: hidden;
}