@font-face {
    font-family: 'Mosvita';
    src: url('fonts/mosvita-sans/Web-TT/Mosvita-ExtraBold.woff2') format('woff2'),
         url('fonts/mosvita-sans/Web-TT/Mosvita-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/roboto-mono/static/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('fonts/roboto-mono/static/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 Theme Name:   Betheme Unleashed
 Theme URI:    https://summersearch.org
 Description:  Betheme Unleashed Theme for Summer Search
 Author:       Unleash Media
 Author URI:   https://unleash.media
 Template:     betheme
 Version:      1.2.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Custom Header Fix: Hide original BeTheme header to prevent flash */
#Header {
	display: none !important;
}

/* FORCE HIDE the theme's default Top Bar to replace it with our own. */
#Top_bar {
	display: none !important;
}

/* --- TOP BANNER: Above the custom header --- */
.top-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: #A0C7F3;
	z-index: 2000;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 2%;
	/* iOS Safari fix */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.top-banner-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.banner-left,
.banner-right {
	display: flex;
	align-items: center;
}

.banner-text {
	font-family: 'Roboto Mono' !important;
	font-weight: 700 !important;
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #3E3E3E;
	font-style: italic;
}

.banner-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #3E3E3E;
	font-weight: 500 !important;
	font-size: .8rem !important;
	font-family: 'Roboto Mono' !important;
}

.banner-cta-text {
	color: #3E3E3E;
	font-family: 'Roboto Mono' !important;
	font-weight: 500 !important;
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.banner-login-btn {
	background: #ffffff;
	/* border: 2px solid #3E3E3E; */
	border-radius: 30px;
	padding: 2px 2px 2px 14px;
	color: #3E3E3E;
	text-decoration: none;
	font-family: 'Roboto Mono' !important;
	font-weight: 700 !important;
	font-size: .8rem !important;
	text-transform: uppercase;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	line-height: normal;
}

.banner-login-btn:hover {
	background: #f0f0f0;
	color: #3E3E3E;
	text-decoration: none;
}

.banner-arrow-icon {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
}

.banner-arrow-icon svg {
	width: 100%;
	height: 100%;
}

body.admin-bar .top-banner {
	top: 32px; /* desktop admin bar height */
}

@media screen and (max-width: 782px) {
	body.admin-bar .top-banner {
		top: 46px; /* mobile admin bar */
	}
}

/* Medium screens - reduce banner text size */
@media (max-width: 1120px) {
	.banner-text {
		font-size: .6rem !important;
	}
	
	.banner-cta-text {
		font-size: .6rem !important;
	}
	
	.banner-login-btn {
		font-size: .6rem !important;
	}
}

/* Mobile banner adjustments */
@media (max-width: 865px) {
	.top-banner {
		height: 25px !important;
		padding: 0 .6rem;
	}
	
	.top-banner-content {
		justify-content: center !important;
	}
	
	.banner-text {
		font-size: .7rem !important;
	}
	
	.banner-right {
		display: none !important;
	}
}

/* Very small mobile screens - smaller text */
@media (max-width: 430px) {
	.banner-text {
		font-size: .5rem !important;
	}
	
	.banner-cta-text {
		font-size: .5rem !important;
	}
	
	.banner-login-btn {
		font-size: .5rem !important;
	}
}

/* --- HEADER: SINGLE FIXED HEADER BELOW BANNER --- */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 3rem; /* fixed units so height is stable */
  position: fixed;
  top: 50px; /* Position below the 50px banner */
  left: 0;
  right: 0;
  z-index: 2000;
  width: 100%;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

body.admin-bar .custom-header {
  top: 82px; /* 50px banner + 32px admin bar */
}
@media screen and (max-width: 782px) {
  body.admin-bar .custom-header {
    top: 71px; /* 25px banner + 46px mobile admin bar */
  }
}

/* Mobile header positioning adjustment */
@media (max-width: 840px) {
  .custom-header {
    top: 25px !important; /* Position below the 25px mobile banner */
  }
  
  body.admin-bar .custom-header {
    top: 71px !important; /* 25px banner + 46px mobile admin bar */
  }
}

.custom-header.menu-is-open {
  background-color: transparent;
}

.custom-header.menu-is-open .custom-header-right .ready-to-start {
  color: #fff;
}

/* clean up any old clone styles */
#fixed-header-clone { display: none !important; }

/* --- END HEADER STYLES --- */

/* Generic styles that apply to elements within BOTH the placeholder and the clone */
.custom-header-left,
.custom-header-right {
  display: flex;
  align-items: center;
}

.custom-header-right {
  gap: 15px;
}

.custom-header-right .ready-to-start {
	font-family: 'Roboto Mono' !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em !important;
	font-size: .6em !important;
    color: #3e3e3e; /* Default text color */
	text-transform: uppercase !important;
}

.custom-header-right .button {
  border-radius: 30px;
  padding: 12px 28px;
  color: #000;
  text-decoration: none;
  font-family: 'Roboto Mono' !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  border: 2px solid transparent;
  font-size: 14px;
  transition: all 0.3s ease;
  line-height: normal;
}

.custom-header-right .button-apply {
	background: #fdbd14;
	border: 2px solid #000;
}

.custom-header-right .button-donate {
	background: #ffffff;
    border: 2px solid #000;
}

.custom-header .custom-header-hamburger a.custom-hamburger-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: static;
  line-height: 1;
  font-size: inherit;
  margin: 0;
  padding: 0;
}

.custom-header .custom-header-hamburger a.custom-hamburger-trigger svg {
    width: inherit !important;
    height: inherit !important;
    display: block;
}

@media (max-width: 1000px) {
  .custom-header-right .ready-to-start,
  .custom-header-right .button-apply,
  .custom-header-right .button-donate {
    display: none;
  }
}

/*
 * ==================================================================
 * Takeover Menu Customizations
 * ==================================================================
 */

/* Remove parent theme's fade animation for instant open/close */
#Overlay {
	transition: none !important;
	z-index: 1000 !important;
}

#Overlay[style*="display: block"] {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important; /* Pack items in the center */
	flex-wrap: wrap !important; /* Allow items to wrap for align-content to work */
	/* padding: 5vh 10%; Add some breathing room */
	background-color: #4654D3; /* Default blue background */
	transition: none !important; /* Remove parent theme fade */
	opacity: 1 !important;
}

/* Prevent body scrolling when overlay is active */
html.no-scroll {
	overflow-y: scroll !important;
	position: fixed !important;
	width: 100% !important;
}

/* Main header container: Use flexbox for alignment */
.overlay-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	/* max-width: 1300px; */
	margin: 0 auto;
	color: #fff;
}

/* Logo container */
.logo-container svg {
	max-height: 45px;
	width: auto;
}

/* Actions container (buttons) */
.actions-container {
	display: flex;
	align-items: center;
	/* gap: 15px; */
}
.actions-container span {
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 0.5px;
}
.actions-container .button {
	border-radius: 30px;
	padding: 12px 28px;
	color: #000;
	background: #fff;
	text-decoration: none;
	font-weight: bold;
	border: 2px solid transparent;
	font-size: 14px;
	transition: all 0.3s ease;
}
.actions-container .button.button-apply {
	background: #fdbd14;
}
.actions-container .button:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Close button container */
.close-container svg {
	width: 35px;
	height: 35px;
	cursor: pointer;
}

/* 1. Main Overlay Container
----------------------------------------------------------------- */
/*
 * Apply custom styles ONLY when the theme's JS has made the overlay visible.
 * We target the 'display: block' inline style the theme adds, and override it.
 * This fixes the layout without breaking the theme's open/close JS.
*/
#Overlay[style*="display: block"].bg-blue { background-color: #4654D3 !important; }
#Overlay[style*="display: block"].bg-orange { background-color: #FF843E !important; }
#Overlay[style*="display: block"].bg-pink { background-color: #FF7E9A !important; }
#Overlay[style*="display: block"].bg-green { background-color: #41A13F !important; }


/* 2. Header & Footer
----------------------------------------------------------------- */
.overlay-menu-footer {
	flex-direction: column;
	justify-content: center;
	/* gap: 20px; Adjusted gap */
	bottom: 0;
	position:absolute;
	width: 80vw;
	padding: 1%;
}

/* Footer Elements */
.overlay-menu-footer .button-join {
	/* This is now styled as a menu item, see below */
	display: none;
}
.overlay-menu-footer .footer-bottom { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.overlay-menu-footer .contact-info {
	color: #fff;
	font-weight: 500 !important;
	font-size: 12px;
	letter-spacing: 1px !important;
	font-family: 'Roboto Mono' !important;
	text-transform: uppercase !important;
}

.overlay-menu-footer .contact-info a {
	color: #fff !important;
	text-decoration: none;
}

.overlay-menu-footer .contact-info a:hover {
	color: #fff !important;
	text-decoration: underline;
}
.overlay-menu-footer .social-links { display: flex; gap: 20px; }
.overlay-menu-footer .social-links a { color: #fff; text-decoration: none; font-size: 22px; }
.overlay-menu-footer .social-links a i { transition: transform 0.3s ease; }
.overlay-menu-footer .social-links a:hover i { transform: scale(1.15); }

/* 3. Menu Content Area - FINAL ARCHITECTURE
----------------------------------------------------------------- */
#overlay-menu {
	flex-grow: 1;
	width: 100% !important;
	/* max-width: 80% !important; */
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important; /* Stack menu and button vertically */
	align-items: flex-start !important;
	position: relative !important;
	top: 0 !important; left: 0 !important;
	padding-left: 5%;
	padding-right: 5%;
}

.takeover-menu-container {
	display: flex;
	padding-left:5%;
	/* justify-content: center; */
	/* width: 100%; */
}

/* Left Column (Main Menu) */
#menu-main-menu {
	flex-basis: auto; /* Allow sizing based on content */
	flex-shrink: 0; /* Prevent the menu from shrinking when the submenu appears */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start; /* LEFT ALIGN the menu items */
	gap: 5vmin; /* Responsive gap */
	list-style: none !important; margin: 0 !important;
	padding: 0 8rem 0 0 !important; /* Use a fixed, predictable gap for the divider */
	position: relative; /* For the new divider */
}

/* THE NEW DIVIDER: using a pseudo-element */
#menu-main-menu::after {
	content: '';
	display: none; /* Hidden by default */
	position: absolute;
	top: 0;
	right: 0; /* Position at the very edge of the container */
	width: 2px;
	height: 100%; /* Make the divider's height match the menu's height dynamically */
	background-color: rgba(255, 255, 255, 0.5);
	transition: none;
}

/* Show divider only when a sub-menu is active */
#Overlay[style*="display: block"].submenu-active #menu-main-menu::after {
	display: block;
}

#menu-main-menu > li {
	padding: 0 !important; margin: 0 !important;
	text-align: right; /* Ensure text alignment is correct */
}
#menu-main-menu > li > a {
	font-family: 'Mosvita' !important;
	font-weight: 800 !important;
	/* Base font size for mobile */
	font-size: 48px !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	text-decoration: none !important;
	transition: color 0.3s ease !important;
	text-align: left;
	display: block; /* Ensure the link fills the li */
	white-space: nowrap; /* Prevent menu items from wrapping */
	text-transform: uppercase; /* Ensure text is uppercase */
}
#menu-main-menu > li.active > a { color: #3E3E3E !important; }
#menu-main-menu .sub-menu { display: none !important; }
#menu-main-menu > li > a span,
#menu-main-menu > li > a::before,
#menu-main-menu > li > a::after {
	display: none !important; content: "" !important;
}

/* BIGGER BUTTON STYLES (New location) */
.overlay-join-button-wrapper {
	width: 100%; /* Take full width to allow for alignment */
	display: flex;
	justify-content: flex-start; /* LEFT ALIGN the button */
	padding-top:5vh !important;
	padding-left: 2% !important;
}

.overlay-join-button-wrapper a.button-join {
	background: #A0C7F3 !important; border: .04em solid #3E3E3E !important;
	border-radius: 1em !important;
	/* Base font size for mobile */
	font-size: 24px !important;
	font-family: 'Mosvita' !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	/* Remove vertical padding, keep horizontal */
	padding: 0 30px !important;
	color: #3E3E3E !important;
	text-decoration: none !important; display: inline-flex; align-items: center;
	gap: 15px !important; /* Add gap for the arrow */
	white-space: nowrap;
	line-height: 1 !important; /* Tightly wrap the text */
}
.overlay-join-button-wrapper a.button-join:hover {
	transform: scale(1.05); box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.overlay-join-button-wrapper a.button-join .join-arrow-svg {
	height: 100%; /* Make height match the parent 'a' tag's height, which is set by the text */
	width: auto; /* Maintain aspect ratio */
}

/* REMOVE OLD BUTTON STYLES */
#menu-main-menu > li.menu-item-join-button { display: none !important; }

/* Right Column (Sub-Menus) */
.sub-menu-container {
	flex-basis: auto; /* Allow sizing based on content */
	display: flex; /* Make it a flex container to control its children */
	flex-direction: column; /* Stack children vertically */
	justify-content: center; /* Vertically center the sub-menu list */
	align-items: flex-start; /* Align sub-menu list to the left, respecting padding */
	padding-left: 5rem; /* Use a fixed, predictable gap from the divider */

	/* Match min-height to divider height to ensure proper vertical alignment */
	min-height: 50px;
	min-width: 50px; /* Reserve space to prevent main menu from shifting */
}

.sub-menu-container ul.sub-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 1.7rem; /* This now controls the space between sub-menu items */
	/* justify-content: space-between and flex-grow: 1 have been removed
	   to allow the list to be vertically centered with a fixed gap. */
}

.sub-menu-container ul.sub-menu li a {
	font-family: 'Roboto Mono' !important;
	font-weight: 500 !important;
	/* Base font size for mobile */
	font-size: 14px !important;
	line-height: 1.5 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #fff !important;
	text-decoration: none !important;
	display: block !important;
	white-space: nowrap; /* Prevent text from wrapping */
	transition: all 0.2s ease;
	text-align: left;
}
.sub-menu-container ul.sub-menu li a:hover {
	color: #3E3E3E !important; /* Set hover color */
	text-decoration: none !important; /* Ensure no underline */
	transform: none !important; /* Ensure no movement */
}

/* Remove bracket animation from parent theme */
.sub-menu-container ul.sub-menu li a::before,
.sub-menu-container ul.sub-menu li a::after {
    display: none !important;
    content: "" !important;
}

/* 4. Close button
----------------------------------------------------------------- */
a.overlay-menu-toggle .close {
	color: #fff !important;
	font-size: 40px !important;
	font-weight: 200 !important;
}

/* Remove bracket animation from parent theme */
a.hover-color-send-us-a-message-three:before {
	display: none !important;
}

/* === SVG Path Animation Final Styles === */

/* 1. Set up the main section as the positioning boundary */
.curved-path-container {
	position: relative;
}

/* 2. Basic positioning for the SVG container.
      Width is now 100% of the viewport.
      Height is handled dynamically by svg-animation.js. */
.svg-path-holder,
[id^="svg-container-"] {
	position: absolute !important;
	top: 0; /* Vertical offset: adjust this % to move the SVG up/down */
	left: 50%;
	transform: translateX(-50%);
	width: 100vw !important; /* Force width to match the viewport */
	z-index: 1; /* Lower layer */
	opacity: 0; /* Hide by default to prevent flash on load */
}

/* [id^="svg-container-"] svg path[mask] {
    opacity: 0 !important;
} */			

/* Force the theme's inner wrappers to fill the container's height */
.svg-path-holder .mcb-column-inner,
.svg-path-holder .mfn-html-editor-wrapper,
[id^="svg-container-"] .mcb-column-inner,
[id^="svg-container-"] .mfn-html-editor-wrapper {
	height: 100% !important;
}

/* 3. Ensure the SVG fills its container */
#home-curved-path {
	width: 100%;
	height: 100% !important; /* Force the SVG to respect the container's height */
}

/* 4. Ensure all content wraps are on a higher layer */
.curved-path-container .mcb-wrap {
	position: relative;
	z-index: 2; /* Higher layer */
}
/* === End SVG Path Animation Styles === */

/* === Takeover Menu Responsive Sizes === */

/* --- Tablet --- */
@media (min-width: 768px) {
	#menu-main-menu > li > a { font-size: 1.7em !important; }
	.overlay-join-button-wrapper a.button-join { font-size: 1.7em !important; padding: .2em .6em .2em .9em !important }
	.sub-menu-container ul.sub-menu li a { font-size: .6em !important; }
	#Overlay_menu .secondary-menu-container .secondary-menu-item .menu-link { font-size: 32px !important; }
    #Overlay_menu .secondary-menu-container .secondary-menu-item .contact-us { font-size: 18px !important; }
	#overlay-menu {
		padding-left: 10%;
		padding-top: 8%;
	}
	.sub-menu-container ul.sub-menu {
		gap: .8rem !important; /* This now controls the space between sub-menu items */
	}
}

/* --- Small Desktop / Laptop (1080p) --- */
@media (min-width: 1024px) {
	#menu-main-menu > li > a { font-size: 1.9em !important; }
	.overlay-join-button-wrapper a.button-join { font-size: 1.9em !important; padding: .2em .6em .2em .9em !important }
	.sub-menu-container ul.sub-menu li a { font-size: .6em !important; }
	#Overlay_menu .secondary-menu-container .secondary-menu-item .menu-link { font-size: 32px !important; }
    #Overlay_menu .secondary-menu-container .secondary-menu-item .contact-us { font-size: 18px !important; }
	#overlay-menu {
		padding-left: 10%;
		padding-top: 8%;
	}
	.sub-menu-container ul.sub-menu {
		gap: 1rem !important; /* This now controls the space between sub-menu items */
	}
}

/* --- Large Desktop (1440p) --- */
@media (min-width: 1440px) {
	#menu-main-menu > li > a { font-size:2.5em !important; }
	.overlay-join-button-wrapper a.button-join { font-size: 2.5em !important; padding: .2em .6em .2em .9em !important }
	.sub-menu-container ul.sub-menu li a { font-size: .8em !important; }
	#Overlay_menu .secondary-menu-container .secondary-menu-item .menu-link { font-size: 48px !important; }
    #Overlay_menu .secondary-menu-container .secondary-menu-item .contact-us { font-size: 22px !important; }
	.sub-menu-container ul.sub-menu {
		gap: 1.5rem !important; /* This now controls the space between sub-menu items */
	}
}

/* --- Ultra-Large Desktop (4k) --- */
@media (min-width: 2000px) {
	#menu-main-menu > li > a { font-size: 4.5em !important; }
	.overlay-join-button-wrapper a.button-join { font-size: 4.5em !important; padding: .2em .6em .2em .9em !important }
	.sub-menu-container ul.sub-menu li a { font-size: 1.4em !important; }
	#Overlay_menu .secondary-menu-container .secondary-menu-item .menu-link { font-size: 32px !important; }
    #Overlay_menu .secondary-menu-container .secondary-menu-item .contact-us { font-size: 18px !important; }
	#overlay-menu {
		padding-left: 10%;
		padding-top: 0%;
	}
	.sub-menu-container ul.sub-menu {
		gap: 2.2rem !important; /* This now controls the space between sub-menu items */
	}
}

/* === MOBILE MENU REDESIGN === */
/* Hide mobile menu and footer content on all screen sizes by default */
.mobile-menu-container {
	display: none !important;
}

.mobile-footer-content {
	display: none !important;
}

/* Mobile-only styles (767px and below) */
@media (max-width: 767px) {
	/* Hide desktop menu elements on mobile */
	.takeover-menu-container {
		display: none !important;
	}
	
	.overlay-join-button-wrapper {
		display: none !important;
	}
	
	/* #svg-container-4 {
		transform: none !important;
		overflow: visible !important;
	}
	
	#svg-container-4 svg {
		transform: none !important;
		overflow: visible !important;
	}

	#svg-container-4 mask path {
		stroke: red !important;
		stroke-width: 20px !important;
	} */
	
	.svg-path-holder,
	[id^="svg-container-"] {
		position: absolute !important;
		top: 0; /* Vertical offset: adjust this % to move the SVG up/down */
		left: 50%;
		transform: translateX(-50%);
		width: 100vw !important; /* Force width to match the viewport */
		z-index: 1; /* Lower layer */
		opacity: 0; /* Hide by default to prevent flash on load */
	}

	/* Completely restructure the overlay for mobile */
	#Overlay[style*="display: block"] {
		padding: 0 !important;
		display: block !important;
		height: 100dvh !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		overflow: hidden !important;
	}
	
	/* Mobile overlay header - fixed at top */
	.overlay-menu-header {
		padding: 20px 8% !important;
		background: transparent !important;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		height: 70px;
		box-sizing: border-box;
	}
	
	.custom-header-logo svg {
		max-height: 60px !important;
		margin-left: 0px !important;
	}

	.custom-header {
		padding-left: 3% !important;
		padding-right: 8% !important;
	}
	
	.overlay-menu-header .close-container svg {
		width: 30px;
		height: 30px;
	}
	
	.overlay-menu-header .actions-container {
		display: none;
	}
	
	/* Mobile menu container - sticky footer layout */
	#overlay-menu {
		padding: 10rem 8% 0 8% !important;
		margin: 0 !important;
		overflow-y: auto !important;
		height: 100dvh !important;
		box-sizing: border-box;
		display: flex !important;
		flex-direction: column !important;
		min-height: calc(100dvh - 200px) !important;
	}
	
	/* Show and style mobile menu */
	.mobile-menu-container {
		display: flex !important;
		flex-direction: column;
		width: 100%;
		padding: 0;
		margin: 0;
		gap: 0;
	}
	
	.mobile-menu-item {
		/* Clean mobile menu items */
	}
	
	.mobile-menu-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
		cursor: pointer;
		user-select: none;
		width: 100%;
		min-height: 50px;
	}
	
	.mobile-menu-title {
		font-family: 'Mosvita' !important;
		font-weight: 800 !important;
		font-size: 28px !important;
		color: #fff !important;
		text-transform: uppercase;
		letter-spacing: 0;
		line-height: 1.1;
		transition: all 0.3s ease;
	}
	
	/* Highlight and underline expanded menu items */
	.mobile-menu-item.expanded .mobile-menu-title {
		color: #3E3E3E !important;
	}
	
	.mobile-menu-item.expanded .mobile-menu-header {
		border-bottom: 2px solid #fff;
		padding-bottom: 20px;
		margin-bottom: 15px;
	}
	
	/* Change arrow color when expanded */
	.mobile-menu-item.expanded .mobile-menu-arrow svg path {
		stroke: #3E3E3E;
	}
	
	/* Change custom header background color based on expanded menu */
	.custom-header.bg-blue {
		background-color: #4654D3 !important;
	}
	
	.custom-header.bg-orange {
		background-color: #FF843E !important;
	}
	
	.custom-header.bg-pink {
		background-color: #FF7E9A !important;
	}
	
	.custom-header.bg-green {
		background-color: #41A13F !important;
	}
	
	.mobile-menu-arrow {
		display: block !important;
		width: 23px;
		height: 15px;
		transition: transform 0.3s ease;
		flex-shrink: 0;
	}
	
	.mobile-menu-arrow svg {
		width: 100%;
		height: 100%;
	}
	
	.mobile-menu-item.expanded .mobile-menu-arrow {
		transform: rotate(180deg);
	}
	
	.mobile-submenu {
		display: none;
		flex-direction: column;
		padding: 0 0 20px 20px;
		gap: 15px;
	}
	
	.mobile-submenu.show {
		display: flex !important;
	}
	
	.mobile-submenu a {
		font-family: 'Roboto Mono' !important;
		font-weight: 500 !important;
		font-size: 14px !important;
		color: #fff !important;
		text-decoration: none !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		line-height: 1.5;
		padding: 5px 0;
		transition: color 0.2s ease;
	}
	
	.mobile-submenu a:hover {
		color: #3E3E3E !important;
	}
	
	/* Mobile footer content - sticky to bottom */
	.mobile-footer-content {
		display: flex !important;
		flex-direction: column;
		margin-top: auto;
		padding-bottom: 20px !important;
	}
			
	.mobile-ready-section {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-top: 35px;
	}
	
	.mobile-ready-title {
		font-family: 'Roboto Mono' !important;
		font-weight: 500 !important;
		font-size: 14px !important;
		color: #fff !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin: 0;
		text-align: left;
	}
	
	.mobile-buttons {
		display: flex;
		flex-direction: row;
		gap: 15px;
	}
	
	.mobile-button {
		border-radius: 30px;
		padding: 15px 20px;
		text-decoration: none;
		font-family: 'Roboto Mono' !important;
		font-weight: 700 !important;
		letter-spacing: 0;
		text-transform: uppercase;
		border: 2px solid #000;
		font-size: 14px;
		transition: all 0.3s ease;
		text-align: center;
		line-height: 1;
		flex: 1;
	}
	
	.mobile-button-apply {
		background: #fdbd14;
		color: #000;
	}
	
	.mobile-button-donate {
		background: #ffffff;
		color: #000;
	}
	
	.mobile-searcher-link {
		text-align: left;
	}
	
	.mobile-searcher-link span {
		font-family: 'Roboto Mono' !important;
		font-weight: 500 !important;
		font-size: 11px !important;
		color: #fff !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	
	.mobile-searcher-link a {
		color: #fdbd14 !important;
		text-decoration: underline !important;
	}
	
	/* Mobile contact section */
	.mobile-contact-section {
		justify-content: space-between;
		align-items: center;
	}
	
	.mobile-contact-info {
		font-family: 'Roboto Mono' !important;
		font-weight: 500 !important;
		font-size: 12px !important;
		color: #fff !important;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	
	.mobile-contact-info a {
		color: #fff !important;
		text-decoration: none;
	}
	
	.mobile-contact-info a:hover {
		color: #fff !important;
		text-decoration: underline;
	}
	
	.mobile-social-links {
		display: flex;
		gap: 20px;
	}
	
	.mobile-social-links a {
		color: #fff !important;
		text-decoration: none !important;
		font-size: 22px;
		transition: transform 0.3s ease;
	}
	
	.mobile-social-links a:hover {
		transform: scale(1.15);
	}
	
	/* Hide desktop footer on mobile */
	.overlay-menu-footer {
		display: none !important;
	}
}

/* ==================================================================
 * People Grid and People Styling
 * ================================================================== */

/* Note: people-grid.css and people-ported.css are now properly enqueued 
   through functions.php using wp_enqueue_style() for better performance */

/* Styling for the member grid */
.tpstyle-1 {
    background-color: #ffffff00 !important;
    box-shadow: none !important;
}

.ex-tplist .column-5 .item-grid .image-bg-circle {
    width: 100% !important;
    height: 200px !important;
    border-radius: 8px!important;
}

.ex-tplist h3 a {
    font-family: 'Mosvita', sans-serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    text-align: center !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.1 !important;
    color: black !important;
}

#extp-5817 .tpstyle-1 figcaption, .tpstyle-1 figcaption {
    padding: 8px 0 0 !important;
    text-align: center !important;
}

.ex-tplist p {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    color: #6b7280 !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.tpstyle-1 fiocaption {
    padding: 5px 18px 10px !important;
}

/* make the container flex so items wrap nicely */
.ex-tplist .ctgrid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -8px; /* optional: if you want gutters via padding */
}

/* override each item's 20% -> 12.5% (8 columns) */
.ex-tplist .ctgrid .item-grid {
    flex: 0 0 12.5% !important;
    max-width: 12.5% !important;
    padding: 0 8px; /* optional: half the gutter */
}

/* ~ 6 cols on large tablets */
@media (max-width: 1200px) {
    .ex-tplist .ctgrid .item-grid {
        flex: 0 0 16.6667% !important;
        max-width: 16.6667% !important;
    }
}

/* ~ 4 cols on tablets */
@media (max-width: 992px) {
    .ex-tplist .ctgrid .item-grid {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* ~ 2 cols on small tablets / big phones */
@media (max-width: 768px) {
    .ex-tplist .ctgrid .item-grid {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ~ 1 col on narrow phones */
@media (max-width: 576px) {
    .ex-tplist .ctgrid .item-grid {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

.ex-tplist .extp-child_cat .extp-top-cat > li {
    list-style: none !important;
    display: inline-block !important;
    float: left !important;
    margin: 0 !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
    padding: 5px 17px !important;
    border: 2px solid #000000 !important;
    font-size: inherit !important;
    background: #ffffff00 !important;
    position: relative !important;
    cursor: pointer !important;
    /* font-weight: 600; */
    border-radius: 20px !important;
    transition: background .2s !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: black !important;
    margin: 4px !important;
}

.ex-tplist .extp-search-group select,
.ex-tplist .extp-loc_parent select,
.ex-tplist span.search-btsm > * {
    height: 35px !important;
    margin: 3px !important;
    display: inline-block !important;
    vertical-align: top !important;
    padding: 7px 10px !important;
    border: 2px solid #000000 !important;
    border-radius: 50px !important;
    background: #ffffff00 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

.ex-tplist span.search-btsm .tp-search-submit {
    color: #fff !important;
    background-color: #fdbd14 !important;
    border-color: #fdbd14 !important;
    transition: all .2s !important;
    border-width: 2px !important;
}

.ex-tplist .column-5 .item-grid {
    margin-bottom: -40px;
}

.ex-tplist.column-5 .item-grid{
	margin: 10px;
}


.ex-tplist span.search-btsm .tp-search-submit {
    color: #fff !important;
    background-color: #5B6CFF !important;
    border-color: #5B6CFF !important;
    transition: all .2s !important;
    border-width: 2px !important;
    border-radius: 70px !important;
}

.ex-tplist span.search-btsm .tp-search-submit:hover {
    background-color: #F0DDFE !important;
    border-color: #000 !important;
}

.ex-tplist h3 {
    text-align: center!important;
}


.ex-tplist.style-classic .extp-pagination .page-navi span {
	border-radius: 50px!important;
}

.extp-pagination .page-navi .page-numbers.current {
    color: #fff;
    background-color: #5B6CFF;
    border-width: 1px;
    border-color: #000000;
    transition: all .2s;
}


.extp-pagination .page-navi a:hover {
    background-color: #F0DDFE;
    border-color: #444;
    color: #000000;
}

a.page-numbers {
    color: #000 !important;
    background-color: #fff !important;
    border-color: #fff !important;
    transition: all .2s !important;
    border-width: 2px !important;
    border-radius: 70px !important;
}

.extp-pagination .page-navi .page-numbers.current{
    color: #fff !important;
    background-color: #5B6CFF !important;
    border-color: #5B6CFF !important;
    transition: all .2s !important;
    border-width: 2px !important;
    border-radius: 70px !important;
}

.extp-pagination .page-navi a {
    display: inline-block!important;
    background-color: #FFFFFF!important;
    padding: 5px 0!important;
    color: #aaa!important;
    margin: 0 8px 8px 0!important;
    min-width: 33px!important;
    min-height: 34px!important;
    text-align: center!important;
    text-decoration: none!important;
    font-size: 13px!important;
    box-shadow: none!important;
    transition: all .2s!important;
    border: 1px solid #e3e3e3!important;
    line-height: 21px!important;
}


.ex-tplist.style-classic .extp-pagination .page-navi a {
    border-radius: 50px !important;
}

.extp-pagination .page-navi a:hover{
	background-color: #F0DDFE!important;
    border-color: #000000!important;
    color: #000000!important;
}

#extp-5817 .tpstyle-1 p, .tpstyle-1 p {
    letter-spacing: 0px !important;
}



a.fixed-nav.fixed-nav-prev.format-.style-default {
    display: none!important;
}

a.fixed-nav.fixed-nav-next.format-.style-default {
    display: none!important;
}

#searchform > div > select {
    display: none !important;
}



#searchform > div > div.extp-loc_parent > div > select {
    list-style: none !important;
    display: inline-block !important;
    float: left !important;
    margin: 0 !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
    padding: 5px 17px !important;
    border: 2px solid #000000 !important;
    font-size: inherit !important;
    background: #ffffff00 !important;
    position: relative !important;
    cursor: pointer !important;
    /* font-weight: 600; */
    border-radius: 20px !important;
    transition: background .2s !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: black !important;
    margin: 4px !important;
    height: 40px !important;
}


/* === PREVENT LAYOUT SHIFT - RESERVE HEADER SPACE === */

/* Reserve space for banner + header immediately to prevent layout shift */
#Wrapper {
    padding-top: 175px !important;
    transition: none !important; /* Remove transition to prevent visual jumps */
}

/* Admin bar adjustments */
body.admin-bar #Wrapper {
    padding-top: 157px !important; /* 125px + 32px admin bar */
}

@media screen and (max-width: 782px) {
    body.admin-bar #Wrapper {
        padding-top: 171px !important; /* 125px + 46px mobile admin bar */
    }
}

/* Mobile banner adjustments - banner gets smaller on mobile */
@media (max-width: 865px) {
    #Wrapper {
        padding-top: 100px !important; /* 25px mobile banner + 75px header */
    }
    
    body.admin-bar #Wrapper {
        padding-top: 132px !important; /* 100px + 32px admin bar on mobile */
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar #Wrapper {
        padding-top: 146px !important; /* 100px + 46px mobile admin bar */
    }
}

/* Hide header elements when payment overlay is active */
body#checkoutBody .top-banner,
body#checkoutBody .custom-header,
body#checkoutBody #Header,
body#checkoutBody #Top_bar {
    display: none !important;
}

body#checkoutBody #Wrapper {
    padding-top: 0 !important;
}





/* ================================
   RESPONSIVE LAYOUT FOR FILTER ROW
   - Fix jumbling on md screens
   - Vertical (stacked) layout on mobile
   ================================ */

/* Adjustments by GTN 9.16.25 */
@media screen and (max-width: 768px) {
    .ex-tplist .etp-search-form.extp-cat-inline .extp-child_cat, .ex-tplist .extp-loc_parent.extp-loc-inline .extp-child_cat {
        display: block !important;
    }
	.ex-tplist .extp-child_cat .extp-top-cat > li {
		width: 100% !important;
	}
	.ex-tplist span.search-btsm > input {
		width: 80% !important;
		max-width: 80% !important;
	}
	.ex-tplist .extp-child_cat .extp-top-cat > li:hover ul li.extp-child-active > a, .ex-tplist .extp-child_cat .extp-top-cat li.extp-child-active > a {
		pointer-events: none !important;
	}
}

















/* ===== SUMMER SEARCH BLOG POST STYLES (Direct targeting) ===== */

/* ---------- Typography ---------- */

/* Set Mosvita Regular font family directly on flexible content */
.flexible-content-sections,
.flexible-content-sections * {
    font-family: "Mosvita Regular", "Helvetica Neue", Arial, sans-serif !important;
}




/* ---------- Alignment ---------- */


.flexible-content-sections a {
	 color: #007bff!important;
    text-decoration: underline!important;
}



/* ---------- Utility ---------- */

.flexible-content-sections .rounded-corners {
    border-radius: 12px !important;
}

.flexible-content-sections .clearfix::after,
.flexible-content-sections .content::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ---------- Single-image wrapper ---------- */
/* Anything inside .image-wrapper fills the column width */

.single-post .flexible-content-sections .image-wrapper,
.single-post .flexible-content-sections .image-wrapper figure {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
}

.single-post .flexible-content-sections .image-wrapper img {
    width: 100%;
    height: auto;
    display: block;           /* removes inline gap */
}

/* Caption: centred, italic, slightly smaller */
.single-post .flexible-content-sections .image-wrapper .caption,
.single-post .flexible-content-sections .image-wrapper figcaption {
    font-style: italic !important;
    font-size: 0.85em !important;
    color: #666 !important;
    margin-top: 8px !important;
    padding: 0 5px;
}



/* ===== END SUMMER SEARCH BLOG POST STYLES ===== */



#Filters > div > ul > li.authors {
    display: none;
}


span.vcard.author.post-author {
    display: none;
}

div.author-date > span.date > span.label {
    display: none;
}





/* === Post-to-Post navigation ==================================== */
.mfn-post-nav{
	/* Layout */
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1.25rem;         /* space between the two links */
	max-width:100%;
	margin:60px 0;       /* push away from content */
	padding:0 15px;      /* keep edges off the screen */
	
	/* Optional décor */
	border-top:1px solid #e6e6e6;
	padding-top:35px;
	font-family:inherit; /* inherit Betheme font stack */
}

 .nav-previous,
.mfn-post-nav .nav-next{
	flex:1 1 45%;        /* allow both sides to shrink/grow */
}

.mfn-post-nav a{
	display:inline-block;
	font-size:1.25rem;   /* ~20 px */
	color:#333;
	text-decoration:none;
	line-height:1.4;
	transition:color .2s ease;
}

.mfn-post-nav a:hover{
	color:#4668ff;       /* betheme accent? tweak as needed */
}

/* arrow icons: give breathing room */
.mfn-post-nav i{
	margin:0 .35em;
	font-size:1.15em;
	vertical-align:-2px;
}

/* === Responsive tweaks ========================================= */
@media (max-width:1024px){        /* tablets */
	.mfn-post-nav a{
		font-size:1.05rem;
	}
}
@media (max-width:767px){         /* phones */
	.mfn-post-nav{
		flex-direction:column;    /* stack links */
		text-align:center;
		padding-top:25px;
	}
	.mfn-post-nav .nav-previous,
	.mfn-post-nav .nav-next{
		flex:none;
		width:100%;
	}
	.mfn-post-nav a{
		font-size:1.1rem;
	}
}

#Subheader .title {
    color: #f5f5f5 !important;
}

@media (min-width:1024px){
	#Subheader .title {
		padding-top: 20px;
	}
}