/* ═══════════════════════════════════════════════════════════
   Restaurant Platform — styles.css  (Design: Warm & Vivo)
   Palette: #4D3E3E · #FFF3CD · #FFC38B · #FF926B
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ──────────────────────────────────── */

/* Hero title — kept as before */
@font-face {
  font-family: 'Just Another Hand';
  src: url('fonts/JustAnotherHand.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Hero tagline — kept as before */
@font-face {
  font-family: 'Open Sans Cond';
  src: url('fonts/OpenSans-CondBold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Source Sans 3 — body / UI */
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/SourceSans3-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 — headings */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Regular-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Palette */
  --coral:       #FF926B;   /* primary accent — buttons, active states, prices */
  --peach:       #FFC38B;   /* secondary accent — hover, borders */
  --butter:      #FBF5DE;   /* warm cream — light section bg */
  --espresso:    #4D3E3E;   /* dark warm brown — text, dark sections */

  /* Derived tones */
  --espresso-deep:  #3a2d2d;   /* footer bg */
  --espresso-light: #6b5858;   /* muted text on dark */
  --espresso-faint: #9c8a8a;   /* very muted on dark */
  --butter-dark:    #f5e8b0;   /* slightly deeper cream for borders */
  --warm-white:     #fffdf8;   /* page/menu bg — barely warm */

  /* Readable text */
  --text-dark:   #2e1f1f;   /* near-black warm for body text */
  --text-mid:    #5a4040;   /* mid-dark for descriptions */
  --text-light:  #f0e8dc;   /* readable on dark espresso bg */
  --text-muted:  #c4a898;   /* muted on dark espresso bg */

  /* Fonts */
  --font-heading:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:     'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-hero:     'Just Another Hand', cursive;
  --font-tagline:  'Open Sans Cond', sans-serif;
}

/* ── Base ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color:       var(--text-dark);
  background:  var(--warm-white);
  line-height: 1.65;
}
.hidden { display: none !important; }

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

/* ── Section skeleton ───────────────────────────────────── */
.section {
  padding:    6rem 0;
  background: var(--warm-white);
}
.section.alt-bg { background: var(--warm-white); }

.section-header {
  text-align:    center;
  margin-bottom: 3.5rem;
}

/* Subtitle label with side rules */
.subtitle-label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.875rem;
  font-family:     var(--font-body);
  font-size:       0.6rem;
  font-weight:     600;
  letter-spacing:  0.45em;
  text-transform:  uppercase;
  color:           var(--coral);
  margin-bottom:   0.875rem;
}
.subtitle-label::before,
.subtitle-label::after {
  content:     '';
  width:       2rem;
  height:      1px;
  background:  currentColor;
  opacity:     0.5;
  flex-shrink: 0;
}

/* Section title */
.section-title {
  font-family:    var(--font-heading);
  font-size:      clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight:    600;
  letter-spacing: -0.01em;
  color:          var(--espresso);
  line-height:    1.2;
}

/* Thin underline accent */
.section-underline {
  width:      2.5rem;
  height:     2px;
  background: var(--coral);
  opacity:    0.5;
  margin:     1.125rem auto 0;
  border-radius: 1px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position:        relative;
  height:          600px;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.hero-bg {
  position:            absolute;
  inset:               0;
  background-image:    url('images/heroo.webp');
  background-size:     cover;
  background-position: center center;
  background-color:    var(--espresso);
  transform:           scale(1.05);
  transition:          transform 8s ease-out;
  will-change:         transform;
}
body.loaded .hero-bg { transform: scale(1); }

/* Warm-tinted gradient — espresso tone instead of cold black */
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(77, 62, 62, 0.04) 0%,
    rgba(77, 62, 62, 0.20) 45%,
    rgba(77, 62, 62, 0.60) 100%
  );
}

.hero-content {
  position:   relative;
  z-index:    1;
  text-align: center;
  color:      #fff;
  padding:    0 1.5rem;
  max-width:  52rem;
}

.hero-title {
  font-family:    var(--font-hero);
  font-size:      clamp(2.8rem, 8.4vw, 5.6rem);
  font-weight:    400;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height:    1.15;
  text-shadow:    0 2px 16px rgba(77, 62, 62, 0.6);
  margin-bottom:  0.5rem;
}

.hero-tagline {
  font-family:    var(--font-tagline);
  font-weight:    700;
  font-size:      clamp(0.75rem, 1.6vw, 0.875rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity:        0.88;
  margin-bottom:  2.25rem;
  text-shadow:    0 1px 6px rgba(77, 62, 62, 0.5);
}

.hero-ctas {
  display:         flex;
  gap:             0.75rem;
  justify-content: center;
  flex-direction:  column;
  align-items:     center;
}
@media (min-width: 360px) { .hero-ctas { flex-direction: row; } }
@media (min-width: 768px) { .hero-ctas { gap: 1rem; } }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0 1.5rem;
  min-height:      44px;
  border-radius:   0.25rem;
  font-family:     var(--font-body);
  font-size:       0.75rem;
  font-weight:     600;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      all 0.2s ease;
  border:          1.5px solid transparent;
  white-space:     nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .btn { padding: 0 2.25rem; min-height: 48px; } }

.btn-primary {
  background:   #fff;
  color:        var(--espresso);
  border-color: #fff;
  box-shadow:   0 2px 16px rgba(77, 62, 62, 0.18);
}
.btn-primary:hover  { background: var(--butter); border-color: var(--butter); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--coral); }

.btn-outline {
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.65);
}
.btn-outline:hover  { background: #fff; color: var(--espresso); border-color: #fff; }
.btn-outline:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--coral); }

/* ── About section ──────────────────────────────────────── */
/* alt-bg (butter #FFF3CD) is added by JS when about is shown */

.about-section .subtitle-label { color: var(--coral); }
.about-section .section-title  { color: var(--espresso); }

.about-text {
  max-width:   44rem;
  margin:      0 auto;
  font-size:   1.0625rem;
  color:       var(--text-mid);
  line-height: 1.95;
  text-align:  center;
}

/* ── Menu section ───────────────────────────────────────── */
.menu-section { position: relative; background: var(--butter); }

/* Language toggle */
.lang-toggle {
  display:         flex;
  gap:             0.25rem;
  justify-content: center;
  margin-bottom:   2rem;
}
.lang-btn {
  padding:        0.3rem 0.875rem;
  border-radius:  0.25rem;
  border:         1px solid var(--butter-dark);
  background:     transparent;
  color:          var(--text-mid);
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition:     all 0.15s ease;
}
.lang-btn.active,
.lang-btn:hover {
  background:   var(--coral);
  color:        #fff;
  border-color: var(--coral);
}

/* Category tab bar */
.category-pills {
  position:        sticky;
  top:             0;
  z-index:         10;
  background:      var(--butter);
  padding:         1.125rem 0;
  margin-bottom:   2.5rem;
  border-bottom:   1px solid var(--butter-dark);
  display:         flex;
  justify-content: center;
  gap:             0;
  flex-wrap:       wrap;
  overflow-x:      auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }

.pill-btn {
  padding:        0.6rem 1.25rem;
  border-radius:  0;
  border:         none;
  border-bottom:  2px solid transparent;
  background:     transparent;
  color:          var(--text-mid);
  font-family:    var(--font-body);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:     color 0.18s ease, border-color 0.18s ease;
  white-space:    nowrap;
  margin-bottom:  -1px;
}
.pill-btn:hover  { color: var(--espresso); border-bottom-color: var(--peach); }
.pill-btn.active { color: var(--coral);    border-bottom-color: var(--coral); }
.pill-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Menu items container */
.menu-items-wrap {
  max-width:     50rem;
  margin:        0 auto;
  max-height:    620px;
  overflow-y:    auto;
  padding-right: 0.5rem;
}
.menu-items-wrap::-webkit-scrollbar { width: 3px; }
.menu-items-wrap::-webkit-scrollbar-track { background: transparent; }
.menu-items-wrap::-webkit-scrollbar-thumb { background: var(--butter-dark); border-radius: 2px; }

.menu-item {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  padding:         1.125rem 1rem;
  border-bottom:   1px solid var(--butter-dark);
  transition:      background 0.15s ease;
  gap:             1.5rem;
}
.menu-item:hover      { background: var(--butter); }
.menu-item:last-child { border-bottom: none; }

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

.menu-item-name {
  font-family:    var(--font-heading);
  font-size:      1.0625rem;
  font-weight:    400;
  color:          var(--espresso);
  display:        block;
  line-height:    1.4;
}

.menu-item-desc {
  font-family: var(--font-body);
  font-size:   0.8125rem;
  color:       var(--text-mid);
  margin-top:  0.25rem;
  line-height: 1.55;
  font-style:  italic;
}

/* Price — serif italic in coral */
.menu-item-price {
  font-family: var(--font-heading);
  font-size:   1.0625rem;
  color:       var(--coral);
  font-weight: 400;
  font-style:  italic;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

/* Loading / error states */
.loading-state,
.error-state {
  text-align:  center;
  padding:     3rem 1rem;
  color:       var(--text-mid);
  font-family: var(--font-body);
  font-size:   0.9375rem;
  font-style:  italic;
}
.error-state { color: #c0392b; font-style: normal; }

/* ── Contacts ───────────────────────────────────────────── */
.contacts-section.alt-bg,
.contacts-section {
  background: var(--espresso);
  padding:    5rem 0;
}

.contacts-section .subtitle-label    { color: var(--peach); }
.contacts-section .section-title     { color: var(--text-light); font-weight: 400; }
.contacts-section .section-underline { background: var(--coral); opacity: 0.6; }

.contacts-grid {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.75rem;
  max-width:      36rem;
  margin:         0 auto;
}
@media (min-width: 640px) {
  .contacts-grid {
    flex-direction:  row;
    flex-wrap:       wrap;
    justify-content: center;
    max-width:       100%;
    gap:             1.5rem 3.5rem;
  }
}

.contact-item {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  font-family: var(--font-body);
  font-size:   0.9375rem;
  color:       var(--text-light);
}
.contact-icon {
  width:       1.25rem;
  height:      1.25rem;
  flex-shrink: 0;
  color:       var(--peach);
}
.contact-item a {
  color:      var(--text-light);
  opacity:    0.8;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.contact-item a:hover { color: var(--peach); opacity: 1; }

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--espresso-deep);
  color:      var(--espresso-faint);
  padding:    2rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255, 146, 107, 0.12);
}
.footer-name {
  font-family:    var(--font-heading);
  font-size:      1.25rem;
  font-weight:    400;
  font-style:     italic;
  letter-spacing: 0.04em;
  color:          rgba(255, 243, 205, 0.35);
  margin-bottom:  0.375rem;
}
.footer-copy {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.08em;
  color:          var(--espresso-faint);
}

/* ── Menu section (static image variant) ────────────────── */
.menu-cta-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.5rem;
  padding:        2rem 0 0.5rem;
  text-align:     center;
}
.menu-cta-desc {
  font-family: var(--font-body);
  font-size:   1rem;
  color:       var(--text-mid);
  max-width:   30rem;
}
.btn-menu-open {
  cursor: pointer;
}

/* ── Menu modal / lightbox ───────────────────────────────── */
.menu-modal {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  9000;
  align-items:     center;
  justify-content: center;
}
.menu-modal.open { display: flex; }

.menu-modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(30, 20, 10, 0.82);
  cursor:     pointer;
}

.menu-modal-inner {
  position:      relative;
  z-index:       1;
  max-width:     min(92vw, 720px);
  max-height:    90vh;
  overflow-y:    auto;
  border-radius: 0.5rem;
  box-shadow:    0 24px 64px rgba(0,0,0,0.55);
  background:    #fff;
}

.menu-modal-img {
  display: block;
  width:   100%;
  height:  auto;
}

.menu-modal-close {
  position:      absolute;
  top:           0.5rem;
  right:         0.5rem;
  z-index:       2;
  width:         2.25rem;
  height:        2.25rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        none;
  border-radius: 50%;
  background:    rgba(30, 20, 10, 0.65);
  color:         #fff;
  cursor:        pointer;
  transition:    background 0.15s ease;
}
.menu-modal-close:hover { background: var(--espresso); }
.menu-modal-close svg {
  width:  1rem;
  height: 1rem;
}

/* ── Utility ────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease both; }