/* =========================================================
   Simla Indian Takeaway — Design Tokens
   Black:  #0d0b08   Charcoal: #201a14   Gold: #c9962c
   Gold Light: #e3b968   Cream: #faf6ee   Muted: #8a7f6d
   Display: Cinzel   Body: Jost   Wordmark: Hamlet Cicero
   ========================================================= */

@font-face {
	font-family: 'Hamlet Cicero';
	src: url('../fonts/Hamlet-Cicero12.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; }

:root {
	--c-black: #0d0b08;
	--c-charcoal: #201a14;
	--c-gold: #c9962c;
	--c-gold-light: #e3b968;
	--c-cream: #faf6ee;
	--c-muted: #8a7f6d;
	--c-white: #ffffff;
}

body {
	background: var(--c-cream);
	color: var(--c-charcoal);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

h1, h2, h3, h4 {
	font-family: 'Cinzel', serif;
	color: var(--c-black);
	line-height: 1.25;
	margin: 0 0 16px;
	font-weight: 600;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 16px; color: var(--c-charcoal); }

.eyebrow {
	font-family: 'Jost', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.78rem;
	color: var(--c-gold);
	font-weight: 500;
	margin-bottom: 10px;
}

.section { padding: 72px 0; }

/* Buttons */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 999px;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn-gold {
	background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold));
	color: var(--c-black);
	animation: simlaBtnGoldGlow 2.8s ease-in-out infinite;
}
.btn-gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(201,150,44,0.4);
}
@keyframes simlaBtnGoldGlow {
	0%, 100% { box-shadow: 0 2px 8px rgba(201,150,44,0.25); }
	50%      { box-shadow: 0 2px 8px rgba(201,150,44,0.25), 0 0 18px 3px rgba(201,150,44,0.5); }
}
.btn-outline {
	background: transparent;
	color: var(--c-black);
	border-color: var(--c-black);
}
.btn-outline:hover {
	background: var(--c-black);
	color: var(--c-gold-light);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(13,11,8,0.35);
}
.hero .btn-outline::before,
.menu-cta .btn-outline::before { background: linear-gradient(120deg, transparent, rgba(227,185,104,0.35), transparent); }
.btn-large { padding: 16px 40px; font-size: 1.05rem; }

.link-arrow {
	color: var(--c-black);
	font-weight: 500;
	border-bottom: 1px solid var(--c-gold);
	padding-bottom: 2px;
}
.link-arrow:hover { color: var(--c-gold); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	background: var(--c-black);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgba(201,150,44,0.35);
	transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}
.site-header.is-scrolled .header-inner {
	padding-top: 8px;
	padding-bottom: 8px;
}
.site-header.is-scrolled .header-logo-img {
	width: 36px;
	height: 36px;
}

/* Shared logo watermark — used on the header and on every page's
   dark hero band (.hero on Home, .page-hero on inner pages).
   No `position` set here on purpose — each host (.site-header is
   sticky, .hero and .page-hero set their own `position: relative`)
   already provides the positioning context, so this class only
   needs to clip the watermark to the host's actual box. */
.has-watermark {
	overflow: hidden;
}
.has-watermark::before {
	content: '';
	position: absolute;
	top: 50%;
	right: -30px;
	width: 480px;
	max-width: 60vw;
	height: 480px;
	transform: translateY(-50%);
	background-image: url('../images/simla-logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}
/* Inner-page heroes (Menu/About Us/Gallery/Contact Us/Order Now) centre
   their heading across the full width, so the watermark needs to sit
   further out toward the edge and stay modest, or it reads behind the
   text again. */
.page-hero.has-watermark::before {
	right: -60px;
	width: 300px;
	max-width: 34vw;
	height: 300px;
	opacity: 0.12;
}
/* The header is short and its nav sits on the left, so give it its
   own small, left-anchored watermark instead of the shared one —
   keeps it clear of both the nav links and the Order Online button. */
.site-header.has-watermark::before {
	left: 16px;
	right: auto;
	width: 260px;
	max-width: 36vw;
	height: 72px;
	opacity: 0.55;
}
.header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
	transition: padding 0.3s ease;
}
.header-left {
	/* Higher than .order-btn (z-index: 1) so that on mobile, where the
	   nav menu becomes a full-screen drawer nested inside this element,
	   the drawer's own high z-index isn't trumped by a same-level
	   sibling stacking context painting later in the DOM — which was
	   silently blocking taps on the menu links behind the call button. */
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
}
.header-logo-link { display: flex; align-items: center; flex-shrink: 0; }
.header-logo-img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: brightness(1.18) saturate(1.08);
	transition: width 0.3s ease, height 0.3s ease;
}
.order-btn { position: relative; z-index: 1; }

.nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 30px;
}
.nav-menu a {
	font-family: 'Jost', sans-serif;
	color: var(--c-cream);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	padding: 8px 0;
	border-bottom: 1px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}
.nav-menu a:hover,
.nav-menu li.current-menu-item a {
	color: var(--c-gold-light);
	border-color: var(--c-gold);
}

.mobile-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}
.hamburger-line { width: 24px; height: 2px; background: var(--c-gold-light); }

.order-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--c-gold);
	color: var(--c-black);
	padding: 10px 18px;
	border-radius: 999px;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: filter 0.2s;
	animation: simlaBtnGoldGlow 2.8s ease-in-out infinite;
}
.order-btn:hover { filter: brightness(1.1); }
.header-status-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--c-black);
	display: inline-block;
}
.header-status-dot.open { background: #2e7d32; }
.header-status-dot.soon { background: #b8860b; }
.header-status-dot.closed { background: #8a1f1f; }
.header-status-text-compact { display: none; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
	position: relative;
	background: radial-gradient(circle at 30% 20%, #1a140c 0%, var(--c-black) 65%);
	color: var(--c-cream);
	padding: 130px 0 110px;
	overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 720px; }
.hero .eyebrow { color: var(--c-gold-light); }
.hero-title {
	color: var(--c-cream);
	margin-bottom: 20px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}
.hero-title-main { color: var(--c-gold-light); }
.hero-title-accent { color: var(--c-cream); display: block; }
.hero-sub {
	font-family: 'Jost', sans-serif;
	font-size: 1.15rem;
	color: rgba(250,246,238,0.82);
	max-width: 520px;
}
.hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero .btn-outline { color: var(--c-cream); border-color: var(--c-gold); }
.hero .btn-outline:hover { background: var(--c-gold); color: var(--c-black); }

/* =========================================================
   HIGHLIGHTS
   ========================================================= */
.highlights-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.highlight-card {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 18px 10px;
	border: 1px solid rgba(201,150,44,0.4);
	border-radius: 16px;
	background: var(--c-white);
}

/* Starfield sparkle: small gold particles scattered across the box,
   gently twinkling and drifting — like the Framer "Starsfield"
   reference. Box shape, border and padding are untouched; this is
   purely a decorative overlay layer.
   Each "star" is a bright core plus a soft glow halo (two stops in
   the same gradient) so it actually reads against the white card
   background instead of disappearing into it. */
.highlight-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background-repeat: repeat;
	background-image:
		radial-gradient(circle, #fff 0 1px, var(--c-gold-light) 1px 2px, rgba(227,185,104,0.5) 2px 4px, transparent 5px) 8px 14px / 34px 34px,
		radial-gradient(circle, #fff 0 1px, var(--c-gold) 1px 2.2px, rgba(201,150,44,0.5) 2.2px 4.2px, transparent 5.2px) 22px 4px / 44px 44px,
		radial-gradient(circle, #fff 0 0.8px, var(--c-gold-light) 0.8px 1.8px, rgba(227,185,104,0.5) 1.8px 3.6px, transparent 4.6px) 4px 26px / 28px 28px,
		radial-gradient(circle, #fff 0 1px, var(--c-gold) 1px 2.2px, rgba(201,150,44,0.5) 2.2px 4.2px, transparent 5.2px) 34px 20px / 40px 40px;
	opacity: 0.9;
	pointer-events: none;
	z-index: 1;
	animation: simlaStarDrift 16s linear infinite, simlaSparkleTwinkle 2.4s ease-in-out infinite;
}
.highlight-card:nth-child(even)::after { animation-duration: 19s, 2.9s; animation-direction: reverse, normal; }
.highlight-card:nth-child(3n)::after   { animation-duration: 13s, 2s; }
@keyframes simlaStarDrift {
	from { background-position: 8px 14px, 22px 4px, 4px 26px, 34px 20px; }
	to   { background-position: 42px 48px, 66px 48px, 32px 54px, 74px 60px; }
}
@keyframes simlaSparkleTwinkle {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}
.highlight-icon,
.highlight-card h3,
.highlight-card p {
	position: relative;
	z-index: 2;
}
.highlight-icon { margin-bottom: 8px; display: flex; justify-content: center; }
.highlight-icon svg { width: 22px; height: 22px; }
.highlight-card h3 { margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.03em; line-height: 1.2; }
.highlight-card p { color: var(--c-muted); margin: 0; font-size: 0.72rem; line-height: 1.35; }
.highlight-discount {
	color: var(--c-gold);
	font-weight: 600;
}
.discount-tc {
	color: var(--c-muted);
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.8;
}

/* =========================================================
   SPECIAL OCCASIONS
   ========================================================= */
.special-occasions { text-align: center; background: var(--c-black); color: var(--c-cream); }
.special-occasions h2 { color: var(--c-cream); }
.special-occasions .eyebrow { color: var(--c-gold-light); }
.special-occasions-intro { color: rgba(250,246,238,0.75); max-width: 580px; margin: 0 auto 36px; }
.occasions-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 12px;
	margin-bottom: 34px;
}
.occasion-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 10px;
	border: 1px solid rgba(201,150,44,0.25);
	border-radius: 8px;
	transition: border-color 0.2s, background 0.2s;
}
.occasion-item:hover { border-color: var(--c-gold); background: rgba(201,150,44,0.08); }
.occasion-icon { font-size: 1.6rem; }
.occasion-item h3 { margin: 0; font-size: 0.75rem; color: var(--c-cream); letter-spacing: 0.02em; line-height: 1.25; }
.occasions-cta { margin-top: 8px; }

/* =========================================================
   DISH CATEGORIES (homepage)
   ========================================================= */
.dish-categories { text-align: center; }
.dish-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 34px;
	text-align: left;
}
.dish-category-card {
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.25);
	border-radius: 6px;
	overflow: hidden;
}
.dish-category-image { height: 180px; overflow: hidden; }
.dish-category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.dish-category-card:hover .dish-category-image img { transform: scale(1.06); }
.dish-category-card h3 { margin: 16px 20px 6px; font-size: 1.1rem; }
.dish-category-card p { margin: 0 20px 20px; font-size: 0.9rem; color: var(--c-muted); }
.dish-categories-cta { margin-top: 34px; }

/* Allergy & dietary notice — shown just below the main "order" calls
   to action on the homepage and menu page. Deliberately understated
   (a quiet note, not a banner) so it doesn't compete with the CTA
   button above it, but still easy to read. */
.allergy-notice {
	max-width: 640px;
	margin: 18px auto 0;
	padding: 0 16px;
	text-align: center;
	color: var(--c-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}
.allergy-notice strong { color: var(--c-charcoal); }
.allergy-notice a { color: var(--c-gold); text-decoration: none; }
.allergy-notice a:hover,
.allergy-notice a:focus { color: var(--c-gold-light); text-decoration: underline; }

/* =========================================================
   ABOUT TEASER / ABOUT CONTENT
   ========================================================= */
.about-teaser-inner,
.about-content-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.about-teaser-image img,
.about-content-image img {
	border-radius: 14px;
	border: 1px solid rgba(201,150,44,0.35);
	box-shadow: 0 14px 30px rgba(13,11,8,0.14);
}
/* Both teaser sections now have real photos — cap and centre them
   so neither dominates its section on wide screens. */
.about-teaser-image img,
.about-content-image img {
	width: 100%;
	max-width: 420px;
	height: auto;
	display: block;
	margin: 0 auto;
}
.about-content-inner .about-content-image { order: 2; }
.about-content-inner .about-content-copy { order: 1; }

/* =========================================================
   MENU CTA
   ========================================================= */
.menu-cta {
	background: var(--c-black);
	color: var(--c-cream);
	text-align: center;
}
.menu-cta h2 { color: var(--c-cream); }
.menu-cta .eyebrow { color: var(--c-gold-light); }
.menu-cta p { color: rgba(250,246,238,0.75); max-width: 480px; margin-left: auto; margin-right: auto; }

/* =========================================================
   FIND US / HOURS
   ========================================================= */
.find-us-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}
.hours-list { list-style: none; margin: 0 0 20px; padding: 0; }
.hours-list li {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid rgba(201,150,44,0.25);
	font-family: 'Jost', sans-serif;
}
.hours-list li .closed { color: #a33; font-weight: 500; }
.find-us-note { color: var(--c-muted); }

/* =========================================================
   HEADER COUNTDOWN WIDGET (left, for imminent occasions)
   ========================================================= */
.header-countdown {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	background: rgba(201,150,44,0.15);
	border-bottom: 1px solid rgba(201,150,44,0.3);
	padding: 5px 24px;
	font-size: 0.78rem;
	color: var(--c-gold-light);
}
.hcd-emoji { font-size: 1rem; }
.hcd-text { line-height: 1.2; }
.hcd-text strong { color: var(--c-cream); }
.hcd-close {
	margin-left: auto;
	background: none;
	border: none;
	color: var(--c-muted);
	font-size: 1rem;
	cursor: pointer;
	padding: 0 4px;
}
.hcd-close:hover { color: var(--c-cream); }

/* =========================================================
   OCCASION BANNER
   ========================================================= */
.occasion-banner {
	position: relative;
	z-index: 1;
	background: linear-gradient(90deg, #7a5a1a, var(--c-gold), #7a5a1a);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
.occasion-banner-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 9px 24px;
	position: relative;
	flex-wrap: wrap;
}
.occasion-banner-text {
	font-family: 'Jost', sans-serif;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--c-black);
	text-align: center;
}
.occasion-banner-cta {
	background: var(--c-black);
	color: var(--c-gold-light);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 20px;
	white-space: nowrap;
}
.occasion-banner-cta:hover { background: #201a14; }
.occasion-banner-close {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--c-black);
	cursor: pointer;
	padding: 4px 8px;
}

/* =========================================================
   WIDE CONTAINER (Order Now page — needs room for the
   3-column ordering layout, more than the 1180px default)
   ========================================================= */
.container-wide {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
}
.order-now-section { padding-top: 40px; }

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero {
	position: relative;
	background: var(--c-black);
	color: var(--c-cream);
	padding: 90px 0 60px;
	text-align: center;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--c-cream); }
.page-hero .eyebrow { color: var(--c-gold-light); }
.page-hero-sub { color: rgba(250,246,238,0.75); max-width: 520px; margin: 0 auto; }
.page-hero-compact { padding: 56px 0 36px; }

/* =========================================================
   MENU PAGE
   ========================================================= */
.menu-order-panel { padding: 32px 0 20px; }
.menu-order-inner { display: flex; justify-content: center; }
.menu-order-card {
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.3);
	border-radius: 6px;
	padding: 48px;
	text-align: center;
	max-width: 640px;
}
.menu-order-card-compact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	max-width: 900px;
	padding: 20px 32px;
	text-align: left;
}
.menu-order-card-compact .menu-order-card-copy { flex: 1; }
.menu-order-card-compact h2 { font-size: 1.15rem; margin-bottom: 4px; }
.menu-order-card-compact p { font-size: 0.85rem; margin-bottom: 0; }
.menu-order-card-compact .btn { padding: 11px 24px; font-size: 0.9rem; flex-shrink: 0; }
.menu-order-note { color: var(--c-muted); font-size: 0.78rem; margin-top: 6px; margin-bottom: 0; }

.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 30px;
}
.category-card {
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.25);
	border-radius: 4px;
	padding: 26px 20px;
	text-align: center;
}
.category-card h3 { color: var(--c-gold); margin-bottom: 6px; }
.category-card p { font-size: 0.9rem; color: var(--c-muted); margin: 0; }
.menu-categories-cta { text-align: center; margin-top: 36px; }

/* =========================================================
   FULL MENU (tabs + item grid, real menu data)
   ========================================================= */
.full-menu-section { padding-top: 8px; }
.menu-tabs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 6px 2px 16px;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba(201,150,44,0.3);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.menu-tab {
	flex-shrink: 0;
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.35);
	color: var(--c-charcoal);
	font-family: 'Jost', sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-tab-count { color: var(--c-muted); font-size: 0.78em; }
.menu-tab:hover { border-color: var(--c-gold); }
.menu-tab.is-active {
	background: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-gold-light);
}
.menu-tab.is-active .menu-tab-count { color: rgba(227,185,104,0.7); }

.menu-panel-title {
	font-size: 1.4rem;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--c-gold);
	display: inline-block;
}
.menu-items-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 18px;
	margin-bottom: 8px;
}
.menu-item-card {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.22);
	border-radius: 6px;
	padding: 16px 18px;
	min-height: 92px;
}
.menu-item-badges { display: flex; gap: 6px; margin-bottom: 8px; min-height: 20px; }
.menu-item-badge {
	display: inline-block;
	background: var(--c-gold);
	color: var(--c-black);
	font-family: 'Jost', sans-serif;
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 9px;
	border-radius: 20px;
}
.menu-item-badge-chef { background: var(--c-black); color: var(--c-gold-light); }
.menu-item-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.menu-item-head h3 { margin: 0; font-size: 0.98rem; line-height: 1.3; }
.menu-item-price { color: var(--c-gold); font-family: 'Cinzel', serif; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.menu-item-card p { margin: 6px 0 0; font-size: 0.84rem; color: var(--c-muted); }
.menu-bottom-cta { text-align: center; margin-top: 44px; }

/* =========================================================
   POPULAR PICKS (Menu page)
   ========================================================= */
.popular-picks { text-align: center; }
.dish-picks-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 34px;
	text-align: left;
}
.dish-pick-card {
	position: relative;
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.3);
	border-radius: 6px;
	padding: 22px 22px 18px;
	box-shadow: 0 2px 10px rgba(13,11,8,0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dish-pick-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(13,11,8,0.1);
}
.dish-pick-badge {
	display: inline-block;
	background: var(--c-gold);
	color: var(--c-black);
	font-family: 'Jost', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
}
.dish-pick-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.dish-pick-head h3 { margin: 0; font-size: 1.05rem; }
.dish-pick-price { color: var(--c-gold); font-family: 'Cinzel', serif; font-weight: 600; white-space: nowrap; }
.dish-pick-card p { margin: 8px 0 0; font-size: 0.88rem; color: var(--c-muted); }

/* =========================================================
   ABOUT VALUES
   ========================================================= */
.about-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.value-card { text-align: center; padding: 10px; }
.value-card h3 { color: var(--c-gold); }
.value-card p { color: var(--c-muted); }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.gallery-item {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid rgba(201,150,44,0.25);
	aspect-ratio: 4/3;
	max-height: 320px;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* =========================================================
   GALLERY — DEPTH BLUR CAROUSEL
   Centre slide full size and sharp; side slides shrink, dim and
   blur with distance from centre, giving a sense of depth. Gold,
   rounded-corner frame to match the rest of the site.
   ========================================================= */
.depth-carousel {
	position: relative;
	padding: 10px 0 54px;
}
.depth-carousel-track {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 360px;
	perspective: 1200px;
}
.depth-carousel-slide {
	position: absolute;
	width: 62%;
	max-width: 480px;
	aspect-ratio: 4/3;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.55s ease, filter 0.55s ease;
	will-change: transform, opacity, filter;
}
.depth-carousel-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid rgba(201,150,44,0.4);
	box-shadow: 0 16px 34px rgba(13,11,8,0.18);
}
.depth-carousel-img img { width: 100%; height: 100%; object-fit: cover; }

/* Position + depth states, set by JS as slides move relative to the
   active one. Anything further than 2 away is simply hidden. */
.depth-carousel-slide.is-active {
	transform: translateX(0) scale(1);
	opacity: 1;
	filter: blur(0);
	z-index: 5;
}
.depth-carousel-slide.is-prev1 {
	transform: translateX(-62%) scale(0.82);
	opacity: 0.55;
	filter: blur(2px);
	z-index: 4;
}
.depth-carousel-slide.is-next1 {
	transform: translateX(62%) scale(0.82);
	opacity: 0.55;
	filter: blur(2px);
	z-index: 4;
}
.depth-carousel-slide.is-prev2 {
	transform: translateX(-110%) scale(0.68);
	opacity: 0.25;
	filter: blur(4px);
	z-index: 3;
}
.depth-carousel-slide.is-next2 {
	transform: translateX(110%) scale(0.68);
	opacity: 0.25;
	filter: blur(4px);
	z-index: 3;
}
.depth-carousel-slide.is-hidden {
	transform: translateX(0) scale(0.6);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

.depth-carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(201,150,44,0.5);
	background: var(--c-black);
	color: var(--c-gold-light);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	z-index: 6;
}
.depth-carousel-btn:hover {
	background: var(--c-gold);
	color: var(--c-black);
	box-shadow: 0 0 14px rgba(201,150,44,0.5);
}
.depth-carousel-prev { left: 0; }
.depth-carousel-next { right: 0; }

.depth-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
.depth-carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(201,150,44,0.6);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}
.depth-carousel-dot.is-active {
	background: var(--c-gold);
	transform: scale(1.25);
}

/* Shared "photo coming soon" placeholder look — a dark box with the
   logo centred and breathing room, instead of it being stretched to
   fill the box like a real photo would be. Swap the <img src> for a
   real photo and remove these two classes once photos are supplied. */
.logo-placeholder-box {
	background: #12100c;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logo-placeholder-img {
	width: 26%;
	height: 26%;
	object-fit: contain;
	opacity: 0.9;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 56px;
}
.contact-details h3 { margin-top: 26px; }
.contact-address { font-style: normal; color: var(--c-muted); margin-bottom: 18px; }
.contact-link { color: var(--c-black); border-bottom: 1px solid var(--c-gold); }
.contact-form-wrap {
	background: var(--c-white);
	border: 1px solid rgba(201,150,44,0.3);
	border-radius: 6px;
	padding: 36px;
}
.form-row { margin-bottom: 18px; }
.form-row label {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 0.88rem;
	margin-bottom: 6px;
	color: var(--c-charcoal);
}
.form-row input,
.form-row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(32,26,20,0.2);
	border-radius: 3px;
	font-family: 'Jost', sans-serif;
	font-size: 0.95rem;
	background: var(--c-cream);
}
.form-row input:focus,
.form-row textarea:focus {
	outline: 2px solid var(--c-gold);
	outline-offset: 1px;
}
.form-notice { padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 0.9rem; }
.form-notice-success { background: rgba(46,125,50,0.12); color: #2e7d32; }
.form-notice-error { background: rgba(138,31,31,0.12); color: #8a1f1f; }

.map-section { padding-top: 0; }
.map-embed {
	border: 1px solid rgba(201,150,44,0.3);
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
}
.map-placeholder {
	background: var(--c-white);
	border: 1px dashed rgba(201,150,44,0.5);
	border-radius: 6px;
	padding: 60px 20px;
	text-align: center;
	color: var(--c-muted);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--c-black); color: rgba(250,246,238,0.8); }
.footer-top { padding: 60px 0 40px; }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}
.footer-logo-img { height: 100px; width: auto; margin-bottom: 14px; }
.footer-tagline-sub {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(250,246,238,0.7);
	font-family: 'Jost', sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.02em;
	margin-bottom: 10px;
}
.footer-tagline-sub svg { color: var(--c-gold); flex-shrink: 0; }
.footer-tagline-divider { color: var(--c-gold); margin: 0 2px; }
.footer-desc { font-size: 0.9rem; color: rgba(250,246,238,0.65); }
.footer-order-links { margin-top: 16px; }
.footer-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-gold-light);
	font-size: 0.9rem;
	border-bottom: 1px solid var(--c-gold);
	padding-bottom: 2px;
}
.footer-heading {
	color: var(--c-gold-light);
	font-size: 1rem;
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.footer-address { font-style: normal; font-size: 0.9rem; color: rgba(250,246,238,0.7); margin-bottom: 10px; }
.footer-link { font-size: 0.85rem; color: var(--c-gold-light); border-bottom: 1px solid var(--c-gold); }
.footer-hours { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.footer-hours li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-hours li .closed { color: #c97a7a; }
.footer-contact-list { list-style: none; margin: 0; padding: 0; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; color: rgba(250,246,238,0.75); }
.footer-contact-list svg { color: var(--c-gold); flex-shrink: 0; }
.footer-social { display: flex; gap: 12px; }
.social-icon {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(201,150,44,0.4);
	border-radius: 50%;
	color: var(--c-gold-light);
	transition: background 0.2s, color 0.2s;
}
.social-icon:hover { background: var(--c-gold); color: var(--c-black); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; }
.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0.82rem;
}
.footer-copy { color: rgba(250,246,238,0.75); margin: 0; }
.footer-bottom-nav { display: flex; gap: 18px; }
.footer-bottom-nav a { color: rgba(250,246,238,0.6); }
.footer-bottom-nav a:hover { color: var(--c-gold-light); }

.generic-content { max-width: 780px; margin: 0 auto; }
.legal-content ul { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 12px; color: var(--c-charcoal); line-height: 1.6; }
.legal-content li strong { color: var(--c-black); }

/* =========================================================
   ANIMATIONS
   Scroll-reveal is opt-in via the .reveal class, added by
   theme.js. That way, if JS fails to load, every element is
   just visible immediately — nothing depends on script for
   content to appear. .is-visible is added by the
   IntersectionObserver in theme.js once a section scrolls
   into view.
   ========================================================= */

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Hero: fades/slides in on page load, staggered line by line. */
@keyframes simlaFadeUp {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow,
.hero-title,
.hero-sub,
.hero-actions {
	opacity: 0;
	animation: simlaFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .eyebrow  { animation-delay: 0.05s; }
.hero-title     { animation-delay: 0.18s; }
.hero-sub       { animation-delay: 0.32s; }
.hero-actions   { animation-delay: 0.46s; }

/* Inner-page heroes (Menu/About Us/Gallery/Contact Us/Order Now) get
   the same two-line fade-up entrance. */
.page-hero .eyebrow,
.page-hero h1,
.page-hero-sub {
	opacity: 0;
	animation: simlaFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-hero .eyebrow { animation-delay: 0.05s; }
.page-hero h1       { animation-delay: 0.18s; }
.page-hero-sub      { animation-delay: 0.32s; }

/* Home hero watermark: a very slow drift so the hero doesn't feel static. */
.hero.has-watermark::before {
	animation: simlaWatermarkDrift 14s ease-in-out infinite;
}
@keyframes simlaWatermarkDrift {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50%      { transform: translateY(-52%) scale(1.035); }
}

/* Card hover lift — layered on top of the existing gallery/occasion
   hover states, which already have their own transforms. */
.highlight-card,
.value-card,
.dish-category-card,
.menu-item-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.highlight-card:hover,
.value-card:hover,
.dish-category-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(13,11,8,0.12), 0 0 0 1px rgba(201,150,44,0.5), 0 0 22px rgba(201,150,44,0.22);
	border-color: var(--c-gold);
}

/* Depth-blur focus: hovering one highlight box brings it forward
   while its siblings ease back and soften, the same "depth" feel
   as the gallery carousel. */
.highlights-grid { transition: filter 0.3s ease; }
.highlights-grid:hover .highlight-card {
	filter: blur(1.5px);
	opacity: 0.65;
	transform: scale(0.97);
}
.highlights-grid .highlight-card:hover {
	filter: none;
	opacity: 1;
	transform: translateY(-6px) scale(1.03);
	z-index: 2;
}

/* Highlight cards get the same gold shine-sweep the hero's "View
   Menu" button uses, so the homepage service strip and the hero
   feel like one consistent piece of motion. */
.highlight-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(201,150,44,0.22), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
	pointer-events: none;
}
.highlight-card:hover::before { left: 130%; }
.menu-item-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(13,11,8,0.08);
}

/* Occasion emoji: a small on-hover bounce to match the card hover. */
.occasion-icon { display: inline-block; transition: transform 0.3s ease; }
.occasion-item:hover .occasion-icon { transform: scale(1.15) rotate(-4deg); }

/* Orbiting gold dots on buttons — two tiny dots glide around the
   inside of the button on hover, gold, matching the site's shine-
   sweep motion. Only ever added by JS (see theme.js) so a page with
   JS disabled just gets a plain button with no missing pieces. */
.orbit-dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: var(--c-gold-light);
	box-shadow: 0 0 6px 1px rgba(201,150,44,0.75);
	opacity: 0;
	pointer-events: none;
	offset-path: ellipse(40% 36% at 50% 50%);
	offset-rotate: 0deg;
	animation: simlaOrbitDot 3.2s linear infinite;
	animation-play-state: paused;
	transition: opacity 0.3s ease;
	z-index: 3;
}
.orbit-dot-2 { animation-delay: -1.6s; }
.btn:hover .orbit-dot,
.order-btn:hover .orbit-dot {
	opacity: 1;
	animation-play-state: running;
}
@keyframes simlaOrbitDot {
	to { offset-distance: 100%; }
}

/* Respect reduced-motion preference: kill every animation/transition
   above and just show content in its final state. */
@media (prefers-reduced-motion: reduce) {
	.orbit-dot { display: none !important; }
	.reveal,
	.hero .eyebrow,
	.hero-title,
	.hero-sub,
	.hero-actions,
	.page-hero .eyebrow,
	.page-hero h1,
	.page-hero-sub {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.hero.has-watermark::before { animation: none !important; }
	.highlight-card { animation: none !important; box-shadow: 0 0 0 1px rgba(201,150,44,0.45) !important; }
	.highlight-card::after { display: none !important; }
	.btn-gold,
	.order-btn { animation: none !important; }
	.highlight-card::before { display: none !important; }
	.highlights-grid:hover .highlight-card,
	.highlights-grid .highlight-card:hover { filter: none !important; opacity: 1 !important; }
	.highlight-card:hover,
	.value-card:hover,
	.dish-category-card:hover,
	.menu-item-card:hover,
	.occasion-item:hover .occasion-icon,
	.gallery-item:hover img,
	.dish-category-card:hover .dish-category-image img {
		transform: none !important;
	}
	.site-header,
	.header-inner,
	.header-logo-img {
		transition: none !important;
	}
}