/* ============================================================
   wbv-mobile-menu.css
   Mobile slide-out menu (companion to snippet wbv-22-mobile-menu).
   Active only at <768px. Desktop nav untouched.
   Uses WBV brand tokens from wbv_added_styles copy.css :root —
   no magic numbers, no drift.
   Last updated: 2026-05-04 (no-scroll layout + swipe-out + card-as-link)
   ============================================================ */

/* ---------- 1. body scroll lock when open --------------- */
html.wbv-mm-locked,
html.wbv-mm-locked body{
	overflow:hidden;
	touch-action:none;
}

/* ---------- 2. desktop: panel hidden, no behaviour ------ */
.wbv-mm{ display:none; }

/* ============================================================
   3. MOBILE — the panel
   ============================================================ */
@media (max-width: 767px){

/* -- 3a. take over from the WP responsive container -- */
.wp-block-navigation__responsive-container.is-menu-open{
	display:none !important;
}

/* -- 3b. our overlay -- */
.wbv-mm{
	display:block;
	position:fixed;
	inset:0;
	z-index:9990;
	pointer-events:none;
}
.wbv-mm.is-open{ pointer-events:auto; }

.wbv-mm-backdrop{
	position:absolute; inset:0;
	background:rgba(20,17,13,.42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity:0;
	transition: opacity .32s cubic-bezier(.2,.8,.2,1);
}
.wbv-mm.is-open .wbv-mm-backdrop{ opacity:1; }

/* -- 3c. the sliding panel -- */
.wbv-mm-panel{
	--wbv-mm-pad-x: 24px;
	--wbv-mm-ink:   var(--wbv-text-primary);
	--wbv-mm-accent: var(--wbv-btn-bg);          /* default warm brown */

	position:absolute;
	top:0; right:0; bottom:0;
	width:88%; max-width:420px;
	background: var(--wbv-bg-white);
	border-top-left-radius:22px;
	border-bottom-left-radius:22px;
	box-shadow: -12px 0 30px rgba(0,0,0,.18);
	display:flex; flex-direction:column;
	overflow:hidden;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.2,.8,.2,1);
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: var(--wbv-mm-ink);
	-webkit-font-smoothing: antialiased;
	touch-action: pan-y;
}
.wbv-mm.is-open .wbv-mm-panel{ transform: translateX(0); }

/* swipe-out drag state — JS removes transition, sets transform inline */
.wbv-mm-panel.is-dragging{ transition:none !important; }

/* -- 3c.1 INTENT-AWARE ACCENT — swaps per body class set by section v2 snippets -- */
body.intent-rental .wbv-mm-panel{ --wbv-mm-accent: #1A6E5C; }   /* daily rental — sage green */
body.intent-sale   .wbv-mm-panel{ --wbv-mm-accent: #1F5D8E; }   /* villas for sale — deep blue */
body.intent-lt     .wbv-mm-panel{ --wbv-mm-accent: #B5734A; }   /* long-term — warm terracotta */


/* -- 3d. NO-SCROLL stack: everything fits in viewport -- */
.wbv-mm-stack{
	flex:1 1 auto;
	min-height:0;
	overflow:hidden;          /* hard rule: never scroll */
	display:flex; flex-direction:column;
	padding: 18px var(--wbv-mm-pad-x) 0;
}

/* -- 3e. fade-up stagger (only when open) -- */
.wbv-mm-fade{
	opacity:0;
	transform: translateY(8px);
}
.wbv-mm.is-open .wbv-mm-fade{
	animation: wbvMmFade .48s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes wbvMmFade{ to{ opacity:1; transform:translateY(0); } }
.wbv-mm.is-open .wbv-mm-f1{ animation-delay:.30s }
.wbv-mm.is-open .wbv-mm-f2{ animation-delay:.36s }
.wbv-mm.is-open .wbv-mm-f3{ animation-delay:.42s }
.wbv-mm.is-open .wbv-mm-f4{ animation-delay:.48s }
.wbv-mm.is-open .wbv-mm-f5{ animation-delay:.54s }
.wbv-mm.is-open .wbv-mm-f6{ animation-delay:.60s }
.wbv-mm.is-open .wbv-mm-f7{ animation-delay:.66s }

/* ---------- 4. HEADER ---------- */
.wbv-mm-head{
	display:flex; align-items:center; justify-content:space-between;
	margin-bottom:22px;
}
.wbv-mm-brand{
	display:flex; align-items:center; gap:9px;
	text-decoration:none;
}
.wbv-mm-logo-mark{
	font-family:'DM Serif Display', serif;
	font-size:28px; line-height:1;
	color: var(--wbv-mm-accent);
	letter-spacing:-.02em;
}
.wbv-mm-wordmark{
	display:flex; flex-direction:column; line-height:1.2;
	font-weight:700; letter-spacing:.16em;
	color: var(--wbv-mm-ink);
}
.wbv-mm-wordmark .top{ font-size:11px; }
.wbv-mm-wordmark .bot{
	font-size:8.5px;
	color: var(--wbv-mm-accent);
	letter-spacing:.32em;
	font-weight:600;
}
.wbv-mm-close{
	width:38px; height:38px;
	border:none; border-radius:11px;
	background: var(--wbv-sale-alt-bg);
	display:flex; align-items:center; justify-content:center;
	color: var(--wbv-mm-ink);
	cursor:pointer;
	transition: background .18s, transform .12s;
}
.wbv-mm-close:hover{ background:#e5e0d4; }
.wbv-mm-close:active{ transform:scale(.94); }
.wbv-mm-close svg{ width:15px; height:15px; stroke-width:2.4; }

/* ---------- 5. PRIMARY NAV ---------- */
.wbv-mm-primary{
	display:flex; flex-direction:column; gap:18px;
}
.wbv-mm-primary a{
	display:flex; align-items:center; justify-content:space-between;
	text-decoration:none;
	color: var(--wbv-mm-ink);
	padding: 4px 0;
	transition: transform .15s;
}
.wbv-mm-primary a:active{ transform: scale(.985); }
.wbv-mm-primary .wbv-mm-body{ display:flex; flex-direction:column; gap:3px; }
.wbv-mm-primary .wbv-mm-t{
	font-weight:700;
	font-size:28px;
	line-height:1.08;
	letter-spacing:-.018em;
	color: var(--wbv-mm-ink);
}
.wbv-mm-primary .wbv-mm-s{
	font-size:12.5px;
	color: var(--wbv-text-secondary);
	font-weight:400;
	letter-spacing:.02em;
}
.wbv-mm-primary .wbv-mm-arr{
	color: var(--wbv-mm-ink);
	flex-shrink:0;
	margin-left:14px;
	transition: color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.wbv-mm-primary .wbv-mm-arr svg{
	width:24px; height:24px;
	stroke-width:2;
	fill:none; stroke:currentColor;
	stroke-linecap:round; stroke-linejoin:round;
}
.wbv-mm-primary a:hover .wbv-mm-t{ color: var(--wbv-mm-accent); }
.wbv-mm-primary a:hover .wbv-mm-arr{
	color: var(--wbv-mm-accent);
	transform: translateX(4px);
}

/* ---------- 6. EXPLORE — quiet bridge (HIDDEN until /explore-bali-areas/ is live) ---------- */
.wbv-mm-explore{ display:none !important; }

/* legacy explore styles kept below for re-enable */
.wbv-mm-explore-legacy{
	margin-top:18px;
	padding-top:14px;
	border-top:1px solid var(--wbv-divider);
}

/* ---------- 7. OWNER CARD — now a tappable link, pinned above footer ---------- */
.wbv-mm-owner{
	flex-shrink:0;
	display:block;
	margin: 16px var(--wbv-mm-pad-x) 14px;
	background: var(--wbv-sale-alt-bg);
	border-radius: var(--wbv-r-lg);
	padding: 18px 20px;
	position:relative;
	overflow:hidden;
	border:1px solid rgba(31,61,54,.06);
	text-decoration:none;
	color: inherit;
	transition: background .2s, transform .12s;
}
.wbv-mm-owner:hover{ background:#ebe5d8; }
.wbv-mm-owner:active{ transform: scale(.985); }
.wbv-mm-owner::after{
	content:"";
	position:absolute;
	top:-40px; right:-40px;
	width:120px; height:120px;
	border-radius:50%;
	background: radial-gradient(circle, rgba(31,61,54,.10) 0%, transparent 70%);
	pointer-events:none;
}
.wbv-mm-owner-eyebrow{
	font-family:'DM Serif Display', serif;
	font-style:italic;
	font-size:13px;
	color: var(--wbv-sale-green);
	margin-bottom:2px;
	letter-spacing:.01em;
}
.wbv-mm-owner-h{
	font-family:'DM Serif Display', serif;
	font-size:24px; line-height:1.1;
	color: var(--wbv-mm-ink);
	margin:0;
	letter-spacing:-.01em;
	font-weight:400;
}
.wbv-mm-owner-p{
	font-size:13px;
	color: var(--wbv-text-secondary);
	margin:6px 0 0;
	line-height:1.45;
	max-width:260px;
}
.wbv-mm-owner-arr{
	position:absolute;
	top:18px; right:18px;
	color: var(--wbv-sale-green);
	z-index:1;
	transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.wbv-mm-owner-arr svg{
	width:18px; height:18px; stroke-width:2;
	fill:none; stroke:currentColor;
	stroke-linecap:round; stroke-linejoin:round;
}
.wbv-mm-owner:hover .wbv-mm-owner-arr,
.wbv-mm-owner:active .wbv-mm-owner-arr{
	transform: translate(3px,-3px);
}

/* ---------- 8. FOOTER — intentional sign-off ---------- */
.wbv-mm-foot{
	flex-shrink:0;
	padding: 16px var(--wbv-mm-pad-x) 18px;
	border-top:1px solid var(--wbv-divider);
	display:flex; align-items:center; justify-content:space-between;
	background: var(--wbv-bg-white);
}
.wbv-mm-foot-meta{ display:flex; flex-direction:column; gap:2px; }
.wbv-mm-foot-eyebrow{
	font-family:'DM Serif Display', serif;
	font-style:italic;
	font-size:13px;
	color: var(--wbv-text-secondary);
	letter-spacing:.01em;
}
.wbv-mm-contact{
	text-decoration:none;
	color: var(--wbv-mm-ink);
	font-weight:700;
	font-size:16px;
	letter-spacing:-.005em;
	transition: color .2s;
}
.wbv-mm-contact:hover{ color: var(--wbv-mm-accent); }

.wbv-mm-socials{ display:flex; gap:10px; }
.wbv-mm-social{
	width:42px; height:42px; border-radius:50%;
	background: var(--wbv-sale-alt-bg);
	color: var(--wbv-mm-accent);
	display:flex; align-items:center; justify-content:center;
	text-decoration:none;
	transition: background .2s, color .2s, transform .12s;
}
.wbv-mm-social:hover{ background: var(--wbv-mm-accent); color:#fff; }
.wbv-mm-social:active{ transform: scale(.92); }
.wbv-mm-social svg{
	width:18px; height:18px;
	/* fill/stroke set inline on each icon — no override here */
}

} /* end @media */