/**
 * Component: Header
 * 
 * Styles for the Header component.
 *
 * @package Point_Hope
 */

body.menu-open {
	overflow-y: hidden;
}
.site-header {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
	background: var(--color-white);
	padding: 31px 0;
}
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-logo img {
	max-width: 100%;
	width: 280px;
	object-fit: contain;
}
.site-header__toggle,
.menu-overlay__close {
	width: 50px;
	height: 50px;
	border: none;
	background: var(--color-palm);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	transition: var(--transition-base);
}
.site-header__toggle:hover {
	border-radius: 74px;
	background: #E4E8C4;
}
.site-header__toggle-icon {
	width: 20px;
	height: 3px;
	border-radius: 3px;
	background: var(--color-white);
	position: relative;

}
.site-header__toggle:hover .site-header__toggle-icon  {
	background: var(--color-hunter);
}
.menu-overlay__close {
	gap: 0;
	position: relative;
}
.menu-overlay__close:hover {
	background: var(--color-hunter);
}
.menu-overlay__close-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 23px;
	height: 3px;
	background: var(--color-white);
	border-radius: 3px;
}
.menu-overlay__close-icon.line1 {
	transform: translate(-50%, -50%) rotate(45deg);
}
.menu-overlay__close-icon.line2 {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.menu-overlay {
	position: relative;
}
.menu-overlay::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(51, 58, 48, 0.75);
	opacity: 0;
	visibility: hidden;
	transform: scaleX(0);
	transform-origin: center;
	transition: 
		opacity 0.4s ease,
		transform 0.6s ease,
		visibility 0.4s ease;
	z-index: 1023;
}
.menu-overlay.is-active::before {
	opacity: 1;
	visibility: visible;
	transform: scaleX(1);
}
.menu-overlay__panel {
	position: fixed;
	inset: 0;
	width: 100%;
	left: auto;
	right: 0;
	opacity: 0;
	visibility: hidden;
	transition: 
		opacity 0.4s ease,
		visibility 0.4s ease;
	z-index: 1024;
	display: flex;
	justify-content: flex-end;
	height: 100vh;
}
.menu-overlay.is-active .menu-overlay__panel {
	opacity: 1;
	visibility: visible;
}
.menu-overlay__inner {
	background: var(--color-white);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 82px 103px 40px 124px;
	max-width: 529px;
	width: 100%;
}
.menu-overlay__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}
.menu-overlay__label {
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	font-weight: 500;
	color: var(--color-palm);
}
.menu-overlay__nav .header-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu-overlay__nav .header-menu li {
	padding: 12px 0;
	margin: 0;
}
.menu-overlay__nav .header-menu li a {
	color: var(--color-hope);
	font-family: var(--font-serif);
	font-size: 36px;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}
.menu-overlay__cta {
	margin-top: 50px;
}
.menu-overlay__secondary-links {
	margin-top: 48px;
	color: var(--color-hope);
	display: flex;
	flex-wrap: wrap;
}
.secondary-links-divider {
	width: 2px;
	height: 26px;
	background-color: var(--color-hope);
}
.menu-overlay__secondary-links .menu-overlay__secondary-link {
	font-size: 20px;
	line-height: normal;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;

	&:before {
		content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 100%;
        height: 5px;
        background-size: contain;
        background-repeat: no-repeat;
        opacity: 0;
        transition: all 0.3s ease;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="7" viewBox="0 0 120 7" fill="none"><path d="M0 1C6.66608 1 6.66608 6 13.3322 6C19.9982 6 19.9982 1 26.659 1C33.3198 1 33.3251 6 39.9912 6C46.6573 6 46.6626 1 53.3286 1C59.9947 1 59.9947 6 66.6608 6C73.3269 6 73.3269 1 79.993 1C86.659 1 86.659 6 93.3251 6C99.9912 6 99.9912 1 106.663 1C113.334 1 113.329 6 120 6" stroke="%23AACCE5" stroke-width="2" stroke-miterlimit="10"/></svg>');
	}
}
.menu-overlay__secondary-links .menu-overlay__secondary-link:hover {
	color: var(--color-hope);

	&:before {
		opacity: 1;
        transform: translateY(-50%) translateX(0);
	}
}
.menu-overlay__secondary-links .menu-overlay__secondary-link:focus {
	color: var(--color-hunter);
}
.menu-overlay__secondary-links .menu-overlay__secondary-link.realtors {
	padding-right: 30px;
}
.menu-overlay__secondary-links .menu-overlay__secondary-link.residents {
	/*margin-left: 30px;*/
}
.menu-overlay__panel .social-menu_items {
	margin-top: 60px;
}
.social-menu_items .social-menu {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
}
.social-menu_items .social-menu .menu-item {
	margin-bottom: 0;
	margin-right: 30px;

	&:hover, &:focus-visible {
		img.social-icon {
			transform: scale(1.15);
		}
	}
}
.social-menu_items .social-menu .menu-item:last-child {
	margin-right: 0;
}
img.social-icon {
	height: 36px;
	width: 36px;
	max-width: 100%;
	object-fit: contain;
	transition: .2s ease-in-out;
}
/* Responsive CSS */
@media(max-width:1399px) {
	.menu-overlay__inner {max-width:50%;padding: 50px 24px 40px 50px;}
}
@media(max-width:992px) {
	.site-header {padding: 25px 0;}
	.site-logo img {width: 168px;height: 30px;}
	.menu-overlay__header {margin-bottom: 24px;}
	.site-header__toggle, .menu-overlay__close {width: 30px;height: 30px;gap: 4px;}
	.site-header__toggle-icon {width: 14px;height: 2px;}
	.menu-overlay__inner {max-width: 286px;padding: 25px 14px 50px 30px;}
	.menu-overlay__close-icon {width: 14.1px;height: 2px;}
	.menu-overlay__label {font-size: 14px;letter-spacing: 1.4px;}
	.menu-overlay__nav .header-menu li a {font-size: 24px;}
	.menu-overlay__cta {margin-top: 29px;}
	.menu-overlay__secondary-links {margin-top: 24px;flex-direction: column;gap: 24px;}
	.secondary-links-divider {display: none;}
	.menu-overlay__secondary-links .menu-overlay__secondary-link {padding: 0 !important;margin: 0 !important;font-size: 16px;letter-spacing: 3.2px;}
	.menu-overlay__panel .social-menu_items {margin-top: 24px;}
	.social-menu_items .social-menu .menu-item {margin-right: 24px;}
	img.social-icon {height: 30px;width: 30px;}
}