/* ═══════════════════════════════════════════════════
   FINO DELI — styles.css
   Theme: Rustic Italian/Spanish • Warm Earthy Tones
═══════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --clr-bg:       #0f0b08;
  --clr-surface:  #1a1410;
  --clr-card:     #231d17;
  --clr-border:   #3a2e22;
  --clr-gold:     #c9a84c;
  --clr-gold-lt:  #e4c77b;
  --clr-cream:    #f5edd8;
  --clr-text:     #e8d9c0;
  --clr-muted:    #9e8e72;
  --clr-accent:   #8b3a2a;
  --clr-accent2:  #5a7a52;
  --ff-serif:     'Playfair Display', Georgia, serif;
  --ff-elegant:   'Cormorant Garamond', Georgia, serif;
  --ff-sans:      'Lato', system-ui, sans-serif;
  --radius:       12px;
  --radius-lg:    20px;
  --shadow:       0 8px 32px rgba(0,0,0,.45);
  --shadow-card:  0 4px 16px rgba(0,0,0,.35);
  --trans:        .3s cubic-bezier(.4,0,.2,1);
}

/* ── Light Theme Variables ── */
[data-theme="light"] {
  --clr-bg:       #fdf8f0;
  --clr-surface:  #f5ead8;
  --clr-card:     #ffffff;
  --clr-border:   #e6d1b0;
  --clr-gold:     #a67c2e;
  --clr-gold-lt:  #c9a84c;
  --clr-cream:    #2a1a08;
  --clr-text:     #3d2c0f;
  --clr-muted:    #6e5530;
  --shadow:       0 8px 32px rgba(60,30,0,.14);
  --shadow-card:  0 4px 16px rgba(60,30,0,.08);
}

/* ════════════════════════
   SPECIALS BANNER
════════════════════════ */
.specials-bar {
  position: relative; z-index: 1001;
  background: linear-gradient(90deg, #5a3a10 0%, #8b5e1a 50%, #5a3a10 100%);
  color: var(--clr-cream);
  padding: .55rem 3.5rem .55rem 1rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 500;
}
[data-theme="light"] .specials-bar { color: #fff8ec; }
.specials-bar-inner {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center;
}
.specials-bar-inner i { color: var(--clr-gold-lt); }
.specials-bar-cta {
  background: var(--clr-gold);
  color: #1a0e00;
  padding: .22rem .8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: background var(--trans);
  white-space: nowrap;
}
.specials-bar-cta:hover { background: var(--clr-gold-lt); }
.specials-bar-close {
  position: absolute; top: 50%; right: .8rem; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,248,236,.6);
  font-size: 1.2rem; cursor: pointer; line-height: 1;
  transition: color var(--trans);
}
.specials-bar-close:hover { color: #fff; }
.specials-bar.dismissed { display: none; }

/* ════════════════════════
   STATS SECTION
════════════════════════ */
.stats-section {
  padding: 3.5rem 0;
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2rem;
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.stat-icon {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: var(--clr-gold);
  margin-bottom: .3rem;
}
.stat-number {
  font-family: var(--ff-serif);
  font-size: clamp(2rem,5vw,3rem);
  font-weight: 700;
  color: var(--clr-cream);
  line-height: 1;
}
.stat-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-muted);
}
@media (max-width:640px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
}

/* ════════════════════════
   REVIEWS SECTION
════════════════════════ */
.reviews-section {
  padding: 6rem 0;
  background: var(--clr-bg);
}
.reviews-section .section-eyebrow,
.reviews-section .section-title { text-align: center; }
.reviews-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
}
.reviews-rating-big { display: flex; align-items: center; gap: 1rem; }
.reviews-score {
  font-family: var(--ff-serif);
  font-size: 4rem; font-weight: 700;
  color: var(--clr-cream); line-height: 1;
}
.reviews-stars-wrap { display: flex; flex-direction: column; gap: .25rem; }
.reviews-stars { color: var(--clr-gold); font-size: 1.3rem; letter-spacing: .1em; }
.reviews-count { font-size: .8rem; color: var(--clr-muted); }
.reviews-btn { padding: .6rem 1.4rem !important; }
.reviews-track-wrap {
  display: flex; align-items: center; gap: .75rem;
  overflow: hidden;
}
.reviews-nav-btn {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
  z-index: 2;
}
.reviews-nav-btn:hover { border-color: var(--clr-gold); color: var(--clr-gold); background: rgba(201,168,76,.1); }
.reviews-track {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, calc(33.333% - .67rem));
  gap: 1rem;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
.review-card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
  transition: border-color var(--trans), transform var(--trans);
  flex-shrink: 0;
}
.review-card:hover { border-color: var(--clr-gold); transform: translateY(-4px); }
.review-header {
  display: flex; align-items: center; gap: .8rem;
}
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-accent));
  color: #fff; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.review-author { font-weight: 700; font-size: .9rem; color: var(--clr-cream); }
.review-date   { font-size: .75rem; color: var(--clr-muted); }
.review-stars  { color: var(--clr-gold); font-size: .9rem; margin-left: auto; letter-spacing: .06em; white-space: nowrap; }
.review-text {
  font-size: .88rem; line-height: 1.7;
  color: var(--clr-muted);
  font-style: italic;
  flex: 1;
}
.review-source {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700;
  color: var(--clr-gold); text-decoration: none;
  text-transform: uppercase; letter-spacing: .06em;
  transition: opacity var(--trans);
}
.review-source:hover { opacity: .7; }
.reviews-dots {
  display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem;
}
.reviews-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clr-border); border: none; cursor: pointer;
  transition: background var(--trans), transform var(--trans);
}
.reviews-dot.active { background: var(--clr-gold); transform: scale(1.3); }
@media (max-width:900px) {
  .reviews-track { grid-template-columns: repeat(5,calc(50% - .5rem)); }
}
@media (max-width:600px) {
  .reviews-track { grid-template-columns: repeat(5,100%); }
  .reviews-track-wrap { gap: .4rem; }
  .reviews-nav-btn { width: 34px; height: 34px; font-size: .85rem; }
}

/* ════════════════════════
   INSTAGRAM SECTION
════════════════════════ */
.instagram-section {
  padding: 5rem 0;
  background: var(--clr-surface);
}
.instagram-section .section-eyebrow,
.instagram-section .section-title { text-align: center; }
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 8px;
  margin-top: 2rem;
}
.insta-item { position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.insta-item:hover img { transform: scale(1.1); }
.insta-overlay {
  position: absolute; inset: 0;
  background: rgba(201,168,76,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
  opacity: 0; transition: opacity var(--trans);
}
.insta-item:hover .insta-overlay { opacity: 1; }
@media (max-width:768px) { .insta-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:480px) { .insta-grid { grid-template-columns: repeat(2,1fr); } }

/* ════════════════════════
   RESERVATION FORM MODAL
════════════════════════ */
.res-modal {
  display: none; position: fixed; inset: 0; z-index: 9997;
  align-items: center; justify-content: center; padding: 1rem;
}
.res-modal.open { display: flex; }
.res-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.72); backdrop-filter: blur(10px);
  cursor: pointer; animation: modal-fade .3s ease;
}
.res-modal-panel {
  position: relative; z-index: 1;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 620px;
  max-height: 92vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--clr-border) transparent;
  box-shadow: 0 32px 100px rgba(0,0,0,.7);
  animation: modal-in .42s cubic-bezier(.34,1.3,.64,1);
}
.res-modal-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; z-index: 3; transition: all var(--trans);
}
.res-modal-close:hover { background: var(--clr-gold); border-color: var(--clr-gold); transform: rotate(90deg); }
.res-modal-header {
  background: linear-gradient(135deg, var(--clr-accent) 0%, #3a1408 100%);
  padding: 2rem 2rem 1.5rem;
  text-align: center;
}
.res-modal-logo {
  width: 60px; height: 60px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--clr-gold);
  margin: 0 auto 1rem;
}
.res-modal-header h2 {
  font-family: var(--ff-serif);
  font-size: 1.6rem; color: var(--clr-cream); margin-bottom: .4rem;
}
.res-modal-header p { color: rgba(245,237,216,.7); font-size: .9rem; }
.res-form { padding: 1.8rem 2rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.res-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.res-form-group { display: flex; flex-direction: column; gap: .45rem; }
.res-form-group label {
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--clr-muted);
  display: flex; align-items: center; gap: .4rem;
}
.res-form-group label i { color: var(--clr-gold); }
.res-form-group label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.res-form-group input,
.res-form-group select,
.res-form-group textarea {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  color: var(--clr-cream);
  font-family: var(--ff-sans);
  font-size: .92rem;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
  resize: vertical;
}
.res-form-group input::placeholder,
.res-form-group textarea::placeholder { color: var(--clr-muted); opacity: .55; }
.res-form-group select { cursor: pointer; appearance: auto; }
.res-form-group input:focus,
.res-form-group select:focus,
.res-form-group textarea:focus {
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}
.res-form-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.whatsapp-btn { border-color: #25d366 !important; color: #25d366 !important; }
.whatsapp-btn:hover { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
.res-success { padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.res-success-icon { font-size: 3.5rem; color: var(--clr-gold); }
.res-success h3 { font-family: var(--ff-serif); font-size: 1.6rem; color: var(--clr-cream); }
.res-success p { color: var(--clr-muted); }
/* Light mode */
[data-theme="light"] .res-form-group input,
[data-theme="light"] .res-form-group select,
[data-theme="light"] .res-form-group textarea { color: var(--clr-text); }
[data-theme="light"] .res-modal-close { background: rgba(255,255,255,.85); color: #333; border-color: rgba(0,0,0,.15); }
[data-theme="light"] .res-modal-close:hover { background: var(--clr-gold); color: #fff; }
@media (max-width:560px) {
  .res-form-row { grid-template-columns: 1fr; }
  .res-form { padding: 1.4rem 1.3rem 1.8rem; }
  .res-modal { padding: .5rem; align-items: flex-end; }
  .res-modal-panel { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; animation: modal-slide-up .4s cubic-bezier(.32,1.25,.64,1); }
}

/* ════════════════════════
   FLOATING BUTTONS
════════════════════════ */
.float-btn {
  position: fixed; right: 1.4rem;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer; border: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform var(--trans), box-shadow var(--trans), opacity var(--trans);
  text-decoration: none;
  z-index: 900;
}
.float-btn:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,.4); }
.float-whatsapp { bottom: 5.5rem; background: #25d366; color: #fff; }
.float-top { bottom: 1.4rem; background: var(--clr-gold); color: var(--clr-bg); opacity: 0; pointer-events: none; transition: opacity var(--trans), transform var(--trans); }
.float-top.visible { opacity: 1; pointer-events: auto; }
.float-tooltip {
  position: absolute; right: calc(100% + .6rem); top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.85); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity var(--trans);
}
.float-btn:hover .float-tooltip { opacity: 1; }

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-sans);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color .4s ease, color .3s ease;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

/* ── Container ── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }

/* ── Section Labels ── */
.section-eyebrow {
  font-family: var(--ff-sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--clr-gold);
  margin-bottom:.6rem;
}
.section-title {
  font-family: var(--ff-serif);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color: var(--clr-cream);
  line-height:1.15;
  margin-bottom:1rem;
}
.section-title em { color: var(--clr-gold); font-style:italic; }
.section-subtitle {
  font-size:1.05rem;
  color: var(--clr-muted);
  max-width:520px;
}

/* ════════════════════════
   NAVBAR
════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.9rem 0;
  background:transparent;
  transition: background var(--trans), box-shadow var(--trans), padding var(--trans);
}
#navbar.scrolled {
  background:rgba(15,11,8,.97);
  box-shadow:0 2px 20px rgba(0,0,0,.6);
  padding:.6rem 0;
  backdrop-filter: blur(12px);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo {
  display:flex; align-items:center; gap:.75rem;
  font-family: var(--ff-serif);
  font-size:1.4rem;
  color: var(--clr-cream);
  font-weight:700;
}
.nav-logo-img {
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--clr-gold);
}
.nav-links {
  display:flex; align-items:center; gap:2rem;
}
.nav-links a {
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--clr-muted);
  transition: color var(--trans);
  position:relative;
}
.nav-links a::after {
  content:'';
  position:absolute; bottom:-4px; left:0; right:0; height:1px;
  background: var(--clr-gold);
  transform:scaleX(0); transform-origin:left;
  transition: transform var(--trans);
}
.nav-links a:hover,
.nav-links a:focus { color: var(--clr-gold); }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta {
  background: var(--clr-gold) !important;
  color: var(--clr-bg) !important;
  padding:.5rem 1.2rem !important;
  border-radius:50px !important;
  font-weight:700 !important;
  transition: background var(--trans), transform var(--trans) !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background: var(--clr-gold-lt) !important; transform:translateY(-2px); }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background: var(--clr-cream);
  border-radius:2px;
  transition: transform var(--trans), opacity var(--trans);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Nav Actions — wraps theme toggle + hamburger */
.nav-actions {
  display:flex; align-items:center; gap:.5rem;
}

/* Theme Toggle Button */
.theme-toggle {
  background:transparent;
  border:1px solid var(--clr-border);
  color:var(--clr-muted);
  border-radius:50%;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:.9rem;
  transition:all var(--trans);
  flex-shrink:0;
}
.theme-toggle:hover {
  border-color:var(--clr-gold);
  color:var(--clr-gold);
  background:rgba(201,168,76,.12);
}
/* On transparent navbar (dark hero bg) — always show light */
#navbar:not(.scrolled) .theme-toggle {
  border-color:rgba(245,237,216,.25);
  color:rgba(245,237,216,.6);
}
#navbar:not(.scrolled) .theme-toggle:hover {
  border-color:var(--clr-gold);
  color:var(--clr-gold);
}
/* Hamburger lines & nav logo always light on transparent hero navbar */
#navbar:not(.scrolled) .hamburger span {
  background: rgba(245,237,216,.85);
}
#navbar:not(.scrolled) .nav-logo {
  color: rgba(245,237,216,.9);
}

/* ════════════════════════
   HERO
════════════════════════ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--clr-bg);
  text-align:center;
  overflow:hidden;
}

/* ── Hero Slideshow ── */
.hero-slides {
  position:absolute; inset:0; z-index:0;
}
.hero-slide {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation: heroSlide 20s ease-in-out infinite;
  will-change: opacity;
}
.hero-slide:nth-child(1) { animation-delay:  0s; }
.hero-slide:nth-child(2) { animation-delay:  5s; }
.hero-slide:nth-child(3) { animation-delay: 10s; }
.hero-slide:nth-child(4) { animation-delay: 15s; }

@keyframes heroSlide {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  20%  { opacity: 1; }
  26%  { opacity: 0; }
  100% { opacity: 0; }
}
.hero-overlay {
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(
    160deg,
    rgba(10,7,4,.88) 0%,
    rgba(15,11,8,.72) 50%,
    rgba(139,58,42,.3) 100%
  );
}
.hero-content {
  position:relative; z-index:2;
  padding:2rem 1.5rem;
  max-width:760px;
}
.hero-tagline {
  font-family: var(--ff-sans);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--clr-gold);
  margin-bottom:1.2rem;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.hero-tagline::before,
.hero-tagline::after {
  content:''; display:block; height:1px; width:40px;
  background: var(--clr-gold); opacity:.6;
}
.hero-title {
  font-family: var(--ff-serif);
  font-size:clamp(3.5rem,10vw,7rem);
  font-weight:700;
  color: var(--clr-cream);
  line-height:1;
  margin-bottom:.8rem;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.hero-title em {
  font-style:italic;
  color: var(--clr-gold);
  display:block;
}
.hero-subtitle {
  font-family: var(--ff-elegant);
  font-size:clamp(1.1rem,2.5vw,1.5rem);
  color: var(--clr-cream);
  opacity:.85;
  margin-bottom:1.6rem;
  font-weight:300;
  letter-spacing:.04em;
}
.hero-rating {
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.3);
  border-radius:50px;
  padding:.4rem 1.2rem;
  margin-bottom:2rem;
  font-size:.9rem;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--trans);
}
.hero-rating:hover {
  background:rgba(201,168,76,.24);
  border-color:rgba(201,168,76,.65);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,168,76,.2);
}
.stars { color: var(--clr-gold); font-size:1.1rem; letter-spacing:.1em; }
.rating-score { color: var(--clr-gold); font-weight:700; font-size:1.1rem; }
.rating-label { color: var(--clr-muted); }
/* Hero has a dark overlay in all themes — keep these readable */
[data-theme="light"] .hero-content .rating-label {
  color: rgba(245,237,216,.8);
}
[data-theme="light"] .hero-actions .btn-outline {
  color: rgba(245,237,216,.9);
  border-color: rgba(245,237,216,.4);
}
[data-theme="light"] .hero-actions .btn-outline:hover {
  background: rgba(245,237,216,.1);
  border-color: rgba(245,237,216,.7);
}
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  color: var(--clr-gold);
  font-size:1.4rem;
  animation: bounce 2s infinite;
  z-index:2;
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(8px); }
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 2rem;
  border-radius:50px;
  font-family: var(--ff-sans);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  border:2px solid transparent;
  transition: all var(--trans);
}
.btn-primary {
  background: var(--clr-gold);
  color: var(--clr-bg);
  border-color: var(--clr-gold);
}
.btn-primary:hover {
  background: var(--clr-gold-lt);
  border-color: var(--clr-gold-lt);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(201,168,76,.3);
}
.btn-outline {
  background:transparent;
  color: var(--clr-cream);
  border-color: rgba(245,237,216,.4);
}
.btn-outline:hover {
  background:rgba(245,237,216,.08);
  border-color: var(--clr-cream);
  transform:translateY(-3px);
}
.btn-lg { padding:1rem 2.5rem; font-size:.95rem; }

/* ════════════════════════
   RIBBON
════════════════════════ */
.ribbon {
  background: var(--clr-gold);
  padding:.7rem 0;
  overflow:hidden;
  white-space:nowrap;
}
.ribbon-inner {
  display:inline-flex; gap:2.5rem;
  animation: marquee 28s linear infinite;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--clr-bg);
}
.ribbon-inner span { display:inline-flex; align-items:center; gap:.5rem; }
.ribbon-dot { font-size:.6rem; opacity:.6; }
@keyframes marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* ════════════════════════
   ABOUT
════════════════════════ */
.about {
  padding:6rem 0;
  background: var(--clr-surface);
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
}
.about-image-wrap {
  position:relative;
}
.about-img {
  width:100%; border-radius:var(--radius-lg);
  object-fit:cover; max-height:520px;
  box-shadow: var(--shadow);
  border:1px solid var(--clr-border);
}
.about-badge {
  position:absolute; bottom:-1.5rem; right:-1.5rem;
  background: var(--clr-gold);
  color: var(--clr-bg);
  border-radius:50%;
  width:100px; height:100px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-weight:700;
  box-shadow: var(--shadow);
  text-align:center;
}
.badge-number { font-size:1.2rem; line-height:1; }
.badge-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; opacity:.8; }
.about-text .section-title { margin-top:.5rem; }
.about-lead {
  font-family: var(--ff-elegant);
  font-size:1.35rem;
  font-style:italic;
  color: var(--clr-gold-lt);
  margin-bottom:1rem;
  line-height:1.4;
}
.about-text p {
  color: var(--clr-muted);
  margin-bottom:1rem;
  font-size:1rem;
}
.about-pills {
  display:flex; flex-wrap:wrap; gap:.6rem; margin:1.5rem 0 1rem;
}
.pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .9rem;
  border-radius:50px;
  border:1px solid var(--clr-border);
  font-size:.82rem;
  color: var(--clr-muted);
  transition: border-color var(--trans), color var(--trans);
}
.pill i { color: var(--clr-gold); }
.pill:hover { border-color: var(--clr-gold); color: var(--clr-gold-lt); }
.about-price-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  color: var(--clr-gold);
  font-weight:600;
  font-size:.95rem;
  margin-top:.5rem;
}

/* ════════════════════════
   MENU SECTION
════════════════════════ */
.menu-section {
  padding:6rem 0 4rem;
  background: var(--clr-bg);
}
.menu-section .container > .section-eyebrow,
.menu-section .container > .section-title,
.menu-section .container > .section-subtitle { text-align:center; margin-left:auto; margin-right:auto; }

/* Tabs */
.menu-tabs {
  display:flex; flex-wrap:wrap; gap:.5rem;
  justify-content:center;
  margin:2.5rem 0 3rem;
}
.menu-tab {
  padding:.5rem 1.3rem;
  border:1px solid var(--clr-border);
  border-radius:50px;
  background:transparent;
  color: var(--clr-muted);
  font-family: var(--ff-sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition: all var(--trans);
}
.menu-tab:hover { color: var(--clr-gold); border-color: var(--clr-gold); }
.menu-tab.active {
  background: var(--clr-gold);
  color: var(--clr-bg);
  border-color: var(--clr-gold);
}

/* Panels */
.menu-panel { display:none; }
.menu-panel.active { display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Grid */
.menu-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.5rem;
}
.chefs-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.drinks-grid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

/* Cards */
.menu-card {
  background: var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  overflow:hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  position:relative;
}
.menu-card:hover {
  transform:translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--clr-gold);
}
.menu-card img {
  width:100%; height:200px; object-fit:cover;
  transition: transform .5s ease;
}
.menu-card:hover img { transform:scale(1.05); }
.menu-card-body { padding:1.1rem 1.2rem 1.2rem; }
.menu-card-body.no-img { padding:1.5rem 1.4rem; }
.menu-card-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:.8rem; margin-bottom:.4rem;
}
.menu-card-header h3 {
  font-family: var(--ff-serif);
  font-size:1.05rem;
  font-weight:600;
  color: var(--clr-cream);
  line-height:1.3;
}
.price {
  font-size:.95rem;
  font-weight:700;
  color: var(--clr-gold);
  white-space:nowrap;
  margin-top:.1rem;
}
.menu-card-desc {
  font-size:.83rem;
  color: var(--clr-muted);
  line-height:1.5;
  margin-top:.3rem;
}

/* Chef card */
.chef-card { border-color:rgba(201,168,76,.25); }
.chef-badge {
  position:absolute; top:.8rem; right:.8rem;
  background: var(--clr-gold);
  color: var(--clr-bg);
  font-size:.68rem;
  font-weight:700;
  padding:.25rem .65rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.06em;
  display:flex; align-items:center; gap:.3rem;
  z-index:2;
}
/* Premium badge */
.premium-item { border-color:rgba(139,58,42,.4); }
.premium-badge {
  display:inline-block;
  background:rgba(139,58,42,.25);
  color:#e07b6a;
  border:1px solid rgba(139,58,42,.4);
  font-size:.68rem;
  font-weight:700;
  padding:.2rem .6rem;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:.6rem;
}
/* Cocktail card */
.cocktail-card { background:linear-gradient(135deg,var(--clr-card),rgba(90,122,82,.08)); }
.cocktail-icon {
  font-size:1.6rem;
  color: var(--clr-gold);
  margin-bottom:.5rem;
}

/* Drinks / Add-ons list */
.drinks-category {
  background: var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
  transition: border-color var(--trans);
}
.drinks-category:hover { border-color:var(--clr-gold); }
.drinks-cat-title {
  font-family: var(--ff-serif);
  font-size:1.05rem;
  color: var(--clr-cream);
  margin-bottom:1rem;
  display:flex; align-items:center; gap:.5rem;
}
.drinks-cat-title i { color: var(--clr-gold); }
.drinks-list li {
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 0;
  border-bottom:1px solid rgba(58,46,34,.5);
  font-size:.9rem;
  color: var(--clr-muted);
  gap:.8rem;
}
.drinks-list li:last-child { border-bottom:none; }
.drinks-list li span:last-child {
  color: var(--clr-gold);
  font-weight:700;
  white-space:nowrap;
}

/* Menu images CTA */
.menu-images-cta {
  margin-top:3.5rem; text-align:center;
}
.menu-images-cta p {
  color: var(--clr-muted); font-size:.9rem; margin-bottom:1rem;
}
.menu-images-thumbs {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
.menu-images-thumbs a img {
  width:120px; height:80px; object-fit:cover;
  border-radius:8px;
  border:2px solid var(--clr-border);
  transition: border-color var(--trans), transform var(--trans);
}
.menu-images-thumbs a:hover img {
  border-color: var(--clr-gold);
  transform:scale(1.06);
}

/* ════════════════════════
   FANCY CARD ENHANCEMENTS
════════════════════════ */

/* All cards are now clickable */
.menu-card { cursor: pointer; }

/* Image wrapper div (injected by JS) */
.menu-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.menu-card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.menu-card:hover .menu-card-img-wrap img { transform: scale(1.1); }

/* "View Details" overlay on image cards */
.menu-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,7,4,.75) 0%, rgba(10,7,4,.08) 55%, transparent 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding-bottom: .9rem; gap: .25rem;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.menu-card:hover .menu-card-img-overlay { opacity: 1; }
.menu-card-img-overlay i  { font-size: 1.2rem; color: rgba(255,255,255,.88); }
.menu-card-img-overlay span {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clr-gold);
}

/* Text-only cards: animated left gold accent on hover */
.menu-card:not(:has(.menu-card-img-wrap))::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--clr-gold), transparent 80%);
  border-radius: var(--radius) 0 0 var(--radius);
  opacity: 0; transform: scaleY(0); transform-origin: top;
  transition: opacity .3s ease, transform .4s ease;
}
.menu-card:not(:has(.menu-card-img-wrap)):hover::before { opacity: 1; transform: scaleY(1); }

/* Staggered card entrance when panel activates */
.menu-panel.active .menu-card { animation: cardIn .45s ease both; }
.menu-panel.active .menu-card:nth-child(2)   { animation-delay: .05s; }
.menu-panel.active .menu-card:nth-child(3)   { animation-delay: .10s; }
.menu-panel.active .menu-card:nth-child(4)   { animation-delay: .15s; }
.menu-panel.active .menu-card:nth-child(5)   { animation-delay: .20s; }
.menu-panel.active .menu-card:nth-child(6)   { animation-delay: .25s; }
.menu-panel.active .menu-card:nth-child(7)   { animation-delay: .30s; }
.menu-panel.active .menu-card:nth-child(8)   { animation-delay: .35s; }
.menu-panel.active .menu-card:nth-child(n+9) { animation-delay: .40s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════
   MENU ITEM MODAL
════════════════════════ */
.item-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9998;
  align-items: center; justify-content: center;
  padding: 1rem;
}
.item-modal.open { display: flex; }

.item-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  animation: modal-fade .3s ease;
}
.item-modal-panel {
  position: relative; z-index: 1;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 500px;
  max-height: 92vh;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--clr-border) transparent;
  box-shadow: 0 32px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.12);
  animation: modal-in .42s cubic-bezier(.34,1.3,.64,1);
}
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
@keyframes modal-in {
  from { opacity:0; transform:scale(.88) translateY(28px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes modal-slide-up {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

/* Close button */
.item-modal-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: all var(--trans);
}
.item-modal-close:hover {
  background: var(--clr-gold); border-color: var(--clr-gold);
  transform: rotate(90deg);
}

/* Image zone */
.item-modal-img-zone { position: relative; height: 260px; overflow: hidden; }
.item-modal-img-zone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-modal-img-grad {
  display: none;
}

/* No-image icon zone */
.item-modal-icon-zone {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--clr-surface), var(--clr-card));
  border-bottom: 1px solid var(--clr-border);
}
.item-modal-icon-bg { font-size: 6rem; color: var(--clr-gold); opacity: .1; }

/* Modal body */
.item-modal-body { padding: 1.6rem 1.8rem 2rem; }

.item-modal-badge-wrap { margin-bottom: .9rem; }
.item-modal-badge-wrap:empty { display: none; margin: 0; }
.modal-badge-chef {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--clr-gold); color: var(--clr-bg);
  font-size: .7rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .07em;
}
.modal-badge-premium {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(139,58,42,.18); color: #e07b6a;
  border: 1px solid rgba(139,58,42,.35);
  font-size: .7rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .07em;
}
.modal-badge-signature {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(90,70,130,.18); color: #b39ddb;
  border: 1px solid rgba(90,70,130,.3);
  font-size: .7rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .07em;
}
.item-modal-name {
  font-family: var(--ff-serif);
  font-size: clamp(1.35rem,4vw,1.75rem); font-weight: 700;
  color: var(--clr-cream); line-height: 1.25; margin-bottom: .6rem;
}
.item-modal-price-row {
  display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.4rem;
}
.item-modal-price {
  font-family: var(--ff-serif); font-size: 2.1rem; font-weight: 700;
  color: var(--clr-gold); line-height: 1;
}
.item-modal-price-note {
  font-size: .75rem; color: var(--clr-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.item-modal-rule {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.3rem;
  color: var(--clr-gold); font-size: .65rem; letter-spacing: .2em;
}
.item-modal-rule::before,
.item-modal-rule::after { content: ''; flex: 1; height: 1px; }
.item-modal-rule::before { background: linear-gradient(to right, transparent, var(--clr-border)); }
.item-modal-rule::after  { background: linear-gradient(to left,  transparent, var(--clr-border)); }
.item-modal-desc {
  color: var(--clr-cream); font-size: .95rem; line-height: 1.75; margin-bottom: 1.75rem;
}
.item-modal-desc.is-placeholder {
  font-family: var(--ff-elegant); font-style: italic;
  font-size: 1rem; color: var(--clr-muted);
}
.item-modal-footer { display: flex; gap: .75rem; flex-wrap: wrap; }
.item-modal-footer .btn { flex: 1; min-width: 130px; justify-content: center; }

/* Light mode overrides */
[data-theme="light"] .item-modal-panel {
  box-shadow: 0 24px 80px rgba(60,30,0,.2), 0 0 0 1px rgba(166,124,46,.18);
}
[data-theme="light"] .item-modal-img-grad {
  display: none;
}
[data-theme="light"] .item-modal-close {
  background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.12); color: #333;
}
[data-theme="light"] .item-modal-close:hover { background: var(--clr-gold); color: #fff; }
[data-theme="light"] .item-modal-icon-zone { background: linear-gradient(135deg,#eddfc6,#fff); }
[data-theme="light"] .item-modal-desc { color: #1a0e00; }
[data-theme="light"] .item-modal-desc.is-placeholder { color: #5c4a30; }

/* Mobile: slide up from bottom */
@media (max-width:480px) {
  .item-modal { padding: .5rem; align-items: flex-end; }
  .item-modal-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-width: 100%; max-height: 88vh;
    animation: modal-slide-up .42s cubic-bezier(.32,1.25,.64,1);
  }
  .item-modal-img-zone  { height: 200px; }
  .item-modal-body      { padding: 1.3rem 1.3rem 2rem; }
}

/* ════════════════════════
   GALLERY
════════════════════════ */
.gallery-section {
  padding:6rem 0 0;
  background: var(--clr-surface);
}
.gallery-section .container { text-align:center; margin-bottom:3rem; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows: auto;
  gap:6px;
}
.gallery-item {
  position:relative; overflow:hidden;
  cursor:pointer;
  aspect-ratio:1;
}
/* Make some cells bigger */
.gallery-item:nth-child(1) { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gallery-item:nth-child(8) { grid-column:span 2; aspect-ratio:auto; min-height:240px; }
.gallery-item:nth-child(11) { grid-column:span 2; aspect-ratio:auto; min-height:240px; }
.gallery-item img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease, filter .3s ease;
}
.gallery-item:hover img { transform:scale(1.08); filter:brightness(1.1); }
.gallery-caption {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(10,7,4,.85));
  padding:1.5rem .8rem .7rem;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.05em;
  color: var(--clr-cream);
  transform:translateY(100%);
  transition: transform var(--trans);
}
.gallery-item:hover .gallery-caption { transform:translateY(0); }

/* Lightbox */
.lightbox {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.95);
  align-items:center; justify-content:center;
  padding:1rem;
  flex-direction:column;
  gap:1rem;
}
.lightbox.open { display:flex; }
.lightbox img {
  max-width:90vw; max-height:80vh;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  object-fit:contain;
}
.lightbox-caption {
  color: var(--clr-muted);
  font-size:.9rem;
  text-align:center;
}
.lightbox-close {
  position:absolute; top:1rem; right:1.5rem;
  background:none; border:none; color:var(--clr-cream);
  font-size:2.5rem; cursor:pointer; line-height:1;
  transition:color var(--trans);
}
.lightbox-close:hover { color:var(--clr-gold); }
.lightbox-prev,
.lightbox-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(201,168,76,.15);
  border:1px solid rgba(201,168,76,.3);
  color:var(--clr-cream);
  font-size:2rem; cursor:pointer; padding:.3rem .9rem;
  border-radius:var(--radius);
  transition: background var(--trans);
}
.lightbox-prev { left:1rem; }
.lightbox-next { right:1rem; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(201,168,76,.35); }

/* ════════════════════════
   CONTACT
════════════════════════ */
.contact-section {
  padding:6rem 0;
  background: var(--clr-bg);
}
.contact-section .section-title,
.contact-section .section-eyebrow { text-align:center; }
.contact-section .section-title { margin-bottom:3rem; }
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem;
  align-items:start;
}
.contact-info { display:flex; flex-direction:column; gap:1.2rem; }
.info-card {
  display:flex; gap:1rem; align-items:flex-start;
  background: var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:1.2rem 1.3rem;
  transition: border-color var(--trans);
}
.info-card:hover { border-color: var(--clr-gold); }
.info-card > i {
  color: var(--clr-gold);
  font-size:1.3rem;
  margin-top:.1rem;
  flex-shrink:0;
}
.info-card h4 {
  font-family: var(--ff-serif);
  font-size:1rem;
  color: var(--clr-cream);
  margin-bottom:.3rem;
}
.info-card p { color: var(--clr-muted); font-size:.9rem; line-height:1.6; }
.info-card a { color: var(--clr-muted); }
.info-card a:hover { color: var(--clr-gold); }
.info-link {
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:.5rem;
  color: var(--clr-gold) !important;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.hours-table { border-collapse:collapse; width:100%; }
.hours-table td { padding:.2rem .5rem .2rem 0; font-size:.88rem; color:var(--clr-muted); }
.hours-table td:last-child { color: var(--clr-cream); font-weight:500; padding-left:.8rem; }
.social-links { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
.social-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.05em;
  border:1px solid var(--clr-border);
  transition: all var(--trans);
}
.social-btn.instagram:hover { background:#e1306c; border-color:#e1306c; color:#fff; }
.social-btn.google:hover { background:#4285f4; border-color:#4285f4; color:#fff; }
.contact-map {
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:420px;
  border:1px solid var(--clr-border);
  box-shadow:var(--shadow);
}

/* ════════════════════════
   RESERVATIONS
════════════════════════ */
.reservations-section {
  padding:6rem 0;
  background: linear-gradient(135deg, var(--clr-accent) 0%, #4a1e14 100%);
  position:relative; overflow:hidden;
}
.reservations-section::before {
  content:'';
  position:absolute; inset:0;
  background:url('Menu/Chimichurri Porchetta.webp') center/cover no-repeat;
  opacity:.08;
}
.res-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;
}
.res-text p {
  color:rgba(245,237,216,.75);
  margin:1rem 0 2rem;
  font-size:1.05rem;
}
.section-eyebrow.light { color: var(--clr-gold-lt); }
.section-title.light { color: var(--clr-cream); }
.res-image img {
  width:100%; border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  object-fit:cover; max-height:400px;
  border:2px solid rgba(201,168,76,.3);
}

/* ════════════════════════
   FOOTER
════════════════════════ */
.footer {
  background: var(--clr-surface);
  border-top:1px solid var(--clr-border);
  padding:4rem 0 0;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--clr-border);
}
.footer-brand .footer-logo {
  width:56px; height:56px; border-radius:50%;
  object-fit:cover; border:2px solid var(--clr-gold);
  margin-bottom:1rem;
}
.footer-brand h3 {
  font-family: var(--ff-serif);
  font-size:1.5rem;
  color: var(--clr-cream);
  margin-bottom:.6rem;
}
.footer-brand p { color: var(--clr-muted); font-size:.9rem; }
.footer-links h4, .footer-contact h4 {
  font-family: var(--ff-serif);
  font-size:1rem;
  color: var(--clr-cream);
  margin-bottom:1rem;
  position:relative; padding-bottom:.6rem;
}
.footer-links h4::after, .footer-contact h4::after {
  content:''; position:absolute; bottom:0; left:0;
  width:30px; height:1px; background:var(--clr-gold);
}
.footer-links ul li { margin-bottom:.5rem; }
.footer-links a, .footer-contact p, .footer-contact a {
  color: var(--clr-muted); font-size:.9rem;
  transition: color var(--trans);
}
.footer-links a:hover, .footer-contact a:hover { color: var(--clr-gold); }
.footer-contact p {
  display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.5rem;
}
.footer-contact i { color: var(--clr-gold); margin-top:.1rem; flex-shrink:0; }
.footer-socials { display:flex; gap:.8rem; margin-top:1rem; }
.footer-socials a {
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--clr-border);
  display:flex; align-items:center; justify-content:center;
  color: var(--clr-muted);
  font-size:.9rem;
  transition: all var(--trans);
}
.footer-socials a:hover {
  background: var(--clr-gold);
  border-color: var(--clr-gold);
  color: var(--clr-bg);
}
.footer-bottom {
  padding:1.5rem 0;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:.5rem;
  font-size:.82rem;
  color: var(--clr-muted);
}
.stars-small { color: var(--clr-gold); }
.footer-rating-link { transition:opacity var(--trans); }
.footer-rating-link:hover { opacity:.75; }

/* ════════════════════════
   LIGHT MODE OVERRIDES
════════════════════════ */

/* Navbar transparent state — always sits on dark hero image, keep text light */
[data-theme="light"] #navbar:not(.scrolled) .nav-logo       { color: #f5edd8; }
[data-theme="light"] #navbar:not(.scrolled) .nav-links a    { color: rgba(245,237,216,.75); }
[data-theme="light"] #navbar:not(.scrolled) .hamburger span { background: #f5edd8; }

/* Navbar scrolled — light background */
[data-theme="light"] #navbar.scrolled {
  background: rgba(253,248,240,.97);
  box-shadow: 0 2px 20px rgba(100,60,0,.12);
}

/* Hero is always dark-overlaid — force light text regardless of theme */
[data-theme="light"] .hero-title    { color: #f5edd8; }
[data-theme="light"] .hero-subtitle { color: rgba(245,237,216,.85); }

/* About section italic lead */
[data-theme="light"] .about-lead { color: var(--clr-gold); }

/* Gallery captions render over dark gradient overlays — always light */
[data-theme="light"] .gallery-caption { color: #f5edd8; }

/* Lightbox is always a near-black overlay */
[data-theme="light"] .lightbox-close { color: #f5edd8; }
[data-theme="light"] .lightbox-prev,
[data-theme="light"] .lightbox-next  { color: #f5edd8; }
[data-theme="light"] .lightbox-caption { color: rgba(245,237,216,.75); }

/* Reservations section is always dark-accented */
[data-theme="light"] .section-title.light { color: #f5edd8; }

/* Card/section transitions when switching theme */
[data-theme] .menu-card,
[data-theme] .info-card,
[data-theme] .drinks-category,
[data-theme] #navbar,
[data-theme] .footer,
[data-theme] .about,
[data-theme] .menu-section,
[data-theme] .contact-section,
[data-theme] .gallery-section { transition: background-color .4s ease, border-color .35s ease; }
@media (max-width:1024px) {
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-badge { bottom:1rem; right:1rem; }
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .gallery-item:nth-child(1) { grid-column:span 2; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-map { height:320px; }
  .res-inner { grid-template-columns:1fr; gap:2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-links {
    display:none;
    flex-direction:column;
    position:fixed; top:68px; left:0; right:0;
    z-index: 1001;
    background:rgba(15,11,8,.98);
    padding:1.5rem 2rem 2rem;
    gap:1.2rem;
    border-top:1px solid var(--clr-border);
    backdrop-filter:blur(16px);
    max-height:calc(100vh - 68px);
    overflow-y:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1rem; }
  .hamburger { display:flex; }
  /* Horizontal-scroll menu tabs — no wrapping on mobile */
  .menu-tabs {
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:.75rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .menu-tabs::-webkit-scrollbar { display:none; }
  .menu-tab { flex-shrink:0; }
  /* Gallery */
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-item:nth-child(1) { grid-column:span 2; }
  .gallery-item:nth-child(8),
  .gallery-item:nth-child(11) { grid-column:span 1; min-height:auto; }
  /* Gallery captions always visible on touch (no hover) */
  .gallery-caption { transform:none; }
  /* Lightbox — larger tap targets on mobile */
  .lightbox-prev, .lightbox-next { padding:.5rem .85rem; font-size:1.5rem; }
  .lightbox-prev { left:.3rem; }
  .lightbox-next { right:.3rem; }
  /* Light mode mobile nav overlay */
  [data-theme="light"] .nav-links {
    background: rgba(253,248,240,.98);
    border-top-color: var(--clr-border);
  }
  [data-theme="light"] .nav-links a { color: var(--clr-text); }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media (max-width:480px) {
  .hero-title { font-size:clamp(2.8rem,14vw,5rem); }
  .hero-actions { flex-direction:column; align-items:center; }
  .btn { padding:.65rem 1.5rem; }
  .menu-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .about-badge { position:relative; bottom:auto; right:auto; width:80px; height:80px; margin:-1rem auto 1rem auto; }
  .drinks-grid { grid-template-columns:1fr; }
  .section-title { font-size:clamp(1.75rem,8vw,2.5rem); }
  .menu-images-thumbs a img { width:90px; height:60px; }
  .lightbox-prev { left:.1rem; }
  .lightbox-next { right:.1rem; }
  .lightbox-prev, .lightbox-next { padding:.4rem .6rem; font-size:1.2rem; }
  .contact-map { height:260px; }
  .about-grid { gap:1.5rem; }
}