/**
 * HeaderFooterFlow for Elementor — off-canvas mobile menu.
 *
 * Every colour and size is a custom property, so themes can restyle the panel
 * without overriding selectors and the Mobile Hamburger widget's panel controls
 * only ever have to set a variable.
 *
 * Note on specificity: Elementor's Global Theme Style writes
 * `.elementor-kit-{id} button { ... }`, which is (0,1,1) and would otherwise
 * beat a single class. The close button is therefore reset through a
 * two-class selector.
 */

:root {
	--hfflow-offcanvas-width: 350px;
	/*
	 * Opaque on purpose. This was #000000f8 (97.3% opaque), which let the page
	 * behind the panel bleed through at ~3% — bright header content showed as
	 * faint grey ghosts over the menu. Set the Background Color control on the
	 * Mobile Hamburger widget if you want the panel translucent.
	 */
	--hfflow-offcanvas-bg: #000000;
	--hfflow-offcanvas-color: #feffff;
	--hfflow-offcanvas-accent: #e11b22;
	--hfflow-offcanvas-overlay: rgba( 0, 0, 0, 0.5 );
	--hfflow-offcanvas-z: 99999;
	--hfflow-offcanvas-breakpoint: 1024px;

	/* Slide direction: 100% enters from the right, -100% from the left. */
	--hfflow-offcanvas-hidden-x: 100%;

	--hfflow-offcanvas-padding: 0 25px 20px;
	--hfflow-offcanvas-bar-padding: 20px 0;
	--hfflow-offcanvas-logo-width: 185px;
	--hfflow-offcanvas-close-size: 40px;
	--hfflow-offcanvas-close-color: currentColor;
	--hfflow-offcanvas-close-color-hover: var( --hfflow-offcanvas-accent );
	--hfflow-offcanvas-close-bg: transparent;
	--hfflow-offcanvas-close-bg-hover: transparent;
	--hfflow-offcanvas-close-radius: 0;
	--hfflow-offcanvas-nav-padding: 30px 10px 0;
	--hfflow-offcanvas-item-gap: 20px;
	--hfflow-offcanvas-link-size: 21px;
	--hfflow-offcanvas-link-padding: 5px 0;
	--hfflow-offcanvas-link-color: var( --hfflow-offcanvas-color );
	--hfflow-offcanvas-link-bg: transparent;
	--hfflow-offcanvas-link-hover: var( --hfflow-offcanvas-accent );
	--hfflow-offcanvas-link-bg-hover: transparent;
	--hfflow-offcanvas-link-active: var( --hfflow-offcanvas-accent );
	--hfflow-offcanvas-align: left;
	--hfflow-offcanvas-sub-indent: 16px;
}

.hfflow-offcanvas {
	position: fixed;
	top: 0;
	right: var( --hfflow-offcanvas-right, 0 );
	left: var( --hfflow-offcanvas-left, auto );
	z-index: var( --hfflow-offcanvas-z );
	width: var( --hfflow-offcanvas-width );
	max-width: 100%;
	height: 100%;
	padding: var( --hfflow-offcanvas-padding );
	overflow-y: auto;
	color: var( --hfflow-offcanvas-color );
	background-color: var( --hfflow-offcanvas-bg );
	transform: translateX( var( --hfflow-offcanvas-hidden-x ) );
	transition: transform 0.3s ease;
}

.hfflow-offcanvas[hidden] {
	display: none;
}

.hfflow-offcanvas.is-open {
	transform: translateX( 0 );
}

@media ( prefers-reduced-motion: reduce ) {

	.hfflow-offcanvas {
		transition: none;
	}
}

.hfflow-offcanvas__overlay {
	position: fixed;
	inset: 0;
	z-index: calc( var( --hfflow-offcanvas-z ) - 1 );
	background: var( --hfflow-offcanvas-overlay );
}

.hfflow-offcanvas__overlay[hidden] {
	display: none;
}

.hfflow-offcanvas__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var( --hfflow-offcanvas-bar-padding );
}

.hfflow-offcanvas__bar img {
	max-width: var( --hfflow-offcanvas-logo-width );
	height: auto;
}

.hfflow-offcanvas__title {
	font-size: 18px;
	font-weight: 600;
}

/* Two classes so Elementor's global `button` theme style does not win. */
.hfflow-offcanvas__close.hfflow-offcanvas__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	background: var( --hfflow-offcanvas-close-bg );
	border: 0;
	border-radius: var( --hfflow-offcanvas-close-radius );
	box-shadow: none;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.hfflow-offcanvas__close.hfflow-offcanvas__close:hover,
.hfflow-offcanvas__close.hfflow-offcanvas__close:focus,
.hfflow-offcanvas__close.hfflow-offcanvas__close:focus-visible {
	color: var( --hfflow-offcanvas-close-color-hover );
	background: var( --hfflow-offcanvas-close-bg-hover );
}

.hfflow-offcanvas__close svg {
	width: var( --hfflow-offcanvas-close-size );
	height: var( --hfflow-offcanvas-close-size );
	color: var( --hfflow-offcanvas-close-color );
}

.hfflow-offcanvas__close:focus-visible {
	outline: 2px solid var( --hfflow-offcanvas-accent );
	outline-offset: 2px;
}

.hfflow-offcanvas__nav {
	padding: var( --hfflow-offcanvas-nav-padding );
}

.hfflow-offcanvas__menu,
.hfflow-offcanvas__menu ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.hfflow-offcanvas__menu {
	text-align: var( --hfflow-offcanvas-align );
}

.hfflow-offcanvas__menu li {
	margin-bottom: var( --hfflow-offcanvas-item-gap );
}

.hfflow-offcanvas__menu ul {
	margin-top: var( --hfflow-offcanvas-item-gap );
	padding-left: var( --hfflow-offcanvas-sub-indent );
}

.hfflow-offcanvas__menu a {
	display: block;
	padding: var( --hfflow-offcanvas-link-padding );
	color: var( --hfflow-offcanvas-link-color );
	font-size: var( --hfflow-offcanvas-link-size );
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	background-color: var( --hfflow-offcanvas-link-bg );
	transition: color 0.3s ease, background-color 0.3s ease;
}

.hfflow-offcanvas__menu a:hover,
.hfflow-offcanvas__menu a:focus {
	color: var( --hfflow-offcanvas-link-hover );
	background-color: var( --hfflow-offcanvas-link-bg-hover );
}

.hfflow-offcanvas__menu .current-menu-item > a,
.hfflow-offcanvas__menu .current-menu-ancestor > a {
	color: var( --hfflow-offcanvas-link-active );
}

.hfflow-offcanvas__menu li:last-child a {
	margin: 0;
}

body.hfflow-offcanvas-active {
	overflow: hidden;
}

/* Trigger visibility helper for themes that opt in. */
.hfflow-offcanvas-open {
	display: none;
	cursor: pointer;
}

@media ( max-width: 1023px ) {

	.hfflow-offcanvas-open {
		display: block;
	}
}