/********************************************************* 
	site header
*********************************************************/

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: .875rem 0;
	border-bottom: 1px solid var(--gray-400);
	background: var(--true-white);
	box-shadow: var(--drop-shadow-sm);
}

.site-header .container {
	max-width: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-logo {
	max-height: 3.25rem;
	display: block;
}

.header-menu a {
	padding: .5rem 1rem;
	display: block;
	font-family: var(--font-label);
	font-size: var(--font-size-sm);
	text-decoration: none;
	line-height: 1rem;
	white-space: nowrap;
	border-radius: 1.5rem;
	background-color: var(--true-white); 
	box-shadow: none;
	transition: var(--basic-transition);
}

.header-menu a:focus,
.header-menu a:hover {
	position: relative;
	box-shadow: var(--focus-ring-md) var(--brand-primary-highlight);
}

.header-menu .link-newsletters a, 
.header-menu .link-donate a {
	padding: .5rem 1.5rem;
	border: 1px solid;
}

.header-menu .link-newsletters a {
	color: var(--brand-tertiary)
}

.header-menu .link-donate a {
	color: var(--brand-secondary);
}

#header-content {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
	align-items: center;
}

#header-menu-toggle {
	padding-right: 1rem;
	padding-left: 1rem;
	font-size: .875rem;
}

@media (max-width:1280px) { 
	.header-menu a {
		padding: .5rem 1.25rem;
	}
}

@media (min-width:1200px) {
	.header-menu > ul {
		display: flex;
		gap: .25rem;
	}
	.header-menu .link-newsletters, 
	.header-menu .link-donate {
		margin-left: 1rem;
	}
	.header-search {
		max-width: 240px;
		padding-left: .25rem;
	}
	#header-menu-toggle {
		display: none;
	}
}

@media (max-width:1200px) { 
	#header-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding: 1.5rem;
		text-align: center;
		background: white;
		border-top: 1px solid var(--text-white);
		box-shadow: var(--drop-shadow-sm);
	}

	.header-menu-open #header-menu {
		display: block;
		max-height: calc(100vh - 96px);
		overflow: auto;
	}

	#header-menu ul {
		display: flex;
		flex-direction: column;
		gap: .75rem;
	}

	.header-menu a {
		padding: .75rem 1rem;
	}
}

@media (min-width:960px) { 
	#header-search-toggle {
		display: none;
	}
}

@media (max-width:960px) { 
	#header-search {
		position: absolute;
		display: none;
		top: 100%;
		right: 0;
		left: 0;
		padding: 1.5rem;
		text-align: center;
		background: white;
		border-top: 1px solid var(--text-white);
		box-shadow: var(--drop-shadow-sm);
	}

	.header-search-open #header-search {
		display: block;
	}

	#header-search .search-form {
		position: relative;
	}
}

@media (max-width:768px) { 
	.site-header {
		padding: .625rem 0;
	}
	.site-logo {
		max-height: 2rem;
	}
}

/* sub menu styles */
.header-menu .menu-item {
	position: relative;
}

@media (max-width:1200px) {
	.sub-menu {
		position: static;
		display: block;
	}
}

@media (min-width:1200px) {
	#header-menu .sub-menu {
		position: absolute;
		padding: 1rem .5rem;
		background-color: var(--true-white);
		border-radius: var(--border-radius-md);
		box-shadow: var(--drop-shadow-lg);
		display: none;
	}

	#header-menu .sub-menu li + li {
		margin-top: .5rem
	}

	#header-menu .menu-item:hover .sub-menu {
		display: block;
	}
}