/* ============================================================
   Cape Potjie Lunch Co. — Luxury Lodge / Boutique Hotel Theme
   ============================================================ */
:root{
  /* Earthy, understated luxury palette inspired by safari lodges
     and Cape Winelands hotels: espresso, aged gold, ivory, olive. */
  --espresso:#241f1a;
  --espresso-light:#352d25;
  --gold:#b9914f;
  --gold-light:#d4af6a;
  --ivory:#f7f2e9;
  --ivory-dark:#efe7d6;
  --olive:#4b5340;
  --olive-light:#6b7458;
  --terracotta:#a85f3d;
  --maroon:#7c3f33;
  --ink:#2c2722;
  --line:#ded2b3;
  --radius:2px;
  --radius-soft:6px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Jost', 'Segoe UI', Tahoma, sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1140px;margin:0 auto;padding:0 28px;}
a{color:var(--terracotta);text-decoration:none;transition:color .2s;}
a:hover{color:var(--maroon);}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  color:var(--espresso);
  letter-spacing:.3px;
  margin:0 0 .5em;
}
h1{font-size:3.2rem;line-height:1.1;}
h2{font-size:2.1rem;}
h3{font-size:1.5rem;}
h4{font-size:1.2rem;}
p{margin:0 0 1em;}

/* Small uppercase "eyebrow" label style, used for section kickers */
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:2.5px;
  font-size:.78rem;color:var(--gold);font-weight:600;margin-bottom:10px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  background:var(--espresso);
  padding:22px 0;
  border-bottom:1px solid rgba(185,145,79,.35);
}
.header-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ivory);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.7rem;
  font-weight:600;
  letter-spacing:.5px;
}
.logo:hover{color:var(--gold-light);}
.logo-img{
  height:56px;
  width:56px;
  border-radius:50%;
  object-fit:cover;
  background:#faf5ea;
  box-shadow:0 0 0 2px rgba(185,145,79,.45);
}
@media (min-width:768px){
  .logo-img{height:84px;width:84px;}
  .logo{font-size:2rem;}
}
.main-nav a{
  color:#e9e0cc;
  margin-left:30px;
  padding:6px 0;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:1.6px;
  font-weight:500;
  border-bottom:1px solid transparent;
}
.main-nav a.active,.main-nav a:hover{
  border-bottom-color:var(--gold);
  color:var(--gold-light);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background:linear-gradient(135deg, var(--olive), var(--espresso));
  color:#fff;padding:110px 0 100px;text-align:center;
}
.hero h1{
  color:#fff;
  font-size:3.4rem;
  margin-bottom:18px;
}
.hero > .container p{
  font-size:1.2rem;
  max-width:680px;
  margin:0 auto 36px;
  color:#f1ead9;
  font-weight:300;
}
.btn{
  display:inline-block;
  background:var(--terracotta);
  color:#fff;
  border:1px solid var(--terracotta);
  padding:15px 34px;
  border-radius:var(--radius);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover{background:var(--maroon);border-color:var(--maroon);color:#fff;text-decoration:none;}

/* On dark/hero backgrounds, use the lighter outline look instead */
.hero .btn, .hero-with-image .btn{
  background:transparent;
  color:var(--ivory);
  border:1px solid var(--gold);
}
.hero .btn:hover, .hero-with-image .btn:hover{background:var(--gold);color:var(--espresso);}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff;}

/* Hero section with background photo (e.g. soetwater.png) */
.hero.hero-with-image{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}
.hero.hero-with-image::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(36,31,26,.62), rgba(75,83,64,.5));
}
.hero.hero-with-image .container{
  position:relative;
  z-index:1;
}
.hero.hero-with-image > .container h1, .hero.hero-with-image > .container p{
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}

/* About section: hero image with a sliding card carousel laid over the bottom */
.hero.about-hero{
  padding:90px 0 0;
  text-align:left;
}
.hero.about-hero .container{
  text-align:center;
  padding-bottom:70px;
}
.hero.about-hero h2{
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hero.about-hero h2::after{background:var(--gold-light);}
.card-slider{
  position:relative;
  z-index:1;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:0 16px 50px;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.card-slider-track{
  display:flex;
  gap:24px;
}
.card-slider .card{
  scroll-snap-align:start;
  flex:0 0 calc(100vw - 32px);
  max-width:480px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
@media (min-width:760px){
  .card-slider-track{width:max-content;}
  .card-slider .card{flex:0 0 calc(25% - 18px);max-width:none;}
}
.card-slider-wrap{
  position:relative;
  z-index:1;
}
.card-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:rgba(36,31,26,.55);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.card-slider-arrow:hover{background:var(--gold);color:var(--espresso);border-color:var(--gold);}
.card-slider-arrow.prev{left:32px;}
.card-slider-arrow.next{right:32px;}
.card-slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  position:relative;
  z-index:1;
  padding:18px 0 60px;
}
.card-slider-dot{
  width:10px;height:10px;
  border-radius:50%;
  border:1px solid var(--espresso);
  background:transparent;
  padding:0;
  cursor:pointer;
  transition:background .2s;
}
.card-slider-dot.active{background:var(--espresso);}
@media (max-width:759px){
  .card-slider-arrow{width:38px;height:38px;font-size:1.3rem;}
  .card-slider-arrow.prev{left:2px;}
  .card-slider-arrow.next{right:2px;}
}

/* ============================================================
   Sections / generic cards
   ============================================================ */
section{padding:80px 0;}
section h2{
  position:relative;
  display:inline-block;
  padding-bottom:14px;
  margin-bottom:36px;
}
section h2::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:54px;height:2px;background:var(--gold);
}
.intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px;}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-soft);
  padding:32px 28px;
}
.card h3{margin-top:0;}
.card p{color:var(--ink);}
@media (max-width:759px){
  .card{padding:24px 20px;}
}

/* ============================================================
   Venues
   ============================================================ */
.venue-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-soft);
  overflow:hidden;
  margin-bottom:36px;
  display:grid;
  grid-template-columns:1fr;
}
.venue-card img{width:100%;height:320px;object-fit:cover;display:block;background:#ddd;}
.venue-card .body{padding:30px 32px;}
.venue-card h3{color:var(--espresso);margin-top:0;font-size:1.6rem;}

/* ============================================================
   Menu
   ============================================================ */
.course-block{margin-bottom:60px;padding-bottom:30px;border-bottom:1px solid var(--line);}
.course-block:last-child{border-bottom:none;}
.course-block h2{font-size:1.9rem;}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;}
.option-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-soft);
  padding:22px;
}
.option-card .diet-badge{
  display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:1.4px;
  padding:4px 12px;border-radius:20px;background:var(--olive);color:#fff;margin-bottom:10px;font-weight:500;
}
.diet-badge.fish{background:#3c6e80;}
.diet-badge.vegetarian{background:#5a7a45;}
.diet-badge.vegan{background:#46724f;}
.diet-badge.gluten_free{background:var(--gold);color:var(--espresso);}
.option-card h4{margin:6px 0 10px;font-family:'Cormorant Garamond',serif;font-size:1.3rem;}
.ingredient-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.ingredient-chip{
  background:var(--ivory-dark);border:1px solid var(--line);border-radius:20px;
  padding:5px 12px;font-size:.8rem;cursor:pointer;color:var(--ink);font-family:'Jost',sans-serif;
}
.ingredient-chip:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.ingredient-chip.optional{border-style:dashed;}
.ingredient-chip .tag{font-size:.68rem;opacity:.65;margin-left:4px;}

/* ============================================================
   Booking page — calendar + form
   ============================================================ */
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
@media (max-width:800px){.booking-grid{grid-template-columns:1fr;}}
.calendar-legend{display:flex;gap:20px;margin:14px 0 22px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--olive);}
.legend-dot{width:13px;height:13px;border-radius:2px;display:inline-block;}
.legend-dot.available{background:var(--olive);}
.legend-dot.unavailable{background:#bbb;}
.legend-dot.selected{background:var(--terracotta);}

.calendar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-soft);padding:26px;}
.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.calendar-header button{
  background:transparent;color:var(--espresso);border:1px solid var(--gold);
  padding:8px 16px;border-radius:var(--radius);cursor:pointer;
  text-transform:uppercase;letter-spacing:1px;font-size:.72rem;
}
.calendar-header button:hover{background:var(--gold);color:#fff;}
.calendar-header strong{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center;}
.calendar-grid .dow{font-weight:600;font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:1px;}
.day-cell{
  padding:12px 0;border-radius:var(--radius);font-size:.9rem;cursor:default;background:var(--ivory-dark);color:#aaa;
}
.day-cell.available{background:#eef1e7;color:var(--olive);cursor:pointer;font-weight:600;border:1px solid transparent;}
.day-cell.available:hover{border-color:var(--olive);}
.day-cell.unavailable{background:#efebe2;color:#aaa;text-decoration:line-through;cursor:not-allowed;}
.day-cell.selected{background:var(--terracotta)!important;color:#fff!important;}
.day-cell.empty{background:transparent;}

.venue-select{margin-bottom:24px;}
.venue-select label{margin-right:20px;font-weight:500;color:var(--espresso);}

form.enquiry-form label{display:block;margin:16px 0 6px;font-weight:500;color:var(--espresso);font-size:.92rem;}
form.enquiry-form input, form.enquiry-form textarea, form.enquiry-form select{
  width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:1rem;font-family:'Jost',sans-serif;background:#fff;
}
form.enquiry-form input:focus, form.enquiry-form textarea:focus, form.enquiry-form select:focus{
  outline:none;border-color:var(--gold);
}
.form-msg{padding:14px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:.92rem;}
.form-msg.success{background:#eef1e7;color:var(--olive);border:1px solid #c9d4ba;}
.form-msg.error{background:#f7e9e3;color:var(--maroon);border:1px solid #e3bfae;}
.hint{font-size:.85rem;color:#8a7f6c;}

/* ============================================================
   Menu Checkout / Build-Your-Order (booking page)
   ============================================================ */
.checkout-wrap{margin-top:10px;}
.checkout-course{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-soft);padding:26px;margin-bottom:24px;
}
.checkout-course h3{margin:0 0 4px;color:var(--espresso);}
.checkout-course .course-hint{color:#8a7f6c;font-size:.86rem;margin-bottom:16px;}

.option-pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.option-pick-card{
  border:1px solid var(--line);border-radius:var(--radius-soft);padding:18px;cursor:pointer;
  background:var(--ivory);transition:border-color .15s, background .15s;
}
.option-pick-card:hover{border-color:var(--gold);}
.option-pick-card.picked{border-color:var(--olive);background:#eef1e7;}
.option-pick-card .diet-badge{margin-bottom:8px;}
.option-pick-card h4{margin:6px 0 8px;font-size:1.05rem;}
.option-pick-card p{margin:0;font-size:.85rem;color:#6f6757;}
.option-pick-card .pick-indicator{
  display:inline-block;margin-top:12px;font-size:.74rem;font-weight:600;color:var(--olive);
  text-transform:uppercase;letter-spacing:1px;
}
.option-pick-card:not(.picked) .pick-indicator{color:#a89c84;}

.ingredient-toggle-list{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:8px;}
.ingredient-toggle{
  display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:6px 12px;font-size:.8rem;cursor:pointer;
}
.ingredient-toggle.locked{background:var(--ivory-dark);color:#8a7f6c;cursor:default;}
.ingredient-toggle.locked .lock-icon{font-size:.72rem;}
.ingredient-toggle input{margin:0;accent-color:var(--olive);}
.ingredient-toggle .ing-name-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--ink);text-decoration:underline dotted;font-size:.8rem;font-family:'Jost',sans-serif;}

.basket-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-soft);padding:26px;
  position:sticky;top:20px;
}
.basket-panel h3{margin-top:0;color:var(--espresso);}
.basket-line{padding:12px 0;border-bottom:1px solid var(--ivory-dark);font-size:.9rem;}
.basket-line .course-label{font-weight:600;color:var(--olive);display:block;}
.basket-line .excluded-note{color:var(--maroon);font-size:.8rem;}
.basket-empty{color:#a89c84;font-size:.88rem;}
.basket-progress{font-size:.85rem;color:#6f6757;margin-top:14px;}
.checkout-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px;}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr;}}

/* Edit/Delete text-style buttons inside saved guest order lines */
.btn-link{background:none;border:none;padding:0;margin:0;color:var(--terracotta);text-decoration:underline;cursor:pointer;font-size:.82rem;font-family:'Jost',sans-serif;}
.btn-link.danger{color:var(--maroon);}
.btn-link:hover{opacity:.75;}

/* ============================================================
   Modal — ingredient stories
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(36,31,26,.7);display:none;
  align-items:center;justify-content:center;z-index:999;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:var(--radius-soft);max-width:500px;width:100%;padding:36px;position:relative;border-top:3px solid var(--gold);}
.modal-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--terracotta);}
.modal-box h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;}
.modal-story{margin-top:14px;line-height:1.75;color:var(--ink);}
.modal-tags{color:var(--gold);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:1.4px;}

/* ============================================================
   Admin
   ============================================================ */
.admin-bar{background:var(--espresso);color:#fff;padding:16px 0;}
.admin-bar a{color:#e9e0cc;margin-right:20px;text-transform:uppercase;font-size:.78rem;letter-spacing:1.4px;}
.admin-bar a:hover{color:var(--gold-light);}
.admin-login-box{max-width:380px;margin:80px auto;background:#fff;padding:40px;border-radius:var(--radius-soft);border:1px solid var(--line);}
.admin-login-box h2{margin-bottom:8px;}
table.admin-table{width:100%;border-collapse:collapse;background:#fff;}
table.admin-table th, table.admin-table td{padding:12px 14px;border-bottom:1px solid var(--ivory-dark);text-align:left;font-size:.88rem;}
table.admin-table th{background:var(--espresso);color:#e9e0cc;text-transform:uppercase;font-size:.72rem;letter-spacing:1px;font-weight:500;}
.status-pill{padding:4px 11px;border-radius:14px;font-size:.72rem;color:#fff;text-transform:uppercase;letter-spacing:.5px;}
.status-pill.new{background:#3c6e80;}
.status-pill.contacted{background:var(--gold);color:var(--espresso);}
.status-pill.confirmed{background:var(--olive);}
.status-pill.cancelled{background:#999;}

.menu-summary{font-size:.82rem;}
.menu-summary .ms-course{margin-bottom:4px;}
.menu-summary .ms-course strong{color:var(--olive);}
.menu-summary .ms-excluded{color:var(--maroon);display:block;}
details.menu-details summary{cursor:pointer;color:var(--terracotta);font-weight:600;font-size:.85rem;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--espresso);color:#cfc6b3;padding:40px 0;text-align:center;margin-top:50px;}
.site-footer a{color:var(--gold-light);}
.site-footer p{margin:0 0 6px;}
.small{font-size:.82rem;color:#9a9077;}
/* ============================================================
   About the Experience — coded parchment poster
   ============================================================ */
.about-experience{
  background:linear-gradient(160deg,#f6eedd 0%,#f1e6d0 55%,#ecdfc5 100%);
  padding:70px 20px;
}
.exp-poster{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  color:#3a2c1e;
}
.about-experience h2::after{display:none;}
.exp-kicker{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.15rem;
  letter-spacing:.55em;
  text-transform:uppercase;
  margin:14px 0 0;
  color:#4a3826;
}
.exp-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(2.6rem, 8vw, 4.6rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 10px;
  color:#33261a;
  border:none;
}
.exp-ornament{color:#9a6b2f;font-size:.8rem;letter-spacing:.4em;}
.exp-ornament.small{font-size:.6rem;margin-bottom:22px;}
.exp-lead{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem;
  line-height:1.55;
  max-width:480px;
  margin:26px auto 0;
}
.exp-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#9a6b2f;
  font-size:.7rem;
  margin:26px auto;
  max-width:220px;
}
.exp-divider span{flex:1;height:1px;background:#b08d55;}
.exp-body{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.15rem;
  line-height:1.65;
  max-width:520px;
  margin:0 auto 40px;
}
.exp-frame{
  border:1px solid #a67c3f;
  outline:1px solid #a67c3f;
  outline-offset:4px;
  border-radius:3px;
  padding:34px 30px 22px;
  margin:0 auto 34px;
  max-width:560px;
}
.exp-frame-title{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.45rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 8px;
  color:#33261a;
}
.exp-courses{
  list-style:none;
  margin:0;
  padding:0;
  text-align:left;
}
.exp-courses li{
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px 4px;
}
.exp-courses li + li{border-top:1px solid rgba(154,107,47,.35);}
.exp-num{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#d9b98a;
  border:2px solid #8a5f28;
  color:#3a2a15;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.25rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.exp-course-text{flex:1;}
.exp-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding-left:18px;
  border-left:1px solid rgba(154,107,47,.4);
}
.exp-icon svg{width:38px;height:38px;display:block;}
@media (max-width:420px){
  .exp-icon{padding-left:10px;}
  .exp-icon svg{width:30px;height:30px;}
  .exp-courses li{gap:12px;}
}
.exp-course-text strong{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#33261a;
}
.exp-course-text small{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6b543a;
  margin-top:3px;
}
.exp-tagline{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:1.35rem;
  color:#9a5e1e;
  margin:0 0 6px;
}
.exp-footer{
  font-family:'Jost', sans-serif;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#4a3826;
  margin:0;
}
@media (max-width:540px){
  .exp-poster{padding:40px 20px 34px;}
  .exp-frame{padding:26px 16px 14px;}
}


/* ============================================================
   About Us page
   ============================================================ */
.about-page{padding-top:50px;padding-bottom:60px;}
.about-intro{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem;
  line-height:1.55;
  max-width:640px;
}
.about-block{max-width:680px;margin-top:34px;}
.about-block h3{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.45rem;
  color:var(--espresso);
  margin-bottom:10px;
}
.about-block p{line-height:1.7;}
.about-cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}