/* SiSi Epoxy – mobile layout fixes and full-screen navigation.
   Loaded on every front-end page, because the header is everywhere. */

/* ── 1. Nothing may push the page sideways ─────────────────────────── */

img,
video,
iframe,
table {
	max-width: 100%;
}

.elementor-widget-google_maps iframe {
	width: 100%;
}

/* ── 2. Full-screen mobile navigation ──────────────────────────────── */
/* Elementor switches to the burger at its tablet breakpoint (1024px).
   It keeps the panel in the DOM and flips aria-hidden, so the overlay is
   driven off that attribute rather than the inline display it animates. */

@media (max-width: 1024px) {

	nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100vh !important;
		height: 100dvh !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 92px 22px 48px !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;

		/* Beat the inline display/height jQuery animates. */
		display: block !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		background: linear-gradient(160deg, #062f42 0%, #08415c 60%, #2a6180 100%);
		z-index: 99990;

		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
	}

	nav.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .22s ease, transform .22s ease, visibility 0s;
	}

	/* Stop the page behind the overlay from scrolling. */
	body:has(nav.elementor-nav-menu--dropdown[aria-hidden="false"]) {
		overflow: hidden;
	}

	nav.elementor-nav-menu--dropdown .elementor-nav-menu {
		display: block;
		max-width: 520px;
		margin: 0 auto;
		border: 0 !important;
	}

	nav.elementor-nav-menu--dropdown .elementor-nav-menu li {
		border: 0 !important;
	}

	nav.elementor-nav-menu--dropdown .elementor-item,
	nav.elementor-nav-menu--dropdown .elementor-sub-item {
		display: block;
		color: #fff !important;
		background: transparent !important;
		text-align: left;
		border: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
	}

	nav.elementor-nav-menu--dropdown .elementor-item {
		font-size: 21px !important;
		line-height: 1.3;
		font-weight: 600;
		padding: 17px 2px !important;
	}

	nav.elementor-nav-menu--dropdown .elementor-item:hover,
	nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	nav.elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
		color: #8fc1e3 !important;
	}

	/* Submenus, indented and quieter than their parent. */
	nav.elementor-nav-menu--dropdown .sub-menu {
		padding-left: 14px !important;
		border-left: 2px solid rgba(143, 193, 227, .35);
		margin: 2px 0 10px !important;
		background: transparent !important;
	}

	nav.elementor-nav-menu--dropdown .elementor-sub-item {
		font-size: 16px !important;
		font-weight: 400;
		padding: 13px 2px !important;
		color: rgba(255, 255, 255, .82) !important;
	}

	nav.elementor-nav-menu--dropdown .sub-menu li:last-child .elementor-sub-item {
		border-bottom: 0 !important;
	}

	/* The submenu open/close arrow. */
	nav.elementor-nav-menu--dropdown .elementor-nav-menu--dropdown a.has-submenu .sub-arrow,
	nav.elementor-nav-menu--dropdown a .sub-arrow {
		color: #8fc1e3 !important;
		padding: 0 4px;
	}

	/* Close button, injected into the overlay by sisi-mobile.js so it never
	   depends on Elementor's icon font or the header's stacking context. */
	.sisi-menu-close {
		/* Fixed, not absolute: the overlay scrolls, the close button must not. */
		position: fixed;
		top: 18px;
		right: 16px;
		width: 46px;
		height: 46px;
		padding: 0;
		margin: 0;
		border: 1px solid rgba(255, 255, 255, .35);
		border-radius: 50%;
		background: rgba(255, 255, 255, .1);
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		z-index: 2;
	}

	.sisi-menu-close:hover,
	.sisi-menu-close:focus-visible {
		background: rgba(255, 255, 255, .2);
		border-color: #fff;
		outline: none;
	}

	.sisi-menu-close span {
		position: absolute;
		inset: 0;
	}

	.sisi-menu-close span::before,
	.sisi-menu-close span::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 20px;
		height: 2px;
		margin: -1px 0 0 -10px;
		border-radius: 2px;
		background: #fff;
	}

	.sisi-menu-close span::before { transform: rotate(45deg); }
	.sisi-menu-close span::after  { transform: rotate(-45deg); }

	/* The burger itself stays a burger; it sits behind the overlay while the
	   menu is open and the button above does the closing. */
	.elementor-menu-toggle {
		position: relative;
		z-index: 1;
	}

	/* Nothing should float over the open overlay. The sticky header is
	   deliberately NOT hidden here — it carries the close button. */
	body:has(nav.elementor-nav-menu--dropdown[aria-hidden="false"]) #scroll-top {
		display: none !important;
	}

	/* Elementor Pro's sticky header leaves a hidden clone of the section
	   behind as a spacer. It must never become a second overlay. */
	.elementor-sticky__spacer nav.elementor-nav-menu--dropdown,
	.elementor-sticky__spacer .elementor-menu-toggle {
		display: none !important;
	}

	/* Call-to-action item, added to the menu and hidden on desktop.
	   Scoped through the nav so it outranks the generic item styling above. */
	nav.elementor-nav-menu--dropdown .sisi-call-item .elementor-item {
		margin-top: 22px;
		border: 0 !important;
		border-radius: 9px;
		background: #8fc1e3 !important;
		color: #062f42 !important;
		text-align: center !important;
		font-size: 17px !important;
		padding: 15px 18px !important;
	}
}

/* The call item and close button only belong in the mobile overlay. */
@media (min-width: 1025px) {
	.sisi-call-item,
	.sisi-menu-close { display: none !important; }
}

/* ── 3. Small-screen typography and tap targets ────────────────────── */

@media (max-width: 767px) {

	.elementor-widget-heading h1,
	.elementor-widget-heading h2 {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
}

/* ── 4. Footer credit line ─────────────────────────────────────────── */
/* The theme's link colour is dark navy, which disappears on the dark
   footer, so the credit link carries its own colour. */

.sisi-credit {
	color: rgba(255, 255, 255, .72);
}

.sisi-credit .sisi-credit-link:hover,
.sisi-credit .sisi-credit-link:focus {
	color: #fff !important;
	text-decoration: underline !important;
}