/* Vrij van Alcohol — Landing Styles */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
:root{
  --bg: #E7D4BB; /* Almond Light */
  --ink: #101211; /* Carbon Powder */
  --muted: #857861; /* Golden Sandlewood */
  --primary: #29281E; /* Green Velvet */
  --primary-ink: #101211; /* Carbon Powder for readable text on light surfaces */
  --accent: #48252F; /* Plum Wine */
  --blue: #0ea5e9;
  --blue-ink: #064886;
  --rose: #48252F; /* Use Plum Wine for rose accents to match palette */
  --rose-ink: #101211; /* Dark ink for contrast on rose surfaces */
  --red: #f25a5a; 
  --red-ink: #91112f;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(13, 30, 29, .08);
  /* Brand buttons */
  --btn-choco: #45151B; /* Chocolate Kisses */
  --btn-choco-ink: #ffffff;
  --btn-mauve: #EA9DAE; /* Mauvelous */
  --btn-mauve-ink: #45151B;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--primary);
  background: var(--bg);
  line-height:1.6;
  position: relative;
  overflow-x: hidden;
}

/* Background doodles */
.bg-doodles{
  position: fixed;
  inset: -40vmax -20vmax auto auto;
  width: 120vmax;
  height: 120vmax;
  background: url('../img/noise.png'), radial-gradient(120vmax 120vmax at 70% 30%, color-mix(in srgb, var(--bg) 98%, white 2%) 0%, color-mix(in srgb, var(--bg) 84%, var(--primary) 16%) 100%);
  background-repeat: repeat, no-repeat;
  
  background-blend-mode: multiply, normal;
  opacity: .22;
  pointer-events:none;
  z-index: -1;
}

.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}
/* Global heading font */
h1, h2, h3, h4 { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600 }
.site-header{
  position: sticky;
  top:0; backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg) 80%, white 20%);
  border-bottom:1px solid rgba(0,0,0,.05);
  z-index: 10;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; font-weight:700}
.brand-mark{font-size:1.35rem}
.brand-text{letter-spacing:.3px}
.social a{color:var(--muted); text-decoration:none}
.social a:hover{color:var(--ink)}

.hero{
  position: relative;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:start;
  padding: 56px 0 36px;
}
.hero-text h1{
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height:1.12;
  margin: 6px 0 14px;
}
.lead{font-size:1.1rem; color:var(--primary); max-width: 100%;}
.badges{display:flex; gap:.5rem; list-style:none; padding:0; margin: 10px 0 6px}
.badges li{background: color-mix(in srgb, var(--primary) 14%, white 86%); color: var(--primary-ink);
  border:1px solid color-mix(in srgb, var(--primary) 24%, white 76%); padding:6px 10px; border-radius:999px; font-weight:700; font-size:.9rem}
.lead .float-avatar,
.float-avatar{
  float: right;
  width: min(180px, 38%);
  height: auto;
  border-radius: 12px;
  margin: 2px 0 8px 16px;
}
.lead .float-avatar-main,
.float-avatar-main{
  float: right;
  width: min(250px, 38%);
  height: auto;
  border-radius: 12px;
  margin: 2px 0px 8px 16px;
}
.route {padding: 10px 0px 13px 0px}

.meta{list-style:none; padding:0; margin: 18px 0 0; color: var(--muted)}
.meta li{margin: 8px 0}
.meta strong{color: var(--primary-ink)}
.meta a:not(.cta):not(.cta-pink):not(.cta-blue):not(.cta-red),
.hero-card a:not(.cta):not(.cta-pink):not(.cta-blue):not(.cta-red){
  color: var(--ink)
}
.meta a:not(.cta):not(.cta-pink):not(.cta-blue):not(.cta-red):hover,
.hero-card a:not(.cta):not(.cta-pink):not(.cta-blue):not(.cta-red):hover{
  text-decoration: none;
}
.route a{color: var(--ink); text-decoration: none}

.hero-card{
  background: linear-gradient(180deg, white, #fefefe);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  position: relative;
  z-index: 1;
}

/* Pretty dividers that don't break floats */
hr.divider{all:unset; display:block; position:relative; height:18px; margin:16px 0 18px}
hr.divider:before{content:''; position:absolute; inset:auto 0 0 0; top:50%; height:1px; background: color-mix(in srgb, var(--btn-choco) 16%, #d9bebe 84%); opacity:.9}
/* dashed variant */
hr.divider.divider--dash:before{
  height:2px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--btn-choco) 80%, black 10%) 0 14px,
    transparent 14px 26px);
  opacity:.35;
}
/* ornament variant with a small centered badge */
hr.divider.divider--ornament:after{
  content:'✨';
  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
  display:grid; place-items:center; width:36px; height:36px; border-radius:999px;
  background: color-mix(in srgb, var(--bg) 86%, #fff 14%);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  color: color-mix(in srgb, var(--btn-choco) 90%, black 6%);
  font-size:18px;
}
.availability{display:flex; align-items:center; gap:.6rem; margin-bottom:10px; color:var(--primary-ink); font-weight:700}
.availability .dot{width:10px; height:10px; border-radius:999px; background: var(--accent); box-shadow:0 0 0 6px rgba(139,191,90,.18)}

/* Compact availability inside the ticket form */
.ticket-form .availability{
  font-weight:600;
  color: var(--primary-ink);
  border:1px solid rgba(46,166,154,.18);
  background: color-mix(in srgb, var(--primary) 8%, #fff 92%);
  padding:8px 10px;
  border-radius:10px;
  margin: 2px 0 10px;
}

.ticket-form .form-row{margin: 12px 0}
.ticket-form .form-row.inline{display:grid; grid-template-columns: 1.3fr .9fr; gap: 14px; align-items:end}
.ticket-form label{display:block; font-weight:600; margin-bottom:6px}
.ticket-form input:not([type='checkbox']), .ticket-form select{
  appearance:none;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font-size:1rem;
  background:#fff;
  color:var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.04) inset;
}
.ticket-form input:not([type='checkbox']):focus, .ticket-form select:focus{
  outline:3px solid color-mix(in oklch, var(--primary) 30%, white 70%);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(46,166,154,.12);
}
.cta{display:inline-block; width:100%; padding:14px 16px; border:none; border-radius:14px; text-decoration:none;
  background: linear-gradient(180deg, var(--btn-choco), color-mix(in srgb, var(--btn-choco) 82%, black 18%));
  color: var(--btn-choco-ink); font-weight:800; cursor:pointer; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-align:center; line-height:1.2; appearance:none}
.cta-pink{display:inline-block; width:100%; padding:14px 16px; border:none; border-radius:14px; text-decoration:none;
  background: linear-gradient(180deg, var(--btn-mauve), color-mix(in srgb, var(--btn-mauve) 80%, #7a4e59 20%)); 
  color: var(--btn-mauve-ink); font-weight:800; cursor:pointer; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-align:center; line-height:1.2; appearance:none}
.cta-blue{display:inline-block; width:100%; padding:14px 16px; border:none; border-radius:14px; 
  background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 80%, black 8%)); 
  color:white; font-weight:800; cursor:pointer; box-shadow: 0 10px 24px rgba(46,166,154,.24);
  text-align:center; line-height:1.2; appearance:none}
.cta-red{display:inline-block; width:100%; padding:14px 16px; border:none; border-radius:14px; 
  background: linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 80%, black 8%)); 
  color:white; font-weight:800; cursor:pointer; box-shadow: 0 10px 24px rgba(46,166,154,.24);
  text-align:center; line-height:1.2; appearance:none}
.cta:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--btn-choco) 82%, black 18%), color-mix(in srgb, var(--btn-choco) 86%, black 22%));}
.cta-pink:hover{background:linear-gradient(180deg, color-mix(in srgb, var(--btn-mauve) 86%, #7a4e59 14%), color-mix(in srgb, var(--btn-mauve) 78%, #5a3640 22%));}
.cta-blue:hover{background:linear-gradient(180deg, var(--blue-ink), color-mix(in srgb, var(--blue) 80%, black 8%)); /* transform: translateY(-2px) */}
.cta-red:hover{background:linear-gradient(180deg, var(--red-ink), color-mix(in srgb, var(--red) 80%, black 8%)); /* transform: translateY(-2px) */}
.cta:active, .cta-pink:active, .cta-blue:active, .cta-red:active{transform: translateY(0)}
.cta[disabled], .cta-pink[disabled], .cta-blue[disabled], .cta-red[disabled]{opacity:.6; cursor:not-allowed}
.cta-sub{opacity:.85; font-weight:600; font-size:.93rem}
.fineprint{margin:10px 0 0; color:var(--muted); font-size:.95rem}
.error {color: var(--red); font-size: .95rem; font-weight: 600; padding: 5px 0px 0px 0px; font-style: italic;}

/* Price Card */
.price-card{display:grid; place-items:center; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px; background:linear-gradient(180deg,#ffffff, #fbfbfb); box-shadow:0 10px 24px rgba(0,0,0,.05); margin: 4px 0 10px}
.price-card .pc-price{font-size: clamp(22px, 2.6vw, 28px); font-weight:800; color: var(--primary-ink)}
.price-card .pc-sub{font-size:.95rem; color: var(--muted)}

/* Hero illustration */
/* Remove hero illustration on the lunch page to avoid overlap */
.hero-illustration{display:none}
.hero-illustration img{display:none}

.why{padding: 22px 0 60px}
.why h2{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600; font-size: clamp(26px, 2.6vw, 40px)}
.pillars{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; list-style:none; padding:0; margin: 18px 0 0; text-align: center}
.pillars li{background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px 16px 18px; box-shadow:var(--shadow)}
.pillars .icon{font-size:1.4rem; height:2.2rem; display:grid; place-items:center; border-radius:10px; margin-bottom:.4rem}
.pillars h3{margin:.2rem 0 .2rem 0}

.testimonials{padding: 16px 0 60px}
.testimonials h2{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600}
.quotes{list-style:none; padding:0; margin: 14px 0 0; display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.quotes li{background: var(--card); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px 18px; box-shadow: var(--shadow)}
.quotes blockquote{margin:0; font-size:1.02rem}
.quotes .by{margin-top:8px; color:var(--muted); font-weight:600}

.faq{padding: 0 0 80px}
.faq h2{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600}
.faqs{margin-top: 10px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
.faqs details{background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px 12px; box-shadow: var(--shadow)}
.faqs summary{cursor:pointer; font-weight:700}
.faqs p{margin:8px 2px 2px; color:var(--muted)}

.terms{padding: 0 0 60px}
.terms h2{font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:600}
.terms ul{margin-top: 8px}

.site-footer{border-top:1px solid rgba(0,0,0,.05); padding:18px 0; color:var(--rose-ink); background: color-mix(in srgb, var(--bg) 80%, white 20%);}
.site-footer a{color:inherit}

@media (max-width: 860px){
  .hero{grid-template-columns: 1fr; padding: 40px 0 26px}
  .hero-illustration{display:none}
  .lead .float-avatar{float:none; display:block; margin:10px auto; width:min(220px, 70%)}
  .lead .float-avatar-main{float:none; display:block; margin:10px auto; width:min(220px, 70%)}
  .ticket-form .form-row.inline{grid-template-columns: 1fr}
  .pillars{grid-template-columns: 1fr}
  .quotes{grid-template-columns: 1fr}
  .faqs{grid-template-columns: 1fr}
}