/**
 * Premium Site Header
 *
 * @package Cypros_Core
 */

/* ----------------------------------------------------------
   Header shell
---------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--cypros-z-header);
	width: 100%;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--cypros-color-border);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition:
		background-color var(--cypros-transition-base),
		box-shadow var(--cypros-transition-base),
		transform var(--cypros-transition-base);
}

.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.985);
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.055);
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	display: grid;
	grid-template-columns:
		minmax(15rem, auto)
		1fr
		auto
		auto;
	align-items: center;
	gap: clamp(1.75rem, 3vw, 3.5rem);
	min-height: 6.6rem;
	transition: min-height var(--cypros-transition-base);
}

.site-header.is-scrolled .site-header__inner {
	min-height: 5.5rem;
}

/* ----------------------------------------------------------
   Branding
---------------------------------------------------------- */

.site-branding {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-branding__link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	color: var(--cypros-black);
	text-decoration: none;
}

.site-branding__name {
	display: block;
	color: var(--cypros-black);
	font-size: clamp(1.15rem, 1.45vw, 1.42rem);
	font-weight: var(--cypros-font-weight-black);
	line-height: 0.95;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-branding__tagline {
	display: block;
	margin-top: 0.5rem;
	color: var(--cypros-yellow-dark);
	font-size: 0.64rem;
	font-weight: var(--cypros-font-weight-bold);
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-branding__logo {
	display: flex;
	align-items: center;
}

.site-branding__logo .custom-logo-link {
	display: block;
}

.site-branding__logo .custom-logo {
	display: block;
	width: auto;
	max-width: 14rem;
	max-height: 3.75rem;
}

/* ----------------------------------------------------------
   Desktop navigation
---------------------------------------------------------- */

.site-nav {
	justify-self: end;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 2.4vw, 2.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__menu li {
	margin: 0;
	padding: 0;
}

.site-nav__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.25rem 0;
	color: var(--cypros-black);
	font-size: 0.76rem;
	font-weight: var(--cypros-font-weight-bold);
	line-height: 1;
	letter-spacing: 0.09em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		color var(--cypros-transition-fast),
		opacity var(--cypros-transition-fast);
}

.site-nav__menu a::after {
	position: absolute;
	right: 0;
	bottom: 0.25rem;
	left: 0;
	height: 2px;
	background: var(--cypros-yellow);
	content: "";
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--cypros-transition-base);
}

.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after,
.site-nav__menu a.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* ----------------------------------------------------------
   Primary CTA
---------------------------------------------------------- */

.site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	min-height: 3.8rem;
	padding: 0 1.65rem;
	color: var(--cypros-black);
	background: var(--cypros-yellow);
	font-size: 0.76rem;
	font-weight: var(--cypros-font-weight-black);
	line-height: 1;
	letter-spacing: 0.075em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color var(--cypros-transition-fast),
		transform var(--cypros-transition-fast);
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
	color: var(--cypros-black);
	background: var(--cypros-yellow-dark);
	transform: translateY(-2px);
}

.site-header__cta-arrow {
	display: inline-block;
	font-size: 0.95rem;
	transition: transform var(--cypros-transition-fast);
}

.site-header__cta:hover .site-header__cta-arrow,
.site-header__cta:focus-visible .site-header__cta-arrow {
	transform: translate(0.2rem, -0.2rem);
}

/* ----------------------------------------------------------
   Mobile menu trigger
---------------------------------------------------------- */

.site-header__menu-toggle {
	display: none;
	position: relative;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--cypros-black);
	cursor: pointer;
}

.site-header__menu-toggle span {
	position: absolute;
	left: 50%;
	width: 1.15rem;
	height: 1px;
	background: var(--cypros-black);
	transform: translateX(-50%);
	transition:
		top var(--cypros-transition-fast),
		transform var(--cypros-transition-fast);
}

.site-header__menu-toggle span:first-child {
	top: 1.2rem;
}

.site-header__menu-toggle span:last-child {
	top: 1.7rem;
}

.site-header.menu-is-open .site-header__menu-toggle span:first-child {
	top: 1.45rem;
	transform: translateX(-50%) rotate(45deg);
}

.site-header.menu-is-open .site-header__menu-toggle span:last-child {
	top: 1.45rem;
	transform: translateX(-50%) rotate(-45deg);
}

/* ----------------------------------------------------------
   Screen reader utility
---------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.screen-reader-text:focus {
	z-index: 10000;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	overflow: visible;
	color: var(--cypros-black);
	background: var(--cypros-yellow);
	clip: auto;
}

/* ----------------------------------------------------------
   Medium desktop
---------------------------------------------------------- */

@media (max-width: 72rem) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
		gap: 1.4rem;
	}

	.site-nav__menu {
		gap: 1.25rem;
	}

	.site-nav__menu a {
		font-size: 0.68rem;
	}

	.site-header__cta {
		min-height: 3.4rem;
		padding-inline: 1.2rem;
		font-size: 0.68rem;
	}

	.site-header__menu-toggle {
		display: none;
	}
}

/* ----------------------------------------------------------
   Tablet / mobile navigation
---------------------------------------------------------- */

@media (max-width: 58rem) {
	.site-header__inner,
	.site-header.is-scrolled .site-header__inner {
		position: relative;
		grid-template-columns: 1fr auto auto;
		gap: 0.9rem;
		min-height: 5.4rem;
	}

	.site-header__menu-toggle {
		display: block;
	}

	.site-header__cta {
		min-height: 3rem;
		padding-inline: 1rem;
	}

	.site-header__cta-arrow {
		display: none;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: block;
		visibility: hidden;
		opacity: 0;
		background: var(--cypros-white);
		border-top: 1px solid var(--cypros-color-border);
		border-bottom: 1px solid var(--cypros-color-border);
		transform: translateY(-0.75rem);
		pointer-events: none;
		transition:
			opacity var(--cypros-transition-base),
			transform var(--cypros-transition-base),
			visibility var(--cypros-transition-base);
	}

	.site-header.menu-is-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.site-nav__menu {
		display: block;
		padding: 1rem 0;
	}

	.site-nav__menu li {
		border-bottom: 1px solid var(--cypros-color-border);
	}

	.site-nav__menu li:last-child {
		border-bottom: 0;
	}

	.site-nav__menu a {
		display: flex;
		width: 100%;
		min-height: auto;
		padding: 1.25rem var(--cypros-container-gutter, 1.5rem);
		font-size: 0.82rem;
	}

	.site-nav__menu a::after {
		display: none;
	}
}

/* ----------------------------------------------------------
   Small mobile
---------------------------------------------------------- */

@media (max-width: 48rem) {
	.admin-bar .site-header {
		top: 46px;
	}

	.site-header__inner,
	.site-header.is-scrolled .site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto auto;
		gap: 0.65rem;
		min-height: 5rem;
	}

	.site-branding__name {
		font-size: 1rem;
		letter-spacing: 0.13em;
	}

	.site-branding__tagline {
		margin-top: 0.35rem;
		font-size: 0.5rem;
	}

	.site-branding__logo .custom-logo {
		max-width: 10rem;
		max-height: 3rem;
	}

	.site-branding__home-button {
		width: clamp(6.9rem, 34vw, 8.2rem);
		min-width: 0;
	}

	.site-branding {
		min-width: 0;
	}

	.site-header__cta {
		display: none !important;
	}

	.site-header__menu-toggle {
		width: 2.8rem;
		height: 2.8rem;
	}

	.site-header__menu-toggle span:first-child {
		top: 1.1rem;
	}

	.site-header__menu-toggle span:last-child {
		top: 1.55rem;
	}

	.site-header.menu-is-open .site-header__menu-toggle span:first-child,
	.site-header.menu-is-open .site-header__menu-toggle span:last-child {
		top: 1.3rem;
	}

	.site-nav__menu a {
		padding: 1.2rem 1.25rem;
		font-size: 0.78rem;
	}
}

/* ----------------------------------------------------------
   Reduced motion
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__inner,
	.site-nav,
	.site-nav__menu a::after,
	.site-header__cta,
	.site-header__cta-arrow,
	.site-header__menu-toggle span {
		transition: none;
	}

	.site-header__cta:hover,
	.site-header__cta:focus-visible,
	.site-header__cta:hover .site-header__cta-arrow,
	.site-header__cta:focus-visible .site-header__cta-arrow {
		transform: none;
	}
}
/* ==========================================================
   Header Scroll State
========================================================== */

.site-header{
    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        min-height .35s ease;
}

.site-header.is-scrolled{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:0 12px 50px rgba(0,0,0,.08);

}

.site-header.is-scrolled .site-header__inner{

    min-height:5rem;

}

.site-nav__menu a{

    transition:color .25s ease;

}

.site-nav__menu a:hover{

    color:var(--cypros-yellow-dark);

}

.site-branding{

    transition:transform .35s ease;

}

.site-header.is-scrolled .site-branding{

    transform:scale(.96);

}

/* V8.23 — technical header refinement */
.site-header{border-bottom:1px solid rgba(17,17,17,.14);box-shadow:0 8px 30px rgba(0,0,0,.035)}
.site-header::after{position:absolute;right:0;bottom:-1px;width:clamp(7rem,16vw,15rem);height:2px;background:var(--cypros-yellow);content:""}
.site-header__inner{position:relative}.site-branding__link{position:relative;padding-left:1rem}.site-branding__link::before{position:absolute;left:0;top:.1rem;width:2px;height:calc(100% - .2rem);background:var(--cypros-yellow);content:""}
