/**
 * Header Pattern Styles
 *
 * Banner hover, gradient background, CTA button hover,
 * responsive layout, focus rings, and motion preferences.
 */

/* --- Banner Bar --- */

.header-banner {
	cursor: pointer;
	background-color: var(--wp--custom--header--banner-bg) !important;
}

.header-banner a {
	color: inherit;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.header-banner a:hover {
	color: inherit;
	text-decoration: none;
}

.header-banner:hover {
	background-color: var(--wp--custom--header--banner-hover-bg) !important;
}

.header-banner svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
	flex-shrink: 0;
}

/* --- Banner Focus --- */

.header-banner a:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -4px;
	border-radius: 2px;
}

/* --- Main Bar Gradient --- */

.header-main-bar {
	background-color: #EDF6FF;
	background-image: linear-gradient(
		to bottom,
		var(--wp--custom--header--gradient-start),
		var(--wp--custom--header--gradient-end)
	);
}

/* --- CTA Button --- */

.header-cta .wp-block-button__link {
	border-radius: 100px !important;
	background-color: var(--wp--custom--header--cta-bg) !important;
}

.header-cta .wp-block-button__link:hover {
	background-color: var(--wp--custom--header--cta-hover-bg) !important;
}

.header-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* --- Navigation Bar --- */

.header-nav-bar {
	margin-block-start: 0 !important;
}

.header-nav-bar .wp-block-navigation__container {
	gap: 48px;
	justify-content: center;
	flex-wrap: nowrap !important;
}

.header-nav-bar .wp-block-navigation-item__content {
	color: var(--wp--custom--header--nav-link-color) !important;
}

.header-nav-bar .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--header--nav-link-hover-color) !important;
}

.header-nav-bar .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Mobile Nav Overlay — Left slide-in panel
 *
 * !important is needed on overlay rules because WordPress core navigation
 * block CSS uses high-specificity selectors and inline styles that
 * cannot be overridden with normal specificity.
 */

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open {
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	background-color: rgba(47, 50, 55, 0.8) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	top: var(--header-height, 108px) !important;
	animation: overlay-fade-in 0.3s ease;
}

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	background-color: #fff !important;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);
	height: calc(100vh - var(--header-height));
	margin: 0 !important;
	max-width: 85vw;
	width: 390px;
	animation: panel-slide-down .75s ease;
	transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {

	@keyframes overlay-fade-in {

		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes panel-slide-down {

		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 30px !important;
	padding-top: calc(30px + 40px) !important;
	gap: 20px;
}

.header-mobile-nav .wp-block-navigation__responsive-container-close {
	right: 30px !important;
	top: 30px !important;
	display: flex !important;
	color: var(--wp--preset--color--primary-dark) !important;
}

.header-mobile-nav .wp-block-navigation__responsive-container-close svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	background: transparent !important;
}

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--custom--header--nav-link-color) !important;
}

.header-mobile-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--header--nav-link-hover-color) !important;
}

/* --- Responsive: Desktop (>=1024px) — hide mobile nav, show nav bar + tagline --- */

@media (min-width: 1024px) {

	.header-mobile-nav {
		display: none !important;
	}
}

/* --- Responsive: Mobile/Tablet (<1024px) — hide tagline and nav bar, smaller CTA --- */

@media (max-width: 1023px) {

	.header-tagline {
		display: none !important;
	}

	.header-nav-bar {
		display: none !important;
	}

	.header-cta .wp-block-button__link {
		padding: 10px 24px !important;
		font-size: var(--wp--preset--font-size--small) !important;
	}

	.header-main-bar .wp-block-site-logo img {
		max-width: 118px !important;
	}
}

/* --- Screen Reader Text --- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --- Transitions with motion preference --- */

@media (prefers-reduced-motion: no-preference) {

	.header-banner {
		transition: background-color 0.2s ease;
	}

	.header-cta .wp-block-button__link {
		transition: background-color 0.2s ease;
	}

	.header-nav-bar .wp-block-navigation-item__content {
		transition: color 0.2s ease;
	}
}