/* ============================================================
 * ybh-widgets.css — Yarden Zaken cinematic experience (Elementor).
 * DUAL MODE:
 *   • DEFAULT (no body.ybh-exp-live): editable STACKED fallback — every page a
 *     full-height section over its poster frame. Used by the Elementor editor,
 *     no-JS, and reduced-motion. Nothing is hidden.
 *   • body.ybh-exp-live (added by ybh-experience.js on the live frontend only):
 *     the fixed full-viewport canvas instrument (scroll navigation + reveals).
 * Tokens live on .ybh-exp so Elementor Style controls override per-instance.
 * ========================================================== */

.ybh-exp {
	--ybh-bg: #0a0a0a;
	--ybh-ink: #f5f5f5;
	--ybh-ink-dim: rgba(245,245,245,.55);
	--ybh-line: rgba(245,245,245,.20);
	--ybh-accent: #ffffff;
	--ybh-overlay: .4;
	--ybh-pad: clamp(20px, 3.2vw, 46px);
	--ybh-frame: clamp(14px, 2vw, 28px);
	/* progress rail + counter — tunable via Style controls (px), responsive */
	--ybh-rail-right: var(--ybh-pad);
	--ybh-rail-gap: 16px;
	--ybh-rail-bar-w: 34px;
	--ybh-rail-display: flex;
	--ybh-counter-size: clamp(40px, 5vw, 68px);
	--ybh-counter-display: flex;
	/* hamburger + mobile menu + send button — tunable via Style controls */
	--ybh-burger-color: #fff;
	--ybh-menu-bg: var(--ybh-bg);
	--ybh-menu-link: #fff;
	--ybh-send-bg: #0a0a0a;
	--ybh-send-color: #fff;
	--ybh-send-bw: 0px;
	--ybh-send-bc: transparent;

	position: relative;
	background: var(--ybh-bg);
	color: var(--ybh-ink);
	font-family: "Sofia Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.ybh-exp *, .ybh-exp *::before, .ybh-exp *::after { box-sizing: border-box; }

/* ---------- shared visual look for content elements (both modes) ---------- */
.ybh-kicker {
	font-size: clamp(10px, 1vw, 12px); letter-spacing: .55em; text-transform: uppercase;
	color: var(--ybh-accent); margin-bottom: clamp(14px, 2vw, 26px); opacity: .9;
}
.ybh-title h1 {
	font-family: "Sofia Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(50px, 8vw, 112px); line-height: .96; font-weight: 400;
	letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 12px 60px rgba(0,0,0,.5); margin: 0;
}
.ybh-title h1 em { font-style: normal; color: var(--ybh-accent); }
.ybh-rule { display: block; width: 54px; height: 1px; background: var(--ybh-accent); margin: clamp(20px,2.4vw,30px) auto 0; }
.ybh-subtitle {
	max-width: 48ch; margin-top: clamp(16px, 2vw, 22px); font-weight: 300;
	font-size: 25px; line-height: 1.62; letter-spacing: .015em;
	color: rgba(245,245,245,.72); text-shadow: 0 1px 24px rgba(0,0,0,.55);
}
.ybh-hero-logo { width: clamp(220px, 42vw, 600px); height: auto; filter: drop-shadow(0 12px 60px rgba(0,0,0,.55)); }
.ybh-btn {
	display: inline-block; margin-top: clamp(18px,2.4vw,28px); padding: 13px 30px;
	border: 1.5px solid var(--ybh-accent); color: var(--ybh-ink); text-decoration: none;
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase; transition: background .3s, color .3s;
}
.ybh-btn:hover { background: var(--ybh-accent); color: var(--ybh-bg); }

/* topbar / menu */
.ybh-topbar {
	position: absolute; top: var(--ybh-pad); left: var(--ybh-pad); right: var(--ybh-pad); z-index: 8;
	display: flex; align-items: center; justify-content: space-between;
	color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.5); pointer-events: none;
}
.ybh-topbar[data-menu-pos="left"] { flex-direction: row-reverse; }
.ybh-logo { display: flex; align-items: center; }
.ybh-mark { height: 38px; width: auto; display: block; }
.ybh-navmeta { display: flex; gap: 26px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; pointer-events: auto; }
.ybh-navmeta a { color: #fff; text-decoration: none; opacity: 1; transition: opacity .3s, color .3s; }
.ybh-navmeta a:hover { color: #fff; opacity: .6; }   /* explicit hover colour kills theme a:hover leak; override via control */

/* mobile hamburger — three thin white bars → X — + full-screen menu overlay */
.ybh-burger { display: none; position: fixed; top: var(--ybh-pad); right: var(--ybh-pad); z-index: 50; width: var(--ybh-burger-w, 28px); height: 15px; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; pointer-events: auto; }
/* kill any theme background / border / tap-highlight on the button in EVERY state (the pink/red flash) */
.ybh-burger, .ybh-burger:hover, .ybh-burger:focus, .ybh-burger:focus-visible, .ybh-burger:active {
	background: transparent !important; background-color: transparent !important;
	border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
.ybh-burger::before, .ybh-burger::after { content: none !important; background: none !important; }
/* no iOS tap highlight anywhere inside the experience */
.ybh-exp a, .ybh-exp button, .ybh-exp input, .ybh-exp textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.ybh-burger[data-menu-pos="left"] { right: auto; left: var(--ybh-pad); }
.ybh-burger span { position: absolute; left: 0; right: 0; height: 2px; background: var(--ybh-burger-color); transition: transform .3s ease, opacity .2s ease, background .3s ease; }
.ybh-burger span:nth-child(1) { top: 0; }
.ybh-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ybh-burger span:nth-child(3) { bottom: 0; }
.ybh-exp.is-light { --ybh-burger-color: #0a0a0a; }              /* dark bars on the white page */
body.ybh-menu-open .ybh-exp { --ybh-burger-color: #fff; }       /* open → white X on the dark overlay */
body.ybh-menu-open .ybh-burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.ybh-menu-open .ybh-burger span:nth-child(2) { opacity: 0; }
body.ybh-menu-open .ybh-burger span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

.ybh-menu-overlay { position: fixed; inset: 0; z-index: 40; background: var(--ybh-menu-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4.5vh, 40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s ease; }
body.ybh-menu-open .ybh-menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
.ybh-menu-overlay a { color: var(--ybh-menu-link); text-decoration: none; font-family: "Sofia Sans", sans-serif; font-size: clamp(28px, 9vw, 48px); font-weight: 300; letter-spacing: .05em; text-transform: uppercase; opacity: .85; transition: opacity .3s ease; }
.ybh-menu-overlay a:hover { opacity: 1; }
.ybh-editor-preview .ybh-burger, .ybh-editor-preview .ybh-menu-overlay { display: none !important; }

/* form */
.ybh-form { display: flex; flex-direction: column; align-items: center; gap: clamp(13px,1.8vw,19px); width: min(420px, 86vw); color: #0a0a0a; text-align: center; }
.ybh-form-logo { width: clamp(150px,20vw,220px); height: auto; margin-bottom: clamp(4px,1vw,10px); }
.ybh-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.ybh-form input, .ybh-form textarea {
	width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(10,10,10,.28);
	padding: 10px 2px; font-family: "Sofia Sans", sans-serif; font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; color: #0a0a0a; outline: none; resize: none; transition: border-color .3s;
}
.ybh-form input::placeholder, .ybh-form textarea::placeholder { color: rgba(10,10,10,.45); }
.ybh-form input:focus, .ybh-form textarea:focus { border-bottom-color: #0a0a0a; }
.ybh-check { display: flex; align-items: center; gap: 10px; align-self: flex-start; cursor: pointer; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10,10,10,.7); }
.ybh-check input { width: 14px; height: 14px; accent-color: #0a0a0a; flex: 0 0 auto; cursor: pointer; }
.ybh-check a { color: inherit; }
.ybh-send { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; background: var(--ybh-send-bg); color: var(--ybh-send-color); border: 0; padding: 13px 32px; cursor: pointer; font-family: "Sofia Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; transition: opacity .3s, background .3s, color .3s; }
.ybh-send:hover { opacity: .82; }
.ybh-send[disabled] { opacity: .5; cursor: progress; }
.ybh-send .ybh-arrow { transition: transform .3s; }
.ybh-send:hover .ybh-arrow { transform: translateX(4px); }
/* strong override so the theme's button styles can't leak (the pink) — colours + border come from the controls */
.ybh-exp .ybh-form .ybh-send {
	background: var(--ybh-send-bg) !important;
	color: var(--ybh-send-color) !important;
	border: var(--ybh-send-bw) solid var(--ybh-send-bc) !important;
	box-shadow: none !important;
}
.ybh-exp .ybh-form .ybh-send:hover {
	background: var(--ybh-send-hover-bg, var(--ybh-send-bg)) !important;
	color: var(--ybh-send-hover-color, var(--ybh-send-color)) !important;
}
.ybh-formmsg { min-height: 1em; margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(10,10,10,.7); }
.ybh-form.invalid .ybh-formmsg { color: #b00020; }
.ybh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* corners / rail / counter / loader / blink — pure instrument chrome */
.ybh-corner { position: absolute; width: 34px; height: 34px; border: 1.5px solid var(--ybh-line); }
.ybh-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ybh-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ybh-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ybh-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.ybh-edge { position: absolute; background: var(--ybh-line); }
.ybh-edge.top { top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 18px; }
.ybh-edge.bottom { bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 18px; }

.ybh-dot { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 10px; letter-spacing: .2em; color: var(--ybh-ink-dim); transition: color .35s; }
.ybh-dot .bar { position: relative; width: var(--ybh-rail-bar-w); height: 1.5px; background: var(--ybh-line); overflow: hidden; }
.ybh-dot .bar i { position: absolute; inset: 0; width: 0%; background: var(--ybh-accent); }
.ybh-dot.on { color: var(--ybh-ink); }
.ybh-dot .num { opacity: 0; transform: translateX(6px); transition: .35s; }
.ybh-dot.on .num, .ybh-dot:hover .num { opacity: 1; transform: translateX(0); }

.ybh-counter { display: var(--ybh-counter-display); align-items: baseline; gap: 6px; font-weight: 600; }
.ybh-counter .ybh-cur { font-size: var(--ybh-counter-size); line-height: .8; letter-spacing: -.03em; }
.ybh-counter .ybh-tot { font-size: 14px; color: var(--ybh-ink-dim); letter-spacing: .1em; }
.ybh-scrollhint { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.ybh-mouse { width: 20px; height: 32px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 11px; position: relative; }
.ybh-mouse::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 2px; height: 6px; background: #fff; border-radius: 2px; animation: ybhwheel 1.6s ease-in-out infinite; }
@keyframes ybhwheel { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,9px)} }

/* ============================================================
 * DEFAULT = STACKED, EDITABLE FALLBACK (editor / no-JS / reduced-motion)
 * ========================================================== */
.ybh-exp .ybh-stage,
.ybh-exp .ybh-uiframe,
.ybh-exp .ybh-rail,
.ybh-exp .ybh-bottombar,
.ybh-exp .ybh-blink,
.ybh-exp .ybh-loader { display: none; }

.ybh-titles { display: block; }
.ybh-title {
	position: relative; min-height: 100svh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center;
	padding: clamp(80px,12vh,140px) var(--ybh-pad);
	background: var(--ybh-poster, none) center / cover no-repeat, var(--ybh-bg);
	color: var(--ybh-ink); overflow: hidden;
}
.ybh-title::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--ybh-overlay); pointer-events: none; }
.ybh-title[data-light="1"]::before { opacity: 0; }
.ybh-title[data-light="1"] { color: #0a0a0a; }
.ybh-title > * { position: relative; z-index: 1; }

/* ============================================================
 * LIVE INSTRUMENT — body.ybh-exp-live (JS added it on the frontend only)
 * ========================================================== */
body.ybh-exp-live { overflow: hidden; height: 100%; }
body.ybh-exp-live .ybh-exp {
	position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
	background: var(--ybh-bg); cursor: default; -webkit-user-select: none; user-select: none;
}

/* stage + canvas + overlays */
body.ybh-exp-live .ybh-stage { display: block; position: absolute; inset: 0; background: #000; overflow: hidden; }
body.ybh-exp-live .ybh-seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.ybh-exp-live .ybh-stage::before { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--ybh-overlay); z-index: 1; pointer-events: none; transition: opacity .6s ease; }
body.ybh-exp-live .ybh-stage::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .6s ease;
	background:
		radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(0,0,0,.55) 100%),
		linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 22%, transparent 70%, rgba(0,0,0,.6) 100%);
}

/* instrument chrome visible */
body.ybh-exp-live .ybh-uiframe { display: block; position: fixed; inset: var(--ybh-frame); pointer-events: none; z-index: 6; }
body.ybh-exp-live .ybh-topbar { position: fixed; }
body.ybh-exp-live .ybh-rail { display: var(--ybh-rail-display); position: fixed; top: 50%; right: var(--ybh-rail-right); transform: translateY(-50%); flex-direction: column; gap: var(--ybh-rail-gap); z-index: 8; align-items: center; }
body.ybh-exp-live .ybh-bottombar { display: flex; position: fixed; bottom: var(--ybh-pad); left: var(--ybh-pad); right: var(--ybh-pad); align-items: flex-end; justify-content: space-between; z-index: 8; }

/* titles become the fixed centered overlay layer */
body.ybh-exp-live .ybh-titles { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
body.ybh-exp-live .ybh-title {
	position: absolute; inset: 0; min-height: 0; padding: 0; background: none; overflow: visible;
	opacity: 0; transition: opacity .6s ease;
}
body.ybh-exp-live .ybh-title::before { display: none; }
body.ybh-exp-live .ybh-title.is-active { opacity: 1; }

/* reveal states (live only) */
body.ybh-exp-live .ybh-kicker { transform: translateY(14px); transition: transform .9s cubic-bezier(.16,1,.3,1) .05s; }
body.ybh-exp-live .ybh-title h1 { transform: translateY(34px); transition: transform 1s cubic-bezier(.16,1,.3,1); }
body.ybh-exp-live .ybh-title.is-active .ybh-kicker,
body.ybh-exp-live .ybh-title.is-active h1 { transform: translateY(0); }
body.ybh-exp-live .ybh-hero-logo { transform: translateY(34px); transition: transform 1s cubic-bezier(.16,1,.3,1); }
body.ybh-exp-live .ybh-title.is-active .ybh-hero-logo { transform: translateY(0); }
body.ybh-exp-live .ybh-rule { transform: scaleX(0); transition: transform .9s cubic-bezier(.16,1,.3,1) .2s; }
body.ybh-exp-live .ybh-title.is-active .ybh-rule { transform: scaleX(1); }
body.ybh-exp-live .ybh-subtitle { opacity: 0; transform: translateY(16px); transition: opacity .9s ease .18s, transform .9s cubic-bezier(.16,1,.3,1) .18s; }
body.ybh-exp-live .ybh-title.is-active .ybh-subtitle { opacity: 1; transform: translateY(0); }
body.ybh-exp-live .ybh-form { pointer-events: none; }
body.ybh-exp-live .ybh-title.is-active .ybh-form { pointer-events: auto; }

/* blink + loader (live) */
body.ybh-exp-live .ybh-blink { display: block; position: fixed; inset: 0; z-index: 5; pointer-events: none; }
body.ybh-exp-live .ybh-blink .lid { position: absolute; left: 0; right: 0; height: 62vh; transition: transform .55s cubic-bezier(.76,0,.24,1); }
body.ybh-exp-live .ybh-blink .lid.top { top: 0; transform: translateY(-101%); background: linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%); }
body.ybh-exp-live .ybh-blink .lid.bot { bottom: 0; transform: translateY(101%); background: linear-gradient(to top,#000 0%,#000 82%,transparent 100%); }
body.ybh-exp-live .ybh-blink.is-closed .lid { transform: translateY(0); }
body.ybh-exp-live .ybh-loader { display: flex; position: fixed; inset: 0; z-index: 30; background: var(--ybh-bg); flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity .8s ease; }
body.ybh-exp-live .ybh-loader.is-hidden { opacity: 0; pointer-events: none; }
body.ybh-exp-live .ybh-llogo { letter-spacing: .5em; font-size: 13px; text-transform: uppercase; opacity: .85; }
body.ybh-exp-live .ybh-lbar { width: min(260px, 52vw); height: 1.5px; background: var(--ybh-line); overflow: hidden; }
body.ybh-exp-live .ybh-lbar i { display: block; height: 100%; width: 0%; background: var(--ybh-accent); transition: width .25s; }
body.ybh-exp-live .ybh-lpct { font-size: 11px; letter-spacing: .3em; color: var(--ybh-ink-dim); }

/* ---------- LIGHT (white) page — flip the chrome to dark (live only) ---------- */
body.ybh-exp-live .ybh-exp.is-light .ybh-stage::before,
body.ybh-exp-live .ybh-exp.is-light .ybh-stage::after { opacity: 0; }
body.ybh-exp-live .ybh-exp.is-light .ybh-topbar { color: #0a0a0a; text-shadow: none; }
body.ybh-exp-live .ybh-exp.is-light .ybh-mark { filter: invert(1); }
body.ybh-exp-live .ybh-exp.is-light .ybh-navmeta a { color: #0a0a0a; }
body.ybh-exp-live .ybh-exp.is-light .ybh-navmeta a:hover { color: #0a0a0a; }
body.ybh-exp-live .ybh-exp.is-light .ybh-corner { border-color: rgba(10,10,10,.28); }
body.ybh-exp-live .ybh-exp.is-light .ybh-edge { background: rgba(10,10,10,.28); }
body.ybh-exp-live .ybh-exp.is-light .ybh-counter { color: #0a0a0a; }
body.ybh-exp-live .ybh-exp.is-light .ybh-counter .ybh-tot { color: rgba(10,10,10,.5); }
body.ybh-exp-live .ybh-exp.is-light .ybh-scrollhint { color: #0a0a0a; text-shadow: none; }
body.ybh-exp-live .ybh-exp.is-light .ybh-mouse { border-color: rgba(10,10,10,.6); }
body.ybh-exp-live .ybh-exp.is-light .ybh-mouse::after { background: #0a0a0a; }
body.ybh-exp-live .ybh-exp.is-light .ybh-dot { color: rgba(10,10,10,.4); }
body.ybh-exp-live .ybh-exp.is-light .ybh-dot.on { color: #0a0a0a; }
body.ybh-exp-live .ybh-exp.is-light .ybh-dot .bar { background: rgba(10,10,10,.2); }
body.ybh-exp-live .ybh-exp.is-light .ybh-dot .bar i { background: #0a0a0a; }

/* ============================================================
 * RESPONSIVE / MOBILE — precise: no cut text, images, or dead elements
 * ========================================================== */
@media (max-width: 680px) {
	.ybh-subtitle { font-size: 15px; }              /* mobile keeps the smaller subtitle */
	/* sensible mobile defaults so text never overlaps the rail/counter (all overridable by the Style controls) */
	.ybh-exp { --ybh-rail-right: 8px; --ybh-rail-bar-w: 20px; --ybh-counter-size: 34px; }
	body.ybh-exp-live .ybh-navmeta { display: none; }   /* inline menu → replaced by the hamburger */
	body.ybh-exp-live .ybh-burger { display: block; }   /* show the hamburger on mobile */
	body.ybh-exp-live .ybh-title { padding: 0 42px; }   /* keep centred text clear of the rail + counter */
	/* keep the Scroll hint + its animated mouse visible on mobile too (bottom-right) */
	body.ybh-exp-live .ybh-scrollhint { display: flex; }
}
@media (max-width: 680px) {
	/* stacked fallback on mobile: comfortable padding, readable */
	.ybh-title { padding: clamp(64px,10vh,90px) 20px; }
	.ybh-navmeta { gap: 16px; font-size: 10px; }
}
/* stacked fallback (editor / no-JS) uses the portrait poster on mobile */
@media (max-width: 768px) {
	.ybh-title { background-image: var(--ybh-poster-m, var(--ybh-poster)); }
}
/* the hamburger is MOBILE-ONLY — force it off on desktop (≥681px), whatever the theme/cache does */
@media (min-width: 681px) {
	.ybh-burger, body.ybh-exp-live .ybh-burger, .ybh-exp .ybh-burger { display: none !important; }
}