/* ==========================================================================
   מסר הפשטות - מערכת העיצוב
   הצבעים נדגמו מהאתר הקיים ולא הומצאו: הזהב הוא צבע הכותרות המקורי,
   הפונט Assistant כבר היה בשימוש, ותמונת הרקע היא אותה תמונת פרגמנט.
   ========================================================================== */

/* The gold is Adi's own, sampled from the live site as rgb(159,119,6) = #9F7706.
   That exact value only reaches 3.33:1 on the parchment and 4.11:1 behind white
   button text, so it fails WCAG AA for anything that is not a large heading.
   #7d5d05 is the same hue one step deeper: 4.96:1 on the parchment and 6.11:1
   under white text, so one gold can now be used everywhere without having to
   reason about font size per element. Measured, not estimated - the audit
   script is in the session scratchpad and the numbers are in ACCESSIBILITY.md. */
:root {
  --gold: #7d5d05;
  --gold-origin: #9F7706;
  --gold-light: #c39a28;
  --gold-dark: #5c4404;
  --ink: #4a4a4a;
  --ink-strong: #333;
  --muted: #6b6459;
  --wa: #188741;
  --wa-dark: #12662f;
  --parchment: #ede7da;
  --card: rgba(255, 255, 255, .55);
  --line: rgba(159, 119, 6, .22);
  --shadow: 0 2px 20px rgba(90, 70, 20, .07);

  --header-h: 72px;
  --wrap: 1080px;
  --radius: 10px;
  --step: clamp(3.5rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Assistant, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  line-height: 1.85;
  color: var(--ink);
  background-color: var(--parchment);
  background-image: url("/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* A soft veil over the parchment so long text stays readable on top of it.
   The tint is the same warm beige as the sticky header, otherwise the header
   reads as a warm strip sitting on a greyer page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(237, 231, 218, .68);
  pointer-events: none;
  z-index: -1;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover, a:focus-visible { color: var(--gold-dark); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; right: -9999px; top: 0;
  background: var(--gold); color: #fff; padding: .75rem 1.25rem; z-index: 100;
}
.skip-link:focus { right: 1rem; top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Typography */

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--gold);
  line-height: 1.3;
  margin: 0 0 .75em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.15em; font-weight: 300; color: var(--muted); }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .18em;
  color: var(--muted); margin-bottom: 1rem;
}
.center { text-align: center; }

.rule {
  width: 72px; height: 2px; border: 0; margin: 2.5rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(240, 236, 226, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 1rem;
  position: relative;
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 52px; height: 52px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.brand-tagline { font-size: .78rem; color: var(--muted); }

.site-nav ul {
  display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  font-weight: 600; font-size: 1rem; color: var(--ink);
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav-cta { margin-inline-start: .5rem; }

/* A button that has to read as a link inside body text. */
.link-btn {
  font: inherit; color: var(--gold);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--gold-dark); }

.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Open state folds the three bars into an X. */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sections */

.section { padding-block: var(--step); }
.section + .section { border-top: 1px solid var(--line); }
.section-narrow { width: min(100%, 720px); margin-inline: auto; }

.hero {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.hero-logo { width: 96px; height: 96px; margin: 0 auto 2rem; }
.hero h1 { margin-bottom: .35em; }
.hero-tagline {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 400; color: var(--ink-strong); margin-bottom: 1.25rem;
}
.hero-kicker {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700; color: var(--gold);
}

/* Cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow);
}

.grid { display: grid; gap: 1.75rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.book-card { display: flex; flex-direction: column; text-align: center; }
.book-card h3 { margin-bottom: .5rem; }
.book-card .book-img {
  margin: 1.25rem auto 1.5rem; max-width: 190px;
  filter: drop-shadow(0 8px 18px rgba(80, 60, 20, .18));
}
.book-card .book-img img { margin-inline: auto; }
.book-card p { font-size: .97rem; color: var(--muted); }
.book-card .btn { margin-top: auto; align-self: center; }

.price { font-weight: 700; color: var(--ink-strong); }

/* Two plain offer cards: a title and one quiet way in, nothing else.
   The title carries the whole card, so it sits larger than a normal h2 here
   and the link underneath stays deliberately small. */
.service-card {
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.25rem; min-height: 200px;
}
.service-card h2 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.service-card .link-btn { font-size: .97rem; }

/* Lists */

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  position: relative; padding-inline-start: 1.6rem; margin-bottom: .6rem;
}
.feature-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .78em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding-inline-start: 3rem; margin-bottom: 1.1rem; min-height: 2rem;
}
.steps li::before {
  content: counter(s);
  position: absolute; inset-inline-start: 0; top: .15em;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: #fff; font-weight: 700; font-size: .95rem;
}

/* Buttons */

.btn {
  display: inline-block;
  background: var(--gold); color: #fff;
  font-weight: 600; font-size: 1rem; line-height: 1.4;
  padding: .85rem 2rem; border: 1px solid var(--gold);
  border-radius: 999px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--gold-dark); border-color: var(--gold-dark);
  color: #fff; text-decoration: none; transform: translateY(-1px);
}
.btn-ghost { background: transparent; color: var(--gold); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--gold); color: #fff; }
/* WhatsApp's own #25D366 carries white text at 1.98:1, which fails both the
   text rule and the 3:1 graphical-object rule for the icon. #188741 is the
   same green deepened until white clears 4.5:1. */
.btn-wa { background: var(--wa); border-color: var(--wa); }
.btn-wa:hover, .btn-wa:focus-visible { background: var(--wa-dark); border-color: var(--wa-dark); }

.btn-sm { padding: .5rem 1.25rem; font-size: .92rem; }
.btn-block { display: block; width: 100%; text-align: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.btn-row.center { justify-content: center; }

/* Forms */

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--ink-strong); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .75rem .9rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line); border-radius: 6px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
/* The native arrow sits on the wrong side in RTL, so it is replaced with a
   chevron drawn on the left. The colour is baked into the data URI, so it has
   to be the literal gold rather than the token. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237d5d05' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .9rem center;
  background-size: 12px 8px;
  padding-inline-start: 2.4rem;
  cursor: pointer;
}
.field select:invalid { color: var(--muted); }
.field textarea { min-height: 140px; resize: vertical; }
.field input.has-error, .field textarea.has-error {
  border-color: #b3261e; background: rgba(179, 38, 30, .04);
}
.field-error { font-size: .85rem; color: #b3261e; }
.req { color: #b3261e; }

.form-note { font-size: .9rem; color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ── Contact popup ──────────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(50, 40, 20, .5);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
body.modal-open, body.nav-open { overflow: hidden; }

.modal-box {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: center;
  background: #f7f3ea;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(50, 40, 15, .3);
  animation: modal-in .2s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute; inset-block-start: .85rem; inset-inline-start: .85rem;
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  color: var(--muted); background: none;
  border: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.modal-close:hover, .modal-close:focus-visible { color: var(--gold); border-color: var(--line); }

.modal-logo { width: 46px; height: 46px; margin: 0 auto .5rem; }
.modal-title { font-size: 1.45rem; margin-bottom: .2rem; }
.modal-sub { font-size: .95rem; color: var(--muted); margin-bottom: 1.15rem; }

/* Tighter than the page form: the whole dialog, including the WhatsApp
   alternative at the bottom, has to fit a laptop viewport without scrolling. */
.modal-box .form { text-align: start; gap: .8rem; }
.modal-box .field input { padding: .6rem .8rem; }
.modal-box .field textarea { min-height: 76px; padding: .6rem .8rem; }
.modal-box .field select {
  padding: .6rem .8rem; padding-inline-start: 2.3rem;
  background-position: left .8rem center;
}
.modal-box .field label { font-size: .9rem; }
.modal-box .form-note { margin-top: .75rem; text-align: center; font-size: .85rem; }

.modal-alt {
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.modal-alt .form-note { margin-bottom: .6rem; }

/* Contact details */

.contact-details { list-style: none; margin: 0; padding: 0; }
.contact-details li { margin-bottom: .75rem; }
.contact-details .label { font-weight: 600; color: var(--ink-strong); }
.contact-details .secondary { font-size: .95rem; color: var(--muted); }

/* Legal / long text */

.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2.5rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: 1rem; line-height: 1.8; }
.legal ul { padding-inline-start: 1.25rem; }
.legal li { margin-bottom: .6rem; }

/* Footer */

.site-footer {
  margin-top: var(--step);
  border-top: 2px solid var(--gold);
  background: rgba(240, 236, 226, .75);
  padding-block: 3rem;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between;
}
.footer-title { font-size: 1.35rem; margin-bottom: .75rem; }
.site-footer p { margin: 0 0 .5rem; font-size: .97rem; }
.footer-legal { text-align: start; color: var(--muted); }

/* Consent banner */

.consent {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.5rem;
  /* Clears the floating WhatsApp button so neither covers the other. */
  padding: 1rem clamp(1.25rem, 4vw, 2rem) 1rem 5.5rem;
  background: #f7f4ee;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(60, 45, 15, .12);
}
.consent[hidden] { display: none; }
.consent-text { margin: 0; font-size: .95rem; color: var(--ink); }
.consent-text a { text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: .75rem; flex: none; }

/* Floating WhatsApp */

.wa-float {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  z-index: 60;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: transform .18s ease;
}
.wa-float:hover, .wa-float:focus-visible { color: #fff; transform: scale(1.06); }

/* Mobile */

@media (max-width: 760px) {
  body { background-attachment: scroll; }
  /* The panel is fixed, so .site-nav collapses to nothing in the flex row.
     Without the auto margin, space-between drops the toggle in the middle of
     the header instead of at the far edge. */
  .nav-toggle { display: flex; margin-inline-start: auto; }

  /* backdrop-filter establishes a containing block for fixed-position
     descendants, so with it on the header the panel below would anchor to the
     header instead of the viewport and paint as a thin strip. The header is
     already 92% opaque, so dropping the blur here costs nothing. */
  .site-header { backdrop-filter: none; background: rgba(240, 236, 226, .97); }

  /* Full-screen panel sliding in from the right, the side the button sits on
     in an RTL layout. It stays in the DOM for the slide, so visibility and not
     just transform is what hides it, keeping it out of the tab order. */
  .site-nav ul {
    position: fixed; inset: var(--header-h) 0 0 0;
    z-index: 90;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 1.5rem 1.25rem 2.5rem;
    background: var(--parchment);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .25s ease, visibility .25s;
  }
  .site-nav.is-open ul { visibility: visible; transform: translateX(0); }

  .site-nav a {
    display: block; padding: 1.1rem 0; font-size: 1.125rem;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav-cta { margin: 1.5rem 0 0; }
  .nav-cta .btn { display: block; width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; }
  .brand-tagline { display: none; }
  .modal-box { padding: 2rem 1.25rem 1.5rem; }
  .consent { flex-direction: column; align-items: stretch; text-align: center; padding: 1rem 1.25rem; }
  .consent-actions { justify-content: center; }
  /* The banner owns the bottom of a phone screen, so the WhatsApp button
     moves above it rather than sitting under it. */
  body:has(.consent:not([hidden])) .wa-float { inset-block-end: 9.5rem; }
  .footer-inner { flex-direction: column; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}