/*
Theme Name: Chakna Food Company
Theme URI: https://cfc.nl
Author: Chakna Food Company
Author URI: https://cfc.nl
Description: Professioneel thema voor Chakna Food Company met menukaart, arrangementen, Christmas & New Year landingspagina en ACF-prijsvelden.
Version: 1.0.0
Text Domain: chakna
*/

:root {
  --primary: #8b1e2d;
  --accent: #cfa35b;
  --bg: #0c0706;
  --card: #2d211d;
  --text: #f7f1ea;
  --muted: #d1c0b1;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --max-width: 1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #3b2520 0, #0c0706 55%);
  color: var(--text);
  line-height: 1.6;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;border-radius:12px}

.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.25rem;
}
section{padding:3rem 0}

h1,h2,h3{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing:.03em;
}
h1{font-size:clamp(2.4rem,3.5vw,3.1rem);margin-bottom:1rem}
h2{font-size:clamp(1.9rem,3vw,2.4rem);margin-bottom:1.2rem}
h3{font-size:1.25rem;margin-bottom:.4rem}
p{margin-bottom:.7rem;color:var(--muted)}

header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(16px);
  background:linear-gradient(to bottom,
    rgba(12,7,6,.96),
    rgba(12,7,6,.86),
    rgba(12,7,6,0));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
}
.logo{
  font-family:"Playfair Display",serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.logo span{color:var(--accent);}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.nav-links a{
  padding:.35rem .7rem;
  border-radius:999px;
  color:var(--muted);
  transition:background .2s ease,color .2s ease;
}
.nav-links a:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
}
.nav-cta{
  background:var(--accent);
  color:#22130e;
  padding:.45rem 1.1rem;
  border-radius:999px;
  font-weight:600;
  box-shadow:var(--shadow);
  font-size:.85rem;
}

/* Hero */
.hero{
  padding-top:4.5rem;
  padding-bottom:3.2rem;
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:2.3rem;
  align-items:center;
}
.eyebrow{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent);
  margin-bottom:.5rem;
}
.hero-highlight{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  padding:.4rem .9rem;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.15);
  font-size:.85rem;
  margin-bottom:1rem;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  margin-top:1.3rem;
  font-size:.85rem;
  color:var(--muted);
}
.hero-card{
  background:linear-gradient(145deg,#3c2721,#201310);
  border-radius:16px;
  padding:.9rem;
  box-shadow:var(--shadow);
  position:relative;
}
.hero-tag{
  position:absolute;
  right:1.1rem;
  bottom:1.1rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:rgba(0,0,0,.7);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Grid & cards */
.grid{
  display:grid;
  gap:1.7rem;
}
.grid-3{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.grid-2{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.04);
}

.section-heading{
  text-align:center;
  margin-bottom:2.1rem;
}
.section-heading p{
  max-width:600px;
  margin:.5rem auto 0;
}

/* Dish cards */
.dish-card .dish-media {
  margin:-1.4rem -1.4rem 1.1rem -1.4rem;
}
.dish-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.3rem;
}
.dish-price{
  font-weight:700;
  color:var(--accent);
}
.dish-tag{
  font-size:.8rem;
  color:var(--muted);
}
.menu-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:1.2rem;
}

/* Badges & lists */
.badge{
  display:inline-block;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  margin-bottom:.5rem;
}
.small-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.8rem;
}
.check-list{
  list-style:none;
  margin-left:0;
  padding-left:0;
}
.check-list li{
  position:relative;
  padding-left:1.3rem;
  margin-bottom:.35rem;
  color:var(--muted);
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-size:.8rem;
  color:var(--accent);
}

/* Form styles */
form{
  display:grid;
  gap:.7rem;
}
form input,
form select,
form textarea{
  width:100%;
  padding:.5rem .6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,5,5,.35);
  color:var(--text);
  font:inherit;
}
form textarea{
  min-height:120px;
  resize:vertical;
}
form label{
  font-size:.8rem;
  color:var(--muted);
  display:block;
  margin-bottom:.2rem;
}
.btn,
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.3rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:.9rem;
  font-weight:600;
  background:var(--accent);
  color:#22130e;
  box-shadow:var(--shadow);
}

/* Footer */
footer{
  padding:1.6rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.85rem;
  color:var(--muted);
  text-align:center;
  margin-top:2.5rem;
}

/* Responsive */
@media (max-width:880px){
  .hero-inner{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  header{
    background:rgba(12,7,6,.96);
  }
  .nav-links{display:none;}
}