/* Kahani Food Menu — front end.

   Rules stay scoped under .km: theme kits style every <a>, <button> and <h3>
   on the page, and a bare class loses to `.elementor-kit-7 button`. */

/* ---------- palettes ----------
   Dark is the default. Light is for a menu placed on a cream or white
   section, where the dark palette would be cream text on cream. */
.km{
	--km-accent:#B5462F;
	--km-cream:#EDE5D8;
	--km-text:#B9B2A7;
	--km-muted:#8C867D;
	--km-line:rgba(237,229,216,.12);
	--km-lead:rgba(237,229,216,.22);
	--km-bar-bg:rgba(19,19,19,.96);

	--km-col-gap:56px;
	--km-row-gap:52px;
	--km-chapter-gap:100px;
	--km-dish-pad:15px;
	--km-sticky-top:80px;
	--km-e:cubic-bezier(.19,1,.22,1);

	--km-serif:var(--e-global-typography-primary-font-family,"Cormorant Garamond"),"Cormorant Garamond",Georgia,"Times New Roman",serif;
	--km-cur-font:"Hind Siliguri","Noto Sans Bengali","Kohinoor Bangla","Nirmala UI","Vrinda",system-ui,sans-serif;

	position:relative;
	container:km / inline-size;
	font-family:var(--e-global-typography-text-font-family,inherit);
	color:var(--km-text);
	-webkit-text-size-adjust:100%;
}
.km.km--light{
	--km-accent:#A33D28;
	--km-cream:#1C1A17;
	--km-text:#4A4540;
	--km-muted:#6E675E;
	--km-line:rgba(28,26,23,.12);
	--km-lead:rgba(28,26,23,.24);
	--km-bar-bg:rgba(246,241,234,.96);
}
@media(max-width:1024px){.km{--km-col-gap:40px;--km-row-gap:44px;--km-chapter-gap:80px;--km-sticky-top:70px}}
@media(max-width:620px){.km{--km-row-gap:38px;--km-chapter-gap:64px;--km-dish-pad:16px;--km-sticky-top:64px}}

/* Layout follows the width the menu actually has, not the screen: a menu
   in a narrow column on a desktop gets the phone layout, not three squashed
   columns. (Media queries above stay as the fallback for old browsers.) */

.km *,.km *::before,.km *::after{box-sizing:border-box}

/* ---------- filter bar ---------- */
.km .km__filters{
	position:relative;z-index:30;
	margin:0 0 clamp(32px,4vw,56px);
	border-block:1px solid var(--km-line);
	transition:background-color .3s var(--km-e),box-shadow .3s var(--km-e);
}
.km.km--sticky .km__filters{position:sticky;top:var(--km-sticky-top)}
.admin-bar .km.km--sticky .km__filters{top:calc(var(--km-sticky-top) + 32px)}
@media(max-width:782px){.admin-bar .km.km--sticky .km__filters{top:calc(var(--km-sticky-top) + 46px)}}
@media(max-width:600px){.admin-bar .km.km--sticky .km__filters{top:var(--km-sticky-top)}}

/* Once it is stuck the bar needs a floor, or dish names scroll through the
   tabs. The shadow runs the colour edge to edge without widening the page. */
.km .km__filters.is-stuck{
	background:var(--km-bar-bg);
	box-shadow:0 0 0 100vmax var(--km-bar-bg);
	clip-path:inset(0 -100vmax);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}

.km .km__tabs{
	display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;
	scrollbar-width:none;-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;
}
.km .km__tabs::-webkit-scrollbar{display:none}

/* Tabs that run off the edge fade out, so it reads as "swipe for more"
   rather than a word chopped in half. JS says which edges have more. */
.km .km__filters.has-more-end .km__tabs{
	-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
	        mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
}
.km .km__filters.has-more-start .km__tabs{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);
	        mask-image:linear-gradient(90deg,transparent,#000 44px);
}
.km .km__filters.has-more-start.has-more-end .km__tabs{
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
}

.km .km__tab{
	position:relative;flex:none;scroll-snap-align:start;
	display:inline-flex;align-items:center;min-height:52px;
	padding:0 16px;margin:0;
	background:none;border:0;border-radius:0;box-shadow:none;outline-offset:-3px;cursor:pointer;
	font-family:inherit;font-size:11px;font-weight:600;letter-spacing:2.2px;
	text-transform:uppercase;color:var(--km-muted);white-space:nowrap;line-height:1;
	transition:color .3s var(--km-e);
	-webkit-tap-highlight-color:transparent;
}
.km .km__tab:first-child{padding-left:0}
.km .km__tab::after{
	content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;
	background:var(--km-accent);transform:scaleX(0);transform-origin:left;
	transition:transform .45s var(--km-e);
}
.km .km__tab:first-child::after{left:0}
.km .km__tab:hover,.km .km__tab:focus{background:none;color:var(--km-cream)}
.km .km__tab.is-on{color:var(--km-cream);background:none}
.km .km__tab.is-on::after{transform:scaleX(1)}
.km .km__tab:focus-visible{outline:1px solid var(--km-accent)}

/* ---------- chapters ----------
   Gap on the wrapper, not a margin on the chapter: a hidden chapter then
   leaves no hole behind when the filter is used. */
.km .km__chapters{display:flex;flex-direction:column;gap:var(--km-chapter-gap)}
.km .km__chapter{scroll-margin-top:calc(var(--km-sticky-top) + 70px)}
.km .km__chapter[hidden]{display:none}

.km .km__head{
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30ch);
	gap:clamp(20px,4vw,56px);align-items:end;
	padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--km-line);
}
.km .km__eyebrow{
	margin:0;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:2.6px;
	text-transform:uppercase;color:var(--km-accent);line-height:1.4;
}
.km .km__title{
	margin:12px 0 0;padding:0;
	font-family:var(--km-serif);font-weight:400;
	font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.02;letter-spacing:-.01em;
	text-transform:none;color:var(--km-cream);
}
.km .km__intro{
	margin:0 0 6px;font-family:inherit;font-size:14px;line-height:1.75;color:var(--km-muted);
}

/* ---------- the grid ---------- */
.km .km__groups{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
	gap:var(--km-row-gap) var(--km-col-gap);
	padding:clamp(28px,4vw,46px) 0 0;
}

.km .km__group{min-width:0}
.km .km__course{
	margin:0 0 4px;padding:0 0 12px;
	border-bottom:1px solid var(--km-line);
	font-family:inherit;font-size:11px;font-weight:600;letter-spacing:2.6px;
	text-transform:uppercase;color:var(--km-text);line-height:1.4;
}

/* ---------- one dish ---------- */
.km .km__dish{
	padding:var(--km-dish-pad) 0 calc(var(--km-dish-pad) - 1px);
	border-bottom:1px solid var(--km-line);
}
.km .km__group .km__dish:last-child{border-bottom:0}

.km .km__dish-top{display:flex;align-items:baseline;gap:10px}
.km .km__name{
	min-width:0;
	font-family:var(--km-serif);font-weight:500;
	font-size:20px;line-height:1.25;color:var(--km-cream);
	overflow-wrap:anywhere;
}
/* the rule that runs from the name to the price */
.km .km__lead{flex:1 1 16px;min-width:16px;height:1px;background:var(--km-lead);transform:translateY(-4px)}
.km .km__price{
	flex:none;display:inline-flex;align-items:baseline;gap:1px;
	font-family:inherit;font-size:14px;font-weight:500;
	color:var(--km-cream);white-space:nowrap;letter-spacing:.2px;
	font-variant-numeric:tabular-nums lining-nums;
}
.km .km__cur{
	font-family:var(--km-cur-font);font-size:1.15em;font-weight:500;line-height:1;
	margin-right:2px;
}
.km .km__price .km__cur:last-child{margin:0 0 0 2px}

.km .km__dish-bot{display:flex;align-items:center;gap:16px;margin-top:6px}
.km .km__desc{flex:1;min-width:0;margin:0;font-family:inherit;font-size:13.5px;line-height:1.6;color:var(--km-muted)}

.km .km__order{
	flex:none;margin-left:auto;
	display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 2px 0 12px;
	background:none;border:0;border-radius:0;box-shadow:none;text-decoration:none;
	font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:2px;
	text-transform:uppercase;color:var(--km-muted);line-height:1;
	transition:color .3s var(--km-e);
	-webkit-tap-highlight-color:transparent;
}
.km .km__plus{font-size:15px;font-weight:400;letter-spacing:0;line-height:1;transition:transform .4s var(--km-e)}
.km .km__order:hover,.km .km__order:focus{color:var(--km-accent);background:none;text-decoration:none}
.km .km__order:hover .km__plus{transform:rotate(90deg)}
@media(hover:hover){.km .km__dish:hover .km__order{color:var(--km-accent)}}
/* Touch has no hover, so the button has to look like a button from the start. */
@media(hover:none){.km .km__order{color:var(--km-accent)}}

.km .km__badge{
	display:inline-block;margin:0 0 0 6px;padding:4px 7px 3px;vertical-align:3px;
	border:1px solid var(--km-accent);border-radius:0;color:var(--km-accent);background:none;
	font-family:var(--e-global-typography-text-font-family,inherit);font-size:8.5px;font-weight:600;letter-spacing:1.4px;
	text-transform:uppercase;line-height:1;white-space:nowrap;
}

/* sold out stays on the menu, just stepped back */
.km .km__dish.is-sold-out{opacity:.5}
.km .km__dish.is-sold-out .km__name{text-decoration:line-through;text-decoration-thickness:1px}
.km .km__badge--out{border-color:var(--km-muted);color:var(--km-muted)}

/* ---------- tablet & phone ---------- */
@supports not (container-type:inline-size){
@media(max-width:780px){
	.km .km__head{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
	.km .km__intro{max-width:46ch}
}
@media(max-width:620px){
	.km .km__filters{margin-bottom:34px}
	.km .km__tab{min-height:50px;padding:0 13px;font-size:10.5px;letter-spacing:2px}
	.km .km__tab::after{left:13px;right:13px}
	.km .km__title{font-size:clamp(2.2rem,10.5vw,2.9rem)}
	.km .km__intro{font-size:14px;line-height:1.7}
	.km .km__groups{padding-top:30px}
	.km .km__name{font-size:18.5px}
	.km .km__price{font-size:14.5px}
	.km .km__desc{font-size:13.5px}
	.km .km__dish-bot{align-items:flex-end;gap:12px}
	/* A real tap target: 36px tall, outlined, never smaller than a thumb. */
	.km .km__order{
		min-height:34px;padding:0 11px;border:1px solid var(--km-line);
		color:var(--km-accent);font-size:10px;letter-spacing:1.8px;
	}
	.km .km__order:hover,.km .km__order:focus{border-color:var(--km-accent)}
}

}
@container km (max-width:700px){
	.km .km__head{grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
	.km .km__intro{max-width:46ch}
}
@container km (max-width:560px){
	.km .km__filters{margin-bottom:34px}
	.km .km__tab{min-height:50px;padding:0 13px;font-size:10.5px;letter-spacing:2px}
	.km .km__tab::after{left:13px;right:13px}
	.km .km__title{font-size:clamp(2.2rem,10.5vw,2.9rem)}
	.km .km__intro{font-size:14px;line-height:1.7}
	.km .km__groups{padding-top:30px}
	.km .km__name{font-size:18.5px}
	.km .km__price{font-size:14.5px}
	.km .km__desc{font-size:13.5px}
	.km .km__dish-bot{align-items:flex-end;gap:12px}
	/* A real tap target: 36px tall, outlined, never smaller than a thumb. */
	.km .km__order{
		min-height:34px;padding:0 11px;border:1px solid var(--km-line);
		color:var(--km-accent);font-size:10px;letter-spacing:1.8px;
	}
	.km .km__order:hover,.km .km__order:focus{border-color:var(--km-accent)}
}

/* ---------- reveal ----------
   Content is only hidden once the script has marked the menu as running, so
   a slow, blocked or deferred script can never leave a blank menu. */
.km.km--js .km-rev{opacity:0;transform:translateY(16px)}
.km.km--js .km-rev.is-in{animation:km-rise .9s var(--km-e) forwards}
@keyframes km-rise{to{opacity:1;transform:none}}

/* ---------- print ----------
   Drop the interface and let the page be the printable menu. */
@media print{
	.km .km__filters,.km .km__order{display:none !important}
	.km,.km.km--light{--km-cream:#111;--km-text:#333;--km-muted:#555;
		--km-line:rgba(0,0,0,.18);--km-lead:rgba(0,0,0,.25);--km-accent:#8a3522}
	.km .km__chapter[hidden]{display:block !important}
	.km .km__chapters{gap:40px}
	.km .km__group{break-inside:avoid}
	.km .km-rev,.km.km--js .km-rev{opacity:1 !important;transform:none !important;animation:none !important}
}

@media (prefers-reduced-motion:reduce){
	.km *,.km *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
	.km.km--js .km-rev{opacity:1;transform:none}
}