/* =============================================================================
   BCW Mobile Menu
   Off-canvas navigation overlay with accordion (L1) + panel slide (L2).
   ============================================================================= */

/* ── Global button reset: neutralise inherited theme / Elementor styles ──── */
/*    Must come first so individual rules below can safely layer on top.      */

.bcw-accordion-toggle,
.bcw-panel-back,
.bcw-panel-trigger {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	background-image: none;
	border: 0 none;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0;
}

/*
 * High-specificity reset scoped inside the panels container.
 * Elementor and theme button styles can override inner buttons — we beat
 * them here with !important on the most likely-to-be-overridden properties.
 */
.bcw-panels .bcw-accordion-toggle,
.bcw-panels .bcw-panel-back,
.bcw-panels .bcw-panel-trigger {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	/* text-transform and letter-spacing intentionally NOT !important so
	   Elementor typography controls can override them */
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none !important;
	outline: none;
	padding: 0;
	margin: 0;
}

/*
 * List reset: prevent theme/Elementor from re-adding bullets inside the overlay.
 */
.bcw-panels ul,
.bcw-panels li {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0;
	padding: 0;
}

/*
 * Icon-font <i> elements (Font Awesome, Elementor icons, etc.)
 * Must explicitly inherit color & font-size so theme/Elementor resets
 * (e.g. font-size: 0, color: inherit resolving to transparent) don't hide them.
 */
.bcw-accordion-toggle i,
.bcw-panel-back i {
	display: inline-block !important;
	font-size: inherit !important;
	line-height: 1;
	color: inherit !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	pointer-events: none;
}

/* Panel-trigger arrow icon: default to 16px so FA icons don't inherit the full
   paragraph font-size and appear huge. The Elementor size control uses !important
   on this element to allow the designer to override. */
.bcw-panel-trigger i {
	display: inline-block !important;
	font-size: 16px;
	line-height: 1;
	color: inherit !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	pointer-events: none;
}

/* When Elementor renders an SVG icon inside the panel trigger, constrain it.
   font-size has no effect on SVG elements — must use width/height. */
.bcw-panel-trigger > svg,
.bcw-panel-trigger span > svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	/* No margin-left:auto here — icon sits right after the label by default.
	   The Elementor see-all-icon-right-offset control moves the see-all icon to the right edge. */
}

/* ── Panels container ─────────────────────────────────────────────────────── */

.bcw-panels {
	position: relative;
	overflow: hidden;
	/* No fixed height — it is determined by the main panel's content.
	   Level-2 panels use position:absolute so they overlay without affecting height. */
}

/* ── Main panel — normal flow ───────────────────────────────────────────────── */

/* The main panel stays in normal flow so .bcw-panels sizes to its content.
   This makes the widget work both standalone and inside Elementor Off Canvas. */
.bcw-panel--main {
	display: block;
}

/* ── Level-2 panels — absolute overlay ─────────────────────────────────────── */

/* Level-2 panels start off-screen and slide in.
   JS applies position:fixed (via getBoundingClientRect) when opening so the
   panel covers the exact viewport area of the Off Canvas regardless of
   Elementor wrapper padding/margin. The CSS here provides the slide transition
   and the fallback absolute position for non-JS contexts. */
.bcw-panel:not(.bcw-panel--main) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	min-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--bcw-menu-bg, #fff);
}

.bcw-panel:not(.bcw-panel--main).bcw-panel--active {
	transform: translateX(0);
}

/* Main panel: invisible and non-interactive while a level-2 panel is open. */
.bcw-panel--main.bcw-panel--slide-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bcw-panel--main.bcw-panel--active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}

/* ── Panel header (Back button row) ─────────────────────────────────────────── */

.bcw-panel-header {
	padding: 12px 20px;
	border-bottom: 1px solid #e0e0e0;
	flex-shrink: 0;
}

.bcw-panel-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0;
	font-size: 0.875rem;
	cursor: pointer;
	color: inherit;
	font-weight: 600;
	width: auto;
}

.bcw-panel-back svg {
	fill: currentColor;
	flex-shrink: 0;
}

/* Default rotation for back icon — makes a right-pointing arrow display as left-pointing.
   CSS variable --bcw-back-icon-rotate is set by the Elementor back_icon_rotate control. */
.bcw-panel-back .bcw-icon--normal {
	transform: rotate(var(--bcw-back-icon-rotate, 180deg));
}

.bcw-panel-back:hover,
.bcw-panel-back:active,
.bcw-panel-back:focus-visible {
	text-decoration: underline;
}

/* Arrow/icon color follows parent hover — mirrors site-wide CSS pattern.
 * Hovering or pressing anywhere on the parent element (button or link) forces
 * all descendant SVG arrows and icon-font <i> elements to follow the parent's
 * current text color via currentColor, regardless of any explicit fill/color
 * set on the icon in its resting state by the Elementor icon-color control. */

/* Panel trigger: hover anywhere on the button → arrow matches label color */
.bcw-panel-trigger:hover svg,
.bcw-panel-trigger:active svg,
.bcw-panel-trigger:focus-visible svg {
	fill: currentColor !important;
}
.bcw-panel-trigger:hover > i,
.bcw-panel-trigger:active > i {
	color: inherit !important;
}

/* "See all" link: hover → arrow follows link color */
.bcw-sub-item--see-all a:hover svg,
.bcw-sub-item--see-all a:active svg {
	fill: currentColor !important;
}
.bcw-sub-item--see-all a:hover i,
.bcw-sub-item--see-all a:active i {
	color: inherit !important;
}

/* Back button: hover → icon SVG follows button text color */
.bcw-panel-back:hover svg,
.bcw-panel-back:active svg {
	fill: currentColor !important;
}

/* ── Hover icon swap ────────────────────────────────────────────────────────
 * When a hover icon is configured, hide the normal icon on hover and show the
 * hover icon. Works with any icon type (SVG file, PNG, font icon, custom image)
 * because it's purely display toggling — no color/fill manipulation needed. */

.bcw-icon--hover {
	display: none;
}

.bcw-panel-trigger:hover .bcw-icon--normal,
.bcw-panel-trigger:active .bcw-icon--normal,
.bcw-panel-trigger:focus-visible .bcw-icon--normal {
	display: none;
}
.bcw-panel-trigger:hover .bcw-icon--hover,
.bcw-panel-trigger:active .bcw-icon--hover,
.bcw-panel-trigger:focus-visible .bcw-icon--hover {
	display: inline-flex;
}

.bcw-sub-item--see-all a:has(.bcw-icon--hover):hover .bcw-icon--normal {
	display: none;
}
.bcw-sub-item--see-all a:has(.bcw-icon--hover):hover .bcw-icon--hover {
	display: inline-flex;
}

.bcw-panel-back:hover .bcw-icon--normal,
.bcw-panel-back:active .bcw-icon--normal,
.bcw-panel-back:focus-visible .bcw-icon--normal {
	display: none;
}
.bcw-panel-back:hover .bcw-icon--hover,
.bcw-panel-back:active .bcw-icon--hover,
.bcw-panel-back:focus-visible .bcw-icon--hover {
	display: inline-flex;
}

/* ── Panel body ─────────────────────────────────────────────────────────────── */

.bcw-panel-body {
	padding: 16px 20px;
}

.bcw-panel-title {
	margin: 0 0 16px;
	font-size: 1.1rem;
	font-weight: 700;
}

/* ── Nav lists ──────────────────────────────────────────────────────────────── */

.bcw-nav,
.bcw-nav--sub {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bcw-nav > li,
.bcw-nav--sub > li {
	border-bottom: 1px solid #e0e0e0;
}

.bcw-nav > li:last-child,
.bcw-nav--sub > li:last-child {
	border-bottom: none;
}

/* ── Top-level item row ─────────────────────────────────────────────────────── */

.bcw-nav-item {
	padding: 0;
}

/* Plain top-level link */
.bcw-nav-item > a {
	display: block;
	padding: 16px 20px;
	text-decoration: none;
	font-weight: 500;
}

.bcw-nav-item > a:hover,
.bcw-nav-item > a:focus-visible {
	text-decoration: underline;
}

/* Accordion row (link + toggle button side by side) */
.bcw-nav-item-row {
	display: flex;
	align-items: stretch;
	cursor: pointer; /* whole row is a tap target */
}

.bcw-item-link {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 16px 20px;
	text-decoration: none;
	font-weight: 500;
}

span.bcw-item-link {
	/* Non-linked top-level label */
	cursor: pointer; /* overrides default for spans */
}

.bcw-has-accordion .bcw-item-link:hover,
.bcw-has-accordion .bcw-item-link:focus-visible {
	text-decoration: none; /* row hover handles the feedback instead */
}

/* Row-level hover / focus feedback for accordion items */
.bcw-has-accordion .bcw-nav-item-row:hover,
.bcw-has-accordion .bcw-nav-item-row:focus-within {
	background-color: transparent;
}

/* Accordion chevron toggle */
.bcw-accordion-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 52px;
	flex-shrink: 0;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	color: inherit;
	padding: 0;
	transition: background-color 0.2s;
	/* Prevent the button from shifting vertically when icon transforms */
	line-height: 0;
}

/* Toggle button itself no longer needs its own hover — the whole row handles it */
.bcw-accordion-toggle:hover,
.bcw-accordion-toggle:focus-visible {
	background-color: transparent;
}

/* ── .bcw-icon--normal / .bcw-icon--expanded wrapper spans ─────────────────
 * These are display:inline-flex so the inner icon aligns to vertical center
 * and the button itself doesn't shift vertically on expand. */
.bcw-icon--normal,
.bcw-icon--expanded {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.bcw-accordion-toggle svg {
	fill: currentColor;
}

/* Rotate the .bcw-icon--normal wrapper span — covers SVG, icon-font, and img
   without conflicting with Elementor's size/color selectors on inner elements.
   The CSS variable --bcw-acc-rotate is set by the Elementor rotate control. */
.bcw-accordion-toggle .bcw-icon--normal {
	transform: rotate(var(--bcw-acc-rotate, 0deg));
	transition: transform 0.3s ease;
}

.bcw-accordion-toggle[aria-expanded="true"] .bcw-icon--normal {
	transform: rotate(calc(var(--bcw-acc-rotate, 0deg) + 180deg));
}

/* ── Expanded icon swap ──────────────────────────────────────────────────────
 * ONLY active when an expanded-state icon is in the DOM (i.e. the user
 * configured an "Accordion Expanded Icon").
 * When active: rotation is suppressed and the icons swap visibility instead.
 * When NOT configured: the expanded span is absent from the DOM entirely,
 * the :has() rules never fire, and plain rotation works. */

.bcw-icon--expanded {
	display: none !important;
}

/* Suppress rotation when swap mode is active */
.bcw-accordion-toggle:has(.bcw-icon--expanded) .bcw-icon--normal {
	transform: none !important;
	transition: none;
}

/* Swap: hide normal / show expanded — guarded by :has() so it only runs
   when an expanded icon is actually configured */
.bcw-accordion-toggle:has(.bcw-icon--expanded)[aria-expanded="true"] .bcw-icon--normal {
	display: none !important;
}
.bcw-accordion-toggle:has(.bcw-icon--expanded)[aria-expanded="true"] .bcw-icon--expanded {
	display: inline-flex !important;
}

/* ── Accordion body ─────────────────────────────────────────────────────────── */

.bcw-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	background-color: transparent;
}

.bcw-accordion-body.is-open {
	max-height: 1200px; /* generous to accommodate any menu length */
}

.bcw-accordion-body > li {
	border-bottom: 1px solid #e0e0e0;
}

.bcw-accordion-body > li:last-child {
	border-bottom: none;
}

/* ── Sub-item (depth 1) ─────────────────────────────────────────────────────── */

.bcw-sub-item {
	padding: 0;
}

/* Plain sub-link */
.bcw-sub-item > a {
	display: block;
	padding: 12px 20px 12px 28px;
	text-decoration: none;
}

.bcw-sub-item > a:hover,
.bcw-sub-item > a:focus-visible {
	text-decoration: underline;
}

/* Sub-item with icon (row layout) */
.bcw-sub-item-row {
	display: flex;
	align-items: center;
	padding: 12px 20px 12px 28px;
	gap: 12px;
}

.bcw-sub-item-row > a {
	text-decoration: none;
	flex: 1;
}

/* Reset any theme/browser <a> font overrides so these links render at the same
   size/weight as adjacent .bcw-panel-trigger items. font-size uses !important so
   that explicit theme mobile rules on <a> elements (e.g. inside .e-off-canvas)
   cannot override it. The inherited value resolves to the Elementor-managed
   font-size now set on the parent .bcw-sub-item via the sub_item_typography
   selector. Specificity (0,2,1) + !important beats typical theme link resets. */
.bcw-sub-item .bcw-sub-item-row > a {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.bcw-sub-item-row > a:hover,
.bcw-sub-item-row > a:focus-visible {
	text-decoration: underline;
}

/* ── Panel trigger button (sub-item → opens level-2 panel) ─────────────────── */

.bcw-panel-trigger {
	display: flex !important;
	align-items: center;
	width: 100%;
	padding: 12px 20px 12px 28px;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	color: inherit;
	text-align: left;
	gap: var(--bcw-trigger-icon-gap, 8px);
	font-size: inherit;
	font-family: inherit;
	transition: background-color 0.2s;
}

.bcw-panel-trigger:hover,
.bcw-panel-trigger:focus-visible {
	background-color: transparent;
}

/* --bcw-icon-size is set on {{WRAPPER}} by the Elementor Icon Size control.
   Using !important for both dimensions beats the theme's img { height:auto !important }
   because our specificity (0,1,0) > the theme's element rule (0,0,1). */
.bcw-item-icon {
	width: var(--bcw-icon-size, 14px) !important;
	height: var(--bcw-icon-size, 14px) !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 4px;
}

.bcw-item-label {
	flex: 1;
	font-weight: 500;
}

.bcw-chevron-right {
	fill: currentColor;
	flex-shrink: 0;
	/* sits right after the label; Elementor right-offset control adds margin-left:auto */
}

/* Submenu icon span (normal/hover wrappers) sit after label, no auto margin */
.bcw-panel-trigger .bcw-icon--normal,
.bcw-panel-trigger .bcw-icon--hover {
	flex-shrink: 0;
	margin-left: var(--bcw-trigger-icon-margin-left, 0px);
}

/* ── Level-2 nav (inside panel) ─────────────────────────────────────────────── */

/* Level-2 panel items use 0 horizontal padding because the panel-body already
   provides 20px padding. This matches accordion sub-items which also read from
   the sub_item_padding control.
   NOTE: The sub_item_padding Elementor control also targets this selector so
   the user can override the default. */
.bcw-nav--sub > .bcw-sub-item > a {
	padding: 12px 0;
}

/* "See all" link — pinned at bottom with a divider above it */
.bcw-sub-item--see-all {
	border-top: 1px solid currentColor;
	opacity: 0.55;
	border-bottom: 0 !important;
}

.bcw-sub-item--see-all > a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 0; /* matches sub_item_padding default vertical; horizontal handled by parent */
}

/* See-all icon: by default pushed to the right margin */
.bcw-sub-item--see-all > a .bcw-icon--normal,
.bcw-sub-item--see-all > a .bcw-icon--hover {
	margin-left: auto;
	margin-right: var(--bcw-see-all-icon-right, 0px);
	flex-shrink: 0;
}

.bcw-sub-item--see-all > a svg,
.bcw-sub-item--see-all > a i {
	fill: currentColor;
	color: currentColor;
	flex-shrink: 0;
	/* Default size; overridden by Elementor see_all_icon_size control */
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* ── Elementor icon rendering: per-button sizing ────────────────────────── */
/*    <i> visibility (color, display, font-size) is handled by the global    */
/*    reset block at the top of this file.                                   */

/* Accordion icon */
.bcw-accordion-toggle > i,
.bcw-accordion-toggle .bcw-icon--normal > i,
.bcw-accordion-toggle .bcw-icon--expanded > i {
	font-size: 16px;
}

/* Back button icon */
.bcw-panel-back > i,
.bcw-panel-back .bcw-icon--normal > i {
	font-size: 16px;
}

/* All inline SVGs pick up currentColor */
.bcw-accordion-toggle svg,
.bcw-panel-back svg,
.bcw-panel-trigger svg {
	fill: currentColor;
}

/* ── Focus-visible outline (accessibility) ──────────────────────────────────── */

.bcw-accordion-toggle:focus-visible,
.bcw-panel-trigger:focus-visible,
.bcw-panel-back:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}