/* ==================================================================
   itzuv.css: העיצוב של האתר (צבעים, גופנים, מרווחים).

   הרעיון: "מבית ומחוץ" כשני עולמות.
   מבית = עבודות פנים (ארון קודש, עמוד תפילה, מדפים): גוון אוכרה חם.
   ומחוץ = עבודות חוץ (פרגולות, דקים): כחול שמי המדבר.
   הבסיס: נייר בצבע חול, חום עץ כהה כמו בלוגו, וירוק זית.

   כל הצבעים מוגדרים פעם אחת כאן למעלה. כל צבע טקסט נבדק מול הרקע שלו
   ועומד בניגודיות של 4.5:1 לפחות (תקן ישראלי 5568, רמה AA).
   ================================================================== */

:root {
  color-scheme: light;

  /* ---------- צבעים ---------- */
  --chol: #F4ECDF;            /* חול בהיר: רקע הדף */
  --chol-kehe: #E9DCC6;       /* חול כהה: רצועות */
  --neyar: #FBF7F0;           /* נייר: כפתורים משניים ומשטחים */
  --ets: #2E1C10;             /* חום עץ כהה: טקסט רגיל (13.9:1 על החול) */
  --ets-mishni: #5B4636;      /* חום בינוני: טקסט משני (7.5:1) */
  --logo: #3B1D0E;            /* החום של הלוגו: כותרות */
  --ochre: #8A4B14;           /* אוכרה מדברית, לטקסט קטן (5.8:1 על החול) */
  --ochre-kishut: #B9803E;    /* אוכרה בהירה: קישוט בלבד, לא לטקסט */
  --shamayim: #1E4C7C;        /* כחול שמי המדבר (7.5:1) */
  --zayit: #445C2C;           /* ירוק זית: כפתור הוואטסאפ ורצועת הסיום */
  --zayit-kehe: #33461F;
  --al-zayit: #FBF7F0;        /* טקסט על ירוק הזית (7:1) */
  --al-zayit-mishni: #E3E8CF; /* טקסט משני על ירוק הזית (5.9:1) */
  --kav: #8C7158;             /* קווי מסגרת של רכיבים: 3:1 לפחות מול הרקע */
  --kav-adin: #D9C9AE;        /* קווי הפרדה עדינים, לקישוט בלבד */
  --laila: #24170D;           /* חום לילה: התחתית */
  --al-laila: #E9DCC6;        /* טקסט על חום הלילה (12.9:1) */

  /* סימון טיוטה (מקום שמור לתמונה שעוד לא הגיעה) */
  --tiyuta-reka: #FBEFD5;
  --tiyuta-tekst: #6B3E0A;
  --tiyuta-kav: #8A5A1E;

  /* מסגרת המיקוד במקלדת (משתנה לפי הרקע) */
  --focus: #1E4C7C;

  /* חלון התמונה המוגדלת */
  --hagdala-reka: #16110C;
  --hagdala-tekst: #F4ECDF;

  /* ---------- גופנים ---------- */
  --gufan-kotarot: "Frank Ruhl Libre", "David Libre", David, "Times New Roman", serif;
  --gufan: "Rubik", "Assistant", "Segoe UI", "Arial Hebrew", Arial, sans-serif;

  /* סולם גדלי טקסט קבוע */
  --t-katan: 1rem;                                     /* 16: כיתובים */
  --t-guf: 1.125rem;                                   /* 18: טקסט רגיל */
  --t-bolet: 1.3125rem;                                /* 21: פסקה מודגשת */
  --t-3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);      /* 22 עד 28: כותרת קטנה */
  --t-4: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);    /* 30 עד 44: כותרת חלק */
  --t-5: clamp(2.25rem, 1.55rem + 3vw, 3.75rem);       /* 36 עד 60: כותרת גדולה */

  /* סולם מרווחים קבוע */
  --rv-1: .25rem;
  --rv-2: .5rem;
  --rv-3: .75rem;
  --rv-4: 1rem;
  --rv-5: 1.5rem;
  --rv-6: 2rem;
  --rv-7: 3rem;
  --rv-8: 4.5rem;
  --rv-9: 6.5rem;

  --rochav-max: 76rem;
  --shulayim: 1rem;           /* מרווח בצדי המסך */
  --gova-sargel: 0px;         /* גובה סרגל הכפתורים התחתון בטלפון */
}

@media (min-width: 40em) {
  :root { --shulayim: 2rem; }
}

/* בטלפון ובטאבלט יש סרגל קבוע בתחתית. השורה הזאת שומרת לו מקום,
   וקוד האתר מעדכן את הגובה המדויק. */
@media (max-width: 55.99em) {
  html.im-sargel { --gova-sargel: calc(4rem + 1px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- בסיס ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--rv-4);
  scroll-padding-bottom: calc(var(--gova-sargel) + 1rem);
}
@media (min-width: 56em) {
  /* במחשב ראש הדף נשאר למעלה, אז קפיצה לחלק משאירה לו מקום */
  html { scroll-padding-top: 6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html.hagdala-ptucha { overflow: hidden; }

/* הרקע: נייר בצבע חול עם גרעיניות עדינה מאוד (ציור קטן בתוך הקוד, בלי תמונה כבדה).
   הגרעיניות חלשה בכוונה: גם בנקודה הכי כהה שלה, הטקסט הקטן שומר על ניגודיות של יותר מ-4.5:1. */
body {
  margin: 0;
  background-color: var(--chol);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .05 .2 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--ets);
  font-family: var(--gufan);
  font-size: var(--t-guf);
  line-height: 1.7;
  padding-bottom: var(--gova-sargel);
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

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

h1, h2, h3 {
  font-family: var(--gufan-kotarot);
  font-weight: 700;
  line-height: 1.15;
  color: var(--logo);
  margin: 0 0 var(--rv-4);
  text-wrap: balance;
}
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-3); }

p { margin: 0 0 var(--rv-4); text-wrap: pretty; }

a {
  color: var(--ets);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { text-decoration-thickness: 2px; }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* אוסף הציורים הקטנים (סמלים, ענף הזית, קווי המכתש). לא מוצג בעצמו. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
}

.mechal {
  max-width: var(--rochav-max);
  margin-inline: auto;
  padding-left: max(var(--shulayim), env(safe-area-inset-left, 0px));
  padding-right: max(var(--shulayim), env(safe-area-inset-right, 0px));
}
.mechal--tzar { max-width: 50rem; }

/* ---------- דילוג לתוכן ---------- */

.dilug {
  position: absolute;
  z-index: 50;
  top: .75rem;
  inset-inline-start: .75rem;
  transform: translateY(-200%);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  background: var(--ets);
  color: var(--neyar);
  font-weight: 600;
  text-decoration: none;
}
.dilug:focus { transform: none; }

/* ---------- ראש הדף ---------- */

.rosh {
  background: var(--chol);
  border-bottom: 1px solid var(--kav-adin);
}
@media (min-width: 56em) {
  .rosh {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 20;
  }
  /* ראש דף גבוה מדי (טקסט מוגדל מאוד) לא נשאר דבוק למעלה */
  html.rosh-gavoha { scroll-padding-top: 1rem; }
  html.rosh-gavoha .rosh { position: static; }
}
.rosh__pnim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-2) var(--rv-5);
  padding-block: var(--rv-2);
}
.semel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
}
.semel img {
  width: 9rem;
  height: auto;
}
.rosh nav { flex: 1 1 auto; }
.nivut {
  list-style: none;
  margin: 0 -.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nivut a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: .25rem .5rem;
  border-radius: .375rem;
  color: var(--ets);
  font-size: var(--t-katan);
  font-weight: 500;
  text-decoration: none;
}
.nivut a:hover {
  background: var(--chol-kehe);
  text-decoration: underline;
}
/* בטלפון צר מאוד (או עם טקסט מוגדל): התפריט בשתי שורות מסודרות של שניים */
@media (max-width: 22.5em) {
  .nivut {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }
}

/* כפתור הוואטסאפ בראש הדף: רק במחשב (בטלפון יש סרגל בתחתית) */
.rosh__whatsapp { display: none !important; }
@media (min-width: 40em) {
  .rosh nav { flex: 0 1 auto; }
  .nivut { justify-content: flex-start; gap: 0 var(--rv-2); margin: 0; margin-inline-start: -.75rem; }
  .nivut a { padding: .25rem .75rem; font-size: var(--t-guf); }
}
@media (min-width: 56em) {
  .rosh__whatsapp { display: inline-flex !important; }
}

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

.kaftorim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-3);
}
.kaftor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  min-width: 44px;
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: .5rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--t-guf);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.kaftor--rashi {
  background: var(--zayit);
  border-color: var(--zayit);
  color: var(--al-zayit);
  box-shadow: 0 2px 0 var(--zayit-kehe);
}
.kaftor--rashi:hover {
  background: var(--zayit-kehe);
  border-color: var(--zayit-kehe);
}
.kaftor--mishni {
  background: var(--neyar);
  border-color: var(--ets);
  color: var(--ets);
}
.kaftor--mishni:hover { background: var(--chol-kehe); }
.kaftor--katan {
  min-height: 44px;
  padding: .45rem 1rem;
  font-size: var(--t-katan);
}

.kaftorim .kaftor { flex: 1 1 14rem; }

@media (prefers-reduced-motion: no-preference) {
  .kaftor { transition: background-color .2s ease, border-color .2s ease; }
}

/* ---------- פתיחה ---------- */

.ptiha {
  position: relative;
  overflow-x: clip;
  padding-block: var(--rv-5) var(--rv-7);
}

.ptiha__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-6);
  grid-template-areas:
    "rosh"
    "olamot"
    "peula";
}
.ptiha__rosh { grid-area: rosh; }
.ptiha__olamot { grid-area: olamot; }
.ptiha__peula { grid-area: peula; }

.ptiha__al {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 var(--rv-4);
  font-size: var(--t-katan);
  font-weight: 500;
  color: var(--ochre);
}
.ptiha__al::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--ochre-kishut);
}

/* הכותרת הראשית: הלוגו המצויר, ומתחתיו השם של אלון */
.ptiha__h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rv-3);
  margin: 0 0 var(--rv-4);
  font-size: var(--t-4);
}
.ptiha__logo {
  width: min(100%, 30rem);
  height: auto;
}
.ptiha__shem {
  font-weight: 700;
  line-height: 1.1;
}
.ptiha__mishne {
  margin: 0;
  font-family: var(--gufan-kotarot);
  font-weight: 500;
  font-size: var(--t-3);
  line-height: 1.35;
  color: var(--ets);
}

.ptiha__mishpat {
  max-width: 34ch;
  margin-bottom: var(--rv-5);
  font-size: var(--t-bolet);
  line-height: 1.55;
}
.ptiha .kaftorim { max-width: 34rem; }
.ptiha .kaftor--rashi { flex-grow: 1.35; }

.ptiha__heara {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: var(--rv-4) 0 0;
  color: var(--ets-mishni);
}
.ptiha__heara .ikon { color: var(--ochre); }

/* שני העולמות: מבית (פנים) ומחוץ (חוץ), זה לצד זה */
.ptiha__olamot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--rv-3);
  align-items: start;
}
.olam {
  position: relative;
  margin: 0;
}
.olam img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  background: var(--chol-kehe);
}
/* תמונת הספרייה (1024x1536, כמעט כל הרוחב תפוס במדפים): בחיתוך רחב יותר מהמקור, כמו בטלפון, חותכים רק מלמטה (קצת רצפה), כך שכל ארבעת המדפים והמסגרת נשארים שלמים */
.olam--mibait img { object-position: 50% 0%; }
.olam--michutz img { object-position: 78% 50%; }
/* העולם השני יורד קצת, כמו שתי תמונות שהונחו ביד על השולחן */
.olam--michutz { margin-top: var(--rv-6); }

.olam figcaption {
  margin-top: var(--rv-3);
  padding-inline-start: var(--rv-3);
  border-inline-start: 3px solid var(--ochre-kishut);
}
.olam--michutz figcaption { border-inline-start-color: var(--shamayim); }
.olam__shem {
  display: block;
  font-family: var(--gufan-kotarot);
  font-weight: 900;
  font-size: var(--t-4);
  line-height: 1.05;
  color: var(--logo);
}
.olam__teur {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-katan);
  line-height: 1.45;
  color: var(--ets-mishni);
}

/* קווי גובה של מכתש רמון (או טבעות של גזע עץ), קישוט מאחורי התמונות.
   הם נשארים בגובה התמונות בלבד, אף פעם לא מאחורי טקסט. */
.ptiha__tabaot {
  position: absolute;
  z-index: -1;
  top: -6%;
  left: -18%;
  width: 136%;
  height: 76%;
  color: var(--ochre-kishut);
  opacity: .5;
  pointer-events: none;
}

@media (min-width: 60em) {
  .ptiha { padding-block: var(--rv-7) var(--rv-9); }
  .ptiha__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "rosh  olamot"
      "peula olamot";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    row-gap: var(--rv-6);
  }
  .ptiha__rosh { align-self: end; }
  .ptiha__olamot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--rv-4);
  }
  /* הספרייה (7:10, קרוב לתמונה המקורית) והפרגולה (4:5) באותו רוחב, והפרגולה יורדת קצת: התחתית של שתיהן באותו גובה בערך */
  .olam--mibait img { aspect-ratio: 7 / 10; }
  .olam--michutz { margin-top: var(--rv-8); }
  .olam--michutz img { aspect-ratio: 4 / 5; }
  .ptiha__tabaot {
    top: 2%;
    left: -26%;
    width: 132%;
    height: 80%;
  }
}

/* רגע התנועה היחיד באתר: התמונות נחשפות בעדינות כשהדף נטען. מי שביקש פחות תנועה לא יראה אותו. */
@media (prefers-reduced-motion: no-preference) {
  .olam img { animation: gilui 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .olam--michutz img { animation-delay: .18s; }
}
@keyframes gilui {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- חלקים ---------- */

.helek { padding-block: var(--rv-8); }
.avodot { padding-top: var(--rv-6); }
@media (min-width: 56em) {
  .helek { padding-block: var(--rv-9); }
  .avodot { padding-top: var(--rv-7); }
}

.helek__rosh {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-2) var(--rv-7);
  margin-bottom: var(--rv-6);
}
.helek__rosh h2 { margin: 0; }
.hakdama {
  margin: 0;
  max-width: 46ch;
  color: var(--ets-mishni);
}
@media (min-width: 56em) {
  .helek__rosh {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }
}

/* ---------- גלריה ---------- */

.sinun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rv-2);
  margin-bottom: var(--rv-7);
}
.sinun__kaftor {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .35rem .85rem;
  border: 2px solid var(--kav);
  border-radius: 999px;
  background: var(--neyar);
  color: var(--ets);
  font: inherit;
  font-size: var(--t-katan);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
@media (min-width: 40em) {
  .sinun__kaftor { padding: .4rem 1rem; font-size: var(--t-guf); }
}
.sinun__kaftor:hover { border-color: var(--ets); }
.sinun__kaftor[aria-pressed="true"] {
  background: var(--ets);
  border-color: var(--ets);
  color: var(--neyar);
}
.sinun__siman {
  display: none;
  width: 1em;
  height: 1em;
}
.sinun__kaftor[aria-pressed="true"] .sinun__siman { display: inline-block; }
.sinun__mone {
  min-width: 1.6em;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--chol-kehe);
  color: var(--ets);
  font-size: var(--t-katan);
  font-weight: 600;
  text-align: center;
}
.sinun__mone:empty { display: none; }
.sinun__kaftor[aria-pressed="true"] .sinun__mone {
  background: var(--neyar);
  color: var(--ets);
}
/* החלוקה של "ומחוץ" לפי סוג: בטלפון בשורה משלה, ובמסך רחב אחרי קו מפריד */
.sinun__tat {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rv-2);
}
.sinun__tavit {
  font-size: var(--t-katan);
  color: var(--ets-mishni);
}
@media (min-width: 40em) {
  .sinun__tat {
    flex: 0 1 auto;
    padding-inline-start: var(--rv-3);
    border-inline-start: 2px solid var(--kav-adin);
  }
}

/* בטלפון: עמודה אחת, וכל תמונה בצורה המקורית שלה (בלי חיתוך).
   תמונה לאורך לא תהיה גבוהה מדי. */
.galeria {
  --r: 1.333;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-7);
}
.avoda {
  margin: 0;
  min-width: 0;
  width: min(100%, calc(var(--r) * 30rem));
  justify-self: center;
}

/* מטאבלט ומעלה: שורות שבהן כל התמונות באותו גובה, וכל תמונה ברוחב שמתאים לצורה שלה.
   כך תמונה לרוחב נשארת רחבה ותמונה לאורך נשארת גבוהה, בלי לחתוך כלום. */
@media (min-width: 40em) {
  .galeria {
    --h: 14rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--rv-6) var(--rv-4);
  }
  .avoda {
    width: auto;
    flex: var(--r) 1 calc(var(--r) * var(--h));
    max-width: min(100%, calc(var(--r) * var(--h) * 1.75));
  }
  /* מרווח בסוף השורה האחרונה, כדי שהתמונות האחרונות לא יימתחו */
  .galeria::after {
    content: "";
    flex: 4 1 0px;
  }
}
@media (min-width: 64em) {
  .galeria { --h: 16.5rem; }
}

.avoda__kaftor {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--chol-kehe);
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  overflow: hidden;
}
.avoda__kaftor img { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .avoda__kaftor img { transition: transform .6s ease; }
  .avoda__kaftor:hover img { transform: scale(1.03); }
}

.avoda__kitovet {
  margin: var(--rv-3) 0 0;
  font-size: var(--t-katan);
  font-weight: 500;
  line-height: 1.45;
}
.avoda__olam {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .3rem;
  font-weight: 500;
  color: var(--ochre);
}
.avoda__olam--michutz { color: var(--shamayim); }
.avoda__olam .ikon { width: 1.1em; height: 1.1em; }
.avoda__sug {
  display: block;
  margin-top: .3rem;
  font-weight: 400;
  color: var(--ets-mishni);
}

/* מקום שמור לתמונה שעוד לא הגיעה */
.shamur {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  border: 2px dashed var(--kav);
  border-radius: 4px;
  background: var(--chol-kehe);
  color: var(--ets-mishni);
  text-align: center;
}
.shamur svg { width: 2.5rem; height: 2.5rem; }
.shamur__tekst {
  margin: 0;
  font-weight: 600;
  color: var(--ets);
}

/* תגית "טיוטה" */
.tag-tiyuta {
  display: inline-block;
  padding: .15rem .6rem;
  border: 1.5px dashed var(--tiyuta-kav);
  border-radius: .375rem;
  background: var(--tiyuta-reka);
  color: var(--tiyuta-tekst);
  font-size: var(--t-katan);
  font-weight: 600;
  line-height: 1.5;
}

/* הקישור "עוד עבודות באינסטגרם" מתחת לגלריה */
.od-avodot {
  display: flex;
  justify-content: center;
  margin: var(--rv-8) 0 0;
}
.od-avodot .kaftor { flex: 0 1 auto; }

/* קישור קטן לאינסטגרם: סמל מצלמה, טקסט גלוי, שטח לחיצה של 44 פיקסלים */
.kishur-insta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  font-weight: 500;
}

/* ---------- קצת על אלון ---------- */

.al-alon {
  border-top: 1px solid var(--kav-adin);
}
.al-alon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-5) var(--rv-8);
  grid-template-areas:
    "anaf"
    "tekst";
  align-items: center;
}
.al-alon__tekst { grid-area: tekst; }
.al-alon__anaf {
  grid-area: anaf;
  width: min(13rem, 60%);
  color: var(--zayit);
}
.al-alon__anaf svg { display: block; width: 100%; height: auto; }
.al-alon__tekst p {
  max-width: 60ch;
  font-size: var(--t-bolet);
  line-height: 1.65;
}
.al-alon__naim {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: var(--rv-6) 0 0;
  padding-top: var(--rv-5);
  border-top: 1px solid var(--kav-adin);
  font-family: var(--gufan-kotarot);
  font-size: var(--t-3) !important;
  font-weight: 500;
  line-height: 1.35;
  color: var(--logo);
}
.al-alon__naim svg {
  width: 2.75rem;
  height: auto;
  flex: none;
  color: var(--zayit);
}
@media (min-width: 56em) {
  .al-alon__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "tekst anaf";
  }
  .al-alon__anaf {
    width: 100%;
    max-width: 28rem;
    justify-self: center;
  }
}

/* ---------- איך זה עובד ---------- */

.tahalich {
  background: var(--chol-kehe);
}
.tzaadim {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-6) var(--rv-5);
}
@media (min-width: 40em) {
  .tzaadim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .tzaadim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* כל צעד יושב על קו עם שנתות, כמו סרגל של נגר */
.tzaad {
  position: relative;
  padding-top: var(--rv-5);
}
.tzaad::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: .8rem;
  border-top: 2px solid var(--ets);
  background:
    repeating-linear-gradient(to left, var(--ets) 0 2px, transparent 2px 3.75rem) 0 0 / 100% .8rem no-repeat,
    repeating-linear-gradient(to left, var(--ets) 0 1px, transparent 1px .75rem) 0 0 / 100% .4rem no-repeat;
}
.tzaad__mispar {
  display: block;
  margin-bottom: var(--rv-2);
  font-family: var(--gufan-kotarot);
  font-weight: 900;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--ochre);
}
.tzaad h3 { margin-bottom: var(--rv-2); }
.tzaad p {
  margin: 0;
  max-width: 30ch;
  color: var(--ets-mishni);
}

/* ---------- יצירת קשר: רצועת הסיום ---------- */

.kesher {
  --focus: var(--al-zayit);
  position: relative;
  overflow: clip;
  background: var(--zayit);
  color: var(--al-zayit);
}
/* קווי המכתש גם כאן, חלשים מאוד: גם כשקו עובר מאחורי אות, הניגודיות נשארת מעל 4.5:1 */
.kesher__tabaot {
  position: absolute;
  width: max(110%, 40rem);
  height: auto;
  inset-inline-start: -30%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--al-zayit);
  opacity: .1;
  pointer-events: none;
}
@media (min-width: 56em) {
  .kesher__tabaot {
    width: 85%;
    inset-inline-start: -18%;
  }
}
.kesher__pnim {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rv-7);
}
.kesher h2 {
  color: var(--al-zayit);
  font-size: var(--t-5);
  margin-bottom: var(--rv-4);
}
.kesher__hazmana {
  max-width: 38ch;
  font-size: var(--t-bolet);
  line-height: 1.6;
  color: var(--al-zayit);
}
.kesher .kaftorim {
  max-width: 34rem;
  margin-top: var(--rv-6);
}
/* על הירוק: הכפתור הראשי בהיר, כדי שיהיה הדבר הבולט ביותר */
.kesher .kaftor--rashi {
  background: var(--neyar);
  border-color: var(--neyar);
  color: var(--ets);
  box-shadow: 0 2px 0 var(--zayit-kehe);
}
.kesher .kaftor--rashi .ikon { color: var(--zayit); }
.kesher .kaftor--rashi:hover {
  background: var(--chol);
  border-color: var(--chol);
}
.kesher .kaftor--mishni {
  background: transparent;
  border-color: var(--al-zayit);
  color: var(--al-zayit);
}
.kesher .kaftor--mishni:hover { background: var(--zayit-kehe); }
.kesher .kaftor--rashi { flex-grow: 1.35; }

.kesher__pratim {
  margin: 0;
  padding: var(--rv-5);
  border: 1px solid rgba(251, 247, 240, .5);
  border-radius: .5rem;
  display: grid;
  gap: var(--rv-4);
  align-self: center;
}
.kesher__pratim div + div {
  padding-top: var(--rv-4);
  border-top: 1px solid rgba(251, 247, 240, .3);
}
.kesher__pratim dt {
  font-size: var(--t-katan);
  font-weight: 500;
  color: var(--al-zayit-mishni);
}
.kesher__pratim dd {
  margin: 0;
  font-size: var(--t-bolet);
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.kesher__mispar {
  font-family: var(--gufan-kotarot);
  font-size: var(--t-3) !important;
  font-weight: 700;
  line-height: 1.2;
}
@media (min-width: 40em) {
  .kesher__mispar { font-size: var(--t-4) !important; }
}
.kesher__insta { margin: 0; }
.kesher a { color: var(--al-zayit); }

@media (min-width: 56em) {
  .kesher__pnim {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    column-gap: var(--rv-8);
  }
}

/* ---------- תחתית ---------- */

.tachtit {
  --focus: var(--al-laila);
  background: var(--laila);
  color: var(--al-laila);
  padding-block: var(--rv-5);
}
.tachtit__pnim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rv-1) var(--rv-6);
}
.tachtit p { margin: 0; }
.tachtit__kishurim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rv-1) var(--rv-5);
}
.tachtit a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  color: var(--al-laila);
}

/* ---------- סרגל הכפתורים בתחתית המסך (טלפון) ---------- */

.sargel-kesher {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: var(--rv-2);
  padding: var(--rv-2) max(var(--rv-4), env(safe-area-inset-right, 0px)) calc(var(--rv-2) + env(safe-area-inset-bottom, 0px)) max(var(--rv-4), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--kav-adin);
  background: var(--neyar);
  box-shadow: 0 -8px 24px -14px rgba(46, 28, 16, .45);
  container-type: inline-size;
}
.sargel-kesher .kaftor {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  padding-inline: .75rem;
}
.sargel-kesher .kaftor--rashi { flex-grow: 1.5; }
/* כשהטקסט מוגדל מאוד (למשל 200%), הסמלים מפנים מקום למילים */
@container (max-width: 15em) {
  .sargel-kesher .kaftor .ikon { display: none; }
  .sargel-kesher .kaftor { padding-inline: .4rem; flex-grow: 1; }
}
@media (min-width: 56em) {
  .sargel-kesher { display: none; }
}

/* ---------- הודעה קטנה ("המספר יתווסף בקרוב") ---------- */

.hodaa {
  position: fixed;
  z-index: 30;
  left: 1rem;
  right: 1rem;
  bottom: calc(var(--gova-sargel) + 1rem);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hodaa p {
  margin: 0;
  max-width: 28rem;
  padding: .875rem 1.25rem;
  border-radius: .75rem;
  background: var(--ets);
  color: var(--neyar);
  font-weight: 500;
  text-align: center;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .hodaa p { animation: hofaa .25s ease-out; }
}
@keyframes hofaa {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- חלון התמונה המוגדלת ---------- */

.hagdala {
  --focus: var(--hagdala-tekst);
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--hagdala-reka);
  color: var(--hagdala-tekst);
}
.hagdala[open] {
  display: flex;
  flex-direction: column;
}
.hagdala::backdrop { background: rgba(22, 17, 12, .92); }

.hagdala__sargel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) .75rem max(1rem, env(safe-area-inset-left, 0px));
}
.hagdala__koteret {
  margin: 0;
  font-family: var(--gufan-kotarot);
  font-size: var(--t-3);
  font-weight: 500;
  line-height: 1.35;
}
.hagdala__otef {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem 1rem;
}
.hagdala__otef img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hagdala__nivut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
}
.hagdala__mone { min-width: 5rem; text-align: center; }

.kaftor--kehe {
  background: transparent;
  border-color: var(--hagdala-tekst);
  color: var(--hagdala-tekst);
}
.kaftor--kehe:hover { background: rgba(244, 236, 223, .12); }

/* ---------- דף הצהרת הנגישות ---------- */

.masmach { padding-block: var(--rv-7) var(--rv-9); }
.masmach__al {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 var(--rv-3);
  font-size: var(--t-katan);
  font-weight: 500;
  color: var(--ochre);
}
.masmach__al::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--ochre-kishut);
}
.masmach h1 {
  font-size: var(--t-5);
  margin-bottom: var(--rv-5);
}
.masmach__ptiha {
  font-size: var(--t-bolet);
  line-height: 1.6;
  max-width: 60ch;
}
.masmach h2 {
  font-size: var(--t-3);
  margin-top: var(--rv-7);
  padding-top: var(--rv-4);
  border-top: 1px solid var(--kav-adin);
}
.masmach p,
.masmach li { max-width: 65ch; }
.masmach ul { padding-inline-start: 1.4rem; }
.masmach li { margin-bottom: .5rem; }
.masmach li::marker { color: var(--ochre); }
.masmach__anaf {
  width: 9rem;
  margin-bottom: var(--rv-5);
  color: var(--zayit);
}
.masmach__anaf svg { display: block; width: 100%; height: auto; }
.kishur-gadol {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

.lehashlim {
  padding: .05em .4em;
  border: 1.5px dashed var(--tiyuta-kav);
  border-radius: .3rem;
  background: var(--tiyuta-reka);
  color: var(--tiyuta-tekst);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.heara-tiyuta {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--tiyuta-kav);
  border-radius: .5rem;
  background: var(--tiyuta-reka);
  color: var(--tiyuta-tekst);
  font-weight: 600;
}