/* SamSam Hero & Nav Block - front end styles */

.shn-block {
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Nav band (floating overlay, anchored to the hero) ---------- */
/* The band is taken out of the document flow with position: absolute
   (anchored to .shn-block, which is position: relative) so it
   reserves no space of its own — the hero section right after it in
   the markup starts at y=0 and runs its background image/video all
   the way up underneath the nav, instead of being pushed down below
   a solid strip. Deliberately NOT position: fixed — it stays put at
   a fixed spot within the hero and scrolls away with the rest of the
   page like normal content, rather than chasing the viewport. That
   also keeps it well-behaved inside Elementor's scaled device-preview
   iframe, where fixed elements are known to render against the real
   browser window instead of the scaled preview panel. Transparent by
   default so the hero shows straight through it — give it a colour
   via the Style tab if you want a solid or frosted strip across the
   top instead. The white "pill" bar itself (.shn-navbar) floats on
   top and keeps its own, separate background regardless.
   --shn-nav-x / --shn-nav-y let the whole band (bar + logo together)
   be nudged anywhere over the hero — wired up to the "Nav Bar
   Position" controls in the Style tab (or the X/Y fields on the
   plugin's settings page for the shortcode version). */
.shn-nav-band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 500;
	background-color: transparent;
	--shn-nav-x: 0px;
	--shn-nav-y: 0px;
	transform: translate(var(--shn-nav-x), var(--shn-nav-y));
	pointer-events: none;
}

/* The band itself is click-through (see pointer-events above, needed
   so the transparent margins either side of the bar don't block the
   hero content beneath them) — the bar and everything inside it stay
   fully interactive. */
.shn-nav-band .shn-navbar {
	pointer-events: auto;
}

/* ---------- Nav bar ---------- */
/* The bar itself stays in normal flow inside the band above (which is
   what actually does the sticking) and keeps a fixed height by
   default, with the logo badge overlapping its bottom edge rather
   than stretching it. */
.shn-navbar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 140px 1fr;
	align-items: center;
	background: #ffffff;
	border-radius: 0 0 40px 40px;
	max-width: 1200px;
	min-height: 0;
	margin: 0 auto;
	padding: 20px 40px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition: padding 0.2s ease, box-shadow 0.2s ease, min-height 0.2s ease;
}

.shn-navbar.shn-is-scrolled {
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.shn-nav-links {
	display: flex;
	gap: 28px;
	align-items: center;
}

.shn-nav-left {
	grid-column: 1;
	justify-content: flex-start;
}

.shn-nav-right {
	grid-column: 3;
	justify-content: flex-end;
}

.shn-nav-links a {
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.shn-nav-links a:hover {
	color: #6ab04c;
}

/* The logo is pulled out of normal flow and centred on the bar's
   bottom edge, so it hangs half in / half out — exactly how it
   overlaps on samsam.co.za. It's deliberately spanned across every
   grid column (1 / -1) rather than just the middle one: a
   position:absolute item placed in a single grid column is centred
   ("left: 50%") against *that column's* width, not the whole bar —
   which is what made the desktop logo drift out of true centre
   whenever the left/right link groups weren't exactly equal width.
   Spanning the full row makes its containing block the whole navbar,
   so "left: 50%" always means dead-centre of the bar itself — the
   same rule that already centred it correctly on the flex-based
   mobile layout below, now unified across every screen size. */
.shn-nav-logo {
	grid-column: 1 / -1;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -52%);
	z-index: 510;
}

.shn-nav-logo a {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
	border: 3px solid #fff;
	transition: width 0.2s ease, height 0.2s ease;
}

.shn-navbar.shn-is-scrolled .shn-nav-logo a {
	width: 76px;
	height: 76px;
}

.shn-nav-logo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
	display: block;
}

/* ---------- Hamburger + mobile dropdown ---------- */
/* Hidden on desktop; the media query below swaps it in for the two link
   groups on tablets and phones, keeping every link/URL/click behaviour
   the same, just collapsed into a menu. */
.shn-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	z-index: 520;
	/* Mobile position nudge (X / Y) — 0 by default so nothing moves
	   unless set in the plugin settings / Elementor Style tab. */
	transform: translate(var(--shn-hb-x, 0px), var(--shn-hb-y, 0px));
}

/* Themes (Hello Elementor etc.) style EVERY <button> on hover/focus
   with a burgundy background (#c36) + white text, and on touch screens
   that hover state "sticks" after a tap. This block neutralises that
   for the hamburger only: higher specificity than the theme's
   button:hover rule, and the hover/focus/active colour is now driven
   by --shn-hb-hover-bg (settings page / Elementor control), which is
   transparent unless you choose a colour. */
.shn-block .shn-hamburger,
.shn-block .shn-hamburger:hover,
.shn-block .shn-hamburger:focus,
.shn-block .shn-hamburger:active {
	border: none;
	box-shadow: none;
	text-decoration: none;
	border-radius: var(--shn-hb-radius, 8px);
	color: inherit;
}

.shn-block .shn-hamburger {
	background-color: transparent;
}

.shn-block .shn-hamburger:hover,
.shn-block .shn-hamburger:focus,
.shn-block .shn-hamburger:active {
	background-color: var(--shn-hb-hover-bg, transparent);
}

.shn-block .shn-hamburger:focus:not(:focus-visible) {
	outline: none;
}

.shn-hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: #1a1a1a;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.shn-navbar.shn-nav-open .shn-hamburger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.shn-navbar.shn-nav-open .shn-hamburger span:nth-child(2) {
	opacity: 0;
}

.shn-navbar.shn-nav-open .shn-hamburger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.shn-mobile-panel {
	display: none;
}

/* ---------- Hero ---------- */
/* --shn-nav-clearance is measured live by front.js from the actual
   rendered nav bar (bar height + the logo's overhang, wherever the
   X/Y position controls have moved it to) and written onto .shn-block
   as an inline custom property, so the top padding here always keeps
   pace with whatever height/size/position the nav ends up at. The
   px fallback after the comma is just the pre-JS/no-JS estimate for
   first paint. The background image/video layer itself (.shn-hero-media,
   below) ignores this padding entirely — it's absolutely positioned
   with inset:0, so it already reaches y=0 and runs up behind the
   overlaid nav band regardless. */
.shn-hero {
	position: relative;
	padding: var(--shn-nav-clearance, 140px) 6% 140px;
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	/* Base colour behind the image/video layer — shows briefly while a
	   large background photo loads, and shows through permanently if
	   no image/video is set at all, so the hero never flashes plain
	   white. Override per-instance from the Style tab. */
	background-color: #0a1914;
	/* Curved bottom edge. The wave is cut out of the hero itself (a mask
	   with an elliptical bite taken from the bottom-centre), so the image
	   simply ENDS along the curve — there is no white shape laid over it
	   and no background strip underneath. Whatever comes after the hero
	   shows through the curve naturally. --shn-wave-h is the depth of
	   the dip at the centre. */
	--shn-wave-h: 70px;
	-webkit-mask-image: radial-gradient(ellipse 70% var(--shn-wave-h) at 50% 100%, transparent 99%, #000 100%);
	mask-image: radial-gradient(ellipse 70% var(--shn-wave-h) at 50% 100%, transparent 99%, #000 100%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Mobile only: hero bottom edge is square and straight (desktop keeps the curve). */
@media (max-width: 700px) {
	.shn-hero {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Full-bleed: break the hero out of whatever max-width/boxed container
   Elementor's page, section or column settings put around it, so the
   background image always reaches both edges of the browser window,
   no matter what the widget's parent width is set to. Uses the exact
   same technique as .shn-nav-band above, which is what keeps the two
   flush with no gap or overlap between them. */
.shn-hero-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* ---------- Hero background media (image or video) ---------- */
/* A true background layer: absolutely positioned behind everything
   else in the hero, non-interactive, and never part of the flex flow
   that lays out the title/paragraph/buttons. Swapping between an
   image and a video only ever touches this layer — the content above
   it neither knows nor cares which one is showing. */
.shn-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.shn-hero-media-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.shn-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	pointer-events: none;
}

/* Poster/fallback image shown instead of the <video> element on small
   screens when "Play Video on Mobile" is switched off — pure CSS, so
   it works even before front.js has run. */
.shn-hero-media-fallback {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: none;
}

/* Optional dim/tint layer between the media and the content, useful
   for keeping text legible over a busy video. Transparent by default. */
.shn-hero-media-tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	pointer-events: none;
}

/* Groups the title/paragraph/ticks together with the CTA buttons so the
   whole stack sits as one flex item, bottom-left of the hero. */
.shn-hero-content-wrap {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 26px;
	width: 100%;
	/* The wrapper spans the full hero width and would otherwise sit on
	   top of the proposal box, swallowing its clicks. Let clicks fall
	   through the empty area; the children below re-enable them. */
	pointer-events: none;
}

.shn-hero-content-wrap > * {
	pointer-events: auto;
}

/* A soft, blurred backdrop behind the copy only — keeps the title,
   paragraph and ticks readable without boxing off or hiding the Cape
   Town hero photo behind it. */
.shn-hero-content {
	max-width: 540px;
	background-color: rgba(10, 25, 20, 0.34);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 18px;
	padding: 28px 32px;
}

.shn-hero-title {
	margin: 0 0 14px;
	color: #ffffff;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.15;
	font-weight: 800;
}

.shn-hero-paragraph {
	color: rgba(255, 255, 255, 0.92);
	font-size: 15px;
	line-height: 1.6;
}

.shn-hero-paragraph p {
	margin: 0 0 12px;
}

.shn-hero-paragraph p:last-child {
	margin-bottom: 0;
}

.shn-tick-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.shn-tick-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* Stylized theme tick: a small circular badge with a check mark cut
   out of it via a clip-path, coloured through the Elementor control. */
.shn-tick-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-color: #b8c832;
	clip-path: polygon(
		9% 43%, 24% 28%, 42% 46%, 76% 12%, 91% 27%,
		42% 76%
	);
}

.shn-proposal-box {
	position: absolute;
	top: calc(var(--shn-nav-clearance, 140px) + 10px);
	right: 6%;
	background: rgba(235, 245, 240, 0.95);
	border-radius: 18px;
	padding: 28px 30px;
	max-width: 300px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
	z-index: 20;
	pointer-events: auto;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	/* X/Y position nudge. Uses the individual `translate` property so it
	   stacks with (and never fights) the hover lift on `transform`.
	   0 / 0 = the box sits exactly where it always did. */
	translate: var(--shn-pb-x, 0px) var(--shn-pb-y, 0px);
}

.shn-proposal-heading {
	color: #2f7a58;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 18px;
	transition: color 0.25s ease;
}

/* ---------- Proposal box: whole box is one interactive link ----------
   The button's ::after is stretched over the entire box (the box is the
   positioning context), so clicking ANYWHERE in the box follows the
   button's link — pure CSS, no JavaScript needed, so it behaves the
   same on every page. Selectors are prefixed with .shn-block so theme
   and Elementor rules can't flatten the hover state. */
.shn-block .shn-btn-proposal::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	border-radius: inherit;
}

.shn-block .shn-btn-proposal {
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.shn-block .shn-proposal-box:hover,
.shn-block .shn-proposal-box:focus-within,
.shn-block .shn-proposal-box:active {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(74, 155, 127, 0.55);
}

.shn-block .shn-proposal-box:hover .shn-proposal-heading,
.shn-block .shn-proposal-box:focus-within .shn-proposal-heading {
	filter: brightness(0.85);
}

.shn-block .shn-proposal-box:hover .shn-btn-proposal,
.shn-block .shn-proposal-box:focus-within .shn-btn-proposal {
	transform: scale(1.04);
	filter: brightness(1.1);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
	opacity: 1;
}

.shn-block .shn-btn-proposal:focus-visible {
	outline: 3px solid #b8c832;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.shn-proposal-box,
	.shn-block .shn-btn-proposal {
		transition: none;
	}
	.shn-block .shn-proposal-box:hover,
	.shn-block .shn-proposal-box:focus-within {
		transform: none;
	}
}

.shn-hero-ctas {
	position: relative;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.shn-btn {
	display: inline-block;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	padding: 16px 26px;
	border-radius: 8px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.shn-btn:hover {
	transform: translateY(-2px);
	opacity: 0.92;
}

.shn-btn-proposal {
	pointer-events: auto;
	cursor: pointer;
	display: block;
	background: #4a9b7f;
	color: #fff;
	width: 100%;
}

.shn-btn-residential {
	background: #b8c832;
	color: #1a1a1a;
}

.shn-btn-commercial {
	background: #4a9b7f;
	color: #fff;
}

/* ---------- Responsive ---------- */
/* Tablets and phones: the two link groups can't fit next to a full-size
   logo badge, so they collapse into a single hamburger button that
   opens a dropdown containing the exact same links, in the same order,
   pointing at the exact same URLs. */
@media (max-width: 900px) {
	.shn-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		border-radius: 24px;
		padding: 14px 20px 30px;
		position: relative;
	}
	/* Mobile-only position nudges. These ADD to the existing X/Y
	   (--shn-nav-x/-y) so anything already set up keeps its position;
	   with the mobile values at 0 this is identical to before. */
	.shn-nav-band {
		transform: translate(
			calc(var(--shn-nav-x, 0px) + var(--shn-nav-mx, 0px)),
			calc(var(--shn-nav-y, 0px) + var(--shn-nav-my, 0px))
		);
	}
	.shn-nav-left,
	.shn-nav-right {
		display: none;
	}
	.shn-hamburger {
		display: flex;
		order: 1;
	}
	.shn-nav-logo {
		order: 2;
		position: absolute;
		left: 50%;
		top: 100%;
		transform: translate(-50%, -55%);
		/* Individual `translate` stacks on top of `transform`, so the
		   logo's centring above is untouched when these are 0. */
		translate: var(--shn-logo-mx, 0px) var(--shn-logo-my, 0px);
	}
	/* Reserves the mirror-image space of the hamburger so the logo stays
	   perfectly centred instead of drifting toward the button. */
	.shn-navbar::after {
		content: "";
		display: block;
		width: 40px;
		order: 3;
	}

	.shn-mobile-panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 16px;
		right: 16px;
		margin-top: 8px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
		padding: 10px 8px;
		/* Must sit ABOVE the logo badge (z-index 510) and hamburger (520),
		   otherwise the round logo overhanging the bar covers the first
		   menu items. */
		z-index: 530;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.shn-navbar.shn-nav-open .shn-mobile-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.shn-mobile-panel a {
		display: block;
		padding: 12px 16px;
		color: #1a1a1a;
		text-decoration: none;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		border-radius: 10px;
		transition: background-color 0.15s ease;
	}
	.shn-mobile-panel a:hover {
		background-color: rgba(106, 176, 76, 0.12);
	}

	.shn-hero {
		padding: var(--shn-nav-clearance, 120px) 5% 120px;
		min-height: 520px;
		flex-direction: column;
		align-items: stretch;
	}
	.shn-proposal-box {
		/* Mobile nudge ADDS to the desktop/tablet X/Y, like the nav bar. */
		translate:
			calc(var(--shn-pb-x, 0px) + var(--shn-pb-mx, 0px))
			calc(var(--shn-pb-y, 0px) + var(--shn-pb-my, 0px));
		position: relative;
		/* Reset the desktop offsets, otherwise they shove the box down/left
		   over the title card once it is back in normal flow. */
		top: auto;
		right: auto;
		max-width: 100%;
		margin-bottom: 24px;
	}
	/* Scroll behaviour (toggled by front.js): scrolling down slides the
	   box down and tucks it BEHIND the title card; scrolling up lets it
	   glide back out to the top. It sits one layer under the title card
	   (content wrap is z-index 10) so the card genuinely passes over it,
	   and fades as it goes so it never shows through the card's blur.
	   Hover lift is overridden while tucked (touch hover "sticks"). */
	.shn-block .shn-proposal-box {
		z-index: 5;
		transform-origin: 50% 0;
		will-change: transform, opacity;
		transition:
			transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.45s ease,
			box-shadow 0.25s ease,
			background-color 0.25s ease,
			visibility 0s linear 0s;
	}
	.shn-block .shn-proposal-box.shn-is-tucked {
		transform: translateY(var(--shn-tuck-dist, 140px)) scale(0.94);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.45s cubic-bezier(0.5, 0, 0.75, 0),
			opacity 0.3s ease 0.12s,
			box-shadow 0.25s ease,
			background-color 0.25s ease,
			visibility 0s linear 0.45s;
	}
	@media (prefers-reduced-motion: reduce) {
		.shn-block .shn-proposal-box,
		.shn-block .shn-proposal-box.shn-is-tucked {
			transition: none;
		}
	}
	.shn-hero-content {
		max-width: 100%;
	}
}

/* Swap a playing background video for the poster/fallback image on
   phones when "Play Video on Mobile" is switched off, so mobile
   visitors never download the video file at all. Matched by the
   front.js safeguard, which additionally pauses/unloads the <video>
   element itself — this CSS rule is what keeps things correct even
   with JavaScript disabled. */
@media (max-width: 767px) {
	.shn-hero-media-video--no-mobile .shn-hero-video {
		display: none;
	}
	.shn-hero-media-video--no-mobile .shn-hero-media-fallback {
		display: block;
	}
}