/* ===================== THEME VARIABLES ===================== */
:root {
  /* base palette */
  --color-app-bg: #121212;
  --color-app-gradient-0: #1a1a1a;
  --color-app-gradient-1: #0a0a0a;

  --color-card-bg: #1e1e1e;
  --color-header-bg: #161616;
  --color-footer-bg: #161616;

  --color-text: #e0e0e0;
  --color-muted: #aaaaaa;
  --color-heading: #ffffff;

  --color-accent: #ff6a88;           /* neon pink accent */
  --color-accent-soft: rgba(255, 106, 136, 0.2);

  --color-border-strong: #333333;
  --color-border-soft: #2a2a2a;

  /* section tints */
  --color-signature-bg: rgba(255, 106, 136, 0.05);
  --color-classics-bg: rgba(70, 70, 70, 0.1);
  --color-mocktails-bg: rgba(100, 200, 255, 0.05);
  --color-bites-bg: rgba(0, 0, 0, 0.2);
  --color-food-card: rgba(0, 0, 0, 0.2);

  /* gradients */
  --gradient-logo: linear-gradient(90deg, #ff9a8b, #ff6a88, #ff99ac);

  /* layout */
  --radius-sm: 5px;
  --radius-md: 8px;
  --shadow-xl: 0 0 40px rgba(0, 0, 0, 0.8);
}

/* ===================== RESET / BASE ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-app-bg);
  padding: 20px;
}

/* App gradient wrapper */
.menu-wrapper {
  min-height: 100vh;
  display: block;
  padding-top: 40px;
  background: radial-gradient(circle at top, #1a1a1a 0%, #0a0a0a 100%);
}


/* Container */
.menu-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

/* Accent top border */
.menu-container::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ff9a8b, #ff6a88, #ff99ac);
}

/* Header */
.menu-header {
  padding: 60px 30px 40px;
  text-align: center;
  background-color: var(--color-header-bg);
  position: relative;
}

/* Brand image */
.brand-mark {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  margin: 0 auto 16px;
  display: block;
  background: #0f0f0f;
}

/* Text logo */
.logo {
  font-size: 3.5rem; font-weight: 700; letter-spacing: 8px;
  margin-bottom: 5px;
  background: var(--gradient-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(255, 106, 136, 0.3);
}

.bar-name {
  font-size: 1rem; font-weight: 300; letter-spacing: 5px;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.menu-divider { display: flex; align-items: center; justify-content: center; margin: 15px 0; }

.divider-icon {
  font-size: 1.2rem;
  color: var(--color-accent);
  position: relative; display: inline-block;
}

.divider-icon::before,
.divider-icon::after {
  content: '';
  position: absolute; top: 50%; width: 50px; height: 1px;
  background: var(--color-border-strong);
}

.divider-icon::before { right: 30px; }
.divider-icon::after  { left: 30px; }

.tagline { font-style: italic; color: var(--color-muted); font-size: 1rem; }

/* Sections */
.menu-section {
  padding: 40px 30px;
  border-bottom: 1px solid var(--color-border-strong);
  position: relative;
}
.menu-section:last-child { border-bottom: none; }

.section-title {
  font-size: 1.4rem; font-weight: 400; text-transform: uppercase;
  letter-spacing: 3px; margin-bottom: 25px;
  color: var(--color-heading);
  text-align: center; position: relative; display: inline-block;
  padding-bottom: 10px;
}
.section-title::after {
  content: '';
  position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* Items (Cocktails) */
.cocktail-item {
  margin-bottom: 30px; padding-bottom: 20px;
  border-bottom: 1px dashed var(--color-border-strong);
  position: relative;
}
.cocktail-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.cocktail-details {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
}

.cocktail-name { font-size: 1.2rem; font-weight: 500; color: var(--color-heading); }
.cocktail-price { font-weight: 500; color: var(--color-accent); }
.cocktail-description { font-size: 0.9rem; color: var(--color-muted); line-height: 1.5; margin-bottom: 8px; }

.cocktail-tag {
  display: inline-block; font-size: 0.7rem; padding: 3px 8px; border-radius: 20px;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  text-transform: uppercase; letter-spacing: 1px;
}

/* Food */
.food-items { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 600px) { .food-items { grid-template-columns: 1fr 1fr; } }

.food-item {
  background-color: var(--color-food-card);
  padding: 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
}
.food-name { font-size: 1.1rem; margin-bottom: 5px; color: var(--color-heading); }
.food-price { color: var(--color-accent); margin-bottom: 8px; font-weight: 500; }
.food-description { font-size: 0.85rem; color: var(--color-muted); }

/* Footer */
.menu-footer {
  text-align: center; padding: 30px;
  background-color: var(--color-footer-bg);
  color: #777; font-size: 0.9rem;
}
.hours { margin-bottom: 5px; }
.address { margin-bottom: 15px; }
.note {
  font-style: italic; font-size: 0.8rem; color: #666;
  padding-top: 15px; border-top: 1px solid var(--color-border-strong);
  margin-top: 15px;
}

/* Section-specific backgrounds (from vars) */
.signature { background-color: var(--color-signature-bg); }
.classics  { background-color: var(--color-classics-bg); }
.mocktails { background-color: var(--color-mocktails-bg); }
.bites     { background-color: var(--color-bites-bg); }

/* Responsive */
@media (max-width: 600px) {
  .menu-container { margin: 10px; }
  .logo { font-size: 2.5rem; }
  .menu-section { padding: 30px 20px; }
}

/* ===================== DATA-THEME HOOKS ===================== */
/* These attribute selectors ensure your live editor can override styles inline */

[data-theme-color="app-bg"][data-theme-type="background"] { background-color: var(--color-app-bg); }
[data-theme-color="app-gradient"][data-theme-type="background"] {
  background: radial-gradient(circle at center, var(--color-app-gradient-0) 0%, var(--color-app-gradient-1) 100%);
}

[data-theme-color="card-bg"][data-theme-type="background"]     { background-color: var(--color-card-bg); }
[data-theme-color="header-bg"][data-theme-type="background"]   { background-color: var(--color-header-bg); }
[data-theme-color="footer-bg"][data-theme-type="background"]   { background-color: var(--color-footer-bg); }

[data-theme-color="text"][data-theme-type="text"]   { color: var(--color-text); }
[data-theme-color="muted"][data-theme-type="text"]  { color: var(--color-muted); }
[data-theme-color="heading"][data-theme-type="text"]{ color: var(--color-heading); }
[data-theme-color="accent"][data-theme-type="text"] { color: var(--color-accent); }

/* gradient text */
[data-theme-color="logo-gradient"][data-theme-type="text"] {
  background: var(--gradient-logo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* section bg hooks */
[data-theme-color="signature-bg"][data-theme-type="background"] { background-color: var(--color-signature-bg); }
[data-theme-color="classics-bg"][data-theme-type="background"]  { background-color: var(--color-classics-bg); }
[data-theme-color="mocktails-bg"][data-theme-type="background"] { background-color: var(--color-mocktails-bg); }
[data-theme-color="bites-bg"][data-theme-type="background"]     { background-color: var(--color-bites-bg); }
[data-theme-color="food-card"][data-theme-type="background"]    { background-color: var(--color-food-card); }

/* borders/dividers */
[data-theme-border] { position: relative; }
[data-theme-border]::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
[data-theme-divider] {
  border-bottom: 1px dashed var(--color-border-strong);
}
[data-theme-divider-top] {
  border-top: 1px solid var(--color-border-strong);
}
[data-theme-border-soft] {
  border: 1px solid var(--color-border-soft);
}

/* optional subtle elevation */
[data-theme-elevate="1"] { box-shadow: var(--shadow-xl); }