/* CLEANED RESTO.CSS — Only code actually used in index.html, menu.html, contact.html, reservatie.html */

/* === ROOT VARIABLES === */
:root{
  --bg:#0b0b0b;
  --panel:#141414;
  --accent:#d54a1c;
  --accent-glow:#f1b24a;
  --muted:#bdbdbd;
  --shadow:rgba(0,0,0,0.6);
}

*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',sans-serif}
body{background:var(--bg);color:#eee;line-height:1.5}

/* === NAVBAR === */
.vuur-navbar {
  background:#0d0d0d;
  padding:8px 0;
  position:sticky;
  top:0;
  z-index:999;
}

.nav-container {
  max-width:1250px;
  margin:auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav-logo img {height:60px;}

.nav-center {
  display:flex;
  gap:30px;
}

.nav-center a {
  color:#fff;
  text-decoration:none;
  font-size:1rem;
  transition:0.2s;
}
.nav-center a:hover { color:var(--accent-glow); }

.fb-btn {
  background:#4267B2;
  color:#fff;
  padding:6px 10px;     /* kleiner */
  border-radius:6px;
  font-weight:600;
  font-size:0.85rem;    /* iets kleiner lettertype */
  white-space:nowrap;   /* voorkomt rekken */
}


/* remove hamburger */
.nav-toggle, .mobile-menu { display:none !important; }

/* MOBILE NAV FIX */
@media(max-width:900px){
  .nav-container { 
    justify-content:center !important; 
  }

  .nav-center { 
    gap:22px; 
  }

  /* Facebook-knop NIET verbergen op gsm */
  .fb-btn { 
  display:block !important;  
  position:absolute;
  right:14px;
  padding:4px 8px;      /* kleiner */
  font-size:0.75rem;    /* kleiner lettertype */
}


  .nav-logo { 
    position:absolute; 
    left:14px; 
  }

  .nav-logo img { 
    height:48px; 
  }
}


/* === HERO === */

/* zachte fade-in voor hero */
.hero { animation: fadeHero 1.2s ease-out forwards; opacity:0; }
@keyframes fadeHero { to { opacity:1; transform:none; } }

.hero {
  background-image:url('houtskool1.jpg');
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  text-align:center;
  background-size:cover;
  background-position:center;
  border-radius:12px;
  overflow:hidden;
}

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

.hero-inner { position:relative; z-index:2; max-width:650px; }
.hero-inner h1 { font-size:3rem; margin-bottom:15px; }

@media(max-width:768px){
  .hero { min-height:70vh; padding-top:120px; }
  .hero-inner h1 { font-size:2.2rem; }
  .hero-inner p { font-size:1.1rem; margin-bottom:25px; }
  .hero-ctas { flex-direction:column; gap:10px; }
}

/* BUTTONS */

/* uniforme breedte voor alle hero-knoppen */
.hero-ctas a,
.hero-contact-btn a {
  width:160px;
  text-align:center;
}

.btn { padding:10px 18px; border-radius:10px; text-decoration:none; font-weight:600; display:inline-block; }
.btn.primary { background: var(--accent-glow); color:#111; }
.btn.gold { background:var(--accent-glow); color:#111; }
.btn.hero-bottom-btn { border:1px solid var(--accent-glow); color:var(--accent-glow); }

/* === FEATURES === */

/* cards subtiele hover + fade */
.feature-card { transition: transform .3s ease, box-shadow .3s ease; opacity:0; animation: fadeUp .9s ease forwards; }
.feature-card:hover { transform: translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.6); }
@keyframes fadeUp { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }

.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
  padding:2rem;
}
.feature-card{
  background:var(--panel);
  padding:1rem;
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.6);
}
.feature-card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:.8rem}
.feature-card h3{color:var(--accent-glow)}
.feature-card p{color:var(--muted)}

/* === ABOUT === */
.about{padding:2rem;}
.about-inner{
  max-width:900px;
  margin:auto;
  background:rgba(255,255,255,0.02);
  padding:1.5rem;
  border-radius:10px;
}

/* === CONTACT SECTION === */
.contact-section { padding:30px 20px 10px; text-align:center; }
.contact-section h2 { font-size:2.5rem; color:var(--accent-glow); margin-bottom:20px; }

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:1100px;
  margin:auto;
  align-items:start;
}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.map-box{
  border-radius:12px;
  overflow:hidden;
  height:428px; /* kortere nette hoogte */
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:1100px;
  margin:auto;
  align-items:stretch; /* beide kolommen gelijke hoogte */
}

.map-box iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
}

.contact-info-list{ display:flex; flex-direction:column; gap:20px; }
.contact-box{ background:rgba(255,255,255,0.06); padding:20px; border-radius:12px; }

/* LINK KLEUR FIX */
.contact-box a { color: var(--accent-glow) !important; text-decoration:none; }

/* === MENU PAGE === */
.menu-hero-image{
  position:relative;
  height:327px;
  background:url("steak.jpg") center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu-hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); }
.menu-hero-content{ position:relative; z-index:2; text-align:center; }

.modern-menu{ max-width:1050px; margin:auto; padding:32px 20px; }
.menu-category{ margin-bottom:42px; }
.menu-columns{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
@media(max-width:780px){ .menu-columns{grid-template-columns:1fr;} }

.menu-item{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,0.07); padding-bottom:6px; }
.menu-item strong{ color:var(--accent-glow); }

/* === RESERVATIE === */
.reservation-section{ padding:20px; text-align:center; }
.reservation-section h2{ font-size:2.4rem; color:var(--accent-glow); margin-bottom:25px; }

.tally-embed-container{ max-width:650px; margin:auto; }

/* FOOTER */
.footer{ text-align:center; padding:20px; color:#aaa; }
/* TITELS & SUBTITELS MENU */
.menu-title {
  text-align: center;
  color: var(--accent-glow);
  font-size: 2rem;
  margin: 30px 0 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-subtitle {
  text-align: center;
  color: var(--accent-glow);
  font-size: 1.4rem;
  margin: 25px 0 10px;
  font-weight: 600;
}
/* ============================================
   MOBILE FIX – Map onder contactboxen
   ============================================ */
@media(max-width: 900px) {
  .contact-grid {
    display: flex;
    flex-direction: column;
  }

  .contact-info-list {
    order: 1;
    animation: fadeUp 0.6s ease both;
  }

  .map-box {
    order: 2;
    margin-top: 20px;
    height: 360px !important; /* mooi voor mobiel */
    animation: fadeUp 0.8s ease both;
  }
}

/* ============================================
   Fade-in Animaties
   ============================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   TITELS mooi gecentreerd + oranje
   ============================================ */
.contact-section h2,
.menu-category h2,
.menu-category h3 {
  text-align: center;
  color: var(--accent-glow);
}
/* Scroll offset zodat anker-links niet tegen de navbar plakken */
.menu-title, .menu-subtitle {
  scroll-margin-top: 120px; /* afstand boven de titel */
}

@media (max-width: 900px) {
  .menu-title, .menu-subtitle {
    scroll-margin-top: 80px; /* iets meer ruimte op GSM */
  }
}
/* MENU NAV (Tapas – Kids – ... bovenaan menu.html) */
.menu-nav {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  padding:18px 10px;
  margin-bottom:25px;
  background:rgba(255,255,255,0.05);
  border-radius:10px;
}

.menu-nav a {
  color:var(--accent-glow);
  font-weight:600;
  text-decoration:none;
  padding:8px 12px;
  border-radius:6px;
  transition:0.2s ease;
}

.menu-nav a:hover {
  background:rgba(241,178,74,0.15);
  color:#fff;
}