/* --- Cafe Bien Razor (ported look & feel) --- */

:root{
  --paper:#F5F2EB;
  --ink:#1A1A1A;
  --muted:#585858;
  --border:#E0DCD3;
  --accent:#C15B28;
}

html{ scroll-behavior:smooth; }
body{ font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--paper); color: var(--ink); }
h1,h2,h3,h4,h5,h6{ font-family:"Syne", system-ui, sans-serif; letter-spacing:-0.02em; }
.font-mono{ font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.font-heading{ font-family:"Syne", system-ui, sans-serif; }
.font-body{ font-family:"DM Sans", system-ui, sans-serif; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--paper); }
::-webkit-scrollbar-thumb{ background: var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
::selection{ background: var(--accent); color:#fff; }

/* Hero */
.hero-section{ min-height:100vh; position:relative; }
.hero-image{ object-fit:cover; transition: transform .6s ease-out; }
.hero-image:hover{ transform: scale(1.02); }

/* Menu grid */
.menu-grid{ display:grid; gap:1.5rem; }
@media(min-width:768px){
  .menu-grid{ grid-template-columns: repeat(2, 1fr); gap:2rem; }
}
@media(min-width:1024px){
  .menu-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Gallery masonry */
.gallery-masonry{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; }
@media(min-width:768px){
  .gallery-masonry{ grid-template-columns: repeat(3, 1fr); gap:1.5rem; }
}
.gallery-item{ overflow:hidden; position:relative; }
.gallery-item:nth-child(1){ grid-row: span 2; }
.gallery-item:nth-child(4){ grid-column: span 2; }
@media(min-width:768px){
  .gallery-item:nth-child(4){ grid-column: span 1; }
  .gallery-item:nth-child(5){ grid-row: span 2; }
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease-out; }
.gallery-item:hover img{ transform: scale(1.05); }
.gallery-caption{
  position:absolute; bottom:0; left:0; right:0;
  padding:1rem;
  background: linear-gradient(transparent, rgba(26,26,26,.8));
  color:#fff;
  opacity:0;
  transition: opacity .3s ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; }

/* Review cards */
.review-card{ transition: transform .3s ease, box-shadow .3s ease; }
.review-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,.08); }

/* Map placeholder */
.map-placeholder{ background: var(--border); position:relative; overflow:hidden; }
.map-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 20px, #d4d0c7 20px, #d4d0c7 21px),
              repeating-linear-gradient(90deg, transparent, transparent 20px, #d4d0c7 20px, #d4d0c7 21px);
  opacity:.5;
}

/* WhatsApp floating */
.whatsapp-btn{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:60px; height:60px; border-radius:999px;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  transition: transform .3s ease, box-shadow .3s ease;
}
.whatsapp-btn:hover{ transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,.5); }

/* Section fade-in on scroll */
.section-fade{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.section-fade.visible{ opacity:1; transform: translateY(0); }

/* Button lift */
.btn-lift{ transition: transform .3s ease, box-shadow .3s ease; }
.btn-lift:hover{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Underline inputs */
.input-underline{
  background:transparent;
  border:none;
  border-bottom: 1px solid var(--border);
  border-radius:0;
  padding: .75rem 0;
  transition: border-color .3s ease;
}
.input-underline:focus{ outline:none; border-bottom-color: var(--ink); }

/* Navigation glassmorphism */
.nav-glass{
  background: rgba(245,242,235,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Nav links */
.navlink{
  font-size:.875rem;
  font-weight:500;
  color: var(--muted);
  transition: color .2s ease;
}
.navlink:hover{ color: var(--ink); }

/* Accent helpers */
.text-terracotta{ color: var(--accent); }
.badge-accent{
  background-color: rgba(193, 91, 40, 0.1);
  color: var(--accent);
  border: 1px solid rgba(193, 91, 40, 0.2);
}
.star-filled{ color: var(--accent); }

/* Smooth scroll anchor offset */
section[id]{ scroll-margin-top: 80px; }

/* Simple entrance animations (CDN Tailwind doesn't include tailwindcss-animate) */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInUp { from{opacity:0; transform: translateY(14px);} to{opacity:1; transform: translateY(0);} }

.animate-fade-in{ animation: fadeIn .7s ease both; }
.animate-fade-in-up{ animation: fadeInUp .8s ease both; }
.animate-delay-100{ animation-delay: .1s; }
.animate-delay-200{ animation-delay: .2s; }
.animate-delay-300{ animation-delay: .3s; }
.animate-delay-400{ animation-delay: .4s; }