/* Side Menu
 * Values set in the Elementor panel override these defaults.
 */

/* Settings live as variables on the widget (.kew). The panel is moved to
   the end of the page on the live site, into .kew-portal, and the script
   copies the variables across, so both get the same defaults. */
.kew,
.kew-portal {
	--kew-speed: 450ms;
	--kew-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kew-bar-w: 34px;
	--kew-bar-h: 22px;
	--kew-bar-t: 2px;
	--kew-bar-r: 0px;
	--kew-bar-color: #f04937;
	--kew-z: 9990;
	--kew-panel-w: 360px;
	--kew-panel-bg: #faefe5;
	--kew-edge-color: #f04937;
	--kew-edge-w: 1px;
	--kew-overlay: rgba(0, 0, 0, 0);
	--kew-link: #f04937;
	--kew-link-hover: #114734;
	--kew-link-gap: 12px;
	--kew-pad: 56px 40px 48px 76px;
	--kew-align: left;
	--kew-shadow: none;
	--kew-cta-color: #fff;
	--kew-cta-bg: #f04937;
	--kew-cta-border: #f04937;
	--kew-cta-pad: 12px 14px;
	--kew-cta-bw: 2px;
	--kew-cta-radius: 0px;
	--kew-cta-display: inline-block;
	--kew-cta-align: left;
	--kew-cta-gap: 72px;
}

.kew-layer {
	--kew-top: 0px;
	--kew-dir: 1;
}

@media (max-width: 767px) {
	.kew,
	.kew-portal {
		--kew-panel-w: 100%;
		--kew-pad: 24px 24px 36px;
		--kew-align: center;
		--kew-link-gap: 16px;
		--kew-cta-gap: 36px;
	}
}

/* Hidden samples that receive the font settings for the script to copy */
.kew .kew-probe {
	display: none !important;
}

.kew {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* ---------- Hamburger button ---------- */

.kew .kew-toggle,
.kew-layer .kew-close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--kew-bar-color);
	font: inherit;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: color 150ms ease;
}

/* Themes and Elementor's global button styles repaint buttons on hover, focus
   and while they keep focus after a click, which turned the lines white and
   sometimes drew a box. These resets are limited to this button, so they are
   forced; the colors still come from the widget's own settings. */
.kew .kew-toggle,
.kew .kew-toggle:hover,
.kew .kew-toggle:focus,
.kew .kew-toggle:focus-visible,
.kew .kew-toggle:active,
.kew-layer .kew-close,
.kew-layer .kew-close:hover,
.kew-layer .kew-close:focus,
.kew-layer .kew-close:focus-visible,
.kew-layer .kew-close:active {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--kew-bar-color) !important;
	text-decoration: none !important;
	filter: none !important;
}

.kew .kew-toggle {
	margin: -10px;
}

.kew .kew-toggle:hover,
.kew-layer .kew-close:hover {
	color: var(--kew-bar-color-hover, var(--kew-bar-color)) !important;
}

.kew .kew-toggle[aria-expanded="true"] {
	color: var(--kew-bar-color-open, var(--kew-bar-color)) !important;
}

/* Keyboard users still get a focus ring; mouse clicks don't leave one behind. */
.kew .kew-toggle:focus-visible,
.kew-layer .kew-close:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px;
}

.kew .kew-toggle:focus:not(:focus-visible),
.kew-layer .kew-close:focus:not(:focus-visible) {
	outline: none !important;
}

.kew-bars {
	position: relative;
	display: block;
	width: var(--kew-bar-w);
	height: var(--kew-bar-h);
	pointer-events: none;
}

/* The three lines. Opening: they slide together, then turn into an X.
   Closing: they turn back, then slide apart. Each half is --kew-half long. */
.kew-bars > span {
	--kew-half: calc(var(--kew-speed) * 0.45);

	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: var(--kew-bar-t);
	border-radius: var(--kew-bar-r);
	background: currentColor;
	transform-origin: 50% 50%;
	transition:
		top var(--kew-half) var(--kew-ease) var(--kew-half),
		transform var(--kew-half) var(--kew-ease) 0s,
		opacity 0s linear var(--kew-half);
}

.kew-bars > span:nth-child(1) {
	top: 0;
}

.kew-bars > span:nth-child(2) {
	top: calc(50% - var(--kew-bar-t) / 2);
}

.kew-bars > span:nth-child(3) {
	top: calc(100% - var(--kew-bar-t));
}

.kew-toggle[aria-expanded="true"] .kew-bars > span {
	transition:
		top var(--kew-half) var(--kew-ease) 0s,
		transform var(--kew-half) var(--kew-ease) var(--kew-half),
		opacity 0s linear var(--kew-half);
}

.kew-toggle[aria-expanded="true"] .kew-bars > span:nth-child(1),
.kew-bars.is-x > span:nth-child(1) {
	top: calc(50% - var(--kew-bar-t) / 2);
	transform: rotate(45deg);
}

.kew-toggle[aria-expanded="true"] .kew-bars > span:nth-child(2),
.kew-bars.is-x > span:nth-child(2) {
	opacity: 0;
}

.kew-toggle[aria-expanded="true"] .kew-bars > span:nth-child(3),
.kew-bars.is-x > span:nth-child(3) {
	top: calc(50% - var(--kew-bar-t) / 2);
	transform: rotate(-45deg);
}

.kew-bars.is-x > span {
	transition: none;
}

/* ---------- Layer: overlay + panel ---------- */

.kew-layer {
	position: fixed;
	top: var(--kew-top);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--kew-z);
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--kew-speed);
}

.kew-layer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.kew-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--kew-overlay);
	opacity: 0;
	transition: opacity var(--kew-speed) var(--kew-ease);
}

.kew-layer.is-open .kew-overlay {
	opacity: 1;
}

.kew-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
	width: var(--kew-panel-w);
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--kew-panel-bg);
	box-shadow: var(--kew-shadow);
	transition: transform var(--kew-speed) var(--kew-ease);
}

.kew-layer--right .kew-panel {
	right: 0;
	border-left: var(--kew-edge-w) solid var(--kew-edge-color);
	transform: translateX(100%);
}

.kew-layer--left {
	--kew-dir: -1;
}

.kew-layer--left .kew-panel {
	left: 0;
	border-right: var(--kew-edge-w) solid var(--kew-edge-color);
	transform: translateX(-100%);
}

.kew-layer.is-open .kew-panel {
	transform: translateX(0);
}

.kew-panel-inner {
	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	padding: var(--kew-pad);
	text-align: var(--kew-align);
}

.kew-layer .kew-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
}

.kew-layer--full .kew-panel-inner {
	padding-top: 88px;
}

/* ---------- On phones: drop down from under the header, full width ---------- */

@media (max-width: 767px) {
	.kew-layer--drop .kew-panel {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;
		width: 100%;
		height: auto;
		max-height: 100%;
		border: 0;
		border-bottom: var(--kew-edge-w) solid var(--kew-edge-color);
		transform: translateY(-100%);
	}

	.kew-layer--drop.is-open .kew-panel {
		transform: translateY(0);
	}

	.kew-layer--drop .kew-panel-inner {
		min-height: 0;
	}

	/* The links slide down into place rather than in from the side. */
	.kew-layer--drop.kew-layer--stagger .kew-list > li,
	.kew-layer--drop.kew-layer--stagger .kew-cta {
		transform: translateY(-12px);
	}

	.kew-layer--drop.kew-layer--stagger.is-open .kew-list > li,
	.kew-layer--drop.kew-layer--stagger.is-open .kew-cta {
		transform: none;
	}

	/* The close button belongs with the header, not floating over the links. */
	.kew-layer--drop .kew-close {
		top: 8px;
		right: 8px;
	}
}

/* ---------- Links ---------- */

.kew-layer .kew-list,
.kew-layer .kew-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kew-layer .kew-list {
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

.kew-layer .kew-list > li {
	margin: 0;
	padding: 0;
}

.kew-layer .kew-list > li + li {
	margin-top: var(--kew-link-gap);
}

.kew-layer .kew-list li::before,
.kew-layer .kew-list li::marker {
	content: none;
}

.kew-layer .kew-list a {
	display: inline-block;
	color: var(--kew-link);
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: none;
	text-transform: inherit;
	transition: color 150ms ease;
}

.kew-layer .kew-list a:hover,
.kew-layer .kew-list a:focus-visible {
	color: var(--kew-link-hover);
	text-decoration: none;
}

.kew-layer .kew-list a:focus-visible,
.kew-layer .kew-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.kew-layer .kew-list .is-current > a,
.kew-layer .kew-list .current-menu-item > a,
.kew-layer .kew-list a[aria-current="page"] {
	color: var(--kew-link-current, var(--kew-link));
}

/* Submenus from a WordPress menu: smaller and tucked under the parent */
.kew-layer .kew-list .sub-menu {
	margin-top: 6px;
	font-size: 0.66em;
}

.kew-layer .kew-list .sub-menu li + li {
	margin-top: 4px;
}

.kew-layer .kew-empty {
	margin: 0;
	color: var(--kew-link);
}

/* ---------- Button ---------- */

.kew-cta {
	margin-top: var(--kew-cta-gap);
}

.kew-layer .kew-button {
	display: var(--kew-cta-display);
	padding: var(--kew-cta-pad);
	border: var(--kew-cta-bw) solid var(--kew-cta-border);
	border-radius: var(--kew-cta-radius);
	background-color: var(--kew-cta-bg);
	color: var(--kew-cta-color);
	text-align: var(--kew-cta-align);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.kew-layer .kew-button:hover,
.kew-layer .kew-button:focus-visible {
	border-color: var(--kew-cta-border-hover, var(--kew-cta-border));
	background-color: var(--kew-cta-bg-hover, var(--kew-cta-bg));
	color: var(--kew-cta-color-hover, var(--kew-cta-color));
	text-decoration: none;
}

/* ---------- Links sliding in one by one ---------- */

.kew-layer--stagger .kew-list > li,
.kew-layer--stagger .kew-cta {
	opacity: 0;
	transform: translateX(calc(var(--kew-dir) * 18px));
	transition:
		opacity 120ms ease 0s,
		transform 120ms ease 0s;
}

.kew-layer--stagger.is-open .kew-list > li,
.kew-layer--stagger.is-open .kew-cta {
	opacity: 1;
	transform: none;
	transition:
		opacity calc(var(--kew-speed) * 0.8) var(--kew-ease) calc(var(--kew-speed) * 0.3 + var(--kew-i, 0) * 45ms),
		transform calc(var(--kew-speed) * 0.8) var(--kew-ease) calc(var(--kew-speed) * 0.3 + var(--kew-i, 0) * 45ms);
}

/* ---------- Page while the menu is open ---------- */

html.kew-scroll-lock,
html.kew-scroll-lock body {
	overflow: hidden !important;
}

/* Where the browser puts the scrollbar in the page's own width, keep that space
   reserved while the menu is open so nothing shifts sideways. */
html.kew-scroll-lock.kew-keep-gutter {
	scrollbar-gutter: stable;
}

/* Wrapper the panel is moved into on the live site. Plain, with no
   Elementor class names, so Elementor never mistakes it for its own. */
.kew-portal {
	position: static;
	height: 0;
	margin: 0;
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kew,
	.kew-portal {
		--kew-speed: 1ms !important;
	}

	.kew-layer--stagger.is-open .kew-list > li,
	.kew-layer--stagger.is-open .kew-cta {
		transition-delay: 0s !important;
	}
}