/* ═══════════════════════════════════════════════════════════
   Restaurant Platform – styles.css
   Replicates Seafood_site menu UI/UX patterns:
     • Sticky category pills with rounded-full shape
     • 600px max-height scrollable items container
     • item row: flex justify-between, name + optional desc, price
     • hover bg-gray-50, border-bottom separators
     • Section headers: subtitle-label + serif title + underline
   No external font requests. Uses system serif (Georgia) for
   headings instead of Google-hosted Playfair Display.
   To self-host Playfair Display, add @font-face rules here and
   place the woff2 files in /public/fonts/.
   ═══════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ──────────────────────────────────── */
@font-face {
  font-family: 'Just Another Hand';
  src: url('fonts/JustAnotherHand.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montclar';
  src: url('fonts/Montclar.otf') format('opentype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Cond';
  src: url('fonts/OpenSans-CondBold.ttf') format('truetype');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* ── 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 {
  /* Override from JS via style.setProperty('--accent', value) */
  --accent:        #023c54;
  --accent-dark:   #01293a;
  --navy:          #0a2540;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --white:    #ffffff;

  /* Self-host Playfair Display to match Seafood_site exactly.
     Fallback: Georgia (ships with every OS) is the closest
     system serif and maintains the elegant feel. */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
}

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

/* ── Container ──────────────────────────────────────────── */
.container {
  max-width: 80rem; /* 1280px – same as Seafood_site max-w-7xl */
  margin:    0 auto;
  padding:   0 1rem;
}

/* ── Section skeleton (matches Seafood_site py-20 / mb-12) ─ */
.section {
  padding:    5rem 0;   /* py-20 = 80px */
  background: var(--white);
}
.section.alt-bg { background: var(--gray-50); }

.section-header {
  text-align:    center;
  margin-bottom: 3rem;  /* mb-12 = 48px */
}

/* Subtitle label – 12px, uppercase, spaced (subtitle-text) */
.subtitle-label {
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.75rem;
}
@media (min-width: 768px) {
  .subtitle-label { font-size: 0.875rem; letter-spacing: 0.3em; }
}

/* Section title – serif, fluid size (section-title) */
.section-title {
  font-family:    var(--font-heading);
  font-size:      clamp(1.75rem, 4vw, 3rem);
  font-weight:    500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--accent);
  line-height:    1.1;
}

/* Decorative underline (section-underline) */
.section-underline {
  width:      4rem;
  height:     2px;
  background: var(--accent);
  opacity:    0.3;
  margin:     1rem auto 0;
}

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

.hero-bg {
  position:            absolute;
  inset:               0;
  /* Default hero — JS will override per-restaurant via style attribute */
  background-image:    url('images/heroo.webp');
  background-size:     cover;
  background-position: center center;
  background-color:    var(--navy); /* fallback if image missing */
  transform:           scale(1.05);
  transition:          transform 8s ease-out;
  will-change:         transform;
}
/* Animate zoom on load for visual depth */
body.loaded .hero-bg { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset:    0;
  background: rgba(0, 0, 0, 0.38);
}

.hero-content {
  position:   relative;
  z-index:    1;
  text-align: center;
  color:      var(--white);
  padding:    0 1rem;
  max-width:  56rem;
}

/* Hero title – Just Another Hand */
.hero-title {
  font-family:    'Just Another Hand', var(--font-heading);
  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 8px rgba(0, 0, 0, 0.45);
  margin-bottom:  0.5rem;
}

/* Tagline – Open Sans Condensed Bold, uppercase */
.hero-tagline {
  font-family:    'Open Sans Cond', var(--font-body);
  font-weight:    700;
  font-size:      clamp(0.85rem, 1.8vw, 1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity:        0.9;
  margin-bottom:  2rem;
  text-shadow:    0 1px 4px rgba(0, 0, 0, 0.3);
}

.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.25rem;
  min-height:      44px;       /* minimum touch target */
  border-radius:   0.375rem;
  font-size:       0.8125rem;
  font-weight:     700;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  cursor:          pointer;
  transition:      all 0.2s ease;
  border:          2px solid transparent;
  white-space:     nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  .btn { padding: 0 2rem; min-height: 48px; font-size: 0.875rem; }
}

/* Primary: white background (matches Seafood_site "VER MENU") */
.btn-primary {
  background:   var(--white);
  color:        var(--gray-900);
  box-shadow:   0 4px 14px rgba(0, 0, 0, 0.18);
  border-color: transparent;
}
.btn-primary:hover  { background: var(--gray-50); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
.btn-primary:active { background: var(--gray-100); }
.btn-primary:focus-visible {
  outline:        none;
  box-shadow:     0 0 0 2px var(--white), 0 0 0 4px rgba(0,0,0,0.5);
}

/* Outline: glass effect (matches Seafood_site "RESERVAR") */
.btn-outline {
  background:      transparent;
  color:           var(--white);
  border-color:    var(--white);
  backdrop-filter: blur(8px) brightness(1.1);
}
.btn-outline:hover  { background: var(--white); color: var(--gray-800); }
.btn-outline:active { background: var(--gray-100); color: var(--gray-800); }
.btn-outline:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(0,0,0,0.5);
}

/* ── About section ──────────────────────────────────────── */
.about-text {
  max-width:   48rem;
  margin:      0 auto;
  font-size:   1.0625rem;
  color:       var(--gray-600);
  line-height: 1.85;
  text-align:  center;
}

/* ── Menu section ───────────────────────────────────────── */
.menu-section { position: relative; }

/* Language toggle pills */
.lang-toggle {
  display:         flex;
  gap:             0.5rem;
  justify-content: center;
  margin-bottom:   1.5rem;
}
.lang-btn {
  padding:        0.375rem 1rem;
  border-radius:  9999px;
  border:         1px solid var(--gray-200);
  background:     var(--gray-100);
  color:          var(--gray-700);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:     all 0.15s ease;
}
.lang-btn.active,
.lang-btn:hover {
  background:   var(--accent);
  color:        var(--white);
  border-color: var(--accent);
}

/* ─ Category pills (Seafood_site: sticky top-0, z-10, bg-gray-50)
   They stick at the top as soon as the user scrolls into the menu. */
.category-pills {
  position:        sticky;
  top:             0;
  z-index:         10;
  background:      var(--white); /* white because menu-section is on white bg */
  padding:         1.5rem 0;
  margin-bottom:   2rem;
  border-bottom:   1px solid var(--gray-200);
  display:         flex;
  justify-content: center;
  gap:             0.75rem;
  flex-wrap:       wrap;
}
/* If the menu section ever lands on alt-bg, sync the sticky bg */
.menu-section.alt-bg .category-pills { background: var(--gray-50); }

/* Individual pills (rounded-full, active=accent, inactive=gray-100) */
.pill-btn {
  padding:        0.75rem 1.5rem;
  border-radius:  9999px;  /* fully rounded – matches Seafood_site */
  border:         none;
  background:     var(--gray-100);
  color:          var(--gray-700);
  font-size:      0.8125rem;
  font-weight:    500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:     all 0.2s ease;
  white-space:    nowrap;
}
.pill-btn:hover  { background: var(--gray-200); }
.pill-btn.active { background: var(--accent); color: var(--white); }
.pill-btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

/* ─ Menu items (Seafood_site: max-h-[600px] overflow-y-auto pr-2) */
.menu-items-wrap {
  max-width:    56rem;   /* matches Seafood_site max-w-4xl roughly */
  margin:       0 auto;
  max-height:   600px;
  overflow-y:   auto;
  padding-right: 0.5rem; /* pr-2: space for scrollbar */
}
/* Custom scrollbar – subtle, matches the quiet design */
.menu-items-wrap::-webkit-scrollbar { width: 4px; }
.menu-items-wrap::-webkit-scrollbar-track { background: transparent; }
.menu-items-wrap::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

/* Each item row (Seafood_site: flex justify-between items-center
   border-b py-4 hover:bg-gray-50 px-4 transition-colors duration-150) */
.menu-item {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  padding:         1rem;
  border-bottom:   1px solid var(--gray-200);
  transition:      background 0.15s ease;
  gap:             1rem;
}
.menu-item:hover         { background: var(--gray-50); }
.menu-item:last-child    { border-bottom: none; }

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

/* Name (Seafood_site: text-gray-800 text-lg) */
.menu-item-name {
  font-size:   1.0625rem;
  color:       var(--gray-800);
  display:     block;
  line-height: 1.4;
}

/* Optional description */
.menu-item-desc {
  font-size:   0.8125rem;
  color:       var(--gray-600);
  margin-top:  0.25rem;
  line-height: 1.5;
}

/* Price (Seafood_site: text-gray-600 font-light text-lg ml-4) */
.menu-item-price {
  font-size:   1.0625rem;
  color:       var(--gray-600);
  font-weight: 300;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.0625rem; /* align with first line of name */
}

/* Loading / error states */
.loading-state,
.error-state {
  text-align: center;
  padding:    3rem 1rem;
  color:      var(--gray-600);
  font-size:  0.875rem;
}
.error-state { color: #b91c1c; }

/* ── Contacts ───────────────────────────────────────────── */
.contacts-grid {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1.5rem;
  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:            2rem 3rem;
  }
}

.contact-item {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
  font-size:   1rem;
  color:       var(--gray-700);
}
.contact-icon { font-size: 1.125rem; line-height: 1; flex-shrink: 0; }
.contact-item a {
  color:      inherit;
  transition: color 0.15s ease;
}
.contact-item a:hover { color: var(--accent); }

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  color:      var(--white);
  padding:    2.5rem 1rem;
  text-align: center;
}
.footer-name {
  font-family:    var(--font-heading);
  font-size:      1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  0.5rem;
}
.footer-copy {
  font-size: 0.75rem;
  color:     var(--gray-400);
}

/* ── Utility ────────────────────────────────────────────── */
/* Fade-in for the whole page once config is loaded */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.35s ease both; }