/* ⭐ אסימוני המותג של בן בקר.
   הערכים נשלפו מקובץ האילוסטרייטור של עינת פרוסט, ממילויי הווקטור עצמם
   ולא מדגימת פיקסלים, כדי שלא ייווצר הפרש מהדחיסה של התצוגה. */

:root {
  --pink: #fb828c;
  --pink-soft: #fde8ea; /* רקע השדות בטופס */
  --brown: #462324;
  --olive: #a2ad05; /* ריבוע הסימן בתג הכהה */
  --white: #ffffff;
  --ink: #462324;

  --wrap: 1190px; /* רוחב לוח העיצוב של עינת, 1190.55pt */
  --gut: 24px;

  /* סולם הטיפוגרפיה, נמדד מתוך העיצוב ולא הומצא */
  --fs-soon: 52px; /* נמדד 42.6 בלוח של עינת, הועלה לבקשת אפיק להבלטת COMING SOON */
  --fs-banner: 22px;
  --fs-btn: 18.6px;
  --fs-body: 16px;

  --radius: 0px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* הגופנים של העיצוב. שניהם ברישיון OFL ומותרים לשימוש מסחרי. */
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Assistant-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Assistant-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Assistant-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Karantina';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Karantina-Bold.ttf') format('truetype');
}

/* בסיס ופריסה. העמוד הוא רצף של פסים ברוחב מלא, כמו בעיצוב. */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Assistant', 'Segoe UI', Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.wrap {
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}

/* טקסט לקורא מסך בלבד */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ===== כפתורים ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 28px;
  font-size: var(--fs-btn);
  font-weight: 400;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}

.btn:hover {
  filter: brightness(0.94);
}

.btn:active {
  transform: translateY(1px);
}

.btn--light {
  background: var(--white);
  color: var(--brown);
}

.btn--dark {
  background: var(--brown);
  color: var(--white);
}

/* ===== פס ורוד ===== */

.banner {
  background: var(--pink);
  color: var(--white);
  scroll-margin-top: 0;
}

.banner p {
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin: 0 auto;
  padding: 14px 0;
  font-size: var(--fs-banner);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* ===== פס תמונה ברוחב מלא ===== */

.band img {
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
}

.band--portrait img {
  height: clamp(300px, 38vw, 560px);
  object-position: center 28%;
}

/* ===== בחזרה למעלה ===== */

.back-row {
  display: flex;
  justify-content: flex-start;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 22px;
  background: var(--pink);
  color: var(--white);
  font-size: var(--fs-btn);
  text-decoration: none;
  transition: filter 0.18s var(--ease);
}

.back-to-top:hover {
  filter: brightness(0.94);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* מקטעי העמוד, לפי הלוח של עינת: דסקטופ 1190.55pt, מובייל 257.6pt. */

/* ===== הירו ===== */

.hero {
  background: var(--pink);
  color: var(--white);
  padding-block: clamp(32px, 4vw, 56px);
}

/* ⭐ הקיפול הראשון.
   גובה הסמל הוא המידה היחידה שקובעת את גובה הירו, והיא חסומה
   גם לפי גובה המסך וגם לפי רוחבו. לכן כל תוכן הירו נכנס לקיפול
   הראשון בכל רזולוציה, בלי ששום חלק ייחתך.
   ⚠️ דפדפן ישן בלי svh מתעלם משתי השורות וחוזר לירו הזורם, ולא נשבר. */
.hero--fold {
  --hero-art: min(68svh, 46vw, 560px);
  display: grid;
  align-content: center;
  min-height: 100svh;
}

/* ⚠️ בלוח הדסקטופ הטקסט בצד שמאל והסמל במרכז, והשליש הימני ריק.
   זאת בחירה של המעצבת, והשארתי אותה. לכן הרשת כאן היא LTR מפורש
   ולא יורשת את כיוון העמוד. */
.hero__grid {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(200px, 26%) minmax(0, 40%);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.hero__text {
  order: 1;
}

.hero__mark {
  order: 2;
  color: var(--white);
}

/* ⚠️ הסמל נמדד לפי גובה ולא לפי רוחב אחוזי. זה מה שמאפשר לחסום אותו
   לגובה המסך, וגם מה שמונע את הקריסה לאפס כשהמשבצת ממורכזת. */
.hero__mark svg {
  width: auto;
  height: var(--hero-art, auto);
  margin-inline: auto;
}

.hero__wordmark {
  margin: 0;
  color: var(--white);
}

.hero__wordmark svg {
  width: 100%;
  height: auto;
}

.hero__soon {
  margin: 14px 0 0;
  color: var(--brown);
  font-family: 'Karantina', 'Assistant', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, var(--fs-soon));
  line-height: 1;
  letter-spacing: 0.035em;
}

.hero__actions {
  display: grid;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 52px);
  max-width: 260px;
}

/* ===== קצת עלינו ===== */

.about {
  padding-block: clamp(26px, 3vw, 40px) 0;
  text-align: center;
}

.about__lead {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.about__para {
  margin: 0 auto 10px;
  max-width: 76ch;
  line-height: 1.6;
}

.about .back-row {
  margin-top: clamp(20px, 2.6vw, 34px);
  justify-content: flex-start;
}

/* ===== צרו קשר ===== */

.contact {
  padding-block: clamp(28px, 3.4vw, 46px) 0;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* התג הכהה עם הסמל, כמו בעיצוב: מלבן חום מוטה עם ריבוע זית בפינה */
/* ⚠️ היה כאן display:grid עם place-items:center, ואז הפריט מקבל גודל לפי
   התוכן. ל-SVG עם viewBox אין רוחב פנימי, ולכן width:100% התכנס ל-0
   והלוגו פשוט לא הופיע. flex עם גובה מוחלט פותר את זה. */
.contact__badge {
  position: relative;
  align-self: start;
  justify-self: center;
  width: clamp(140px, 15vw, 196px);
  aspect-ratio: 3 / 4;
  background: var(--brown);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
}

.contact__badge::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 30%;
  aspect-ratio: 1;
  background: var(--olive);
}

.contact__badge svg {
  width: auto;
  height: 68%;
}

.contact__hours,
.contact__intro {
  margin: 0;
}

.contact__list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: flex;
  gap: 6px;
}

.contact__list .k {
  flex: 0 0 auto;
}

.contact__list .v {
  text-decoration: none;
}

.contact__list .v:hover {
  text-decoration: underline;
}

.rule {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--pink);
}

.contact__intro {
  margin-bottom: 16px;
}

/* ===== טופס ===== */

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.field--half {
  grid-column: span 1;
  grid-template-columns: 80px minmax(0, 1fr);
}

.field--area {
  align-items: start;
}

.field label {
  font-size: var(--fs-body);
}

.field input,
.field textarea {
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: var(--pink-soft);
  color: var(--ink);
  font: inherit;
  border-radius: var(--radius);
}

.field textarea {
  resize: vertical;
  min-height: 118px;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}

.field--invalid input,
.field--invalid textarea {
  box-shadow: inset 0 0 0 2px var(--brown);
}

.form__status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.4em;
  font-weight: 700;
}

.form__actions {
  grid-column: 1 / -1;
}

.form__actions .btn {
  min-width: 170px;
}

.contact .back-row {
  margin-top: clamp(20px, 2.6vw, 34px);
}

/* ===== פוטר ===== */

.footer {
  padding-block: clamp(24px, 3vw, 40px);
}

.footer__grid {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.footer__mark {
  width: 54px;
  color: var(--pink);
}

/* אותה מלכודת כמו בתג: הפוטר מרכז את הפריטים, ולכן ה-SVG צריך גובה
   מוחלט ולא רוחב אחוזי. */
.footer__mark svg {
  width: auto;
  height: 58px;
}

.hero--slim__mark svg {
  width: auto;
  height: 30px;
}

.footer__rights {
  margin: 0;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.footer__nav a {
  text-decoration: none;
}

.footer__nav a:hover {
  text-decoration: underline;
}

.footer__nav span {
  color: var(--pink);
}

/* ===== מובייל ===== */

@media (max-width: 860px) {
  /* במובייל הכל נערם לעמודה אחת, ולכן המידה קטנה יותר.
     הרצועה התחתונה שמורה לכפתור הנגישות הצף, כדי שלא ישב על כפתור. */
  .hero--fold {
    --hero-art: min(32svh, 88vw, 290px);
    padding-block: clamp(16px, 3svh, 36px) 72px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(14px, 2.4svh, 26px);
  }

  .hero__mark {
    order: 1;
  }

  .hero__text {
    order: 2;
    width: 100%;
  }

  .hero__wordmark svg {
    width: auto;
    height: calc(var(--hero-art, 150px) * 0.5);
    margin-inline: auto;
  }

  .hero__actions {
    max-width: none;
    margin-top: clamp(16px, 2.6svh, 28px);
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact__badge {
    justify-self: start;
    margin-inline-start: 34px;
  }

  .contact__body {
    text-align: start;
  }

  .form {
    grid-template-columns: 1fr;
  }

  .field,
  .field--half {
    grid-column: 1 / -1;
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .form__actions .btn {
    width: 100%;
  }

  .about .back-row,
  .contact .back-row {
    justify-content: center;
  }
}

/* מסך נמוך, בעיקר טלפון מסובב: שני הכפתורים זה לצד זה והרצועה
   התחתונה מצטמצמת, כדי שהקיפול הראשון עדיין יחזיק את כל התוכן. */
@media (max-width: 860px) and (max-height: 520px) {
  .hero--fold {
    --hero-art: min(26svh, 88vw, 290px);
    padding-block: 10px 74px;
  }

  .hero__actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== עמוד מדיניות פרטיות ===== */

.hero--slim {
  padding-block: clamp(22px, 3vw, 40px);
}

.hero--slim h1 {
  margin: 18px 0 4px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.2;
}

.hero--slim p {
  margin: 0;
  opacity: 0.92;
}

.hero--slim__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-size: var(--fs-btn);
}

.hero--slim__back:hover {
  text-decoration: underline;
}

.hero--slim__mark {
  display: block;
  width: 26px;
  color: var(--white);
}

.legal {
  padding-block: clamp(26px, 3vw, 44px);
  max-width: 78ch;
}

.legal .clause {
  margin-bottom: 22px;
}

.legal h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.legal h2 .num {
  color: var(--pink);
}

.legal p {
  margin: 0 0 8px;
  line-height: 1.65;
}

/* ⚠️ ה-SVG של "בחזרה למעלה" יושב בתוך inline-flex ונכווץ לאפס ברוחב צר.
   flex: 0 0 auto מקבע אותו. */
.back-to-top svg {
  flex: 0 0 auto;
}

/* מטרות מגע במובייל. אצבע צריכה 44 פיקסל, והשורות בעיצוב צרות מזה. */
@media (max-width: 860px) {
  .contact__list li {
    min-height: 44px;
    align-items: center;
  }

  .footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 6px;
  }
}

/* הודעת הפרטיות שליד הטופס, לפי חובת היידוע */
.form__notice {
  margin: 0 0 14px;
  font-size: 14px;
  opacity: 0.86;
}

.form__notice a {
  text-decoration: underline;
}

/* קרדיט הבונה, קטן ולא מתחרה בתוכן */
.footer__credit {
  margin: 6px 0 0;
  font-size: 13px;
  opacity: 0.72;
}

.footer__credit a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__credit a:hover {
  opacity: 1;
}

.legal__intro p {
  font-weight: 700;
  margin-bottom: 14px;
}

.legal ul {
  margin: 0 0 10px;
  padding-inline-start: 20px;
}

.legal li {
  margin-bottom: 5px;
  line-height: 1.65;
}

.legal .warn {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--pink-soft);
  border-inline-start: 4px solid var(--pink);
  font-weight: 700;
}

/* תפריט הנגישות הצף, וההתאמות שהוא מפעיל. */

.a11y {
  position: fixed;
  inset-inline-start: 16px;
  bottom: 16px;
  z-index: 9999;
  font-family: 'Assistant', Arial, sans-serif;
}

.a11y__fab {
  width: 52px;
  height: 52px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--brown);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
  transition: transform 0.18s var(--ease);
}

.a11y__fab:hover {
  transform: scale(1.06);
}

.a11y__fab svg {
  width: 28px;
  height: 28px;
}

.a11y__panel {
  position: absolute;
  inset-inline-start: 0;
  bottom: 62px;
  width: 268px;
  max-width: calc(100vw - 32px);
  max-height: min(78vh, 560px);
  overflow-y: auto;
  padding: 14px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--brown);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.a11y__panel[hidden] {
  display: none;
}

.a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.a11y__head h2 {
  margin: 0;
  font-size: 17px;
}

.a11y__x {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.a11y__x svg {
  width: 18px;
  height: 18px;
}

.a11y__zoom {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.a11y__zoom button {
  height: 44px;
  border: 1px solid var(--brown);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 7px;
}

.a11y__zoom button svg {
  width: 18px;
  height: 18px;
}

.a11y__zoomval {
  text-align: center;
  font-weight: 700;
}

.a11y__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.a11y__list button,
.a11y__reset {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--brown);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.a11y__list button svg,
.a11y__reset svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.a11y__list button[aria-pressed='true'] {
  background: var(--brown);
  color: var(--white);
}

.a11y__statement {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
}

/* ===== ההתאמות עצמן ===== */

html {
  font-size: calc(16px * var(--a11y-scale, 1));
}

/* ⚠️ הסולם הטיפוגרפי של העיצוב נמדד בפיקסלים. כדי שהגדלת הטקסט תשפיע
   עליו בלי לשבור את הפריסה, הערכים מוכפלים בגורם ולא מוחלפים. */
.a11y-zoomed body {
  font-size: calc(var(--fs-body) * var(--a11y-scale));
}

.a11y-zoomed .banner p {
  font-size: calc(var(--fs-banner) * var(--a11y-scale));
}

.a11y-zoomed .btn,
.a11y-zoomed .back-to-top {
  font-size: calc(var(--fs-btn) * var(--a11y-scale));
}

/* COMING SOON גדל גם הוא עם הגדלת הטקסט. הוא נשבר לשתי
   שורות במדרגות הגבוהות, והירו גדל איתו בלי לחתוך כלום. */
.a11y-zoomed .hero__soon {
  font-size: calc(clamp(30px, 4.2vw, var(--fs-soon)) * var(--a11y-scale));
}

.a11y-zoomed .about__lead,
.a11y-zoomed .about__para,
.a11y-zoomed .contact__hours,
.a11y-zoomed .contact__intro,
.a11y-zoomed .contact__list,
.a11y-zoomed .field label,
.a11y-zoomed .field input,
.a11y-zoomed .field textarea,
.a11y-zoomed .footer__rights,
.a11y-zoomed .footer__nav,
.a11y-zoomed .legal p,
.a11y-zoomed .legal li {
  font-size: calc(var(--fs-body) * var(--a11y-scale));
}

/* ⭐ ניגודיות גבוהה.
   לבן על הוורוד של המותג הוא כ-2.4 ל-1 ונכשל בתקן. החום של המותג על
   אותו ורוד הוא 5.68 ל-1 ועובר, ולכן המצב הזה מחליף צבע טקסט בלבד
   ואינו מכניס לפלטה שום צבע חדש. */
.a11y-contrast .banner,
.a11y-contrast .back-to-top {
  color: var(--brown);
}

.a11y-contrast .hero {
  color: var(--brown);
}

.a11y-contrast .hero__wordmark,
.a11y-contrast .hero__mark,
.a11y-contrast .footer__mark {
  color: var(--brown);
}

.a11y-contrast .btn--light {
  border: 2px solid var(--brown);
}

.a11y-contrast .field input,
.a11y-contrast .field textarea {
  background: var(--white);
  border: 2px solid var(--brown);
}

.a11y-contrast .footer__nav span {
  color: var(--brown);
}

.a11y-contrast .hero--slim p {
  opacity: 1;
}

.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700;
}

.a11y-readable body,
.a11y-readable .btn,
.a11y-readable input,
.a11y-readable textarea,
.a11y-readable button {
  font-family: Arial, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.012em;
  word-spacing: 0.08em;
}

.a11y-readable .hero__soon {
  font-family: Arial, sans-serif !important;
}

.a11y-still *,
.a11y-still *::before,
.a11y-still *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.a11y-cursor,
.a11y-cursor * {
  cursor:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l6 18 2.6-6.9L20.5 10z' fill='%23462324' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E")
      3 3,
    auto;
}

@media (max-width: 520px) {
  .a11y__panel {
    width: calc(100vw - 32px);
  }
}

@media print {
  .a11y {
    display: none;
  }
}