/*
 * Refresh Wellbeing - mobile navigation drawer.
 *
 * Replaces the theme's push-down dropdown (which shoved the page content
 * downwards, had no backdrop and no way to close itself) with a slide-in
 * drawer: dimmed backdrop, full-height panel, large tap targets and a real
 * close control.
 *
 * Applies at the theme's own mobile breakpoint (<= 1024px); above that the
 * desktop menu is untouched.
 */

:root {
	--rw-nav-bg: #2A1A0E;
	--rw-nav-fg: #F6EFE7;
	--rw-nav-accent: #CA925C;
	--rw-nav-rule: rgba(246, 239, 231, 0.10);
	--rw-nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.rw-nav-backdrop,
.rw-nav-panel {
	display: none;
}

@media (max-width: 1024px) {

	/* The theme's inline dropdown is replaced wholesale on mobile. */
	.wl_hf-nav-menu__box {
		display: none !important;
	}

	/* ---------- backdrop ---------- */
	.rw-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99998;
		background: rgba(20, 12, 6, 0.55);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.28s var(--rw-nav-ease), visibility 0.28s;
	}

	.rw-nav-backdrop.is-open {
		opacity: 1;
		visibility: visible;
	}

	/* ---------- panel ---------- */
	.rw-nav-panel {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99999;
		width: min(86vw, 340px);
		height: 100%;
		/* Fall back for browsers without dynamic viewport units. */
		height: 100dvh;
		background: var(--rw-nav-bg);
		color: var(--rw-nav-fg);
		box-shadow: -18px 0 48px rgba(0, 0, 0, 0.32);
		transform: translateX(101%);
		visibility: hidden;
		transition: transform 0.32s var(--rw-nav-ease), visibility 0.32s;
		overscroll-behavior: contain;
	}

	.rw-nav-panel.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	/* ---------- panel header ---------- */
	.rw-nav-panel__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 12px 18px 22px;
		padding-top: max(18px, env(safe-area-inset-top));
		border-bottom: 1px solid var(--rw-nav-rule);
		flex: 0 0 auto;
	}

	.rw-nav-panel__brand {
		font-size: 13px;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--rw-nav-accent);
	}

	.rw-nav-close {
		appearance: none;
		border: 0;
		/* The theme pads buttons 14px/28px. That is wider than this button, so
		   the content box collapsed to zero and squeezed the icon out of
		   existence - hence the explicit reset. */
		padding: 0;
		background: rgba(246, 239, 231, 0.08);
		color: var(--rw-nav-fg);
		width: 42px;
		height: 42px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		flex: 0 0 auto;
		transition: background 0.2s ease;
	}

	.rw-nav-close:hover,
	.rw-nav-close:focus-visible {
		background: rgba(246, 239, 231, 0.16);
	}

	.rw-nav-close svg {
		width: 17px;
		height: 17px;
		flex: 0 0 auto;
		display: block;
	}

	/* ---------- items ---------- */
	.rw-nav-list {
		list-style: none;
		margin: 0;
		padding: 6px 0 20px;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.rw-nav-list li {
		margin: 0;
		border-bottom: 1px solid var(--rw-nav-rule);
	}

	.rw-nav-list a,
	.rw-nav-sub-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-height: 56px;
		padding: 14px 22px;
		font-size: 16px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--rw-nav-fg);
		text-decoration: none;
		background: none;
		border: 0;
		text-align: left;
		cursor: pointer;
		transition: background 0.18s ease, color 0.18s ease;
	}

	.rw-nav-list a:hover,
	.rw-nav-list a:focus-visible,
	.rw-nav-sub-toggle:hover,
	.rw-nav-sub-toggle:focus-visible {
		background: rgba(246, 239, 231, 0.06);
		color: var(--rw-nav-accent);
	}

	.rw-nav-list a.is-current {
		color: var(--rw-nav-accent);
		box-shadow: inset 3px 0 0 var(--rw-nav-accent);
	}

	/* ---------- submenu accordion ---------- */
	.rw-nav-sub-toggle svg {
		width: 13px;
		height: 13px;
		flex: 0 0 auto;
		transition: transform 0.26s var(--rw-nav-ease);
	}

	.rw-nav-sub-toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.rw-nav-sub {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		max-height: 0;
		background: rgba(0, 0, 0, 0.18);
		transition: max-height 0.3s var(--rw-nav-ease);
	}

	.rw-nav-sub li:last-child {
		border-bottom: 0;
	}

	.rw-nav-sub a {
		min-height: 50px;
		padding-left: 38px;
		font-size: 14px;
		color: rgba(246, 239, 231, 0.82);
		text-transform: none;
		letter-spacing: 0.02em;
	}

	/* ---------- footer CTA ---------- */
	.rw-nav-panel__foot {
		flex: 0 0 auto;
		padding: 16px 22px;
		padding-bottom: max(16px, env(safe-area-inset-bottom));
		border-top: 1px solid var(--rw-nav-rule);
	}

	.rw-nav-cta {
		display: block;
		width: 100%;
		padding: 15px 18px;
		border-radius: 10px;
		background: var(--rw-nav-accent);
		color: #2A1A0E;
		font-size: 15px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		text-decoration: none;
		transition: filter 0.2s ease;
	}

	.rw-nav-cta:hover,
	.rw-nav-cta:focus-visible {
		filter: brightness(1.06);
	}

	/* ---------- footer social links ---------- */
	.rw-nav-social {
		display: flex;
		justify-content: center;
		gap: 14px;
	}

	.rw-nav-social__link {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 52px keeps each one a comfortable thumb target even though the glyph
		   inside is half that. */
		width: 52px;
		height: 52px;
		border-radius: 999px;
		background: rgba(67, 45, 26, 0.07);
		color: var(--rw-ink, #432D1A);
		text-decoration: none;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.rw-nav-social__link svg {
		width: 24px;
		height: 24px;
		display: block;
	}

	.rw-nav-social__link:hover,
	.rw-nav-social__link:focus-visible {
		background: var(--rw-nav-accent);
		color: #2A1A0E;
	}

	/* Stop the page scrolling behind the open drawer. */
	body.rw-nav-open {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rw-nav-backdrop,
	.rw-nav-panel,
	.rw-nav-sub,
	.rw-nav-sub-toggle svg {
		transition-duration: 0.01ms;
	}
}

/* =====================================================================
 * Mobile bottom bar
 *
 * The theme pins a row of contact icons to the bottom of the viewport on
 * mobile, but nothing reserves space for it, so it sat on top of the last
 * of the page content. This restyles it as an app-style tab bar and pads
 * the page so nothing hides underneath.
 * ===================================================================== */

@media (max-width: 767px) {

	/* The bar's height and the space reserved for it derive from one value,
	   so enlarging the tap targets can never leave content hidden behind it. */
	:root {
		--rw-tabbar-h: 74px;
	}

	body {
		padding-bottom: calc(var(--rw-tabbar-h) + env(safe-area-inset-bottom));
	}

	.elementor-element-33e391c {
		height: var(--rw-tabbar-h);
		/* border-box so the hairline top border is inside the height, keeping
		   the bar exactly as tall as the space reserved for it. */
		box-sizing: border-box;
		z-index: 9990;
		background-color: rgba(42, 26, 13, 0.92) !important;
		-webkit-backdrop-filter: saturate(150%) blur(14px);
		backdrop-filter: saturate(150%) blur(14px);
		border-top: 1px solid rgba(246, 239, 231, 0.12);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	}

	/* Even spacing, and drop the hard cell dividers the theme drew. */
	.elementor-element-33e391c > .e-con {
		flex: 1 1 0;
		border: 0 !important;
		min-width: 0;
	}

	.elementor-element-33e391c .elementor-icon-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* A comfortable tap target - the bare icon was well under the 44px minimum. */
	.elementor-element-33e391c a.elementor-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 14px;
		flex: 0 0 auto;
		transition: background-color 0.18s ease, transform 0.18s ease;
	}

	.elementor-element-33e391c a.elementor-icon:active {
		background-color: rgba(246, 239, 231, 0.14);
		transform: scale(0.94);
	}

	.elementor-element-33e391c a.elementor-icon svg {
		width: 20px;
		height: 20px;
	}

	/* The drawer must sit above the bar when it is open. */
	body.rw-nav-open .elementor-element-33e391c {
		z-index: 1;
	}
}

/* =====================================================================
 * Menu toggle icon
 *
 * The theme used Font Awesome's align-justify glyph - four square-ended
 * bars. Replaced in the markup with three rounded strokes; this centres
 * and sizes them within the button.
 * ===================================================================== */

.wl_hf-nav-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wl_hf-nav-menu__toggle .wl_hf-nav-menu-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.wl_hf-nav-menu__toggle .rw-burger-icon {
	display: block;
	width: 26px;
	height: 26px;
	/* The theme pads buttons generously; a fixed box keeps the three strokes
	   optically centred rather than riding high in the button. */
	margin: 0;
}