/**
 * Header & navigation component styles.
 */

.u3ds-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}

.u3ds-site-header.is-scrolled {
	background-color: rgba(8, 9, 13, 0.8);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--wp--preset--color--border);
}

.u3ds-site-header__inner {
	padding-top: var(--wp--preset--spacing--s);
	padding-bottom: var(--wp--preset--spacing--s);
}

.u3ds-site-title a {
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
}

/* WordPress core's navigation container defaults to flex-wrap: wrap, so
   at desktop widths where the header row is tight (site title + nav +
   CTA + icons), the last item ("About") was dropping to a second line
   instead of the row simply being tight. Scoped to desktop only so the
   mobile overlay menu's own layout is untouched. */
@media (min-width: 782px) {
	.u3ds-primary-nav.wp-block-navigation__container {
		flex-wrap: nowrap;
	}
}

.u3ds-primary-nav .wp-block-navigation-item a {
	position: relative;
	text-decoration: none;
	padding-top: var(--wp--preset--spacing--2-xs);
	padding-bottom: var(--wp--preset--spacing--2-xs);
}

.u3ds-primary-nav .wp-block-navigation-item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transition: right 200ms ease;
}

.u3ds-primary-nav .wp-block-navigation-item a:hover::after,
.u3ds-primary-nav .wp-block-navigation-item a:focus-visible::after {
	right: 0;
}

.u3ds-primary-nav .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: var(--wp--preset--font-size--large);
	min-height: 48px;
	display: flex;
	align-items: center;
}

.u3ds-site-header__actions {
	gap: var(--wp--preset--spacing--m);
	align-items: center;
}

.u3ds-header-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-primary);
	border-radius: var(--wp--custom--radius--button);
	text-transform: uppercase;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
	white-space: nowrap;
	transition: background-color 200ms ease, transform 200ms ease;
}

.u3ds-header-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-highlight);
}

.u3ds-header-cta .wp-block-button__link:active {
	transform: scale(0.98);
}

.u3ds-header-account,
.u3ds-header-wishlist,
.u3ds-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 200ms ease;
}

.u3ds-header-account:hover,
.u3ds-header-account:focus-visible,
.u3ds-header-wishlist:hover,
.u3ds-header-wishlist:focus-visible,
.u3ds-header-cart:hover,
.u3ds-header-cart:focus-visible {
	opacity: 1;
}

.u3ds-header-cart__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text-primary);
	font-size: 0.6875rem;
	line-height: 16px;
	text-align: center;
}

/* Mobile header CTA: "Start a Project" has no protected minimum width in
   the nowrap-flex header row (see .u3ds-site-header__actions above), so
   at narrow viewports the flex layout squeezes the button far below its
   text's natural width and the browser wraps it letter-by-letter. Rather
   than let the button shrink, show only "Start" (the .u3ds-header-cta__rest
   span carries the rest of the desktop copy) so the button's natural
   width stays compact and never needs to shrink or wrap. */
@media (max-width: 781px) {
	.u3ds-header-cta {
		flex-shrink: 0;
	}

	.u3ds-header-cta .wp-block-button__link {
		padding-left: var(--wp--preset--spacing--m);
		padding-right: var(--wp--preset--spacing--m);
	}

	.u3ds-header-cta__rest {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.u3ds-site-header,
	.u3ds-primary-nav .wp-block-navigation-item a::after,
	.u3ds-header-cta .wp-block-button__link,
	.u3ds-header-account,
	.u3ds-header-wishlist,
	.u3ds-header-cart {
		transition: none;
	}
}