/* Smart header — fixed bar; body offset via --xyod-header-height (JS). */

.xyod-header.xyod-header--smart {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* left+right with width:auto — avoids 100vw horizontal scroll */
	width: auto;
	box-sizing: border-box;
	overflow-x: clip;
	z-index: 999;
	/* Solid look: Elementor container backgrounds show through */
	background-color: transparent;
	border-bottom-width: var(--xyod-header-border-width, 0);
	border-bottom-style: solid;
	border-bottom-color: var(--xyod-header-border-current, transparent);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.xyod-header.xyod-header--transparent {
	--xyod-header-border-current: var(--xyod-header-border-transparent, transparent);
}

.xyod-header.xyod-header--solid {
	--xyod-header-border-current: var(--xyod-header-border-solid, transparent);
}

/*
 * Header template editor: preview the bottom border in-flow (not fixed to viewport top).
 */
.elementor-editor-active .elementor.xyod-header.xyod-header--smart,
body.elementor-editor-active .elementor.xyod-header.xyod-header--smart {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	width: 100%;
	z-index: auto;
	overflow-x: visible;
}

/* Only promote a compositor layer while the hide/show tween runs.
   A permanent transform / will-change leaves a 1px hairline under the border. */
.xyod-header.xyod-header--smart.is-animating {
	will-change: transform;
}

/* Kill inline-image baseline gap inside the fixed bar */
.xyod-header .elementor-widget-image a,
.xyod-header .elementor-widget-image img {
	display: block;
}

/*
 * Transparent state — wipe header + top-level Elementor backgrounds
 * so the page shows through (editor + frontend).
 */
.xyod-header.xyod-header--transparent {
	background-color: transparent !important;
}

.xyod-header.xyod-header--transparent > .elementor,
.xyod-header.xyod-header--transparent > .elementor > .elementor-section,
.xyod-header.xyod-header--transparent > .elementor > .e-con,
.xyod-header.xyod-header--transparent .elementor-top-section,
.xyod-header.xyod-header--transparent > .elementor > .e-con.e-parent {
	background-color: transparent !important;
	background-image: none !important;
}

/*
 * Dual logos (legacy Image widgets): add CSS class
 * xyod-header-logo--light (white) or xyod-header-logo--dark on each.
 * Prefer the Xyod → Site Logo widget (uploads both in one place).
 * Use display:block — inline-block leaves a baseline gap under the image.
 */
.xyod-header.xyod-header--transparent .xyod-header-logo--dark,
.xyod-header.xyod-header--solid .xyod-header-logo--light {
	display: none !important;
}

.xyod-header.xyod-header--transparent .xyod-header-logo--light,
.xyod-header.xyod-header--solid .xyod-header-logo--dark {
	display: block !important;
}

/*
 * Do NOT force .e-con-inner to max-width:100% — that breaks Elementor
 * boxed headers (e.g. 1140px). Only allow flex children to shrink.
 */
.xyod-header .e-con-inner {
	min-width: 0;
	box-sizing: border-box;
}

/* Never let flex crush the hamburger column to 0 width */
.xyod-header .elementor-widget-xyod-menu {
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	min-width: 44px !important;
	width: auto !important;
	max-width: none !important;
}

/* Sit below the WP admin bar when the user is logged in. */
body.admin-bar .xyod-header.xyod-header--smart {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .xyod-header.xyod-header--smart {
		top: 46px;
	}
}

/* Offset content below the fixed header (solid pages).
   Over-hero pages keep padding at 0 so the first section (slider/hero)
   sits under the transparent bar. */
body.xyod-has-smart-header:not(.xyod-header-over-hero) {
	padding-top: var(--xyod-header-height, 0px);
}

body.xyod-has-smart-header.xyod-header-over-hero {
	padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.xyod-header.xyod-header--smart {
		transition: none;
	}

	.xyod-header.xyod-header--smart.is-animating {
		will-change: auto;
	}
}