/*
 * הבית של הנשמה — base + components
 * Requires tokens.css. The page must be <html lang="he" dir="rtl">.
 * RTL rule: logical properties only — no left/right/float anywhere in this file.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
/* Hebrew has no italic: emphasis is colour or weight */
em, i { font-style: normal; }
em { color: var(--color-emphasis); }
strong, b { font-weight: var(--weight-bold); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* Latin runs inside Hebrew: <span lang="en" dir="ltr">…</span>; phone/email/hours: <bdi dir="ltr">…</bdi> */
[lang="en"] { unicode-bidi: isolate; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand); }
.section--tint { background: var(--accent-tint); }
.section--sage { background: var(--sage); }
/* Deep green band: at most one per page. Text, secondary text and focus ring switch to the on-forest colours. */
.section--forest {
  background: var(--forest);
  color: var(--on-forest);
  --color-text: var(--on-forest);
  --color-text-secondary: var(--on-forest-soft);
  --color-focus: var(--on-forest-soft);
}
.section--forest .eyebrow { color: var(--on-forest-soft); }
.section--forest .quote { color: var(--on-forest-accent); }
.section-head { display: flex; flex-direction: column; gap: var(--s3); margin-block-end: var(--head-gap); }
.measure { max-width: var(--measure); }
.flow > * + * { margin-block-start: 1em; }
.flow > .eyebrow + * { margin-block-start: var(--s3); }
.flow > h2 + *, .flow > h3 + * { margin-block-start: var(--s4); }
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s7); align-items: start; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- Text roles ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--olive-deep);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.small { font-size: var(--fs-small); color: var(--color-text-secondary); }
.quote { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--fs-quote); line-height: 1.3; letter-spacing: var(--tracking-heading); }
.price { font-size: var(--fs-small); font-weight: var(--weight-medium); color: var(--olive-deep); font-variant-numeric: tabular-nums; }
.disclaimer {
  font-size: var(--fs-small);
  color: var(--earth-soft);
  border-inline-start: 2px solid var(--stone);
  padding-inline-start: var(--s3);
  line-height: 1.55;
}

/* ---------- Links ---------- */
a { color: inherit; }
.link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--stone);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-hover), text-decoration-color var(--dur-hover);
}
.link:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- Buttons ---------- */
/* One primary button per section at most. "←" only on the section's main action. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: var(--s3) var(--s5);
  border-radius: var(--r-btn);
  border: 1px solid var(--color-action);
  background: var(--color-action);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-hover), border-color var(--dur-hover), transform var(--dur-hover);
}
.btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: rgba(51, 47, 42, .3); }
.btn--secondary:hover { background: var(--olive-mist); border-color: rgba(51, 47, 42, .3); }
.btn--sm { min-height: 40px; padding: var(--s2) var(--s4); font-size: var(--fs-small); }
.btn--block { width: 100%; }
/* WhatsApp buttons carry the chat icon (assets/icons/chat.svg), in the button colour — never WhatsApp green */
.btn .icon { width: 20px; height: 20px; flex: none; }

/* ---------- Chip ---------- */
.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--weight-medium);
  background: var(--olive-mist);
  color: var(--olive-deep);
  padding: 2px 10px;
  border-radius: var(--r-pill);
}

/* ---------- Brand mark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--fs-h4); color: var(--earth); text-decoration: none; }
.wordmark img, .wordmark svg { width: 44px; height: 32px; flex: none; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background: rgba(243, 238, 231, .92);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid rgba(51, 47, 42, .08);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 70px; }
.nav__links { display: flex; align-items: center; gap: var(--s5); font-size: var(--fs-small); }
.nav__links a:not(.btn) { text-decoration: none; transition: color var(--dur-hover); }
.nav__links a:not(.btn):hover { color: var(--accent); }
.nav__toggle { display: none; border: 0; background: none; font-size: 1.4rem; color: var(--earth); min-width: var(--tap-min); min-height: var(--tap-min); cursor: pointer; }

/* Mobile drawer opens from the start side (right in RTL) */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer.is-open { display: block; }
.drawer__dim { position: absolute; inset: 0; background: rgba(51, 47, 42, .35); }
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(80vw, 340px);
  background: var(--cream);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  box-shadow: var(--shadow);
}
.drawer__close { align-self: flex-end; border: 0; background: none; font-size: 1.3rem; color: var(--earth-soft); min-width: var(--tap-min); min-height: var(--tap-min); cursor: pointer; }
.drawer__panel a:not(.btn) { padding-block: var(--s3); border-block-end: var(--border-divider); text-decoration: none; }
.drawer__panel .btn { margin-block-start: var(--s4); }
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__inner { min-height: 64px; }
}

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center; padding-block: var(--section-y); }
.hero__copy { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.hero h1 em { display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__photo { max-width: 440px; width: 100%; justify-self: center; }
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; gap: var(--s6); }
  .hero__photo { order: 2; max-width: 420px; }
  .hero__actions .btn { flex: 1 1 170px; }
}

/* ---------- Arch photo (Talia's photos only, 4:5) ---------- */
.arch { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--shadow); background: var(--sand); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ---------- Signature line ---------- */
.signature { text-align: center; padding-block: calc(var(--section-y) * .6); }

/* ---------- Situations list ---------- */
.list-lines { border-block-start: var(--border-divider); }
.list-lines > * { padding-block: var(--s4); border-block-end: var(--border-divider); }

/* ---------- Service cards ---------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.service {
  background: var(--paper);
  border: var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.service h3 { font-size: var(--fs-h3); }
.service__desc { font-size: var(--fs-body); }
.service__actions { margin-block-start: auto; padding-block-start: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.service__actions .btn { width: 100%; }
.service__actions .chip { align-self: flex-start; }
@media (max-width: 1023px) { .services { grid-template-columns: 1fr; } }

/* ---------- Steps (only for a real sequence) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: var(--s2); }
.step__num { font-family: var(--font-heading); font-size: var(--fs-quote); color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-h4); }
.step p { color: var(--color-text-secondary); }
@media (max-width: 639px) { .steps { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- Dialogue ---------- */
.dialogue { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.dialogue b { font-weight: var(--weight-bold); }

/* ---------- Testimonials (grid, never a carousel) ---------- */
/* Capped width keeps the screenshot text near body size instead of billboard size */
.testimonials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; max-width: 880px; }
.testimonial {
  margin: 0;
  background: #FFFDF9;
  border: var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s3);
}
.testimonial img { width: 100%; height: auto; border-radius: 10px; }
.testimonial figcaption { font-size: 12px; color: var(--earth-soft); text-align: center; margin-block-start: var(--s3); }
@media (max-width: 639px) { .testimonials { grid-template-columns: 1fr; } }

/* ---------- Gift box (the only olive-mist surface) ---------- */
.gift {
  background: var(--olive-mist);
  border: var(--border-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s7);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--s6);
  align-items: center;
}
.gift__actions { display: flex; flex-direction: column; gap: var(--s3); align-items: stretch; }
.gift__actions small { font-size: var(--fs-small); color: var(--earth-soft); }
@media (max-width: 1023px) { .gift { grid-template-columns: 1fr; padding: var(--s6) var(--s5); } }

/* ---------- FAQ ---------- */
.faq details { border-block-end: var(--border-divider); padding-block: var(--s4); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h4);
  line-height: 1.35;
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus drawn as two bars; the vertical bar folds away when open, leaving a minus */
.faq summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-block-start: .4em;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 16px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 16px no-repeat;
  transition: background-size 300ms var(--ease);
}
.faq details[open] summary::after { background-size: 16px 2px, 2px 0; }
.faq details p { margin-block-start: var(--s3); max-width: var(--measure); }
/* ds.js wraps each answer in .faq__body and animates its height (340ms open, 260ms close) */
.faq__body { overflow: hidden; }

/* ---------- Marker highlight ---------- */
/* At most one sentence per section. Visible by default; ds.js resets it and sweeps it in
   from the start side (right) once, when the sentence reaches the viewport. */
.marker {
  background-image: linear-gradient(transparent 45%, var(--accent-marker) 45%, var(--accent-marker) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .1em;
}
.marker.is-pending { background-size: 0% 100%; }
.marker.is-in { transition: background-size 1100ms var(--ease); }

/* ---------- Form fields ---------- */
/* Hebrew free text: dir="rtl" (dir="auto" turns an empty field LTR). Email and phone: dir="ltr". */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--fs-h4); line-height: 1.35; }
.field__hint { font-size: var(--fs-small); color: var(--color-text-secondary); }
.textarea {
  width: 100%;
  min-height: 9em;
  padding: var(--s4);
  border: 1px solid var(--stone);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--earth);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--dur-hover);
}
.textarea::placeholder { color: var(--muted); opacity: .8; }
.textarea:focus { border-color: var(--olive); outline: 2px solid var(--olive-mist); outline-offset: 0; }
.textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--forest);
  padding-block: var(--s7);
  font-size: var(--fs-small);
  color: var(--on-forest-soft);
  --color-text: var(--on-forest);
  --color-focus: var(--on-forest-soft);
}
.footer .wordmark { color: var(--on-forest); }
.footer .link { text-decoration-color: rgba(217, 223, 204, .5); }
.footer .link:hover { color: var(--on-forest-accent); text-decoration-color: var(--on-forest-accent); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.footer__col { display: flex; flex-direction: column; gap: var(--s2); }
/* Talia's emblem with the site name centred under it, the pair kept at the start of the column */
.footer__brand { align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-block-end: var(--s2); }
.footer__emblem { width: 240px; height: auto; }
.footer__legal { margin-block-start: var(--s6); padding-block-start: var(--s4); border-block-start: 1px solid rgba(217, 223, 204, .25); font-size: 13px; }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s5); } }
/* Phone: the whole footer is centred under the emblem, with room at the bottom so the chat bubble does not cover the last line */
@media (max-width: 639px) {
  .footer { padding-block-end: calc(var(--s7) + var(--bubble-size)); }
  .footer__brand { align-self: center; }
  .footer__col { align-items: center; text-align: center; }
  .footer__legal { text-align: center; }
}

/* ---------- Floating chat bubble ---------- */
/* Bottom corner on the end side (left in RTL); the accessibility widget takes the other corner. Shown after half a screen of scrolling (ds.js).
   Without JS it is a WhatsApp link; chat.js turns it into the opener of the chat with "תטא". */
.chat-bubble {
  position: fixed;
  inset-block-end: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(var(--s4) + env(safe-area-inset-left, 0px));
  z-index: var(--z-bubble);
  width: var(--bubble-size);
  height: var(--bubble-size);
  border-radius: 50%;
  background: var(--color-action);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px var(--paper), 0 8px 24px rgba(51, 47, 42, .25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease), background var(--dur-hover);
}
.chat-bubble:hover { background: var(--color-action-hover); }
.chat-bubble .icon { width: 26px; height: 26px; }
.chat-bubble.is-shown { opacity: 1; transform: none; pointer-events: auto; }
/* While the page scrolls the bubble steps back to half opacity, so it doesn't sit on top of the text being read */
.chat-bubble.is-shown.is-scrolling { opacity: .5; transition: opacity 250ms var(--ease), background var(--dur-hover); }
.chat-bubble.is-shown.is-scrolling:hover, .chat-bubble.is-shown.is-scrolling:focus-visible { opacity: 1; }
.chat-open .chat-bubble { opacity: 0; pointer-events: none; }

/* ---------- Chat panel (chat.js) ---------- */
.chat {
  position: fixed;
  inset-block-end: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: calc(var(--s4) + env(safe-area-inset-left, 0px));
  z-index: var(--z-drawer);
  width: min(380px, calc(100vw - 32px));
  height: min(580px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--border-card);
  border-radius: var(--r-card);
  box-shadow: 0 16px 48px rgba(51, 47, 42, .22);
  overflow: hidden;
  font-size: 16px;
}
.chat[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--cream); border-block-end: 1px solid var(--color-hairline); }
.chat__mark { flex: none; width: 36px; height: 26px; background: url("assets/brand/lotus.png") center / contain no-repeat; }
.chat__title { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.chat__title b { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 19px; }
.chat__title span { font-size: 13px; color: var(--color-text-secondary); }
.chat__close { flex: none; border: 0; background: none; color: var(--earth-soft); font-size: 18px; width: 40px; height: 40px; border-radius: var(--r-btn); cursor: pointer; }
.chat__close:hover { background: var(--sand); }
.chat__log { flex: 1; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); overscroll-behavior: contain; }
.chat__msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.chat__msg p { margin: 0; }
.chat__msg p + p { margin-block-start: var(--s2); }
.chat__msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chat__msg bdi { white-space: nowrap; }
.chat__msg--bot { align-self: flex-start; background: var(--cream); border-start-start-radius: 4px; }
.chat__msg--me { align-self: flex-end; background: var(--olive-mist); border-start-end-radius: 4px; }
.chat__msg--error { background: var(--accent-tint); }
.chat__typing { display: inline-flex; gap: 5px; align-items: center; padding-block: 14px; }
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: chat-dot 1.2s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__suggest { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s4) var(--s3); }
.chat__suggest[hidden] { display: none; }
.chat__chip { font: inherit; font-size: 14px; border: 1px solid rgba(51, 47, 42, .2); background: var(--paper); color: var(--earth); border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer; }
.chat__chip:hover { background: var(--olive-mist); }
.chat__form { display: flex; align-items: flex-end; gap: var(--s2); padding: var(--s3) var(--s4); border-block-start: 1px solid var(--color-hairline); }
.chat__input { flex: 1; resize: none; overflow-y: hidden; min-height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--stone); border-radius: var(--r-btn); background: var(--paper); color: var(--earth); font: inherit; font-size: 16px; line-height: 1.5; }
.chat__input:focus { border-color: var(--olive); outline: 2px solid var(--olive-mist); outline-offset: 0; }
.chat__send { flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-btn); background: var(--color-action); color: var(--paper); display: grid; place-items: center; cursor: pointer; }
.chat__send:hover { background: var(--color-action-hover); }
.chat__send:disabled { opacity: .5; cursor: default; }
.chat__send svg { width: 22px; height: 22px; }
.chat__note { margin: 0; padding: 0 var(--s4) var(--s3); font-size: 12px; color: var(--color-text-secondary); }
.chat__note a { color: inherit; }
.chat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 639px) {
  .chat { inset-inline: 8px; inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Motion: subtle reveal ---------- */
/* Content is visible by default. ds.js adds .is-in when an element nears the viewport,
   which plays the entrance once. Nothing is ever hidden while waiting for scroll. */
@keyframes ds-rise { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
.reveal.is-in { animation: ds-rise var(--dur-reveal) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--reveal-stagger)); }
.arch.reveal.is-in { animation-name: ds-fade; animation-duration: 800ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}