/* ==========================================================
   AW Audience Toggle
   State lives on <html data-aw-audience="you|business">.
   ========================================================== */

/* ---------- Hero ---------- */
.aw-at {
	--aw-at-radius: 40px;
	position: relative;
	z-index: 2;                       /* sits over the next section so the rounded corners overlap it */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 720px;
	overflow: hidden;
	border-radius: 0 0 var(--aw-at-radius) var(--aw-at-radius);
	background-color: #2A2723;
	color: #fff;
}

.aw-at__bgs { position: absolute; inset: 0; z-index: -1; }
.aw-at__bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .7s ease;
}
.aw-at .aw-at__bg img,
.aw-at .aw-at__img {
	display: block;
	width: 100% !important;     /* beats Elementor's global img { height: auto } */
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0;
}
.aw-at__overlay { position: absolute; inset: 0; background-color: rgba(20, 18, 16, .40); }

.aw-at__inner {
	position: relative;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 140px 32px 72px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Both panels share one grid cell so they crossfade in place */
.aw-at__panels { display: grid; width: 100%; }
.aw-at__panel {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}

/* Active side (also the fallback when JS never ran) */
html[data-aw-audience="you"] .aw-at [data-aw-panel="you"],
html[data-aw-audience="business"] .aw-at [data-aw-panel="business"],
html:not([data-aw-audience]) .aw-at [data-aw-panel="you"] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .45s ease .1s, transform .45s ease .1s, visibility 0s;
}
html[data-aw-audience="you"] .aw-at [data-aw-bg="you"],
html[data-aw-audience="business"] .aw-at [data-aw-bg="business"],
html:not([data-aw-audience]) .aw-at [data-aw-bg="you"] {
	opacity: 1;
}

.aw-at__empty {
	padding: 24px;
	border: 2px dashed rgba(255, 255, 255, .5);
	border-radius: 12px;
	font-size: 15px;
}

/* ---------- Switch (hero + [aw_audience_switch]) ---------- */
/* The doubled .aw-switch.aw-switch is on purpose: it out-ranks the theme's
   global button styles (Elementor Site Settings → Buttons), including their
   :hover and :focus colors, so the switch only takes styling from this widget. */
.aw-switch {
	--aw-sw-track: rgba(245, 241, 235, .16);
	--aw-sw-border: rgba(245, 241, 235, .35);
	--aw-sw-border-w: 1px;
	--aw-sw-radius: 999px;
	--aw-sw-pad: 4px;
	--aw-sw-gap: 4px;
	--aw-sw-text: #fff;
	--aw-sw-hover-bg: rgba(255, 255, 255, .12);
	--aw-sw-active-bg: #F5F1EB;
	--aw-sw-active-fg: #23211E;
	--aw-sw-tab-radius: 999px;
	--aw-sw-tab-border-w: 0px;
	--aw-sw-tab-border: transparent;
	--aw-sw-active-border: transparent;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--aw-sw-gap);
	padding: var(--aw-sw-pad);
	border-radius: var(--aw-sw-radius);
	background: var(--aw-sw-track);
	border: var(--aw-sw-border-w) solid var(--aw-sw-border);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.aw-switch.aw-switch .aw-switch__tab {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	min-height: 44px;
	padding: 10px 20px;
	border: var(--aw-sw-tab-border-w) solid var(--aw-sw-tab-border);
	border-radius: var(--aw-sw-tab-radius);
	background: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--aw-sw-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.aw-switch.aw-switch .aw-switch__tab:hover,
.aw-switch.aw-switch .aw-switch__tab:focus {
	background: var(--aw-sw-hover-bg);
	color: var(--aw-sw-text);
	border-color: var(--aw-sw-tab-border);
	box-shadow: none;
}
.aw-switch.aw-switch .aw-switch__tab[aria-selected="true"],
.aw-switch.aw-switch .aw-switch__tab[aria-selected="true"]:hover,
.aw-switch.aw-switch .aw-switch__tab[aria-selected="true"]:focus {
	background: var(--aw-sw-active-bg);
	color: var(--aw-sw-active-fg);
	border-color: var(--aw-sw-active-border);
}
.aw-switch.aw-switch .aw-switch__tab:focus { outline: none; }
.aw-switch.aw-switch .aw-switch__tab:focus-visible { outline: 2px solid var(--aw-sw-active-bg); outline-offset: 2px; }

/* Header version on a light background: add class "aw-switch--light" to its wrapper,
   or override the --aw-sw-* variables in Elementor custom CSS. */
.aw-switch--light .aw-switch,
.aw-switch.aw-switch--light {
	--aw-sw-track: #EDE6DC;
	--aw-sw-border: #DCD3C6;
	--aw-sw-text: #23211E;
	--aw-sw-active-bg: #23211E;
	--aw-sw-active-fg: #F5F1EB;
}

/* ---------- Page-wide sync ----------
   Give any Elementor container the CSS class aw-aud-you or aw-aud-business
   (Advanced → CSS Classes) and it only shows for that audience.
   Everything shows while you are editing in Elementor. */
html[data-aw-audience="you"] body:not(.elementor-editor-active) .aw-aud-business,
html[data-aw-audience="business"] body:not(.elementor-editor-active) .aw-aud-you,
html:not([data-aw-audience]) body:not(.elementor-editor-active) .aw-aud-business {
	display: none !important;
}
body.elementor-editor-active .aw-aud-you,
body.elementor-editor-active .aw-aud-business {
	outline: 2px dashed #2E6A64;
	outline-offset: -2px;
}

/* ---------- Oura-style layered sections (optional helpers) ----------
   aw-sheet       → rounded corners on all four sides, stacked above the next section
   aw-sheet-top   → rounded top corners only
   aw-sheet-bottom→ rounded bottom corners only
   aw-tuck        → pulls this section up underneath the one above it
   Put aw-tuck on the section AFTER a rounded one, and add ~40px extra top padding to it. */
.aw-sheet,
.aw-sheet-top,
.aw-sheet-bottom { --aw-sheet-r: 40px; position: relative; z-index: 2; overflow: hidden; }
.aw-sheet        { border-radius: var(--aw-sheet-r); }
.aw-sheet-top    { border-radius: var(--aw-sheet-r) var(--aw-sheet-r) 0 0; }
.aw-sheet-bottom { border-radius: 0 0 var(--aw-sheet-r) var(--aw-sheet-r); }
.aw-tuck {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * var(--aw-tuck, 40px)) !important;
}

@media (max-width: 767px) {
	.aw-at { --aw-at-radius: 28px; }
	.aw-sheet, .aw-sheet-top, .aw-sheet-bottom { --aw-sheet-r: 28px; }
	.aw-tuck { --aw-tuck: 28px; }
	.aw-switch.aw-switch .aw-switch__tab { padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.aw-at__bg, .aw-at__panel, .aw-switch__tab { transition: none !important; }
	.aw-at__panel { transform: none; }
}