/* =========================================================================
DESIGN TOKENS
Lumumba Grill palette: charcoal-red page, flame-red accents, grill amber.
========================================================================= */

/* Palette: black, blood red and bright yellow-orange (printed menu + logo) */
:root {
--maroon-950: #0C0909;
--maroon-900: #171111;
--maroon-800: #8A0F15;
--maroon-700: #B3141B;
--maroon-600: #C8161D;

--crimson-600: #E8202A;
--crimson-700: #C8161D;

--gold-300: #FFD35E;
--gold-500: #FFB81C;
--gold-600: #E69A00;
--gold-700: #B37800;

--cream-50: #FBF6EE;
--cream-white: #FFFFFF;
--logo-bg: #E4E4EC;

--ink: #1A0F10;
--ink-soft: #6E5659;
--ink-faint: #A89A9A;

--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(0, 0, 0, 0.45);
--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.25);
--shadow-gold-glow: 0 4px 14px rgba(255, 184, 28, 0.35);

--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-color: var(--maroon-950);
color: var(--cream-50);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;

/* Faint diagonal texture on top of a black-to-dark gradient (no white fallback) */
background-image:
repeating-linear-gradient(
135deg,
rgba(255, 184, 28, 0.03) 0px,
rgba(255, 184, 28, 0.03) 1px,
transparent 1px,
transparent 26px
),
linear-gradient(180deg, var(--maroon-900), var(--maroon-950));
background-attachment: fixed;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

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

.site-header {
background: var(--maroon-950);
color: var(--cream-white);
padding: 22px 20px 16px;
border-bottom: 3px solid var(--gold-500);
}

.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;
border-radius: 12px;
}

/* ---------- Brand text ---------- */
.brand-copy { min-width: 0; }

.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(--gold-500);
}

.brand-tagline {
margin: 0;
font-size: 13.5px;
color: var(--cream-white);
opacity: 0.85;
font-weight: 500;
letter-spacing: 0.3px;
}

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

.category-nav {
position: sticky;
top: 0;
z-index: 50;
background: linear-gradient(180deg, var(--maroon-900), var(--maroon-950));
border-bottom: 2px solid var(--crimson-600);
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(255, 211, 94, 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(255, 184, 28, 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-950);
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(255, 184, 28, 0.14);
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-950);
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);
}


/* ---------- Menu notice (single line above the menu) ---------- */
.menu-notice-wrap {
max-width: 900px;
margin: 22px auto 0;
padding: 0 18px;
}

.menu-notice {
margin: 0;
padding: 14px 18px;
text-align: center;
font-size: 15px;
font-weight: 700;
color: var(--gold-500);
background: #000;
border: 1.5px solid var(--gold-500);
border-radius: var(--radius-md);
}

@media (min-width: 1000px) {
  .menu-notice-wrap { padding: 0; }
}

/* ---------- Category note ---------- */
.category-note {
margin: 0 2px 4px;
font-size: 13px;
color: var(--gold-300);
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, #FFD35E, #FFB81C);
  color: #0C0909;
  border: 2px solid #E69A00;
  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, #FFB81C, #E69A00);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(227, 34, 43, 0.28);
}

.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;
flex-wrap: wrap;
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(47, 8, 13, 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 { flex: 1 1 200px; 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-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 {
font-family: var(--font-display);
font-weight: 600;
font-size: 15.5px;
color: var(--crimson-700);
white-space: nowrap;
padding: 4px 10px;
background: linear-gradient(135deg, var(--cream-white), rgba(255, 184, 28, 0.18));
border: 1px solid rgba(255, 184, 28, 0.45);
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(255, 184, 28, 0.18));
border: 1px solid rgba(255, 184, 28, 0.45);
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(--crimson-700);
white-space: nowrap;
}

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

.site-footer {
background: var(--maroon-950);
color: var(--cream-50);
padding: 34px 20px 22px;
border-top: 3px solid var(--crimson-600);
}

.footer-copyright {
max-width: 900px;
margin: 0 auto;
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-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;
  }
}

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

@media (min-width: 1000px) {
  .menu-content { padding-left: 0; padding-right: 0; }
}