/*
 * Epoca header + nav styles
 * Ported from the old /themes/hello-elementor/epoca-styles.css (recovered from the
 * Wayback Machine, Sept 2026 copy) to the Hello Elementor 3.x header markup.
 *
 * - 3.x adds .header-stacked to the header (logo centered over nav). Overridden below
 *   to get back to logo left, nav right.
 * - 3.x gives the mobile menu its own id (#menu-main-1) and drops the li ids there,
 *   so mobile rules target .site-navigation-dropdown.
 * - Sub-menus open on click and slide down (epoca.js), desktop and mobile.
 * - The Join item uses a custom menu class: .menu-button (Appearance > Menus).
 */

/* ---------- Header layout ---------- */

.site-description {
	display: none;
}

.site-header {
	padding-top: 40px;
	padding-bottom: 40px;
}

.site-header .header-inner {
	max-width: unset !important;
	padding-right: 10px;
	padding-left: 10px;
}

/* Undo the 3.x "stacked" layout: logo left, menu right */
.site-header.header-stacked .header-inner {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.site-header.header-stacked .header-inner .site-branding {
	flex-direction: row;
	align-items: center;
	text-align: left;
}
.site-header.header-stacked .header-inner .site-navigation,
.site-header.header-stacked .header-inner .site-navigation-toggle-holder {
	justify-content: flex-end;
	flex-grow: 1;
}

.site-logo .custom-logo {
	max-width: 150px;
}
@media (min-width: 992px) {
	.site-logo .custom-logo {
		max-width: 196px;
		margin: 0 20px;
	}
}

/* ---------- Desktop menu ---------- */

.site-navigation ul.menu {
	align-items: center;
	justify-content: flex-end;
}

@media only screen and (min-width: 1310px) {
	.site-navigation ul.menu li {
		margin: 0 20px;
	}
}

#menu-main a {
	text-transform: lowercase;
	text-align: center;
	color: #303636;
	font-family: "Eina", sans-serif;
	font-size: 14px;
	line-height: 1;
}
#menu-main a span {
	display: block;
	text-transform: uppercase;
	color: #FF674D;
	font-size: 16px;
	margin-bottom: 0;
}
#menu-main > li > a:hover,
#menu-main > li > a:focus-visible {
	background: none;
	color: #303636;
}
#menu-main a:hover span,
#menu-main a:focus-visible span {
	color: #303636;
}

/* Yellow circle behind top-level items on hover */
#menu-main > li > a {
	position: relative;
	z-index: 0;
}
#menu-main > li:not(.menu-button) > a::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 74px;
	height: 41px;
	background: url("assets/images/menubg.svg") no-repeat center / contain;
	transform: translate(-50%, -50%) scale(.4) rotate(-90deg);
	opacity: 0;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
	pointer-events: none;
}
#menu-main > li > a:hover::before,
#menu-main > li > a:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
	#menu-main > li > a::before {
		transition: opacity .2s ease;
	}
}

/* Sub-menus: orange panel, opened by click in epoca.js (slides down) */
#menu-main .sub-menu {
	display: none;
	background: #FF674D !important;
	min-width: 162px;
	padding: 7px 0;
	margin-top: 0;
	box-shadow: 0 3px 6px #00000029;
}
#menu-main .sub-menu li {
	border-bottom: none;
	margin: 0;
}
#menu-main .sub-menu a {
	font-family: "Eina", sans-serif;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase !important;
	color: #ffffff !important;
	margin: 0 auto;
	text-align: left;
}
#menu-main .sub-menu a:hover,
#menu-main .sub-menu a:focus-visible {
	background-image: none;
	color: #000 !important;
}

/* Dropdown arrows: lined up with the text, flip when open */
.site-navigation ul.menu li.menu-item-has-children {
	cursor: pointer;
}
.site-navigation ul.menu li.menu-item-has-children:after {
	align-items: center;
	line-height: 1;
	margin-top: -5px;
	transition: transform .25s ease;
}
.site-navigation ul.menu li.menu-item-has-children.epoca-open:after {
	transform: rotate(180deg);
}

/* Current page */
.current_page_item a span,
.current-page-ancestor a span {
	color: #303636 !important;
}

/* Join button (desktop) */
#menu-main li.menu-button {
	background: #FF674D;
	border-radius: 8px;
	padding: 5px 24px;
}
#menu-main li.menu-button > a,
#menu-main li.menu-button > a span {
	color: #fff;
}

/* ---------- Mobile menu (hamburger dropdown) ---------- */

.site-navigation-toggle-holder {
	padding-right: 0;
}
.site-navigation-toggle-holder .site-navigation-toggle {
	background-color: transparent;
}

.site-navigation-dropdown ul.menu {
	position: absolute;
	width: 100%;
	padding: 20px 0;
	margin: 0;
	background: #fff;
	top: -40px;
	box-shadow: 0 5px 15px -6px rgb(0 0 0 / 50%);
}
.site-navigation-dropdown ul.menu > li li {
	transform: none;
	max-height: unset;
}

.site-navigation-dropdown ul.menu li a {
	display: block;
	padding: 20px;
	background: none;
	box-shadow: none;
	text-transform: lowercase;
	text-align: center;
	color: #303636;
	font-family: "Eina", sans-serif;
	font-size: 16px;
	line-height: 1;
}
.site-navigation-dropdown ul.menu li a span {
	display: block;
	text-transform: uppercase;
	color: #FF674D;
	font-size: 16px;
}
.site-navigation-dropdown ul.menu li.current-menu-item a {
	color: #fff;
	background: transparent;
}

/* Mobile sub-menus: closed until tapped, slide down via epoca.js */
.site-navigation-dropdown ul.menu .sub-menu {
	display: none;
	background: #FF674D !important;
	padding: 7px 0;
	width: 100%;
	margin: 0 auto 20px;
	box-shadow: 0 3px 6px #00000029;
}
.site-navigation-dropdown ul.menu .sub-menu li {
	border-bottom: 0;
}
.site-navigation-dropdown ul.menu .sub-menu a {
	padding: 15px 20px;
	font-size: 14px;
	text-transform: uppercase !important;
	color: #ffffff !important;
}
.site-navigation-dropdown ul.menu .sub-menu a:hover {
	background-image: none;
	color: #000 !important;
}

/* Join button (mobile) */
.site-navigation-dropdown ul.menu li.menu-button {
	background: #FF674D;
	border-radius: 8px;
	margin: 40px auto 20px;
	max-width: 200px;
	transition: background-color .2s ease;
}
.site-navigation-dropdown ul.menu li.menu-button:hover {
	background: #F65058;
}
.site-navigation-dropdown ul.menu li.menu-button > a {
	padding: 18px 20px;
	color: #fff;
	background: none;
}
.site-navigation-dropdown ul.menu li.menu-button > a > span {
	color: #fff !important;
}

/* ---------- Plan slideshows (used in page content) ---------- */

#ss-select-wrapper {
	display: block;
	text-align: center;
}
.ss-select {
	font-family: "Eina", sans-serif;
	color: #9CA7A7;
	cursor: pointer;
	display: inline-block;
	padding: 2px;
	margin: 0 5px;
}
.ss-select.active {
	color: #FF674D;
}
.elementor-editor-active .slideshow-plan {
	display: block;
}

/* ---------- Request Info tab (right edge, added in functions.php) ---------- */

.epoca-side-cta {
	position: fixed;
	top: 200px;
	right: 0;
	z-index: 999;
	display: block;
	padding: 14px 18px 14px 20px;
	background: #FF674D;
	color: #fff;
	border-radius: 8px 0 0 8px;
	box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
	font-family: "Eina", sans-serif;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	animation: epoca-cta-in .5s ease-out .6s both;
	transition: padding-right .2s ease, background-color .2s ease;
}
.epoca-side-cta:hover,
.epoca-side-cta:focus-visible {
	background: #F65058;
	color: #fff;
	padding-right: 24px;
}
.epoca-side-cta:focus-visible {
	outline: 2px solid #303636;
	outline-offset: 2px;
}

/* Clear of the WP admin bar when logged in */
.admin-bar .epoca-side-cta {
	top: 232px;
}

/* Get out of the way while the mobile menu is open */
body:has(.site-navigation-toggle[aria-expanded="true"]) .epoca-side-cta {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 767px) {
	.epoca-side-cta {
		top: 140px;
		padding: 10px 12px 10px 14px;
		font-size: 13px;
	}
	.admin-bar .epoca-side-cta {
		top: 186px;
	}
}

@keyframes epoca-cta-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.epoca-side-cta {
		animation: none;
		transition: none;
	}
}