/* ── BW Mobile Drawer v3.0 — drawer.css ────────────────────────────────────
 * Structure + behavioural states only. All themeable colours/sizes come from
 * Elementor's per-instance selectors (generated from the Style controls), which
 * override the fallback values below because they carry the
 * .elementor-element-<id> wrapper for higher specificity.
 *
 * Class-scoped (no IDs) so multiple instances coexist. Breakpoint show/hide is
 * emitted inline per instance by the widget (front end only).
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Hamburger button (header) ── */
.bw-hamburger {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	background:       none;
	border:           none;
	color:            #354637;
	font-size:        22px;
	line-height:      1;
	padding:          8px;
	cursor:           pointer;
	-webkit-tap-highlight-color: transparent;
	transition:       color 0.2s, background 0.2s;
}
.bw-hamburger .bw-hamburger-icon { display: inline-flex; align-items: center; justify-content: center; }
.bw-hamburger i   { font-size: inherit; color: inherit; line-height: 1; }
.bw-hamburger svg { width: 1em; height: 1em; fill: currentColor; }

/* Icon swap: show open icon by default, close icon while the drawer is open. */
.bw-hamburger .bw-icon-close { display: none; }
.bw-hamburger.is-open .bw-icon-open  { display: none; }
.bw-hamburger.is-open .bw-icon-close { display: inline-flex; }

/* ── Hide a native Elementor Nav Menu while active (optional) ── */
.bw-hide-dropdown .elementor-nav-menu--dropdown,
.bw-hide-dropdown .elementor-nav-menu__container,
.bw-hide-dropdown.elementor-nav-menu--dropdown {
	display:        none !important;
	visibility:     hidden !important;
	pointer-events: none !important;
	max-height:     0 !important;
}

/* ── Overlay ── */
.bw-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(0,0,0,0.18);
	z-index:        9998;
	opacity:        0;
	pointer-events: none;
	transition:     opacity 0.3s ease;
}
/* !important so the open state overrides the inline closed-state attribute the
   widget prints on the element (the inline attribute is the anti-flash guard). */
.bw-overlay.bw-on { opacity: 1 !important; pointer-events: auto !important; }

/* ── Drawer ── */
.bw-drawer {
	position:       fixed;
	top:            var(--bwh, 64px);
	left:           0;
	width:          310px;
	max-width:      95vw;
	height:         calc(100dvh - var(--bwh, 64px));
	height:         calc(100vh  - var(--bwh, 64px));
	background:     #eae4da;
	z-index:        9999;
	visibility:     hidden;                 /* never painted while closed (anti-flash) */
	transform:      translateX(-100%);
	transition:     transform var(--bwd-dur, 350ms) cubic-bezier(0.4,0,0.2,1),
	                visibility 0s linear var(--bwd-dur, 350ms);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	box-sizing:     border-box;
	box-shadow:     4px 0 28px rgba(0,0,0,0.14);
}
/* !important so the open state overrides the inline closed-state attributes the
   widget prints on the element (the inline attribute is the anti-flash guard).
   visibility flips to visible immediately on open; on close it stays visible for
   the duration of the slide-out (delay above) so the animation is still seen. */
.bw-drawer.bw-open {
	transform: translateX(0) !important;
	visibility: visible !important;
	transition: transform var(--bwd-dur, 350ms) cubic-bezier(0.4,0,0.2,1),
	            visibility 0s linear 0s !important;
}

/* ── Close row (top of drawer) ── */
.bw-dh {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	padding:         0 12px;
	min-height:      44px;
	border-bottom:   1px solid rgba(53,70,55,0.13);
	flex-shrink:     0;
	box-sizing:      border-box;
}
.bw-close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:       none;
	border:          none;
	color:           #354637;
	font-size:       16px;
	line-height:     1;
	cursor:          pointer;
	padding:         6px;
	opacity:         0.7;
	transition:      opacity 0.2s, color 0.2s, background 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.bw-close:hover { opacity: 1; color: #cea54d; }
.bw-close i   { font-size: inherit; color: inherit; }
.bw-close svg { width: 1em; height: 1em; fill: currentColor; }
.bw-close-x   { font-size: 18px; line-height: 1; font-style: normal; }

/* ── Panels wrapper (two-panel slide) ── */
.bw9-wrap {
	display:     flex;
	width:       200%;
	flex:        1;
	flex-shrink: 0;
	overflow:    hidden;
	transition:  transform var(--bwd-dur, 330ms) cubic-bezier(0.4,0,0.2,1);
}
.bw9-wrap.bw9-sub { transform: translateX(-50%); }

.bw9-panel {
	width:          50%;
	flex-shrink:    0;
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
}

/* ── PANEL 1: main nav ── */
.bw9-nav {
	list-style: none !important;
	margin:     0 !important;
	padding:    10px 0 0 !important;
	overflow-y: auto;
	flex:       1;
	-webkit-overflow-scrolling: touch;
}
.bw9-nav > li {
	list-style:    none !important;
	border-bottom: 1px solid rgba(53,70,55,0.1);
}
.bw9-nav > li > a {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         19px 30px;
	font-family:     'Jost', sans-serif;
	font-size:       12px;
	font-weight:     500;
	letter-spacing:  0.26em;
	text-transform:  uppercase;
	color:           #354637;
	text-decoration: none;
	transition:      color 0.2s, background 0.2s;
	box-sizing:      border-box;
}
.bw9-nav > li > a:hover { color: #cea54d; background: rgba(53,70,55,0.04); }
.bw9-nav-icon { font-size: 16px; flex-shrink: 0; color: #354637; transition: color 0.2s; }
.bw9-nav-icon svg { width: 1em; height: 1em; fill: currentColor; }

.bw9-push {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         19px 30px;
	font-family:     'Jost', sans-serif;
	font-size:       12px;
	font-weight:     500;
	letter-spacing:  0.26em;
	text-transform:  uppercase;
	color:           #354637;
	background:       none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	box-sizing:      border-box;
	transition:      color 0.2s, background 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.bw9-push-inner { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bw9-push:hover { color: #cea54d; background: rgba(53,70,55,0.04); }
.bw9-arr { font-style: normal; font-size: 18px; line-height: 1; flex-shrink: 0; color: #354637; transition: color 0.2s; }

.bw9-badge {
	display:        inline-block;
	background:     #cea54d;
	color:          #fff;
	font-family:    'Jost', sans-serif;
	font-size:      9px;
	font-weight:    600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:        2px 6px;
	border-radius:  4px;
	vertical-align: middle;
	flex-shrink:    0;
	margin-left:    4px;
	line-height:    1.4;
}

/* ── PANEL 2: sub-panel ── */
.bw9-p2-head {
	display:       flex;
	align-items:   center;
	min-height:    44px;
	border-bottom: 1px solid rgba(53,70,55,0.13);
	flex-shrink:   0;
}
.bw9-back {
	display:        flex;
	align-items:    center;
	gap:            8px;
	padding:        0 20px;
	min-height:     44px;
	font-family:    'Jost', sans-serif;
	font-size:      11px;
	font-weight:    500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          #354637;
	background:     none;
	border:         none;
	cursor:         pointer;
	opacity:        0.78;
	transition:     opacity 0.2s, color 0.2s, background 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.bw9-back:hover { opacity: 1; color: #cea54d; }
.bw9-back i   { font-size: 12px; flex-shrink: 0; color: inherit; }
.bw9-back svg { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; }

.bw9-subnav {
	list-style: none !important;
	margin:     0 !important;
	padding:    8px 0 0 !important;
	flex:       1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.bw9-subnav > li {
	list-style:    none !important;
	border-bottom: 1px solid rgba(53,70,55,0.1);
}

/* ── Accordion ── */
.bw9-head {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         17px 28px;
	cursor:          pointer;
	user-select:     none;
	transition:      color 0.2s, background 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.bw9-head:hover { background: rgba(53,70,55,0.03); }
.bw9-head-inner { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bw9-head-label { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: #354637; transition: color 0.2s; }
.bw9-acc-icon { font-size: 15px; flex-shrink: 0; color: #6E7C70; transition: color 0.2s; }
.bw9-acc-icon svg { width: 1em; height: 1em; fill: currentColor; }
.bw9-chev { font-style: normal; font-size: 15px; line-height: 1; flex-shrink: 0; color: rgba(53,70,55,0.5); transition: transform 0.26s ease, color 0.2s; }
.bw9-open > .bw9-head .bw9-head-label,
.bw9-open > .bw9-head .bw9-chev { color: #8a7042; }
.bw9-open > .bw9-head .bw9-chev { transform: rotate(90deg); }

/* ── Child items ── */
.bw9-body {
	list-style: none !important;
	margin:     0 !important;
	padding:    0 !important;
	max-height: 0;
	overflow:   hidden;
	transition: max-height 0.32s ease;
	background: rgba(53,70,55,0.04);
}
.bw9-open > .bw9-body { max-height: 1500px; }
.bw9-body li { list-style: none !important; }
.bw9-body li > a {
	display:         flex;
	align-items:     center;
	gap:             10px;
	padding:         11px 28px 11px 36px;
	text-decoration: none;
	border-bottom:   1px solid rgba(53,70,55,0.06);
	transition:      background 0.2s, color 0.2s;
	box-sizing:      border-box;
}
.bw9-body li > a:hover { background: rgba(53,70,55,0.05); }
.bw9-child-icon { font-size: 13px; flex-shrink: 0; color: #6E7C70; transition: color 0.2s; }
.bw9-child-icon svg { width: 1em; height: 1em; fill: currentColor; }
.bw9-child-label { font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em; color: #5c5040; flex: 1; transition: color 0.2s; }

/* ── Scroll lock ── */
body.bw-locked { overflow: hidden !important; }

/* ── Tap highlight & focus ── */
.bw-drawer,
.bw-drawer * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.bw-drawer button:focus,
.bw-drawer a:focus { outline: none; box-shadow: none; }
.bw-drawer button:focus-visible,
.bw-drawer a:focus-visible,
.bw-hamburger:focus-visible { outline: 2px solid rgba(53,70,55,0.35); outline-offset: 3px; }
.bw-drawer .bw9-head:active,
.bw-drawer .bw9-push:active,
.bw-drawer .bw9-back:active,
.bw-drawer .bw-close:active,
.bw-drawer .bw9-body li > a:active { background: rgba(53,70,55,0.08); }

/* ── Editor: keep the hamburger visible & the drawer usable at any canvas width.
 *    (The front-end breakpoint media query is emitted inline per instance and is
 *    NOT output in edit mode, so nothing hides these in the editor.) ── */
.elementor-editor-active .bw-hamburger { display: inline-flex !important; }