/**
 * Custom Header Styles
 */

/* Fixed Header Wrapper */
.site-header-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* Add padding to body to account for fixed header */
body {
	padding-top: 80px;
}

/* Main Navigation Bar */
.main-navigation-bar {
	background-color: var(--wp--preset--color--cream, #FFF7E4);
	height: 80px;
	display: flex;
	align-items: center;
}

.main-nav-container {
	max-width: 1310px;
	margin: 0 auto;
	padding: 0 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 97%;
	height: 100%;
}

/* Site Logo - Left */
.site-logo {
	flex-shrink: 0;
	max-width: 400px;
	width: auto;
	display: flex;
	align-items: center;
}

.site-logo a {
	display: block;
	text-decoration: none;
	line-height: 0;
}
.site-logo a:active, .site-logo a:focus {
outline:none;}
.logo-img {
	width: 193px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: bicubic;
}

.site-title {
	font-family: var(--wp--preset--font-family--primed);
	font-size: 28px;
	color: #2F2E2C;
	margin: 0;
}

/* Primary Navigation - Center */
.nav-center {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 15px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.primary-menu li {
	position: relative;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	border-radius: 50px;
	border: 1.5px solid #5b66c6;
	background: var(--wp--preset--color--cream, #FFF7E4);
	color: var(--wp--preset--color--cornflower, #5b66c6);
	font-family: "Google Sans Flex", var(--wp--preset--font-family--google-sans-flex, sans-serif);
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	display: flex;
	padding: 5px 15px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 160%; /* 22.4px */
	letter-spacing: 0.28px;
}

.primary-menu a:hover,
.primary-menu a:focus {
	background: var(--wp--preset--color--cornflower, #5B66C6);
	border-color: var(--wp--preset--color--yolk, #FFC856);
	color: var(--wp--preset--color--cream, #FFF7E4);
	outline:none;
}


/* Dropdown Menus with Block Areas - Full Width Mega Menu Style */
.primary-menu .menu-item-has-children {
	position: static;
}

.primary-menu .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.primary-menu .menu-item-has-children:hover > a::after,
.primary-menu .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

.primary-menu .sub-menu {
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	width: 100%;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-top: 1px solid var(--wp--preset--color--cream, #FFF7E4);
	padding: 30px 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 998;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Center submenu content */
.primary-menu .sub-menu > li {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.primary-menu .sub-menu li {
	margin: 0;
	padding: 0;
}

.primary-menu .sub-menu a {
	padding: 12px 20px;
	display: block;
	border-radius: 4px;
	transition: background-color 0.2s ease;
	border: none;
	background: transparent;
	color: #2F2E2C;
	width: auto;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
}

.primary-menu .sub-menu a:hover {
	background-color: var(--wp--preset--color--cream, #FFF7E4);
	color: #2F2E2C;
}

/* Block Area in Full-Width Dropdowns */
.primary-menu .sub-menu .block-area,
.primary-menu .sub-menu .menu-block-area {
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--cream, #FFF7E4);
	margin-top: 15px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.primary-menu .sub-menu .menu-block-area {
	padding: 20px;
}

.primary-menu .sub-menu .menu-block-area p:last-child {
	margin-bottom: 0;
}

/* Menu Description with Shortcodes */
.primary-menu .sub-menu .menu-description {
	border-top: 1px solid var(--wp--preset--color--cream, #FFF7E4);
	margin-top: 15px;
	padding-top: 20px;
}

.primary-menu .sub-menu li:first-child .menu-description {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* Backdrop overlay when menu is open */
.primary-menu .menu-item-has-children:hover::before,
.primary-menu .menu-item-has-children:focus-within::before {
	content: '';
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 997;
	pointer-events: none;
}

/* Social Links - Right */
.header-social-links {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	position: relative;
}

.social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	align-items: center;
}

.social-links li {
	margin: 0;
	padding: 0;
}

.social-links a,
.social-links .social-link-button {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	border-radius:50%;
	text-decoration: none;
}
.social-links .social-link-item:nth-child(5) a, .social-links .social-link-item:nth-child(6) a  {
	    border: 1.5px solid var(--CORNFLOWER, #5B66C6) !important;
    width: 32px;
    height: 32px;
    padding: 8px;
}
.social-links .social-link-item:nth-child(5) a:hover svg path, .social-links .social-link-item:nth-child(6) a:hover svg path {
	fill:#fff7e4;
}
.social-icon {
	display: block;
	transition: all 0.3s ease;
}

/* Social icon hover states */
.social-links a:hover,
.social-links .social-link-button:hover{
	background:#5b66c6;
}

.social-links a:hover .social-icon rect,
.social-links .social-link-button:hover .social-icon rect {
	fill:#5b66c6;
}

.social-links a:hover .social-icon path,
.social-links .social-link-button:hover .social-icon path {
	fill:#FFF7E4;
}

.social-links .search-toggle:hover circle, .social-links .search-toggle:hover path {
	stroke: #FFF7E4!important;
}
.social-links .search-toggle:hover path {
	fill: #FFF7E4!important;
}


/* Search Toggle Button */
.search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	border: 1.5px solid var(--CORNFLOWER, #5B66C6)!important;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

/* Search Dropdown - Full Width Mega Style */
.search-dropdown {
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	width: 100%;
	background: white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-top: 1px solid var(--wp--preset--color--cream, #FFF7E4);
	padding: 0px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	z-index: 998;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
}

/* Center search content */
.search-dropdown > * {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Ensure block area content is visible in search dropdown */
.search-dropdown .block-area {
    display: block;
    width: 100%;
    padding: 0;
    max-width: 100%;
}
.search-dropdown.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Backdrop overlay when search is open */
.search-toggle[aria-expanded="true"]::before {
	content: '';
	position: fixed;
	top: 80px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 997;
	pointer-events: none;
}

/* Hamburger: hidden on desktop */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--cornflower, #5B66C6);
	border-radius: 50%;
	background: var(--wp--preset--color--cream, #FFF7E4);
	color: var(--wp--preset--color--cornflower, #5B66C6);
	cursor: pointer;
	transition: all 0.3s ease;
	flex-shrink: 0;
}
.menu-toggle:hover {
	background: var(--wp--preset--color--cornflower, #5B66C6);
	color: var(--wp--preset--color--cream, #FFF7E4);
}
.menu-toggle .menu-toggle-icon {
	display: block;
	width: 24px;
	height: 24px;
}
.menu-toggle .menu-toggle-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.menu-toggle-close[hidden] {
	display: none !important;
}

/* Mobile menu overlay (hidden by default) */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	background: #dce5f5;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	overflow: hidden;
}
.mobile-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mobile-menu-header {
	background: var(--wp--preset--color--cornflower, #5B66C6);
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	flex-shrink: 0;
}
.mobile-menu-header .mobile-menu-logo .site-title,
.mobile-menu-header .mobile-menu-logo .logo-img {
	filter: brightness(0) invert(1);
}
.mobile-menu-header .mobile-menu-logo a {
	color: #fff;
}
.mobile-menu-close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	flex-shrink: 0;
	border: none;
	padding: 0;
}
.mobile-menu-close:hover {
	background: rgba(255, 255, 255, 0.9);
}
.mobile-menu-close svg {
	width: 40px;
	height: 40px;
}
.mobile-menu-search .search-toggle-mobile {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--cream, #FFF7E4);
	background: var(--wp--preset--color--cream, #FFF7E4);
	color: #5b66c6;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.mobile-menu-search .search-toggle-mobile:hover {
	background: rgba(255, 255, 255, 0.9);
}
.mobile-menu-search .search-toggle-mobile .social-icon {
	width: 20px;
	height: 22px;
}

.mobile-menu-body {
	flex: 1;
	overflow-y: auto;
	background: #A2BEFF;
	padding: 40px 20px 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 40px;
}

.mobile-menu-nav {
	width: 100%;
	max-width: 320px;
}
.mobile-menu-nav .mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.mobile-menu-nav .mobile-menu li {
	margin: 0;
	padding: 0;
}
.mobile-menu-nav .mobile-menu .sub-menu {
	display: none;
}
.mobile-menu-nav .mobile-menu a {
	font-family: 'Google Sans Flex';
		font-size: 42px;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: uppercase;
		color: #6D240B;
		text-decoration: none;
		transition: color 0.2s ease;
		padding: 8px 0;
}

.mobile-menu-social {
	display: flex;
	justify-content: center;
	margin-top: auto;
	padding-top: 20px;
}
.mobile-social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
}
.mobile-social-links li {
	margin: 0;
	padding: 0;
}
.mobile-social-links li:nth-child(4) a, .mobile-social-links li:nth-child(5) a {
border: 1.5px solid #6D240B;
    background: #FFC856;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 4px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}
.mobile-social-links li:nth-child(4) a svg {
	width:18px;
}
.mobile-social-links li:nth-child(5) a svg {
	width:15px;
}
.mobile-social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: all 0.2s ease;
}
.mobile-social-links .social-icon {
	width: 24px;
	height: 24px;
}

/* 980px: hamburger layout + hide nav/social in bar, show overlay when open */
@media (max-width: 980px) {
	.menu-toggle {
		display: flex;
	}
	.main-nav-container {
		justify-content: space-between;
	}
	.nav-center {
		display: none;
	}
	.header-social-links .social-link-item {
		display: none;
	}
	.site-logo {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.search-toggle {
		width:40px;
		height:40px;
	}
	.mobile-social-links li:before, .topmenubttn:before, .mobile-menu-overlay li:before {
		display:none;
	}
}

@media (max-width: 768px) {
	body {
		padding-top: 80px;
	}
	/* Keep hamburger bar layout (no column) when mobile menu is in use */
	.main-navigation-bar {
		height: 80px;
		min-height: 80px;
		padding: 0;
	}
	.main-nav-container {
		flex-direction: row;
		gap: 15px;
		padding: 0px;
	}
	.site-logo {
		order: unset;
	}
	.nav-center {
		display: none;
	}
	.header-social-links {
		order: unset;
	}
	/* Keep search dropdown full width on mobile */
	.search-dropdown {
		padding: 0px 0;
		top: auto;
	}
	.search-dropdown .wp-block-group.search-form form {
		display:block;
	}
	.search-dropdown .wp-block-group.search-form label {
		font-family: "Google Sans Flex";
		font-size: 26px;
		font-style: normal;
		font-weight: 800;
		line-height: 105%;
		text-transform: uppercase;
		text-align: center;
		width: 300px;
		display: block;
		margin: 0 auto 15px;
	}
	.search-dropdown .wp-block-group.search-form button.wp-block-search__button {
			font-family: "Young Serif";
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: 100%;
				letter-spacing: -0.64px;
				text-transform: lowercase;
				width: 116px;
				height: 40px;
				border-radius: 50%;
				padding: 0;
				transform: rotate(8.945deg);
				position: absolute;
				top: 12px;
				right: 10px;
	}
	.search-dropdown .wp-block-group.search-form form {
			margin: 40px auto 0;
				padding: 0 0 40px;
	}	
	.search-dropdown > * {
		padding: 0 15px;
	}
	.social-links {
		gap: 10px;
	}
}

@media (max-width: 480px) {
	.primary-menu {
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	
	.primary-menu li {
		width: 100%;
	}
	
	.primary-menu a {
		width: 100%;
		max-width: 200px;
		margin: 0 auto;
	}
	
	.logo-img {
		max-width: 300px;
	}
	
	.social-links {
		flex-wrap: wrap;
		justify-content: center;
	}
}