/* =================================================================
   Restaurant Display Menu for Avada — front-end styles
   - Inherits Avada's --awb-color-1..8 palette and body typography.
   - Layout knobs (padding / max-width / gap) come from inline custom
     properties set by the shortcode handler.
   - Single page background — no alternating section colors.
   ================================================================= */

.jb-menu{
	/* --- Avada palette → local roles (fallbacks for non-Avada setups) --- */
	--jb-bg:           transparent;                /* inherit page bg     */
	--jb-card:         var(--awb-color1, #ffffff); /* card surface        */
	--jb-line:         var(--awb-color3, #e1d4c3); /* dividers / borders  */
	--jb-ink:          var(--awb-color6, #352618); /* primary text        */
	--jb-muted:        rgba(53, 38, 24, .68);
	--jb-accent:       var(--awb-color4, #ffdf81);

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

	/* --- Typography knobs for the card description --- */
	--jb-desc-size:    13.5px;
	--jb-desc-lh:      1.55;

	--jb-radius:       18px;
	--jb-shadow:       0 4px 14px rgba(53, 38, 24, .08);
	--jb-shadow-hover: 0 12px 28px rgba(53, 38, 24, .14);

	color: var(--jb-ink);
	box-sizing: border-box;
	width: 100%;
	background: var(--jb-bg);
}
.jb-menu *,
.jb-menu *::before,
.jb-menu *::after{ box-sizing: border-box; }

/* ---------- Hero ---------- */
.jb-menu .jb-hero{
	text-align: center;
	padding: var(--jb-pad-y) var(--jb-pad-x);
	background: transparent;
}
.jb-menu .jb-hero-sub{
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--jb-ink);
	opacity: .72;
	margin: 0 0 10px;
	font-weight: 600;
}
.jb-menu .jb-hero-title{
	color: var(--jb-ink);
	font-size: clamp(36px, 6vw, 68px);
	line-height: 1.05;
	margin: 0 0 12px;
	font-weight: 700;
}
.jb-menu .jb-hero-tag{
	font-style: italic;
	color: var(--jb-ink);
	opacity: .7;
	margin: 8px 0 0;
	font-size: clamp(15px, 2vw, 20px);
}

/* ---------- Sticky category nav ---------- */
.jb-menu .jb-nav-wrap{
	position: sticky;
	top: var(--awb-sticky-offset, 0);
	background: var(--jb-card);
	box-shadow: 0 2px 10px rgba(53, 38, 24, .06);
	z-index: 50;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid var(--jb-line);
	border-bottom: 1px solid var(--jb-line);
}
.jb-menu ul.jb-nav{
	list-style: none !important;
	margin: 0 auto !important;
	padding: 0 var(--jb-pad-x) !important;
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	max-width: 100%;
}
.jb-menu ul.jb-nav::-webkit-scrollbar{ display: none; }
.jb-menu ul.jb-nav li{
	flex: 0 0 auto !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !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-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--jb-line);
	color: var(--jb-ink);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	line-height: 1.2;
}
.jb-menu ul.jb-nav li a:hover,
.jb-menu ul.jb-nav li a:focus{
	background: var(--jb-ink);
	color: var(--jb-card);
	border-color: var(--jb-ink);
}

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

/* ---------- 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:
		linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%),
		var(--jb-line);
}
.jb-menu .jb-card__body{
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.jb-menu .jb-card__title{
	font-size: 18px;
	font-weight: 700;
	color: var(--jb-ink);
	margin: 0;
	padding: 0;
	line-height: 1.25;
	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 (replaces dotted line) --- */
.jb-menu .jb-card__foot{
	position: relative;
	margin-top: 8px;
	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: .18;
}
.jb-menu .jb-price{
	font-weight: 700;
	color: var(--jb-ink);
	font-size: 16.5px;
	letter-spacing: .2px;
	line-height: 1;
}

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

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

/* ---------- Tablet ---------- */
@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; }
	/* Keep the user-chosen desc font-size; just clamp to 3 lines on small screens. */
	.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 ---------- */
@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: 12px; gap: 8px; }
	.jb-menu .jb-card__title{ font-size: 14.5px; }
	.jb-menu .jb-card__foot{ padding-top: 12px; }
	.jb-menu .jb-card__foot::before{ left: 6%; right: 6%; }
	.jb-menu .jb-price{ font-size: 14.5px; }
	.jb-menu ul.jb-nav li a{ padding: 9px 14px; font-size: 13px; }
}