/* =========================================================
   Sunspire Elements
   Font/colour values read the Elementor Site Settings globals
   (Site Settings > Global Colors / Global Fonts) with fallbacks.
   ========================================================= */

/* ---------- Sunspire Button ---------- */
.ss-btn-wrap {
	display: flex;
}

.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 12px 12px 12px 20px;
	border-radius: 16px;
	border: 0; /* Figma button is exactly 64px: no border in the box */
	font-family: var(--e-global-typography-ss_button-font-family, "Helvetica Now Display"), "Helvetica Neue", Arial, sans-serif;
	font-size: var(--e-global-typography-ss_button-font-size, 18px);
	font-weight: var(--e-global-typography-ss_button-font-weight, 500);
	line-height: var(--e-global-typography-ss_button-line-height, 22px);
	letter-spacing: var(--e-global-typography-ss_button-letter-spacing, -0.04em);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ss-btn:hover,
.ss-btn:focus-visible {
	text-decoration: none;
}

.ss-btn:focus-visible {
	outline: 2px solid var(--e-global-color-ss_orange, #F07625);
	outline-offset: 3px;
}

.ss-btn--dark {
	background-color: var(--e-global-color-ss_dark, #25211D);
	color: #FFFFFF;
}

.ss-btn--dark:hover {
	background-color: var(--e-global-color-ss_ink, #35302B);
	color: #FFFFFF;
}

.ss-btn--filled {
	background-color: var(--e-global-color-ss_cream, #ECE7E0);
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-btn--filled:hover {
	background-color: #FFFFFF;
	color: var(--e-global-color-ss_ink, #35302B);
}

.ss-btn--stroke {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px #FFFFFF;
	color: #FFFFFF;
}

.ss-btn--stroke:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #FFFFFF;
}

.ss-btn__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--e-global-color-ss_orange, #F07625);
	color: #FFFFFF;
}

.ss-btn__icon svg {
	width: 12px;
	height: 12px;
}

/* ---------- Button hover (Dubai Face style) ----------
   Label: two stacked copies, the first rolls up out of view while the second rolls in.
   Icon: the arrow slides out to the right while its copy slides in from the left. */
.ss-btn {
	--ss-btn-ease: cubic-bezier(.22, 1, .36, 1);
	transition: background-color .25s ease, color .25s ease, transform .3s ease;
}

.ss-btn:active {
	transform: scale(.98);
}

.ss-btn__label {
	position: relative;
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
}

.ss-btn__label-in {
	display: block;
	transition: transform .5s var(--ss-btn-ease);
}

.ss-btn__label-in--next {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
}

.ss-btn__icon {
	position: relative;
	overflow: hidden;
}

.ss-btn__icon-in {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: transform .5s var(--ss-btn-ease);
}

.ss-btn__icon-in--next {
	transform: translateX(-100%);
}

.ss-btn:hover .ss-btn__label-in,
.ss-btn:focus-visible .ss-btn__label-in {
	transform: translateY(-100%);
}

.ss-btn:hover .ss-btn__label-in--next,
.ss-btn:focus-visible .ss-btn__label-in--next {
	transform: translateY(0);
}

.ss-btn:hover .ss-btn__icon-in,
.ss-btn:focus-visible .ss-btn__icon-in {
	transform: translateX(100%);
}

.ss-btn:hover .ss-btn__icon-in--next,
.ss-btn:focus-visible .ss-btn__icon-in--next {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.ss-btn__label-in,
	.ss-btn__icon-in {
		transition: none;
	}
}

@media (max-width: 767px) {
	.ss-btn {
		font-size: var(--e-global-typography-ss_button-font-size, 16px);
	}
}

/* ---------- Header: Nav Menu "CTA" menu item ----------
   A menu item with the CSS class `ss-menu-cta` (Appearance > Menus > CSS Classes)
   is hidden in the desktop bar and rendered as the dark CTA button inside
   the mobile dropdown, matching the "Menu = Open" Figma state. */
.ss-header .elementor-nav-menu--main .menu-item.ss-menu-cta {
	display: none;
}

.ss-header .elementor-nav-menu--dropdown .menu-item.ss-menu-cta {
	padding: 16px 0 0;
	border: 0;
}

.ss-header .elementor-nav-menu--dropdown .menu-item.ss-menu-cta > a.elementor-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 12px 12px 20px !important;
	border-radius: 16px;
	border: 0 !important;
	background-color: var(--e-global-color-ss_dark, #25211D) !important;
	color: #FFFFFF !important;
	font-family: var(--e-global-typography-ss_button-font-family, "Helvetica Now Display"), "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: -0.04em;
}

.ss-header .elementor-nav-menu--dropdown .menu-item.ss-menu-cta > a.elementor-item::after {
	content: "";
	position: static !important;
	opacity: 1 !important;
	transform: none !important;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--e-global-color-ss_orange, #F07625) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 12s6-4.42 6-6S6 0 6 0M0 12s6-4.42 6-6S0 0 0 0' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Menu / close button: solid 44x44 dark tile, 12px radius, 20px icon (Figma "Menu Button") */
.ss-header .elementor-menu-toggle {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 12px !important;
	border: 0 !important;
	border-radius: 12px !important;
}

/* ---------- Mobile/tablet open menu = ONE card with the header pill (Figma "Menu = Open") ----------
   The dropdown sits flush under the pill, same width and colour; the pill's bottom corners
   go square while the menu is open, so pill + dropdown read as a single 16px-radius card. */
@media (max-width: 1024px) {
	.ss-header .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		/* left/width are set by sunspire-header.js to match the pill exactly; these are the fallback */
		left: auto !important;
		right: -16px !important;               /* pill padding-right (tablet) */
		top: calc(100% + 16px) !important;      /* pill padding-bottom (tablet) */
		margin-top: 0 !important;
		width: calc(100vw - 40px) !important;   /* pill width */
		max-width: 1600px;
		padding: 0 16px 16px;
		background-color: var(--e-global-color-ss_cream, #ECE7E0);
		border-radius: 0 0 20px 20px !important;
		box-shadow: none !important;
		overflow: hidden;
	}

	.ss-header .ss-header__bar:has(.elementor-menu-toggle.elementor-active) {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	/* Rows: 49px (14 + 20 + 14 + 1px divider), 4px side padding, full-width dividers */
	.ss-header .elementor-nav-menu--dropdown li:not(.ss-menu-cta) {
		border: 0 !important;
	}

	.ss-header .elementor-nav-menu--dropdown li:not(.ss-menu-cta) > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 4px !important;
		border-bottom: 1px solid var(--e-global-color-ss_divider, #DAD3CA) !important;
		border-left: 0 !important;
		color: var(--e-global-color-ss_ink, #35302B) !important;
		background-color: transparent !important;
		border-radius: 0 !important; /* Elementor rounds first/last link of each list (incl. sub-menu) */
	}

	.ss-header .elementor-nav-menu--dropdown .sub-menu {
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	.ss-header .elementor-nav-menu--dropdown .sub-menu li > a {
		padding-left: 20px !important;
	}

	.ss-header .elementor-nav-menu--dropdown .sub-arrow {
		padding: 0 !important;
		margin: 0 !important;
	}

	.ss-header .elementor-nav-menu--dropdown .sub-arrow .ss-icon-svg {
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 767px) {
	.ss-header .elementor-nav-menu--stretch .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		right: -12px !important;
		top: calc(100% + 12px) !important;
		width: calc(100vw - 32px) !important;
		padding: 4px 12px 16px 16px;          /* 12 (pill) + 4 = 16px gap under the top bar */
		border-radius: 0 0 16px 16px !important;
	}
}

/* Newsletter button: "Subscribe Now" on desktop/tablet, "Subscribe" on mobile (Figma) */
.ss-newsletter .elementor-field-type-submit .elementor-button-text::after {
	content: " Now";
	white-space: pre;
}

@media (max-width: 767px) {
	.ss-newsletter .elementor-field-type-submit .elementor-button-text::after {
		content: none;
	}
}

/* ---------- Sunspire Icons (inline SVG from the Figma design) ---------- */
.ss-icon-svg {
	width: 1em;
	height: 1em;
	display: block;
}

/* Nav "Services" chevron: 20px like the design */
.ss-header .elementor-nav-menu .sub-arrow .ss-icon-svg {
	width: 20px;
	height: 20px;
}

.ss-header .elementor-nav-menu .sub-arrow {
	padding: 0 0 0 4px;
}

.ss-footer .elementor-social-icon {
	transition: background-color .2s ease, border-color .2s ease;
}

.ss-footer .elementor-social-icon .ss-icon-svg {
	transition: fill .2s ease;
}

html {
	scroll-behavior: smooth;
}

/* ---------- Footer helpers ---------- */
@media (max-width: 767px) {
	.ss-footer .ss-copyright .elementor-heading-title {
		color: var(--e-global-color-ss_beige, #E4DCD1);
	}
}

/* Tablet: bottom bar = copyright (flexes) + legal links + social & back-to-top (natural width) */
@media (min-width: 768px) and (max-width: 1024px) {
	.ss-footer .e-con:has(> .e-con > .elementor-widget-social-icons) {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	.ss-footer .ss-copyright {
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0;
	}
}

.ss-newsletter .elementor-field-textual::placeholder {
	color: var(--e-global-color-ss_muted, #6D6761);
	opacity: 1;
}

.ss-newsletter .elementor-field-group {
	margin-bottom: 0;
}

/* Email field fills the row, Subscribe button keeps its natural width */
.ss-newsletter .elementor-form-fields-wrapper {
	flex-wrap: nowrap;
}

.ss-newsletter .elementor-field-group:not(.elementor-field-type-submit) {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.ss-newsletter .elementor-field-type-submit {
	flex: 0 0 auto;
	width: auto;
}

.ss-footer a {
	transition: color .2s ease;
}

.ss-footer .ss-footer-link a:hover,
.ss-footer .ss-footer-link .elementor-heading-title a:hover {
	color: var(--e-global-color-ss_orange, #F07625);
}

/* Smooth scroll (Lenis) drives the scrolling, so turn off CSS smooth-scroll to avoid a double animation */
html.lenis,
html.lenis body {
	scroll-behavior: auto !important;
}

/* ---------- Desktop nav sub-menu (Services): floating card + open/close animation ----------
   SmartMenus shows/hides the list with inline display/left/top; we keep it rendered and
   animate opacity + slide instead. Open on hover, keyboard focus, or SmartMenus' click state. */
@media (min-width: 1025px) {
	.ss-header .elementor-nav-menu--main .menu-item-has-children {
		position: relative;
	}

	.ss-header .elementor-nav-menu--main .sub-menu {
		display: block !important;
		position: absolute !important;
		margin: 0 !important;
		width: max-content !important;
		min-width: 232px !important;
		max-width: none !important;
		padding: 8px !important;
		background-color: var(--e-global-color-ss_cream, #ECE7E0) !important;
		border: 1px solid rgba(53, 48, 43, .08);
		border-radius: 16px !important;
		box-shadow: 0 24px 48px -12px rgba(20, 14, 9, .28), 0 2px 6px rgba(20, 14, 9, .06) !important;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px) scale(.98);
		transform-origin: 40px top;
		pointer-events: none;
		transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
		z-index: 100;
	}

	/* Position: beats Elementor's own !important left/margin rules (more specific selector).
	   Drops 42px below the link = 12px under the header pill; item text lines up with "Services". */
	.ss-header .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu {
		top: calc(100% + 42px) !important;
		inset-inline-start: -8px !important;  /* li has 16px side padding */
		margin: 0 !important;
	}

	/* Invisible bridge over the 42px gap, so moving the mouse down doesn't close the menu */
	.ss-header .elementor-nav-menu--main .sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 44px;
	}

	.ss-header .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
	.ss-header .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu,
	.ss-header .elementor-nav-menu--main .menu-item-has-children > a.highlighted + .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s;
	}

	/* Chevron flips while open */
	.ss-header .elementor-nav-menu--main .sub-arrow .ss-icon-svg {
		transition: transform .25s ease;
	}

	.ss-header .elementor-nav-menu--main .menu-item-has-children:hover > a .sub-arrow .ss-icon-svg,
	.ss-header .elementor-nav-menu--main .menu-item-has-children:focus-within > a .sub-arrow .ss-icon-svg,
	.ss-header .elementor-nav-menu--main a.highlighted .sub-arrow .ss-icon-svg {
		transform: rotate(180deg);
	}

	/* Items: 16px text, rounded hover pill, no dividers */
	.ss-header .elementor-nav-menu--main .sub-menu li {
		border: 0 !important;
	}

	.ss-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
		display: flex;
		padding: 12px 16px !important;
		border: 0 !important;
		border-radius: 10px !important;
		color: var(--e-global-color-ss_ink, #35302B) !important;
		background-color: transparent !important;
		white-space: nowrap;
		transition: background-color .2s ease, color .2s ease;
	}

	.ss-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
	.ss-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible,
	.ss-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
		background-color: rgba(255, 255, 255, .7) !important;
		color: var(--e-global-color-ss_orange, #F07625) !important;
	}
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	.ss-header .elementor-nav-menu--main .sub-menu {
		transition: none !important;
		transform: none;
	}
}