/* =================================================================
   Restaurant Display Menu — front-end styles (theme-agnostic)

   Design principles:
   - No hard theme dependency. Works with any WP theme (block themes
     like Twenty Twenty-Four, classic themes like Avada).
   - Uses `color: inherit` where the theme's text color should win.
   - Clean neutral palette by default; override any `--jb-*` token
     via Custom CSS or the plugin settings page to retint.
   - Mobile-first: 44px+ tap targets, safe-area padding on notch
     phones, prefers-reduced-motion respected.
   ================================================================= */

.jb-menu{
	/* --- Neutral palette (override via Custom CSS to retint) --- */
	--jb-bg:           transparent;    /* inherit page bg */
	--jb-card:         #FFFFFF;        /* card surface */
	--jb-line:         #E8E4DE;        /* borders & dividers */
	--jb-ink:          #1F1A16;        /* primary text */
	--jb-muted:        rgba(31, 26, 22, .62);
	--jb-accent:       #B8865A;        /* highlight / active */
	--jb-hover:        #F6F2EC;        /* subtle hover surface */

	/* --- Layout knobs (overridable per-shortcode via inline style) --- */
	--jb-pad-x:        24px;
	--jb-pad-y:        50px;
	--jb-max-width:    none;
	--jb-gap:          20px;

	/* --- Description typography knobs --- */
	--jb-desc-size:    13.5px;
	--jb-desc-lh:      1.55;

	--jb-radius:       18px;
	--jb-shadow:       0 4px 14px rgba(31, 26, 22, .06);
	--jb-shadow-hover: 0 12px 28px rgba(31, 26, 22, .12);

	/* --- Mobile-first restaurant banner --- */
	--jb-logo-size:     clamp(128px, 13vw, 168px);
	--jb-logo-mobile:   112px;
	--jb-banner-radius: 0;

	color: var(--jb-ink);
	box-sizing: border-box;
	width: 100%;
	background: var(--jb-bg);

	/* Safe-area padding: notch phones need this on portrait */
	padding-left:  env(safe-area-inset-left,  0);
	padding-right: env(safe-area-inset-right, 0);
}
.jb-menu *,
.jb-menu *::before,
.jb-menu *::after{ box-sizing: border-box; }

/* ---------- Restaurant banner / hero ---------- */
.jb-menu .jb-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	padding: 58px var(--jb-pad-x) 38px;
	margin: 0;
	/*
	 * A real base colour remains visible when --jb-page-bg is transparent.
	 * A non-transparent saved page colour is layered over that base.
	 */
	background-color: #f6f2ec !important;
	background-image:
		linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
		linear-gradient(
			var(--jb-page-bg, transparent),
			var(--jb-page-bg, transparent)
		) !important;
	border: 0;
	border-bottom: 1px solid var(--jb-line);
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(31, 26, 22, .09);
}

/* Strong accent line makes the banner visibly distinct. */
.jb-menu .jb-hero::before{
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--jb-page-accent, var(--jb-accent));
	z-index: -1;
}

/* Soft background detail, kept behind the logo and text. */
.jb-menu .jb-hero::after{
	content: "";
	position: absolute;
	z-index: -2;
	width: 360px;
	height: 360px;
	inset-block-start: -230px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255,255,255,.72) 0%,
		rgba(255,255,255,.28) 48%,
		rgba(255,255,255,0) 72%
	);
	pointer-events: none;
}

/*
 * Circular restaurant logo.
 *
 * The inline logo-width setting can still cap the width because max-width
 * is not overridden here. The square aspect ratio keeps it circular.
 */
.jb-menu .jb-restaurant-logo{
	/*
	 * _jb_logo_width is emitted as --jb-page-logo-size by PHP.
	 * Width, height and max-width use the same value, so a rectangular source
	 * image is always displayed inside a genuinely circular frame.
	 */
	--jb-rendered-logo-size: var(--jb-page-logo-size, var(--jb-logo-size));

	display: block !important;
	flex: 0 0 auto !important;
	width: var(--jb-rendered-logo-size) !important;
	height: var(--jb-rendered-logo-size) !important;
	min-width: var(--jb-rendered-logo-size) !important;
	max-width: var(--jb-rendered-logo-size) !important;
	min-height: var(--jb-rendered-logo-size) !important;
	max-height: var(--jb-rendered-logo-size) !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center !important;
	overflow: hidden !important;
	clip-path: circle(50% at 50% 50%);
	margin: 0 auto 20px !important;
	padding: 4px !important;
	background: var(--jb-page-card, var(--jb-card)) !important;
	/*
	 * The ring uses the same customized accent colour as the line at the
	 * top of the banner.
	 */
	border: 3px solid var(--jb-page-accent, var(--jb-accent)) !important;
	border-radius: 50% !important;
	box-shadow:
		0 0 0 2px color-mix(
			in srgb,
			var(--jb-page-accent, var(--jb-accent)) 22%,
			transparent
		),
		0 12px 28px rgba(31, 26, 22, .17) !important;
}

/* Optional small text above the restaurant name. */
.jb-menu .jb-hero-sub{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	margin: 0 0 12px;
	padding: 6px 12px;
	color: var(--jb-page-heading, var(--jb-ink));
	background: rgba(255,255,255,.58);
	border: 1px solid rgba(31,26,22,.10);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/*
 * Existing restaurant settings remain authoritative:
 * --jb-page-title-size controls size
 * --jb-page-heading controls colour
 * --jb-page-heading-font controls font
 */
.jb-menu .jb-hero-title{
	width: 100%;
	max-width: 880px;
	margin: 0 auto 10px;
	padding: 0;
	color: var(--jb-page-heading, var(--jb-ink));
	font-family: var(--jb-page-heading-font, inherit);
	/*
	 * The saved title-size setting remains active, but the banner uses a
	 * restrained display scale so large saved values do not dominate desktop.
	 */
	font-size: clamp(
		26px,
		calc(var(--jb-page-title-size, 52px) * .68),
		46px
	);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-align: center;
	text-wrap: balance;
}

.jb-menu .jb-hero-tag{
	width: 100%;
	max-width: 680px;
	margin: 0 auto;
	padding: 0;
	color: var(--jb-page-text, var(--jb-ink));
	font-family: var(--jb-page-font, inherit);
	font-size: clamp(14px, 1.8vw, 18px);
	font-style: normal;
	font-weight: 400;
	line-height: 1.58;
	text-align: center;
	opacity: .72;
	text-wrap: balance;
}

/* ---------- Category navigation: directly beneath the banner ---------- */
.jb-menu .jb-nav-wrap{
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	margin: -1px 0 0;
	padding: 8px 0;
	background: var(--jb-page-card, var(--jb-card));
	border-top: 1px solid var(--jb-line);
	border-bottom: 1px solid var(--jb-line);
	box-shadow: 0 5px 18px rgba(31, 26, 22, .07);
}
.jb-menu ul.jb-nav{
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 8px !important;
	max-width: 100%;
	margin: 0 auto !important;
	padding: 4px var(--jb-pad-x) !important;
	overflow-x: auto;
	list-style: none !important;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.jb-menu ul.jb-nav::-webkit-scrollbar{ display: none; }
.jb-menu ul.jb-nav li{
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	scroll-snap-align: start;
	background: none !important;
}
.jb-menu ul.jb-nav li::before,
.jb-menu ul.jb-nav li::marker{
	content: none !important;
	display: none !important;
}
.jb-menu ul.jb-nav li a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 17px;
	color: var(--jb-page-heading, var(--jb-ink));
	background: var(--jb-hover);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none !important;
	white-space: nowrap;
	transition:
		background .18s ease,
		color .18s ease,
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease;
}
.jb-menu ul.jb-nav li a.is-active{
	color: var(--jb-page-card, var(--jb-card));
	background: var(--jb-page-heading, var(--jb-ink));
	border-color: var(--jb-page-heading, var(--jb-ink));
	box-shadow: 0 5px 14px rgba(31, 26, 22, .16);
}

/*
 * Focus receives a ring rather than the selected fill. This prevents a
 * previously tapped category from looking selected while scroll-spy activates
 * the category currently in view.
 */
.jb-menu ul.jb-nav li a:focus{
	outline: none;
}
.jb-menu ul.jb-nav li a:focus-visible{
	color: var(--jb-page-heading, var(--jb-ink));
	background: var(--jb-hover);
	border-color: var(--jb-page-accent, var(--jb-accent));
	box-shadow: 0 0 0 3px rgba(184, 134, 90, .28);
}

/* Hover styling is only used on devices that genuinely have a mouse/trackpad. */
@media (hover: hover) and (pointer: fine){
	.jb-menu ul.jb-nav li a:hover:not(.is-active){
		color: var(--jb-page-heading, var(--jb-ink));
		background: color-mix(in srgb, var(--jb-hover) 72%, var(--jb-page-accent, var(--jb-accent)));
		border-color: color-mix(in srgb, var(--jb-page-accent, var(--jb-accent)) 42%, transparent);
		box-shadow: 0 4px 12px rgba(31, 26, 22, .08);
	}
}

.jb-menu ul.jb-nav li a:active{
	transform: scale(.97);
}

/* Reduce the empty space before the first category. */
.jb-menu .jb-nav-wrap + .jb-section{
	padding-top: 30px;
}

/* ---------- Section ---------- */
.jb-menu .jb-section{
	padding: var(--jb-pad-y) var(--jb-pad-x);
	background: transparent;
	scroll-margin-top: 72px;
}
.jb-menu .jb-section-title{
	text-align: center;
	color: var(--jb-ink);
	font-size: clamp(24px, 4vw, 38px);
	margin: 0 0 8px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.2px;
}
.jb-menu .jb-section-title::after{
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--jb-ink);
	opacity: .22;
	margin: 14px auto 26px;
	border-radius: 2px;
}

/* ---------- Grid ---------- */
.jb-menu .jb-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--jb-gap);
	max-width: var(--jb-max-width);
	margin: 0 auto;
	padding: 0;
}

/* ---------- Card ---------- */
.jb-menu .jb-card{
	background: var(--jb-card);
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	box-shadow: var(--jb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	margin: 0;
	padding: 0;
}
.jb-menu .jb-card:hover{
	transform: translateY(-3px);
	box-shadow: var(--jb-shadow-hover);
	border-color: var(--jb-ink);
}
.jb-menu .jb-card__img-wrap{
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--jb-line);
}
.jb-menu .jb-card-img{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform .4s ease;
	max-width: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.jb-menu .jb-card:hover .jb-card-img{ transform: scale(1.04); }
.jb-menu .jb-card-img--placeholder{
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
		var(--jb-line);
}
.jb-menu .jb-card__body{
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.jb-menu .jb-card__title{
	font-size: 17px;
	font-weight: 700;
	color: var(--jb-ink);
	margin: 0;
	padding: 0;
	line-height: 1.28;
	letter-spacing: -.2px;
}
.jb-menu .jb-card__desc{
	font-size: var(--jb-desc-size);
	line-height: var(--jb-desc-lh);
	color: var(--jb-muted);
	margin: 0;
	padding: 0;
	flex: 1;
}

/* --- Smooth gradient separator above the price --- */
.jb-menu .jb-card__foot{
	position: relative;
	/* Keep the price at the bottom, including when no description exists. */
	margin-top: auto;
	padding-top: 14px;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.jb-menu .jb-card__foot::before{
	content: "";
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--jb-ink) 30%,
		var(--jb-ink) 70%,
		transparent 100%
	);
	opacity: .16;
}
.jb-menu .jb-price{
	font-weight: 700;
	color: var(--jb-accent);
	font-size: 16px;
	letter-spacing: .2px;
	line-height: 1;
}

/* ---------- Empty state ---------- */
.jb-menu .jb-empty{
	text-align: center;
	padding: 60px 20px;
	color: var(--jb-muted);
	font-size: 15px;
}

/* ---------- Smooth scroll ---------- */
html{ scroll-behavior: smooth; }

/* Respect the user's motion preference — cut animations entirely */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.jb-menu *,
	.jb-menu *::before,
	.jb-menu *::after{
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.jb-menu .jb-card:hover{ transform: none; }
	.jb-menu .jb-card:hover .jb-card-img{ transform: none; }
}

/* ---------- Tablet (≤ 820px) ---------- */
@media (max-width: 820px){
	.jb-menu{
		--jb-pad-x: 16px;
		--jb-pad-y: 40px;
		--jb-gap: 14px;
	}
	.jb-menu .jb-grid{
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
	.jb-menu .jb-card__body{ padding: 14px 16px 16px; }
	.jb-menu .jb-card__title{ font-size: 15.5px; }
	.jb-menu .jb-card__desc{
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.jb-menu .jb-price{ font-size: 15.5px; }
}

/* ---------- Phone (≤ 480px) ---------- */
@media (max-width: 480px){
	.jb-menu{
		--jb-pad-x: 12px;
		--jb-pad-y: 32px;
		--jb-gap: 10px;
	}
	.jb-menu .jb-grid{
		grid-template-columns: repeat(2, 1fr);
	}
	.jb-menu .jb-card__body{
		padding: 10px 8px 11px;
		gap: 6px;
		min-height: 0;
	}
	.jb-menu .jb-card__title{ font-size: 14.25px; letter-spacing: -.1px; }
	.jb-menu .jb-card__desc{
		/* Compact mobile description with a clean ellipsis when too long. */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-size: 11.5px;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}
	.jb-menu .jb-card__foot{ padding-top: 10px; }
	.jb-menu .jb-card__foot::before{ left: 6%; right: 6%; }
	.jb-menu .jb-price{ font-size: 14.5px; }
	.jb-menu ul.jb-nav{ padding: 4px 12px !important; gap: 6px !important; }
	.jb-menu ul.jb-nav li a{ padding: 8px 14px; font-size: 13px; min-height: 40px; }
	.jb-menu .jb-section{ padding: 32px 12px 24px; }
	.jb-menu .jb-section-title{ font-size: 22px; }
	.jb-menu .jb-section-title::after{ margin: 12px auto 20px; }
}

/* ---------- Very narrow (≤ 340px, older iPhone SE etc.) ---------- */
@media (max-width: 340px){
	.jb-menu .jb-card__body{
		padding: 9px 7px 10px;
		min-height: 0;
	}
	.jb-menu .jb-card__title{ font-size: 13.5px; }
	.jb-menu .jb-card__desc{ font-size: 11.5px; }
}

/* ---------- Built-in English / Arabic switch ---------- */
.jb-menu .jb-language-switcher{
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: rgba(255,255,255,.82);
	border: 1px solid rgba(31,26,22,.12);
	border-radius: 999px;
	box-shadow: 0 7px 20px rgba(31,26,22,.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.jb-menu .jb-lang-button{
	appearance: none;
	min-height: 34px;
	padding: 7px 12px;
	color: var(--jb-page-heading, var(--jb-ink));
	background: transparent;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.jb-menu .jb-lang-button:hover,
.jb-menu .jb-lang-button:focus-visible{
	background: var(--jb-hover);
	outline: none;
}
.jb-menu .jb-lang-button.is-active{
	color: var(--jb-page-card, var(--jb-card));
	background: var(--jb-page-heading, var(--jb-ink));
	box-shadow: 0 3px 10px rgba(31,26,22,.16);
}

.jb-menu[dir="rtl"]{
	text-align: right;
}
.jb-menu[dir="rtl"] .jb-hero{
	direction: rtl;
}
.jb-menu[dir="rtl"] .jb-nav{
	direction: rtl;
}
.jb-menu[dir="rtl"] .jb-card__body,
.jb-menu[dir="rtl"] .jb-card__foot{
	text-align: right;
}
.jb-menu[dir="rtl"] .jb-card__foot{
	justify-content: flex-start;
}
.jb-menu[dir="rtl"] .jb-section-title{
	text-align: center;
}
.jb-restaurant-page[dir="rtl"] .jb-restaurant-copy{
	text-align: right;
}


/* ---------- Desktop and tablet banner alignment ---------- */
@media (min-width: 481px){
	.jb-menu .jb-hero{
		padding-top: clamp(58px, 6vw, 78px);
		padding-bottom: clamp(34px, 4vw, 48px);
	}
	.jb-menu .jb-restaurant-logo{
		--jb-rendered-logo-size: var(--jb-page-logo-size, var(--jb-logo-size));
		margin-bottom: 20px !important;
	}
	.jb-menu .jb-hero-title{
		max-width: 900px;
	}
	.jb-menu .jb-hero-tag{
		max-width: 720px;
	}
	.jb-menu .jb-nav-wrap{
		margin-top: 0;
	}
}

/* ---------- Mobile-first banner adjustments ---------- */
@media (max-width: 480px){
	.jb-menu{
		--jb-banner-radius: 0;
	}
	.jb-menu .jb-hero{
		min-height: 0;
		padding: 56px 16px 26px;
	}
	.jb-menu .jb-hero::before{
		height: 5px;
	}
	.jb-menu .jb-hero::after{
		width: 270px;
		height: 270px;
		inset-block-start: -174px;
	}
	.jb-menu .jb-language-switcher{
		inset-block-start: 11px;
		inset-inline-end: 11px;
	}
	.jb-menu .jb-lang-button{
		min-height: 32px;
		padding: 7px 10px;
		font-size: 11.5px;
	}
	.jb-menu .jb-restaurant-logo{
		--jb-rendered-logo-size:
			min(var(--jb-page-logo-size, var(--jb-logo-mobile)), var(--jb-logo-mobile));
		margin-bottom: 15px !important;
		padding: 3px !important;
		border-width: 2px !important;
		box-shadow:
			0 0 0 2px color-mix(
				in srgb,
				var(--jb-page-accent, var(--jb-accent)) 20%,
				transparent
			),
			0 10px 22px rgba(31,26,22,.16) !important;
	}
	.jb-menu .jb-hero-sub{
		margin-bottom: 9px;
		padding: 5px 10px;
		font-size: 10px;
	}
	.jb-menu .jb-hero-title{
		/*
		 * Slightly smaller on phones while remaining linked to the saved
		 * restaurant title-size setting.
		 */
		font-size: clamp(
			23px,
			calc(var(--jb-page-title-size, 36px) * .82),
			31px
		);
		line-height: 1.1;
		margin-bottom: 8px;
	}
	.jb-menu .jb-hero-tag{
		max-width: 34rem;
		font-size: 14px;
		line-height: 1.5;
	}
	.jb-menu .jb-nav-wrap{
		padding: 7px 0;
	}
	.jb-menu ul.jb-nav{
		gap: 6px !important;
		padding: 3px 12px !important;
	}
	.jb-menu ul.jb-nav li a{
		min-height: 38px;
		padding: 8px 13px;
		font-size: 12.5px;
	}
	.jb-menu .jb-nav-wrap + .jb-section{
		padding-top: 22px;
	}
}

@media (max-width: 340px){
	.jb-menu{
		--jb-logo-mobile: 98px;
	}
	.jb-menu .jb-hero{
		padding-inline: 12px;
	}
}


@supports not (color: color-mix(in srgb, black 50%, white)){
	.jb-menu .jb-restaurant-logo{
		box-shadow:
			0 0 0 2px var(--jb-page-accent, var(--jb-accent)),
			0 12px 28px rgba(31, 26, 22, .17) !important;
	}
	@media (max-width: 480px){
		.jb-menu .jb-restaurant-logo{
			box-shadow:
				0 0 0 1px var(--jb-page-accent, var(--jb-accent)),
				0 10px 22px rgba(31,26,22,.16) !important;
		}
	}
}

/* ================================================================
   Final hero enforcement
   Keep this block at the very end when pasting into Custom CSS.
   ================================================================ */
.jb-menu > header.jb-hero{
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background-color: #f6f2ec !important;
	background-image:
		linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
		linear-gradient(
			var(--jb-page-bg, transparent),
			var(--jb-page-bg, transparent)
		) !important;
}

.jb-menu > header.jb-hero > img.jb-restaurant-logo{
	display: block !important;
	width: var(--jb-rendered-logo-size) !important;
	height: var(--jb-rendered-logo-size) !important;
	min-width: var(--jb-rendered-logo-size) !important;
	max-width: var(--jb-rendered-logo-size) !important;
	min-height: var(--jb-rendered-logo-size) !important;
	max-height: var(--jb-rendered-logo-size) !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 50% !important;
	clip-path: circle(50% at 50% 50%);
	margin-inline: auto !important;
}