/**
 * Transparent header — overlay (CSS) and sticky (PHP shell + scroll JS).
 */

:root {
	--commerce7-transparent-header-z: 100;
	--commerce7-transparent-header-transition: var(--ursa6-transparent-header-transition);
}

/* ------------------------------------------------------------------
   Page layout
   ------------------------------------------------------------------ */

body.has-commerce7-transparent-header {
	/* First block clears the overlay (2× header height). */
	main > :first-child {
		padding-top: calc(var(--commerce7-header-height) * 2);
	}
}

/* ------------------------------------------------------------------
   Inner groups — editor sticky neutralized; the shell owns positioning
   ------------------------------------------------------------------ */

.commerce7-header-transparent--overlay-only,
.commerce7-header-transparent--sticky {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}

/* ------------------------------------------------------------------
   Overlay-only header (no JS shell)
   ------------------------------------------------------------------ */

body:not(.wp-admin) header:has(> .commerce7-header-transparent--overlay-only) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--commerce7-transparent-header-z);
}

body.admin-bar:not(.wp-admin) {
	header:has(> .commerce7-header-transparent--overlay-only) {
		top: var(--ursa6-admin-bar-overlay-offset, var(--wp-admin--admin-bar--height, 0px));
	}

	header.commerce7-header-transparent-shell {
		top: var(--ursa6-admin-bar-overlay-offset, var(--wp-admin--admin-bar--height, 0px));
	}
}

/* ------------------------------------------------------------------
   Transparent header shell
   ------------------------------------------------------------------ */

header.commerce7-header-transparent-shell {
	left: 0;
	right: 0;
	width: 100%;
	top: 0;

	&[data-commerce7-transparent-sticky="false"] {
		position: absolute !important;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: var(--commerce7-transparent-header-z);

		&.is-sticky-active,
		&.is-sticky-hidden {
			transform: none !important;
			transition: none !important;
			pointer-events: auto !important;
		}
	}

	/* Overlay appearance — transparent bar at top of page. */
	&:not(.is-stuck) > .commerce7-header-transparent {
		background-color: transparent !important;
		border-bottom: 1px solid transparent;
		transition: background-color var(--commerce7-transparent-header-transition), border-color var(--commerce7-transparent-header-transition), color var(--commerce7-transparent-header-transition), box-shadow var(--commerce7-transparent-header-transition);

		.wp-block-navigation-item__content,
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__submenu-icon,
		.wp-block-navigation__submenu-icon svg,
		.commerce7-site-logo {
			color: var(--wp--preset--color--base, #ffffff);
		}

		.wp-block-navigation__submenu-icon svg {
			fill: currentColor;
		}

		.wp-block-site-title,
		.wp-block-site-title a {
			color: var(--wp--preset--color--base, #ffffff);
		}

		.wp-block-site-logo img {
			filter: brightness(0) invert(1);
		}

		.commerce7-site-logo {
			transition: color var(--commerce7-transparent-header-transition);
		}
	}

	/* Solid bar while mobile menu is open at page top (before scroll adds .is-stuck). */
	&:has(.wp-block-navigation__responsive-container.is-menu-open) > .commerce7-header-transparent,
	html.has-modal-open &:not([data-commerce7-transparent-sticky="false"]) > .commerce7-header-transparent {
		background-color: var(--commerce7-mobile-nav-surface, var(--wp--preset--color--base-dark, #011623)) !important;
		border-bottom: 1px solid var(--commerce7-mobile-nav-border, rgba(255, 255, 255, 0.12)) !important;
		box-shadow: none;
		color: var(--commerce7-mobile-nav-text, var(--wp--preset--color--base, #ffffff));

		.wp-block-navigation-item,
		.wp-block-navigation-item__content,
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close,
		.commerce7-site-logo {
			color: var(--commerce7-mobile-nav-text, var(--wp--preset--color--base, #ffffff));
		}

		.commerce7-site-logo {
			--commerce7-logo-text: #fff;
		}

		.wp-block-site-title,
		.wp-block-site-title a {
			color: var(--commerce7-mobile-nav-text, var(--wp--preset--color--base, #ffffff)) !important;
		}

		.wp-block-site-logo img {
			filter: none;
		}

		.wp-block-navigation .button .wp-block-navigation-item__content {
			background-color: var(--commerce7-mobile-nav-text, var(--wp--preset--color--base, #ffffff));
			color: var(--commerce7-mobile-nav-surface, var(--wp--preset--color--base-dark, #011623));
		}
	}

	/* Stuck state — solid bar after scroll. */
	&.is-stuck > .commerce7-header-transparent {
		background-color: var(--wp--preset--color--base, #ffffff);
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #134160) 12%, transparent);
		box-shadow: 0 1px 0 rgba(1, 22, 35, 0.06);
		color: var(--wp--preset--color--contrast, #134160);
		transition:
			background-color var(--commerce7-transparent-header-transition),
			border-color var(--commerce7-transparent-header-transition),
			color var(--commerce7-transparent-header-transition),
			box-shadow var(--commerce7-transparent-header-transition);

		.wp-block-navigation-item,
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__submenu-icon,
		.commerce7-site-logo {
			color: var(--commerce7-logo-text, #134160);
		}

		.wp-block-navigation__submenu-icon svg {
			fill: currentColor;
		}

		.wp-block-site-title,
		.wp-block-site-title a {
			color: var(--wp--preset--color--contrast, #134160);
		}

		.wp-block-site-logo img {
			filter: none;
		}

		.commerce7-site-logo {
			transition: color var(--commerce7-transparent-header-transition);
		}
	}

	/* Scroll-up hide — only when pinned + JS adds these classes. */
	&.is-sticky-active {
		transform: translateY(0);
		transition: transform var(--ursa6-transition-transform);

		&:has(.wp-block-navigation__responsive-container.is-menu-open),
		&:has(.wp-block-navigation:not(.ursa6-nav-is-mobile) [aria-expanded="true"]:not([aria-hidden="true"])),
		&:has(.wp-block-navigation:not(.ursa6-nav-is-mobile):focus-within) {
			transform: none !important;
			transition: none !important;
			pointer-events: auto !important;
		}
	}

	&.is-sticky-hidden {
		transform: translateY(calc(-100% - var(--sticky-full-offset, 0px)));
		transition: transform var(--ursa6-transition-transform);
		pointer-events: none;

		&:has(.wp-block-navigation__responsive-container.is-menu-open),
		&:has(.wp-block-navigation:not(.ursa6-nav-is-mobile) [aria-expanded="true"]:not([aria-hidden="true"])),
		&:has(.wp-block-navigation:not(.ursa6-nav-is-mobile):focus-within) {
			transform: none !important;
			transition: none !important;
			pointer-events: auto !important;
		}
	}
}

/* Reduced motion: keep the scroll-up hide/reveal behavior, but snap instantly. */
@media (prefers-reduced-motion: reduce) {
	header.commerce7-header-transparent-shell.is-sticky-active,
	header.commerce7-header-transparent-shell.is-sticky-hidden {
		transition: none !important;
	}
}

/* Overlay appearance for overlay-only headers without a shell wrapper. */
header:has(> .commerce7-header-transparent--overlay-only) > .commerce7-header-transparent {
	background-color: transparent !important;
	border-bottom: 1px solid transparent;

	.wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__submenu-icon,
	.wp-block-navigation__submenu-icon svg {
		color: var(--wp--preset--color--base, #ffffff);
	}

	.wp-block-navigation__submenu-icon svg {
		fill: currentColor;
	}

	.wp-block-site-title,
	.wp-block-site-title a {
		color: var(--wp--preset--color--base, #ffffff);
	}

	.wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}

	.commerce7-site-logo {
		transition: color var(--commerce7-transparent-header-transition);
	}
}

html.has-modal-open header.commerce7-header-transparent-shell {
	&.is-sticky-hidden,
	&.is-sticky-active {
		transform: none !important;
		transition: none !important;
		pointer-events: auto !important;
	}
}

/* ------------------------------------------------------------------
   Site editor — normal flow while designing
   ------------------------------------------------------------------ */

.editor-styles-wrapper {
	header:has(> .commerce7-header-transparent) {
		position: relative !important;
		top: auto !important;
		left: auto;
		right: auto;
	}

	body.has-commerce7-transparent-header main > :first-child {
		padding-top: 0;
	}
}