/* Zohara Cooking Club — landing page
   Colours come from the logo kit (export/svg). */
:root{
  --cream:#FBF7F1;
  --cream-2:#F4EADD;
  --beige:#EBD9C2;
  --coffee:#4E2E18;      /* frame / main text */
  --bronze:#6E4C30;      /* COOKING CLUB */
  --champagne:#A9825C;   /* hat & tools */
  --champagne-2:#9A734D; /* ZOHARA */
  --champagne-light:#D9BB98;
  --line:#E2D2BD;
  --text:#3B2414;
  --muted:#6E5A49;
  --radius:18px;
  --shadow:0 10px 30px rgba(78,46,24,.10);
  --head:"Frank Ruhl Libre", "David", serif;
  --body:"Assistant", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px; background:var(--cream); color-scheme:light only}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--cream); color:var(--text); font-family:var(--body); font-size:18px; line-height:1.75; -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
a{color:var(--bronze)}
h1,h2,h3{font-family:var(--head); color:var(--coffee); line-height:1.3; margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(30px, 7vw, 46px)}
h2{font-size:clamp(26px, 5.6vw, 36px)}
h3{font-size:21px}
p{margin:0 0 1em}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.narrow{max-width:720px; margin:0 auto}
.center{text-align:center}
.eyebrow{font-family:var(--body); font-weight:600; letter-spacing:.22em; font-size:13px; color:var(--champagne-2); text-transform:uppercase; direction:ltr; unicode-bidi:isolate}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:20; background:rgba(251,247,241,.94); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px}
.site-header .brand img{height:44px; width:auto}
.site-header nav{display:none; gap:22px}
.site-header nav a{text-decoration:none; color:var(--bronze); font-weight:600; font-size:16px}
.site-header nav a:hover{color:var(--coffee)}
@media (min-width:900px){ .site-header nav{display:flex} .site-header .brand img{height:50px} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 28px; border-radius:999px; background:var(--coffee); color:#FBF3E8; font-family:var(--body); font-weight:700; font-size:18px; text-decoration:none; border:2px solid var(--coffee); box-shadow:0 6px 18px rgba(78,46,24,.22); transition:background .2s, transform .2s; cursor:pointer}
.btn:hover{background:#3A2111}
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible{outline:3px solid var(--champagne); outline-offset:3px}
.btn-small{min-height:42px; padding:8px 18px; font-size:16px; box-shadow:none}
.btn[aria-disabled="true"]{background:#B9A896; border-color:#B9A896; color:#fff; box-shadow:none; cursor:not-allowed}
.btn-wide{width:100%; max-width:420px}

/* ---------- sections ---------- */
section{padding:64px 0}
section.alt{background:var(--cream-2)}
.divider{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--champagne); margin:0 auto 18px}
.divider::before,.divider::after{content:""; height:1px; width:60px; background:var(--champagne-light)}
.divider span{width:7px; height:7px; border-radius:50%; background:var(--champagne)}

/* hero */
.hero{padding:34px 0 56px; text-align:center}
.hero .logo{width:min(250px, 62vw); margin:0 auto 18px; filter:drop-shadow(0 10px 18px rgba(78,46,24,.18))}
.hero .sub-title{font-family:var(--head); font-size:clamp(20px,4.6vw,26px); color:var(--bronze); margin:6px 0 18px}
.hero h1{max-width:760px; margin:0 auto 22px}
.hero .lead{max-width:680px; margin:0 auto 14px}
.price-line{font-size:20px; font-weight:700; color:var(--coffee); margin:22px 0 18px}
.start-box{display:inline-block; margin-top:26px; padding:14px 24px; border:1px solid var(--champagne-light); border-radius:14px; background:#fff}
.start-box strong{display:block; font-family:var(--head); color:var(--coffee); font-size:20px}

/* cards */
.cards{display:grid; gap:16px; margin-top:28px}
@media (min-width:760px){ .cards.three{grid-template-columns:repeat(3,1fr)} }
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow)}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--muted)}
.card .mark{width:40px; height:40px; border-radius:50%; background:var(--cream-2); border:1px solid var(--champagne-light); display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--champagne-2); font-family:var(--head); font-weight:700}
.note-line{margin-top:22px; text-align:center; color:var(--bronze); font-weight:600}
.cta-row{text-align:center; margin-top:34px}

/* questions in section 5 */
.questions{font-family:var(--head); font-size:21px; color:var(--bronze); border-inline-start:3px solid var(--champagne-light); padding-inline-start:16px; margin:22px 0}

/* bonus */
.bonus{background:var(--coffee); color:#F4E7D6; position:relative}
.bonus .frame{border:1px solid rgba(217,187,152,.55); border-radius:24px; padding:44px 24px; position:relative; max-width:820px; margin:0 auto; text-align:center}
.bonus .frame::before{content:""; position:absolute; inset:8px; border:1px solid rgba(217,187,152,.25); border-radius:18px; pointer-events:none}
.bonus h2{color:var(--champagne-light)}
.bonus .tag{display:inline-block; font-weight:700; letter-spacing:.06em; color:var(--coffee); background:var(--champagne-light); border-radius:999px; padding:4px 16px; font-size:15px; margin-bottom:16px}
.bonus p{color:#EADCC9}
.bonus .cup{display:block; width:56px; height:56px; margin:0 auto 10px; color:var(--champagne-light)}

/* about */
.about{display:grid; gap:28px; align-items:start}
@media (min-width:900px){ .about{grid-template-columns:340px 1fr} }
.about .text p{max-width:66ch}
.about .text p.highlight{font-family:var(--head); font-size:21px; color:var(--coffee)}
.about-photo{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}
.about-intro{font-family:var(--head); font-size:21px; color:var(--bronze); line-height:1.6}

/* pricing */
.price-card{max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--champagne-light); border-radius:26px; padding:36px 26px; box-shadow:var(--shadow); text-align:center; position:relative}
.price-card::before{content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:20px; pointer-events:none}
.price-card ul{list-style:none; padding:0; margin:20px 0 22px; text-align:right}
.price-card li{padding:10px 34px 10px 0; border-bottom:1px solid #F1E7DA; position:relative}
.price-card li::before{content:""; position:absolute; right:6px; top:20px; width:12px; height:7px; border-left:2px solid var(--champagne-2); border-bottom:2px solid var(--champagne-2); transform:rotate(-45deg)}
.price-card .amount{font-family:var(--head); font-size:24px; color:var(--coffee); font-weight:700; margin-bottom:20px}
.closed-msg{margin:14px auto 0; max-width:420px; background:var(--cream-2); border:1px solid var(--champagne-light); border-radius:12px; padding:10px 14px; color:var(--bronze); font-weight:600}

/* faq */
.faq{max-width:760px; margin:26px auto 0}
.faq details{background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:10px}
.faq summary{cursor:pointer; list-style:none; padding:16px 20px; font-weight:700; color:var(--coffee); display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:24px; color:var(--champagne-2); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px; margin:0; color:var(--muted)}

/* closing */
.closing{text-align:center; background:var(--cream-2)}
.closing .logo{width:min(180px,50vw); margin:0 auto 18px}

/* footer */
footer{background:var(--coffee); color:#E7D7C3; padding:36px 0; text-align:center; font-size:15px}
footer img{height:64px; width:auto; margin:0 auto 14px}
footer a{color:var(--champagne-light)}

/* ---------- placeholders (work view only) ---------- */
.ph{border:2px dashed var(--champagne); border-radius:var(--radius); background:repeating-linear-gradient(135deg, #FBF5EC 0 14px, #F6EDE1 14px 28px); color:var(--bronze); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px; font-weight:600; font-size:16px; min-height:180px}
.ph small{font-weight:400; color:var(--muted); font-size:14px}
.ph-photo{aspect-ratio:4/5; min-height:0}
.todo{border:2px dashed #C0763A; background:#FFF6EC; color:#7A3E12; border-radius:12px; padding:12px 16px; font-size:15px; text-align:right; max-width:760px; margin:16px auto 0}
.todo b{display:block}
.work-banner{background:#7A3E12; color:#fff; text-align:center; font-size:14px; padding:6px 12px}
body:not(.work-mode) .ph, body:not(.work-mode) .todo, body:not(.work-mode) .work-banner{display:none}

/* ---------- hero headline block: embossed, in the spirit of the round logo ---------- */
.headline-box{max-width:660px; margin:6px auto 28px; padding:7px; border-radius:26px;
  background:linear-gradient(145deg,#8A6648 0%,#4E2E18 28%,#6E4C34 55%,#3A2111 80%,#5E3C24 100%);
  box-shadow:0 16px 30px rgba(58,36,18,.26), 0 3px 6px rgba(58,36,18,.30), inset 0 1px 1px rgba(255,236,212,.55), inset 0 -1px 2px rgba(0,0,0,.35)}
.hb-inner{border-radius:20px; padding:24px 10px;
  background:radial-gradient(130% 150% at 28% 15%, #FBF5EA 0%, #F1E4D0 55%, #E3CDB1 100%);
  box-shadow:inset 0 0 0 2px #C9A47C, inset 0 0 0 3.5px rgba(255,248,236,.85), inset 0 0 0 5px rgba(150,112,76,.35),
             inset 0 8px 16px rgba(78,46,24,.16), inset 0 -4px 10px rgba(255,255,255,.65)}
.headline-box h1{margin:0; font-size:clamp(22px, 6.3vw, 44px); line-height:1.4; color:#5A3A22}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .headline-box h1{
    background:linear-gradient(180deg,#8A6440 0%,#5A3A22 38%,#3E2414 62%,#6E4C30 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,250,240,.95)) drop-shadow(0 -1px 0 rgba(58,36,18,.25)) drop-shadow(0 3px 4px rgba(78,46,24,.18))}
}
.hero .btn{margin-top:8px}

/* ---------- photos ---------- */
.hero-media{display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:760px; margin:32px auto 0}
.hero-media img{border-radius:var(--radius); object-fit:cover; width:100%; aspect-ratio:4/5; height:auto; box-shadow:var(--shadow); border:1px solid var(--line)}
.hero-media img.main{grid-column:1 / -1}
@media (min-width:760px){ .hero-media{grid-template-columns:1fr 1.25fr 1fr; align-items:center} .hero-media img.main{grid-column:auto; order:2} .hero-media img:nth-child(2){order:1} .hero-media img:nth-child(3){order:3} }

.gallery{display:grid; gap:12px; margin-top:28px; grid-template-columns:1fr 1fr; grid-template-areas:"sav sav" "beef sal" "des des"}
.gallery img{border-radius:var(--radius); object-fit:cover; width:100%; height:100%; box-shadow:var(--shadow); border:1px solid var(--line)}
.gallery .g-sav{grid-area:sav; aspect-ratio:3/2}
.gallery .g-des{grid-area:des; aspect-ratio:3/2}
.gallery .g-beef{grid-area:beef; aspect-ratio:4/5}
.gallery .g-sal{grid-area:sal; aspect-ratio:4/5}
@media (min-width:760px){
  .gallery{grid-template-columns:2fr 1fr; grid-template-areas:"sav beef" "des sal"}
  .gallery .g-beef, .gallery .g-sal{aspect-ratio:auto}
}

.search-tip{margin-top:12px !important; padding-top:12px; border-top:1px solid var(--line); color:var(--bronze) !important}

/* ---------- bonus cards ---------- */
.bonus .tag{margin-bottom:22px}
.bonus-cards{display:grid; gap:16px; max-width:820px; margin:18px auto 0}
@media (min-width:760px){ .bonus-cards{grid-template-columns:1fr 1fr} }
.bonus-card{border:1px solid rgba(217,187,152,.55); border-radius:20px; padding:26px 22px; text-align:center; background:rgba(255,255,255,.04); position:relative}
.bonus-card::before{content:""; position:absolute; inset:6px; border:1px solid rgba(217,187,152,.2); border-radius:15px; pointer-events:none}
.bonus-card h3{color:var(--champagne-light)}
.bonus-card p{margin:0}
.b-icon{display:block; width:40px; height:40px; margin:0 auto 10px; color:var(--champagne-light)}

/* ---------- testimonials ---------- */
.testimonials{display:grid; gap:14px; margin:28px auto 0; max-width:1000px}
@media (min-width:760px){ .testimonials{grid-template-columns:1fr 1fr} }
.t-open{display:block; padding:0; border:0; background:none; cursor:zoom-in; position:relative; font:inherit}
.testimonials .t-open img{width:100%; aspect-ratio:1/1; height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); background:#fff}
.t-hint{display:block; margin-top:8px; text-align:center; color:var(--bronze); font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:4px}
.link-btn{background:none; border:0; padding:6px 4px; font:inherit; font-weight:700; color:var(--bronze); text-decoration:underline; text-underline-offset:4px; cursor:pointer}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:50; background:rgba(30,18,10,.92); overflow-y:auto; -webkit-overflow-scrolling:touch}
.lightbox[hidden]{display:none}
.lb-close{position:fixed; top:12px; left:12px; z-index:2; width:48px; height:48px; border-radius:50%; border:0; background:#fff; color:var(--coffee); font-size:28px; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lb-body{max-width:1300px; margin:0 auto; padding:70px 12px 40px}
.lb-full{display:block; width:100%; max-width:min(100%, calc(100vh - 110px)); height:auto; margin:0 auto; border-radius:10px; background:#fff}
body.lb-open{overflow:hidden}

/* brand name inside Hebrew text: keep it in one piece */
bdi{white-space:nowrap}
.btn span{text-align:center}

/* ---------- thank-you page ---------- */
.thanks{padding:36px 0 60px; text-align:center; min-height:70vh}
.thanks .wrap{max-width:640px}
.thanks-logo{width:min(200px, 52vw); margin:0 auto 22px; filter:drop-shadow(0 10px 18px rgba(78,46,24,.18))}
.thanks .headline-box h1{font-size:clamp(24px, 6.6vw, 38px)}
.thanks .heart{-webkit-text-fill-color:initial; color:initial; filter:none}
.thanks-text{margin:6px auto 26px; max-width:520px}
.thanks-text p{font-size:19px}
.btn-whatsapp{width:100%; max-width:440px; min-height:60px; font-size:19px; gap:10px; padding:14px 22px; line-height:1.4}
.btn-whatsapp svg{width:26px; height:26px; flex:none}
.btn-whatsapp[aria-disabled="true"]{pointer-events:none}
.thanks-note{margin:18px auto 0; max-width:440px; font-weight:600; color:var(--bronze); background:#fff; border:1px solid var(--champagne-light); border-radius:12px; padding:12px 14px; line-height:1.9}
.tel-link{display:inline-block; min-height:44px; line-height:44px; padding:0 10px; margin-top:4px; border-radius:999px; background:var(--cream-2); border:1px solid var(--champagne-light); color:var(--coffee); font-weight:700; text-decoration:none; white-space:nowrap}
.tel-link:hover{background:var(--beige)}