/* ==========================================================
   Header
========================================================== */

:root{

	--primary:#2F5D50;
	--accent:#E4A85A;
	--bg:#FAF8F5;
	--text:#1F2937;
	--muted:#6B7280;

	--radius:18px;

}

/* ==========================================================
   Header
========================================================== */

.site-header{

	position:sticky;
	top:0;
	z-index:9999;

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

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

	border-bottom:1px solid rgba(0,0,0,.05);

	transition:all .35s ease;

}

.site-header.scrolled{

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

}

/* ==========================================================
   Container
========================================================== */

.header-inner{

	max-width:1320px;

	margin:auto;

	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:18px 25px;

}

/* ==========================================================
   Logo
========================================================== */

.site-branding{

	display:flex;
	align-items:center;

}

.site-branding img{

	max-height:60px;
	width:auto;
	display:block;

}

.site-title{

	font-size:34px;
	font-weight:700;

	color:var(--text);

	text-decoration:none;

}

.site-title:hover{

	color:var(--primary);

}

/* ==========================================================
   Navigation
========================================================== */

.primary-navigation{

	display:flex;
	align-items:center;

}

.primary-menu{

	display:flex;
	align-items:center;

	list-style:none;

	gap:34px;

	margin:0;
	padding:0;

}

.primary-menu li{

	position:relative;

}

.primary-menu a{

	color:var(--text);

	text-decoration:none;

	font-size:15px;
	font-weight:600;

	padding:5px 0;

	position:relative;

	transition:.30s;

}

.primary-menu a:hover{

	color:var(--primary);

}

.primary-menu a::after{

	content:"";

	position:absolute;

	left:0;
	bottom:-7px;

	width:0;
	height:2px;

	background:var(--primary);

	transition:.30s;

}

.primary-menu a:hover::after{

	width:100%;

}

/* ==========================================================
   Right Icons
========================================================== */

.header-right{

	display:flex;
	align-items:center;

	gap:16px;

}

.header-icon{

	width:42px;
	height:42px;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:50%;

	background:transparent;

	border:none;

	cursor:pointer;

	color:var(--text);

	transition:.30s;

}

.header-icon:hover{

	background:#f3f4f6;

	transform:translateY(-2px);

}

/* ==========================================================
   Mobile Toggle
========================================================== */

.menu-toggle{

	display:none;

	width:42px;
	height:42px;

	border:none;

	background:transparent;

	cursor:pointer;

	padding:0;

}

.menu-toggle span{

	display:block;

	width:24px;
	height:2px;

	background:#111827;

	margin:5px auto;

	border-radius:10px;

	transition:.30s;

}

/* ==========================================================
   Search Overlay
========================================================== */

.search-overlay{

	position:fixed;

	inset:0;

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

	display:none;

	align-items:center;
	justify-content:center;

	z-index:99999;

}

.search-overlay.active{

	display:flex;

}

.search-overlay form{

	width:90%;
	max-width:700px;

}

.search-overlay input{

	width:100%;

	padding:22px 30px;

	font-size:22px;

	border-radius:50px;

	border:1px solid #ddd;

	outline:none;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1100px){

	.primary-menu{

		gap:22px;

	}

}

@media(max-width:992px){

	.menu-toggle{

		display:block;

	}

	.primary-navigation{

		position:absolute;

		top:100%;
		left:0;

		width:100%;

		background:#ffffff;

		padding:25px;

		display:none;

		box-shadow:0 20px 40px rgba(0,0,0,.08);

	}

	.primary-navigation.is-open{

		display:block;

	}

	.primary-menu{

		flex-direction:column;

		align-items:flex-start;

		gap:18px;

	}

}

@media(max-width:576px){

	.header-inner{

		padding:15px 18px;

	}

	.site-branding img{

		max-height:48px;

	}

	.site-title{

		font-size:28px;

	}

	.header-right{

		gap:10px;

	}

}