/* =============================================================================
   HEADER
   =============================================================================

   File: assets/css/layout/header.css

   Table of Contents

   01. Header
   02. Header Wrapper
   03. Logo
   04. Navigation
   05. Navigation Hover
   06. Active Menu Item
   07. Header Actions

=============================================================================*/


/* =============================================================================
   01. Header
============================================================================= */

.site-header{

	position:fixed;

	inset:0 0 auto 0;

	width:100%;

	height:var(--header-height);

	display:flex;

	align-items:center;

	z-index:var(--z-header);

	background:transparent;

	transition:
		background .35s ease,
		backdrop-filter .35s ease,
		box-shadow .35s ease,
		transform .35s ease;

}


/* =============================================================================
   02. Header Wrapper
============================================================================= */

.header-wrapper{

	display:flex;

	align-items:center;

	justify-content:space-between;

	width:100%;

	min-height:var(--header-height);

	gap:2rem;

}


/* =============================================================================
   03. Logo
============================================================================= */

.site-logo{

	flex-shrink:0;

}

.site-logo a{

	display:inline-flex;

	align-items:center;

	text-decoration:none;

}

.site-logo img{

	display:block;

	width:auto;

	max-width:75px;

	height:auto;

	object-fit:contain;

	transition:transform .35s ease;

}

.site-logo:hover img{

	transform:scale(1.03);

}


/* =============================================================================
   04. Primary Navigation
============================================================================= */

.primary-navigation{

	margin-left:auto;

}

.primary-menu{

	display:flex;

	align-items:center;

	gap:3rem;

	margin:0;

	padding:0;

	list-style:none;

}

.primary-menu li{

	position:relative;

}

.primary-menu li a{

	position:relative;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:.45rem 0;

	font-size:var(--fs-sm);

	font-weight:var(--fw-medium);

	line-height:1;

	color:var(--color-heading);

	text-decoration:none;

	transition:
		color .3s ease,
		opacity .3s ease;

}

.primary-menu li:hover>a{

	color:var(--color-primary);

}


/* =============================================================================
   05. Navigation Hover Line
============================================================================= */

.primary-menu li a::before{

	content:"";

	position:absolute;

	left:0;

	bottom:-8px;

	width:0;

	height:2px;

	border-radius:999px;

	background:var(--color-primary);

	transition:width .35s ease;

}

.primary-menu li:hover>a::before{

	width:100%;

}


/* =============================================================================
   06. Active Navigation Dot
============================================================================= */

/* .primary-menu .current-menu-item>a::after,
.primary-menu .current_page_item>a::after,
.primary-menu .current-menu-ancestor>a::after{

	content:"";

	position:absolute;

	left:50%;

	bottom:-18px;

	width:6px;

	height:6px;

	border-radius:50%;

	background:var(--color-primary);

	transform:translateX(-50%);

	box-shadow:

		0 0 0 5px rgba(20,83,45,.08);

} */

.primary-menu .current-menu-item:hover>a::before,
.primary-menu .current_page_item:hover>a::before,
.primary-menu .current-menu-ancestor:hover>a::before{

	width:0;

}


/* =============================================================================
   07. Header Actions
============================================================================= */

.header-actions{

	display:flex;

	align-items:center;

	gap:1.25rem;

	flex-shrink:0;

}

.header-actions .btn{

	white-space:nowrap;

}

/* =============================================================================
   08. Sticky Header
============================================================================= */

.site-header.scrolled{

	background:rgba(248,247,244,.82);

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

	backdrop-filter:blur(18px);

	border-bottom:1px solid rgba(24,24,27,.06);

	box-shadow:
		0 12px 40px rgba(24,24,27,.06);

}


/* =============================================================================
   09. Header Hide / Reveal
============================================================================= */

.site-header.header-hidden{

	transform:translateY(-100%);

}

.site-header.header-visible{

	transform:translateY(0);

}


/* =============================================================================
   10. Header Glass Effect
============================================================================= */

.site-header::before{

	content:"";

	position:absolute;

	inset:0;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.22),
			rgba(255,255,255,0)
		);

	opacity:0;

	pointer-events:none;

	transition:opacity .35s ease;

}

.site-header.scrolled::before{

	opacity:1;

}


/* =============================================================================
   11. Navigation Interaction
============================================================================= */

.primary-menu{

	position:relative;

}

.primary-menu li{

	transition:transform .3s ease;

}

.primary-menu li:hover{

	transform:translateY(-2px);

}

.primary-menu li a{

	letter-spacing:.01em;

}


/* =============================================================================
   12. Navigation Active States
============================================================================= */

.primary-menu li.current-menu-item>a,
.primary-menu li.current_page_item>a,
.primary-menu li.current-menu-ancestor>a{

	color:var(--color-primary);

	font-weight:600;

}

.primary-menu li.current-menu-item>a:hover,
.primary-menu li.current_page_item>a:hover,
.primary-menu li.current-menu-ancestor>a:hover{

	color:var(--color-primary);

}


/* =============================================================================
   13. CTA Button
============================================================================= */

.header-actions .btn{

	min-height:50px;

	padding:0 1.6rem;

	border-radius:999px;

	transition:
		transform .35s ease,
		box-shadow .35s ease;

}

.header-actions .btn:hover{

	transform:translateY(-3px);

	box-shadow:

		0 12px 30px rgba(20,83,45,.18);

}


/* =============================================================================
   14. Header Logo Animation
============================================================================= */

.site-logo img{

	transform-origin:center;

	will-change:transform;

}


/* =============================================================================
   15. Better Click Area
============================================================================= */

.primary-menu li>a{

	min-height:42px;

}


/* =============================================================================
   16. Accessibility
============================================================================= */

.primary-menu a:focus-visible,

.header-actions .btn:focus-visible{

	outline:2px solid var(--color-primary);

	outline-offset:6px;

	border-radius:6px;

}


/* =============================================================================
   17. Reduced Motion
============================================================================= */

@media (prefers-reduced-motion:reduce){

	.site-header,

	.site-header::before,

	.site-logo img,

	.primary-menu li,

	.primary-menu a,

	.primary-menu a::before,

	.header-actions .btn{

		transition:none !important;

	}

}


/* =============================================================================
   End of Part 2
============================================================================= */

/* =============================================================================
   18. Mobile Menu Toggle
============================================================================= */

.mobile-menu-toggle{

	display:none;

	position:relative;

	align-items:center;

	justify-content:center;

	flex-direction:column;

	width:52px;

	height:52px;

	padding:0;

	border:none;

	background:transparent;

	cursor:pointer;

	z-index:1002;

}

.mobile-menu-toggle__line {

	display: block;

	width: 26px;
	height: 2px;

	flex-shrink: 0;

	border-radius: 999px;

	background-color: var(--color-heading);

	opacity: 1;
	visibility: visible;

	transform: none;
	transform-origin: center;

	transition:
		transform .35s ease,
		opacity .35s ease,
		background-color .35s ease;

}

.mobile-menu-toggle__line:first-child{

	margin-bottom:7px;

}


/* =============================================================================
   19. Hamburger Active State
============================================================================= */

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line:first-child{

	transform:
		translateY(4.5px)
		rotate(45deg);

}

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line:last-child{

	transform:
		translateY(-4.5px)
		rotate(-45deg);

}

.mobile-menu-toggle.is-active
.mobile-menu-toggle__line{

	background:var(--color-primary);

}


/* =============================================================================
   20. Mobile Menu Overlay
============================================================================= */

.mobile-menu-overlay{

	position:fixed;

	inset:0;

	background:rgba(24,24,27,.45);

	backdrop-filter:blur(6px);

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

	opacity:0;

	visibility:hidden;

	pointer-events:none;

	transition:
		opacity .35s ease,
		visibility .35s ease;

	z-index:999;

}

.mobile-menu-overlay.is-active{

	opacity:1;

	visibility:visible;

	pointer-events:auto;

}


/* =============================================================================
   21. Off Canvas Menu
============================================================================= */

.mobile-menu{

	position:fixed;

	top:0;

	right:0;

	width:min(420px,100%);

	height:100vh;

	background:var(--color-background);

	box-shadow:
		-15px 0 40px rgba(24,24,27,.08);

	padding:9rem 3rem 3rem;

	transform:translateX(100%);

	transition:transform .45s ease;

	z-index:1000;

	overflow-y:auto;

}

.mobile-menu.is-active{

	transform:translateX(0);

}


/* =============================================================================
   22. Mobile Navigation
============================================================================= */

.mobile-menu .menu{

	display:flex;

	flex-direction:column;

	gap:2rem;

	margin:0;

	padding:0;

	list-style:none;

}

.mobile-menu li{

	margin:0;

	padding:0;

}

.mobile-menu a{

	display:inline-flex;

	align-items:center;

	font-size:clamp(1.3rem,2vw,1.6rem);

	font-weight:600;

	color:var(--color-black);

	text-decoration:none;

	position:relative;

	transition:
		color .3s ease,
		transform .3s ease;

}

.mobile-menu-cta a{
	color:var(--color-white);
}

.mobile-menu li:hover>a{

	color:var(--color-primary);

	transform:translateX(10px);

}


/* =============================================================================
   23. Mobile Active Menu
============================================================================= */

.mobile-menu .current-menu-item>a,

.mobile-menu .current_page_item>a,

.mobile-menu .current-menu-ancestor>a{

	color:var(--color-primary);

}

.mobile-menu .current-menu-item>a::before,

.mobile-menu .current_page_item>a::before,

.mobile-menu .current-menu-ancestor>a::before{

	content:"";

	width:8px;

	height:8px;

	border-radius:50%;

	background:var(--color-primary);

	margin-right:14px;

}


/* =============================================================================
   24. Mobile CTA
============================================================================= */

.mobile-menu .btn{

	width:100%;

	margin-top:3rem;

	justify-content:center;

}


/* =============================================================================
   25. Mobile Social Links
============================================================================= */

.mobile-menu-social{

	display:flex;

	align-items:center;

	gap:1rem;

	margin-top:4rem;

}

.mobile-menu-social a{

	display:flex;

	align-items:center;

	justify-content:center;

	width:48px;

	height:48px;

	border-radius:50%;

	background:#fff;

	box-shadow:

		0 8px 25px rgba(24,24,27,.06);

	transition:
		transform .3s ease,
		box-shadow .3s ease;

}

.mobile-menu-social a:hover{

	transform:translateY(-4px);

	box-shadow:

		0 14px 30px rgba(24,24,27,.12);

}


/* =============================================================================
   26. Prevent Body Scroll
============================================================================= */

body.menu-open{

	overflow:hidden;

}


/* =============================================================================
   End of Part 3
============================================================================= */
/* responsiveness deleted  */
/* =============================================================================
   End of Part 4
============================================================================= */

/* =============================================================================
   34. Performance Optimizations
============================================================================= */

.site-header{

	will-change:
		background,
		backdrop-filter,
		transform;

}

.site-logo img,

.primary-menu a,

.header-actions .btn,

.mobile-menu-toggle__line{

	will-change:
		transform,
		opacity;

}


/* =============================================================================
   35. Better Rendering
============================================================================= */

.site-header,

.primary-menu,

.mobile-menu{

	-webkit-font-smoothing:antialiased;

	-moz-osx-font-smoothing:grayscale;

	text-rendering:optimizeLegibility;

}


/* =============================================================================
   36. Selection
============================================================================= */

.site-header{

	user-select:none;

}

.site-logo a,

.primary-menu a,

.header-actions .btn{

	user-select:auto;

}


/* =============================================================================
   37. Safe Area Support
============================================================================= */

@supports (padding:max(0px)){

	.site-header{

		padding-left:max(0px, env(safe-area-inset-left));

		padding-right:max(0px, env(safe-area-inset-right));

	}

	.mobile-menu{

		padding-bottom:max(2rem, env(safe-area-inset-bottom));

	}

}


/* =============================================================================
   38. Keyboard Accessibility
============================================================================= */

.primary-menu a:focus-visible,

.mobile-menu a:focus-visible,

.mobile-menu-toggle:focus-visible,

.header-actions .btn:focus-visible{

	outline:2px solid var(--color-primary);

	outline-offset:4px;

	border-radius:8px;

}


/* =============================================================================
   39. Print
============================================================================= */

@media print{

	.site-header{

		position:relative;

		background:#fff;

		box-shadow:none;

		border-bottom:1px solid #ddd;

	}

	.mobile-menu,

	.mobile-menu-overlay,

	.mobile-menu-toggle{

		display:none !important;

	}

}


/* =============================================================================
   40. End of Header
============================================================================= */