/* =========================================================================
DESIGN TOKENS
========================================================================= */

:root {
--maroon-950: #2E070F;
--maroon-900: #430A14;
--maroon-800: #5C0F1E;
--maroon-700: #7A1526;
--maroon-600: #93202F;

/* Chili-red accent — a second, more vivid pop pulled from the logo's
   red script and heart mark. Used sparingly for CTAs and highlights
   so the palette reads as colorful without losing the maroon/gold identity. */
--crimson-600: #D62839;
--crimson-700: #A81F2D;

--gold-300: #F7D875;
--gold-500: #F2B705;
--gold-600: #D99A00;
--gold-700: #B37D00;

--cream-50: #FBF3E3;
--cream-white: #FFFDF8;

--ink: #2B0A10;
--ink-soft: #7A5A5F;
--ink-faint: #A88A8E;

--font-display: 'Fraunces', serif;
--font-badge: 'Baloo 2', sans-serif;
--font-body: 'Manrope', sans-serif;

--radius-lg: 22px;
--radius-md: 14px;
--radius-pill: 999px;

--shadow-soft: 0 6px 20px rgba(67, 10, 20, 0.10);
--shadow-card: 0 2px 10px rgba(67, 10, 20, 0.06);
--shadow-gold-glow: 0 4px 14px rgba(242, 183, 5, 0.30);

--nav-height: 62px;
}

/* =========================================================================
RESET & BASE
========================================================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

html {
scroll-behavior: auto;
}

* {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  }
  }

body {
margin: 0;
background: linear-gradient(180deg, var(--maroon-900), var(--maroon-950));
color: var(--cream-50);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;

/* A faint diagonal hairline texture behind the whole page — a quiet
   background detail rather than a flat, empty fill. Gold instead of
   maroon now that the page sits on a dark burgundy field. */
background-image:
repeating-linear-gradient(
135deg,
rgba(247, 216, 117, 0.035) 0px,
rgba(247, 216, 117, 0.035) 1px,
transparent 1px,
transparent 26px
);
}

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

button {
font-family: inherit;
}

a {
color: inherit;
}

/* =========================================================================
HEADER
========================================================================= */

.site-header {
background: linear-gradient(135deg, var(--cream-white), var(--cream-50) 60%, var(--gold-300));

background-image:
radial-gradient(
circle at 15% 20%,
rgba(242, 183, 5, 0.22),
transparent 45%
),
radial-gradient(
circle at 90% 80%,
rgba(214, 40, 57, 0.10),
transparent 42%
),
linear-gradient(135deg, var(--cream-white), var(--cream-50) 60%, var(--gold-300));

color: var(--maroon-900);
padding: 22px 20px 16px;

border-bottom: 1px solid rgba(67, 10, 20, 0.10);
}

/* =========================================================================
HEADER INNER
========================================================================= */

.header-inner {
max-width: 900px;
margin: 0 auto;

display: flex;
align-items: center;

gap: 16px;
}

/* =========================================================================
RESTAURANT LOGO
========================================================================= */

.brand-logo {
flex-shrink: 0;

width: 72px;
height: 72px;

display: flex;
align-items: center;
justify-content: center;
}

.brand-logo img {
width: 100%;
height: 100%;

object-fit: contain;

display: block;
}

/* =========================================================================
BRAND TEXT
========================================================================= */

.brand-copy {
min-width: 0;
}

.brand-eyebrow {
margin: 0;

font-family: var(--font-badge);
font-size: 13px;

letter-spacing: 3px;
text-transform: uppercase;

color: var(--crimson-600);

font-weight: 600;
}

.brand-name {
margin: 1px 0 4px;

font-family: var(--font-display);
font-weight: 600;

font-size: clamp(26px, 7vw, 38px);

line-height: 1.05;

color: var(--maroon-900);
}

.brand-tagline {
margin: 0;

font-size: 13.5px;

color: var(--maroon-700);

font-weight: 500;

letter-spacing: 0.3px;
}

/* =========================================================================
HEADER INFORMATION STRIP
========================================================================= */

.header-strip {
max-width: 900px;
margin: 16px auto 0;

display: flex;

flex-wrap: wrap;

gap: 8px 18px;

padding-top: 14px;

border-top:
1px solid rgba(67, 10, 20, 0.16);
}

.header-strip-item {
font-size: 12.5px;

color: var(--maroon-800);

opacity: 0.85;

white-space: nowrap;
}

/* =========================================================================
CATEGORY NAVIGATION
Horizontal scrolling + sticky navigation
========================================================================= */

.category-nav {
position: sticky;

top: 0;

z-index: 50;

background: linear-gradient(180deg, var(--maroon-900), var(--maroon-800));

border-bottom:
1px solid rgba(242, 183, 5, 0.18);

box-shadow: var(--shadow-soft);
}

.category-nav-scroll {
display: flex;

gap: 10px;

overflow-x: auto;

scroll-behavior: smooth;

-webkit-overflow-scrolling: touch;

padding: 12px 16px;

scrollbar-width: none;
}

.category-nav-scroll::-webkit-scrollbar {
display: none;
}

/* =========================================================================
CATEGORY NAVIGATION PILLS
========================================================================= */

.nav-pill {
flex-shrink: 0;

scroll-snap-align: start;

border:
1.5px solid rgba(247, 216, 117, 0.55);

background: transparent;

color: var(--cream-50);

font-family: var(--font-badge);

font-weight: 600;

font-size: 14.5px;

padding: 10px 18px;

border-radius: var(--radius-pill);

cursor: pointer;

white-space: nowrap;

min-height: 42px;

transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}

.nav-pill:hover {
background: rgba(242, 183, 5, 0.20);
border-color: var(--gold-300);
}

.nav-pill:active {
transform: scale(0.97);
}

.nav-pill.active {
background: linear-gradient(135deg, var(--gold-300), var(--gold-500));

border-color: var(--gold-600);

color: var(--maroon-900);

box-shadow: var(--shadow-gold-glow);
}

.nav-pill:focus-visible {
outline: 3px solid var(--gold-500);

outline-offset: 2px;
}

/* =========================================================================
MENU CONTENT
========================================================================= */

.menu-content {
max-width: 900px;

margin: 0 auto;

padding: 10px 18px 40px;
}

.category-section {
position: relative;

background: var(--maroon-800);

border: 1.5px solid rgba(67, 10, 20, 0.10);
border-radius: var(--radius-lg);

padding: 36px 18px 24px;

margin-top: 44px;

box-shadow: var(--shadow-soft);

scroll-margin-top:
calc(var(--nav-height) + 14px);
}

.category-section:first-child {
margin-top: 26px;
}

/* =========================================================================
CATEGORY HEADING
========================================================================= */

.category-heading {
position: absolute;
top: -19px;
left: 18px;

display: inline-flex;

align-items: center;

font-family: var(--font-badge);

font-weight: 700;

font-size: 18px;

letter-spacing: 0.4px;

text-transform: uppercase;

color: var(--maroon-900);

background: linear-gradient(135deg, var(--gold-300), var(--gold-600));

padding: 9px 22px;

border-radius: var(--radius-pill);

margin: 0;

box-shadow: var(--shadow-gold-glow);
}

.category-heading::before {
content: "";

position: absolute;

inset: 3px;

border:
1.5px dashed rgba(67, 10, 20, 0.25);

border-radius: var(--radius-pill);

pointer-events: none;
}

/* =========================================================================
CATEGORY NOTE
========================================================================= */

.category-note {
margin: 0 2px 4px;

font-size: 13px;

color: var(--ink-soft);

font-style: italic;
}

/* =========================================================
   HOME BUTTON
   ========================================================= */

.home-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 10px 18px;

  background: linear-gradient(135deg, #F7D875, #F2B705);
  color: #430A14;

  border: 2px solid #D99A00;
  border-radius: 999px;

  text-decoration: none;

  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.home-button:hover {
  background: linear-gradient(135deg, #F2B705, #D99A00);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(214, 40, 57, 0.22);
}

.home-button:active {
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 600px) {

  .header-inner {
    position: relative;
  }

  .home-button {
    padding: 8px 12px;
    font-size: 0.8rem;
    margin-left: auto;
  }

}

/* =========================================================================
MENU ITEMS
========================================================================= */

.item-list {
margin-top: 16px;

display: flex;

flex-direction: column;

gap: 10px;
}

.menu-item {
position: relative;

display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 14px;

background: var(--cream-50);

border-radius: var(--radius-md);

padding: 14px 16px 14px 20px;

border:
1px solid rgba(67, 10, 20, 0.07);
}

.menu-item::before {
content: "";

position: absolute;

top: 8px;
bottom: 8px;
left: 0;

width: 3px;
border-radius: 3px;

background: linear-gradient(180deg, var(--gold-500), var(--crimson-600));

opacity: 0.85;
}

.menu-item-info {
min-width: 0;
}

.menu-item-name {
margin: 0;

font-family: var(--font-body);

font-weight: 700;

font-size: 15.5px;

color: var(--ink);

line-height: 1.35;
}

.menu-item-desc {
margin: 5px 0 0;

font-size: 13px;

color: var(--ink-soft);

line-height: 1.5;
}

/* =========================================================================
MENU ITEM PRICE
========================================================================= */
.menu-item {
  flex-wrap: wrap;
}

.menu-item-info {
  flex: 1 1 200px;
}

.menu-item-price,
.menu-item-price--dual {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 480px) {
  .menu-item-price--dual {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-top: 8px;
    margin-left: 0;
  }
}
.menu-item-price {
flex-shrink: 0;

font-family: var(--font-display);

font-weight: 600;

font-size: 15.5px;

color: var(--maroon-700);

white-space: nowrap;

padding: 4px 10px;

background: linear-gradient(135deg, var(--cream-white), rgba(242, 183, 5, 0.16));
border: 1px solid rgba(242, 183, 5, 0.35);
border-radius: var(--radius-md);
}

.menu-item-price--dual {
display: flex;

gap: 10px;

background: none;
padding: 0;
}

.price-option {
display: flex;

flex-direction: column;

align-items: center;

gap: 2px;

background: linear-gradient(135deg, var(--cream-white), rgba(242, 183, 5, 0.16));
border: 1px solid rgba(242, 183, 5, 0.35);
border-radius: var(--radius-md);
padding: 5px 10px;
}

.price-option-label {
font-family: var(--font-badge);

font-weight: 600;

font-size: 10.5px;

text-transform: uppercase;

letter-spacing: 0.5px;

color: var(--ink-faint);
}

.price-option-value {
font-family: var(--font-display);

font-weight: 600;

font-size: 15px;

color: var(--maroon-700);

white-space: nowrap;
}

/* =========================================================================
FOOTER
========================================================================= */

.site-footer {
background: linear-gradient(180deg, var(--maroon-900), var(--maroon-950));

color: var(--cream-50);

padding: 34px 20px 22px;

border-top: 1px solid rgba(242, 183, 5, 0.15);
}

.footer-inner {
max-width: 900px;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr;

gap: 22px;
}

.footer-name {
margin: 0 0 4px;

font-family: var(--font-display);

font-weight: 600;

font-size: 20px;

color: var(--cream-white);
}

.footer-tagline {
margin: 0;

font-size: 13px;

color: var(--gold-300);
}

.footer-heading {
margin: 0 0 6px;

font-family: var(--font-badge);

font-weight: 700;

font-size: 12px;

letter-spacing: 1.2px;

text-transform: uppercase;

color: var(--gold-500);
}

.footer-details p,
.footer-catering p {
margin: 0 0 4px;

font-size: 13.5px;

color: var(--cream-50);

opacity: 0.9;

line-height: 1.55;
}

.footer-copyright {
max-width: 900px;

margin: 26px auto 0;

padding-top: 16px;

border-top:
1px solid rgba(242, 183, 5, 0.18);

font-size: 11.5px;

color: var(--ink-faint);

text-align: center;
}

/* =========================================================================
NARROW PHONES
========================================================================= */

@media (max-width: 380px) {

.menu-item {
padding: 12px 14px 12px 18px;
gap: 10px;
}

.menu-item-name {
font-size: 14.5px;
}

.menu-item-price--dual {
gap: 10px;
}

.price-option-value {
font-size: 13.5px;
}

.brand-name {
font-size: 24px;
}

.brand-logo {
width: 60px;
height: 60px;
}

.brand-eyebrow {
font-size: 11px;
}

.brand-tagline {
font-size: 12px;
}
}

/* =========================================================================
TABLET / DESKTOP
========================================================================= */

@media (min-width: 700px) {

.header-inner {
gap: 20px;
}

.brand-logo {
width: 90px;
height: 90px;
}

.category-nav-scroll {
justify-content: center;
flex-wrap: nowrap;
}

.item-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 16px;
}

.platters .item-list,
#platters .item-list {
grid-template-columns: 1fr;
}

.footer-inner {
grid-template-columns:
1.3fr 1fr 1fr;
}

.footer-details {
padding-left: 22px;
border-left: 1px solid rgba(242, 183, 5, 0.20);
}

.footer-catering {
padding-left: 22px;
border-left: 1px solid rgba(242, 183, 5, 0.20);
}
}

/* =========================================================================
LARGE DESKTOP
========================================================================= */

@media (min-width: 1000px) {

.menu-content {
padding-left: 0;
padding-right: 0;
}
}

/* =========================================================================
PLATTERS
Keep platters in one column at every screen size
========================================================================= */

#platters .item-list {
grid-template-columns: 1fr !important;
}