:root {
  /* ערכת נושא בהירה (מוד בהיר, בהשראת VITAL) - רקע בהיר, טקסט כהה. תמונות/וידאו גדולים
     (hero-photo, activity-caption, gate) עדיין מציגים כיתוב לבן ישירות על גבי המדיה עצמה -
     זה לא קשור ל-bg/ink ולא משתנה כאן. */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --ink: #1c1c1e;
  --ink-soft: #5b5c63;
  --line: #e4e2db;
  --header-bg: #ffffff;
  --header-ink: #1c1c1e;
  --branch-color: #999999; /* נדרס per-branch דרך style inline על ה-body */
  --red: #C1272D;      /* צבע ה-CTA הראשי, כמו באתר הישן */
  --red-dark: #9c1f24;
  --yellow: #F2D544;    /* צבע חלונות קופצים/מבצעים, כמו באתר הישן */
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  /* 2026-09, לבקשת מיכה: "בוא נגדיל את כל הטקסט: גם של התפריט העליון וגם של כל האתר" - כמעט כל
     גודל טקסט באתר (כותרות/תפריט/כפתורים/טקסט רגיל) מוגדר ביחידות rem, כלומר יחסית לגודל הפונט
     של html (16px כברירת מחדל בדפדפן, לא הוגדר עד עכשיו במפורש בקובץ הזה). העלאה כאן ל-18px
     (בערך +12.5%) מגדילה פרופורציונלית כמעט את כל הטקסט באתר בבת אחת, כולל התפריט העליון
     (.nav-link וכו', גם הם ב-rem) - בלי לגעת במאות כללי font-size בודדים. אם רוצים עוד יותר גדול
     (או פחות) - משנים רק את המספר הזה. גם הכותרות הגדולות שבנויות עם clamp() (כמו .hero h1,
     .activity-caption) יגדלו קצת - הגבולות המינימום/מקסימום של ה-clamp שם גם הם ב-rem, רק
     הערך ה"מועדף" באמצע ב-vw (לא מושפע מהשינוי הזה, הוא כבר יחסי לרוחב המסך ולא לגודל הפונט). */
  font-size: 18px;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  /* Heebo נטען מ-Google Fonts (ר' includes/head.php) - פונט אחיד שנראה זהה בכל דפדפן/מכשיר,
     בניגוד ל-Segoe UI (Windows בלבד) שנשאר רק כ-fallback אם הטעינה מהאינטרנט נכשלת. */
  font-family: "Heebo", "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

/* מבטיח שהפונט האחיד תמיד ינצח, גם אם טקסט שהודבק מוורד/גוגל דוקס דרך עורך הניהול (WYSIWYG)
   הביא איתו font-family מוטבע (inline style) - כל תוכן בתוך <main> (כל עמודי האתר) מיישר
   לפונט של האתר ולא לפונט שהודבק, בלי תלות במה שהוכנס במערכת הניהול. */
main * { font-family: inherit !important; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* טבעת פוקוס גלויה למקלדת בלבד (:focus-visible) - לא מופיעה בקליק עכבר/מגע,
   רק בניווט Tab. חסרה קודם באתר - כלי עזר קריטי לנגישות מקלדת. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--branch-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  color: var(--header-ink);
}

.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand-item {
  margin-left: auto; /* RTL: הלוגו בצד ימין - חייב להיות על הפריט הישיר של ה-flex, לא על ה-a שבתוכו */
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.15;
}
.brand-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 700; font-size: 1.05rem; }
.brand-branch { font-size: .78rem; color: var(--ink-soft); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}

.nav-item.has-dropdown { position: relative; }

.nav-link {
  background: none;
  border: none;
  color: var(--header-ink);
  font-size: .95rem;
  cursor: pointer;
  padding: 10px 8px;
  border-radius: 4px;
}
.nav-link:hover { text-decoration: none; opacity: .8; }
.nav-link.is-active { border-bottom: 2px solid var(--branch-color); }

.nav-link.cta {
  background: var(--branch-color);
  color: #fff;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .01em;
}
.nav-link.cta:hover { background: color-mix(in srgb, var(--branch-color) 78%, black); text-decoration: none; }

.nav-link.outline {
  border: 1px solid #45464d;
  border-radius: 6px;
  padding: 8px 16px;
}
.nav-link.outline:hover { border-color: var(--branch-color); text-decoration: none; }

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  /* בלי margin-top: כל רווח בין הכפתור לתפריט הוא "אזור מת" שלא שייך
     לאף אחד מהם, וברגע שהעכבר עובר דרכו ה-hover נשבר והתפריט נסגר.
     הרווח הוויזואלי מגיע מה-padding הפנימי במקום. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  min-width: 220px;
  padding: 8px;
  display: none;
  flex-direction: column;
}
/* חוק ה-hover/focus-within הזה שייך אך ורק לתפריט הרחב של הדסקטופ (העכבר עובר מעל
   הכותרת -> הדרופדאון נפתח). בלי המדיה-קוארי כאן, הוא חל גם בנייד - ושם הוא גרם לבאג:
   הספציפיות שלו (4 מחלקות: .nav-item.has-dropdown:focus-within .dropdown) גבוהה יותר
   מהחוק "סגור" של תפריט הנייד (.main-nav.nav-open .dropdown, 3 מחלקות בלבד, ר' מדיה-קוארי
   max-width למטה) - כך שברגע שקבוצה קיבלה focus-within במגע (תופעה נפוצה בספארי
   באייפון: "hover דביק" שנשאר תקוע אחרי טאפ, עד טאפ במקום לגמרי אחר בעמוד), הדרופדאון שלה
   המשיך להיות גלוי גם אחרי שה-JS כבר הסיר ממנה dd-open בפתיחת קבוצה אחרת (js/main.js).
   2026-09: מיכה דיווח שהתפריט הקודם לא נסגר במעבר בין קבוצות בנייד - תוקן ע"י הגבלת
   החוק הזה לדסקטופ בלבד, כדי שלא יתנגש עם מנגנון הסגירה של הנייד. הסף כאן (min-width) חייב
   תמיד להישאר בדיוק תואם (פער של 1px) לסף ה-max-width של תפריט הנייד למטה - עודכן יחד איתו
   מ-861px ל-1041px כשהסף השני הועלה מ-860px ל-1040px (ר' ההערה המפורטת שם), אחרת נפתח בדיוק
   אותו "אזור מת" מחדש בין שני הסיפים. */
@media (min-width: 1041px) {
  .nav-item.has-dropdown:hover .dropdown,
  .nav-item.has-dropdown:focus-within .dropdown {
    display: flex;
  }
}
.dropdown a {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: .92rem;
}
.dropdown a:hover { background: var(--bg); text-decoration: none; }

.branch-switch {
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}
.branch-switch a.active { color: var(--branch-color); font-weight: 700; }
.branch-switch .sep { opacity: .4; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--header-ink);
  font-size: 1.4rem;
}

.branch-stripe {
  height: 4px;
  background: var(--branch-color);
}

/* ===== Gate page (בחירת סניף) - שני חצאים מלאים, שחור, עם קו אלכסוני מפריד =====
   דף השער חייב להתאים בדיוק לגובה המסך, בלי גלילה, גם כשהתפריט המהיר נפתח -
   לכן ה-body של הדף הזה (מזוהה לפי הימצאות main.gate בתוכו) הופך בעצמו לעמודת
   flex בגובה 100dvh בדיוק: הכותרת (site-header) לוקחת את הגובה הטבעי שלה,
   וה-gate תופס את כל השאר (flex:1) - כך שהסכום תמיד = גובה המסך, לא יותר. */
body:has(.gate) {
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(.gate) .site-header { flex: 0 0 auto; }
body:has(.gate) .gate { flex: 1 1 auto; min-height: 0; }
/* הפוטר המשותף (מי אנחנו / צור קשר / וכו') לא שייך לדף השער - הוא "גונב" גובה מה-gate
   (שאמור למלא בדיוק את המסך) ומופיע תמיד למטה, מה שסותר את החוויה של "שני חצאים
   שממלאים את כל המסך". footer.php עדיין נטען (לתגי הסגירה + הסקריפטים המשותפים) -
   רק ה-<footer> החזותי מוסתר, כאן בדף השער בלבד. */
body:has(.gate) .site-footer { display: none; }

.gate {
  min-height: calc(100vh - 4px); /* גיבוי לדפדפנים ישנים בלי תמיכה ב-:has() */
  display: flex;
  align-items: stretch;
  position: relative;
  background: #000;
  /* לא overflow:hidden בכוונה - כשהתפריט המהיר נפתח הוא צריך מקום,
     ועם overflow:hidden הוא היה עלול להיחתך ולהיראות כאילו "לא נפתח" */
}

.branch-half {
  flex: 1;
  min-width: 0;
  position: relative;
  color: #fff;
  overflow: hidden;
  background: #0a0a0b; /* מילוי רזרבי אם אין וידאו/תמונה */
}

/* קו התפר - מוסתר בברירת מחדל (בנייד אין אלכסון, אין טעם בקו), מופיע רק
   בדסקטופ (ר' מדיה-קוארי למטה). */
.gate-seam { display: none; }

/* התפר האלכסוני בין שני הסניפים - לא קו עיטורי מעל התמונות, אלא חיתוך אמיתי
   של שתי התמונות עצמן (clip-path). כל אריח רחב 58% (במקום 50%) וממוקם עם
   left:0/right:0 כך שהם חופפים ב-16% האמצעיים; ה-clip-path גוזם כל אחד
   באלכסון תואם (עם חפיפה זעירה של כ-1% כדי לא להשאיר פער תת-פיקסלי) כך
   שיחד הם נראים כתמונה אחת עם תפר אלכסוני נקי. בנייד (ר' מדיה-קוארי למטה)
   חוזרים לפריסה רגילה בלי אלכסון - שם אין טעם בזה.
   2026-09: מיכה דיווח שירושלים נראה גדול יותר מרחובות - הסיבה: קו התפר (50.52%
   למעלה, 44.49% למטה) לא היה ממורכז סביב 50% (ממוצע כ-47.5%), כך שהשטח הכולל
   של ירושלים (מימין לתפר) יצא גדול משמעותית משל רחובות. תוקן ע"י מירכוז הקו
   סביב 50% תוך שמירה על אותה זווית אלכסון בדיוק (53.02%/46.99% - טווח זהה של
   כ-6%, רק ממורכז) - כך ששני האריחים שווים בשטח הכולל (כל אחד גדול יותר
   בקצה אחד ("מפצה" בקצה השני), ולא אחד גדול בעקביות בכל הגובה. */
@media (min-width: 721px) {
  .gate { position: relative; }
  .branch-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 58%;
    flex: none;
  }
  .branch-half.jerusalem {
    right: 0;
    clip-path: polygon(17.21% 0, 100% 0, 100% 100%, 6.91% 100%);
  }
  .branch-half.rehovot {
    left: 0;
    clip-path: polygon(0 0, 91.41% 0, 81.01% 100%, 0 100%);
    z-index: 1; /* חפיפה זעירה בתפר (כ-1%) כדי שלא ייראה פער תת-פיקסלי - רחובות מעל */
  }

  /* קו מפריד דק בדיוק על התפר האלכסוני עצמו - div נפרד שמצטרך על שני האריחים.
     שימו לב: הקו לא ממוקם על קו-האמצע ה"אידיאלי הישן" (50%/44%, שהיה לא-ממורכז
     בפועל - ר' הערה למעלה) אלא על קו הגבול האמיתי המתוקן, הממורכז סביב 50%:
     53.02% מהקונטיינר למעלה, 46.99% למטה - עוקב אחרי השפה החיצונית בפועל של
     רחובות (זו שנראית בפועל בגלל z-index:1 וחפיפת ה-1% שהוספנו קודם למניעת
     פער תת-פיקסלי). */
  .gate-seam {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(255,255,255,.45);
    clip-path: polygon(52.87% 0, 53.16% 0, 47.13% 100%, 46.84% 100%);
  }
}

/* שכבת המדיה (וידאו או תמונה) - ממלאת את כל האריח, מתחת לכל השאר.
   מוצגת אוטומטית אם קיים קובץ assets/videos/<branch>.mp4 או assets/photos/<branch>.jpg -
   אין צורך בשינוי קוד נוסף, מספיק להוסיף את הקובץ. */
.half-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* שכבת הכהיה מעל המדיה - עדיפות ראשונה זה שהתמונה תישאר בהירה וברורה, לא
   "מוצללת" בשחור. במקום הכהיה אחידה על כל התמונה, יש רק הכהיה עדינה וממוקדת
   מאחורי הכיתוב עצמו (שנמצא באמצע, ר' tile-hotspot) - שאר התמונה כמעט בלי הכהיה.
   קריאות נוספת מגיעה מ-text-shadow על הטקסט עצמו (ר' tile-name/tile-sub/tile-hint). */
.branch-half::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(0,0,0,.38), transparent 70%);
}

/* אזור ה-hover/פוקוס - מצומצם לריבוע הכיתוב בלבד (לא כל האריח),
   כדי שהעכבר יוכל "לטייל" מעל הווידאו/תמונה בלי להפריע ובלי לפתוח תפריט בטעות.
   top:42% (לא 50% - לא ממורכז מדויק) בכוונה: מיכה דיווח שהכותרת/התפריט צמודים מדי לתחתית
   המסך - כי התפריט המהיר (tile-menu) נפתח *מתחת* לכיתוב (top:100% של tile-hotspot), אז אם
   הכיתוב עצמו ממורכז ב-50% הגובה, הבלוק המשולב (כיתוב+תפריט פתוח) נופל נמוך מדי ומתקרב
   לשוליים התחתונים. הזזה ל-42% משאירה מקום נשימה נוח לתפריט שנפתח מתחתיו. */
.tile-hotspot {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 90%;
  cursor: pointer;
}

.tile-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px 26px;
  border-radius: 10px;
  transition: opacity .2s ease;
}
.tile-hotspot:focus-within .tile-label { opacity: .12; }
/* :hover נפרד ומוגבל ל-(hover:hover) בכוונה - במסכי מגע (כמו אייפון) נגיעה ראשונה
   באלמנט עם כלל :hover רק "מדמה" hover (בלי לשלוח קליק אמיתי בכלל) - צריך נגיעה
   שנייה כדי שהקליק האמיתי יקרה. זו הייתה הבאגה האמיתית מאחורי "התפריט לא נפתח
   בנייד" לאורך כל הבדיקות הקודמות: ה-JS של ה-picking (ר' index.php) פשוט לא רץ,
   כי הנגיעה "נבלעה" ע"י ה-hover. בלי :hover בכלל במגע - הנגיעה הראשונה כבר קליק אמיתי. */
@media (hover: hover) {
  .tile-hotspot:hover .tile-label { opacity: .12; }
}

.tile-name {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  /* עכשיו תג <a> (מוביל לדף הבית של הסניף, ר' index.php) - איפוס עיצוב ברירת המחדל
     של קישור, כדי שימשיך להיראות בדיוק כמו קודם (כשהיה span רגיל). */
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.tile-name:hover { text-decoration: none; }
.tile-sub { color: #cfd0d4; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tile-hint {
  margin-top: 18px;
  font-size: .82rem;
  color: var(--tile-color);
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* התפריט המהיר - נצמד ישר מתחת לריבוע הכיתוב, בלי שום רווח ביניהם
   (רווח = "אזור מת" שלא שייך לאף אחד מהם, ואז ה-hover נשבר כשעוברים דרכו).
   הרווח הוויזואלי מגיע מה-padding-top הפנימי, לא מ-margin חיצוני. */
.tile-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 4px 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.tile-hotspot:focus-within .tile-menu { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .tile-hotspot:hover .tile-menu { opacity: 1; pointer-events: auto; }
}

.tile-menu a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  width: 100%;
  padding: 9px 14px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
  transition: color .15s ease;
}
.tile-menu a:hover {
  color: var(--tile-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.tile-menu a small { color: #cfd0d4; font-weight: 400; }
.tile-menu a:hover small { color: var(--tile-color); }

@media (max-width: 720px) {
  .gate { flex-direction: column; position: relative; }
  /* עד 2026-09 tile-hint היה display:none בנייד (הניסוח דיבר רק על "העבירו עכבר") - בלי שום
     רמיזה חזותית שיש תפריט שנפתח בנגיעה, מה שגרם לתחושה שאין בכלל תפריט. עכשיו מוצג גם כאן,
     עם ניסוח ניטרלי-מחוות ("לחצו כאן", ר' index.php) שמתאים גם לנגיעה וגם לעכבר. */
  .tile-menu { min-width: 220px; }

  /* תפר אלכסוני בין שני החצאים המוערמים - אותו רעיון בדיוק כמו בדסקטופ (ר' @media
     min-width:721px למעלה), רק מסובב 90 מעלות: שם שני אריחים ברוחב 58% חופפים
     16% באמצע ונחתכים באלכסון לפי X; כאן שני אריחים בגובה 58% חופפים 16% באמצע
     ונחתכים באלכסון לפי Y. אותם יחסים בדיוק כמו בדסקטופ אחרי התיקון (17.21/6.91/
     91.41/81.01), רק על ציר אחר - ר' הערת התיקון המפורטת למעלה (@media min-width:721px)
     לגבי הבאג המקורי (ירושלים/רחובות לא היו שווים בשטח) ואיך תוקן.
     חשוב: לפי class (jerusalem/rehovot), לא :first-child/:last-child - יש עוד
     אלמנטים לפני ה-branch-half הראשון בתוך .gate (gate-seam, gate-close), אז
     :first-child לא באמת תופס עליו (זו הייתה הבאגה שגרמה לחיתוך לא ליישר). */
  .branch-half {
    position: absolute;
    left: 0;
    right: 0;
    height: 58%;
    min-height: 0;
    flex: none;
  }
  .branch-half.jerusalem {
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 81.01%, 0 91.41%);
    z-index: 1; /* חפיפה זעירה בתפר - החצי העליון מעל כדי שלא יראו פער תת-פיקסלי */
  }
  .branch-half.rehovot {
    bottom: 0;
    clip-path: polygon(0 17.21%, 100% 6.91%, 100% 100%, 0 100%);
  }
  .gate-seam {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(255,255,255,.45);
    /* אותו חישוב כמו בדסקטופ אחרי התיקון (81.01%/91.41% מתוך 58% גובה כל חצי = כ-47%/53%
       מהמסך כולו, ממורכז סביב 50% - ר' הערת התיקון ב-@media min-width:721px למעלה) -
       הקו עוקב אחרי השפה של החצי העליון (z-index:1, כאן ירושלים): בצד שמאל (X=0)
       הוא ב-53%, בצד ימין (X=100%) הוא ב-47% - בדיוק כמו כיוון החיתוך של שני החצאים. */
    clip-path: polygon(0 52.87%, 0 53.16%, 100% 47.13%, 100% 46.84%);
  }

  /* מבטלים את מנגנון ה-:focus-within של הדסקטופ בנייד - כאן פותחים/סוגרים אך ורק דרך
     ה-JS (מחלקות gate.picking / branch-half.picked). כללי ה-picking למטה ספציפיים
     יותר (5 קלאסים לעומת 3 כאן) אז הם תמיד ינצחו בלי תלות בסדר - זה נשאר כאן בעיקר
     כדי שמצב focus רגיל (בלי picking) לא יגרום לתפריט/כיתוב "להבהב" חלקית. */
  .tile-hotspot:focus-within .tile-menu,
  .tile-hotspot:focus-within .tile-label {
    opacity: 0;
    pointer-events: none;
  }

  /* מצב "בחירה" - נפתח בנגיעה בכל אחד מהחצאים (ר' script בסוף index.php). גישה פשוטה
     ואמינה יותר מ"השתלטות מסך מלא" שניסינו קודם (position:fixed על החצי עצמו + גלילה
     פנימית - היה שביר מדי): במקום זה שני "פאנלים" קבועים תמיד, בלי תלות בסדר ה-DOM -
     עליון (50% מהמסך) ותחתון (50%) - כל אחד position:fixed בפני עצמו:
     - הסניף שנגעו בו תמיד עובר לפאנל העליון (התמונה שלו, לא משנה אם היה למעלה או למטה).
     - התפריט המהיר *שלו* (tile-menu, מקונן בתוכו ב-DOM) הופך גם הוא ל-position:fixed
       ותמיד מוצג בפאנל התחתון - עצמאי לגמרי ממיקום ה-DOM של החצי, כי position:fixed
       תמיד ביחס למסך, לא להורה. ה-overflow:hidden של ה-branch-half לא "תופס" אותו.
     - הסניף השני מוסתר לגמרי (visibility:hidden) - לא רלוונטי כרגע. */
  .gate.picking .branch-half { clip-path: none; }
  .gate.picking .gate-seam { display: none; }

  .gate.picking .branch-half:not(.picked) {
    visibility: hidden;
  }

  .gate.picking .branch-half.picked {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 50%;
    z-index: 21;
    /* .tile-hotspot ממורכז דרך transform:translate(-50%,-50%) - וכל transform על אב
       הופך אותו ל-containing block עבור צאצאים עם position:fixed (סעיף בתקן ה-CSS).
       זו הייתה הבאגה האמיתית: .tile-menu (position:fixed) "נלכד" בתוך הקופסה
       הקטנה של tile-hotspot במקום להתמלא ביחס למסך כולו - כך שהתפריט הופיע כפס
       זעיר צף ליד נקודת הנגיעה, לא כפאנל תחתון מלא. הפתרון: בביטול ה-transform
       (ר' כלל למטה) וריכוז מחדש עם flex על ה-branch-half עצמו במקום. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 2026-10, מיכה: "בטלפון, בבחירת סניף, התפריט המהיר לא נפתח טוב - חצי מסך שחור וזהו".
       ב-Safari (iOS) אלמנט position:fixed שנמצא בתוך הורה position:fixed עם overflow:hidden
       נחתך לגבולות ההורה (בניגוד ל-Chrome) - כך שה-tile-menu (פאנל תחתון) נחתך לגמרי מחוץ
       לחצי העליון ונשאר רק רקע שחור. במצב הבחירה ההורה ממילא בגודל המדויק של התמונה,
       אז אין צורך ב-overflow:hidden שלו. */
    overflow: visible;
  }
  .gate.picking .branch-half.picked .tile-hotspot {
    position: static;
    transform: none;
  }

  .gate.picking .branch-half.picked .tile-menu {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    z-index: 22;
    margin: 0;
    padding: 22px 24px;
    background: #0d0d0f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 1;
    pointer-events: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gate.picking .branch-half.picked .tile-menu a {
    width: 100%;
    max-width: 320px;
  }

  /* כפתור סגירה - קבוע בפינה, מופיע רק במצב בחירה (ר' body:has למטה). */
  .gate-close {
    display: none;
    position: fixed;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 23;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10,10,11,.7);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
  }
  body:has(.gate.picking) .gate-close { display: flex; }
}

/* ===== Generic page sections =====
   פערים מוקטנים בכוונה (padding נמוך מ-.hero/.section) - הרבה עמודים מציגים כמה .section
   ברצף, וכל px נוסף כאן מצטבר ומרחיק את התוכן החשוב למטה. */
.hero {
  padding: 36px 24px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.hero h1 { font-size: 2rem; margin: 0 0 10px; }
.hero p { color: var(--ink-soft); }

/* ===== Hero מלא-רוחב עם תמונה, לראש עמוד עליון (דף בית סניף / ילדים ונוער / מבוגרים וכו') =====
   היררכיה 1: כותרת ממורכזת על גבי תמונה, גובה מוגבל (עם רצפה לקריאות) כדי שהתמונה עדיין תיראה
   בבירור ולא תיחתך מדי, אבל עדיין מרבית המידע החשוב יופיע קרוב לראש הדף בלי גלילה ארוכה.
   הפסקה והכפתורים יורדים מתחת לתמונה (hero-below), לא מוטמעים עליה.
   אם אין תמונה לסניף - נופל לרקע כהה אחיד. */
.hero-photo {
  position: relative;
  /* הוגדל מ-clamp(240px,32vh,420px), ואז מ-clamp(420px,55vh,720px), ואז שוב מ-clamp(480px,62vh,820px) -
     לבקשה שהתמונות (בדפי הבית, ובהירו של עמודי הנושא) יהיו יותר גדולות/דומיננטיות, עם הכיתוב עליהן. */
  height: clamp(520px, 66vh, 860px);
  /* overflow:hidden - חשוב! תמונת הירו עם חיתוך/זום מותאם אישית (admin/photo-setting-edit.php)
     מוצגת דרך <img class="hero-bg-photo"> עם object-fit:contain+transform:scale (ר'
     photo_frame_style()/render_hero() ב-includes/photo-helpers.php) - אם הזום שנשמר לא מספיק
     ביחס לרוחב/גובה בפועל של הרצועה (שמשתנה לפי גודל המסך), נשאר "רווח" מחוץ לתמונה שגדל
     יחד עם הטרנספורם ויכול לבלוט הרחק מחוץ לגבולות הרצועה - זה בדיוק מה שגרם לבאג אמיתי
     שדווח ("איזור שחור ריק" בצד עמוד הבית, שהרחיב את כל רוחב העמוד ויצר גלילה אופקית).
     .activity-media כבר הייתה עם overflow:hidden מלכתחילה (אותו מנגנון חיתוך בדיוק) - זה
     היישור של .hero-photo לאותה הגנה, כדי שגם אם ייחתך חיתוך לא מספיק בעתיד, המקסימום שיקרה
     זה "רווח" נסתר בתוך הרצועה עצמה (בדיוק כמו ברצועות activity-band) - לא שבירת פריסת העמוד. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  max-width: none;
  color: #fff;
  background-color: #0d0d0f;
  background-size: cover;
  background-position: center;
  /* הוסר פס תחתון צבעוני (border-bottom: 3px solid var(--branch-color)) לבקשת מיכה - עיצוב
     נקי יותר, בלי מסגרת צבעונית מתחת לתמונה. */
}
/* הכהיה ממוקדת מאחורי הכותרת בלבד (לא אחידה על כל התמונה) - התמונה עצמה נשארת בהירה וברורה,
   וה-text-shadow על ה-h1 (למטה) נותן קריאות נוספת בלי להחשיך הכול. */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,0,0,.35), transparent 70%);
}
/* סרטון הירו (אם קיים assets/videos/<branch>-<key>.mp4) - ממלא את הסעיף כמו background-image,
   אבל מתחת להכהיה הממוקדת (::before) ולכותרת (hero-inner), כדי שהטקסט יישאר קריא. */
.hero-photo .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* שכבת תמונה עם חיתוך/זום מותאם (admin/photo-setting-edit.php, ר' render_hero ב-includes/photo-helpers.php) -
   אותה מסגרת בדיוק כמו .hero-video, רק שה-object-fit/position/transform/filter/opacity בפועל מגיעים
   מ-style מוטבע (photo_frame_style) ולא מכאן - בלי הגדרת חיתוך, הרכיב הזה לא מודפס בכלל (נשאר ה-background-image הרגיל). */
.hero-photo .hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.hero-photo .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
}
/* כותרת ענקית ברוחב כמעט מלא (בהשראת אתרי חדרי טיפוס בינלאומיים כמו VITAL) - במקום כותרת
   קטנה וממורכזת, השם/הנושא של הדף "צובע" את כל התמונה. */
.hero-photo h1 {
  font-size: clamp(2.6rem, 9vw, 6.2rem);
  font-weight: 900;
  margin: 0;
  line-height: 1.02;
  letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

/* קישורי טקסט ישירות על תמונת ההירו של דף הבית (מחירים / פעם ראשונה / שעות פתיחה / איפה אנחנו) -
   אותו .activity-band-links בדיוק (טקסט לבן עם צל, בלי קופסה), רק שורה אחת אופקית וממורכזת
   מתחת לכותרת הענקית הממורכזת - ר' render_hero()/branch-home.php. */
.hero-photo .hero-quick-links {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 22px;
  font-size: 1.05rem;
}

.hero-below { padding-top: 28px; }
.hero-below p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 18px;
}
.hero-below .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== "רצועת פעילות" - תמונת אווירה לרוחב מלא + פסקה מתחתיה. משמש לעמודים המשלבים כמה תת-נושאים
   (למשל חוגים/נבחרות/מחנות באותו עמוד), עם עוגן (id) לכל רצועה כדי שקישורים מהתפריט יקפצו ישר אליה. */
.activity-band, #instructions { scroll-margin-top: 90px; } /* מפצה על ה-header הדביק כשקופצים לעוגן - #instructions (safety.php) הוא .section רגיל בלי תמונה, לא activity-band, אבל עדיין יעד קפיצה מהתפריט */
.activity-media { position: relative; overflow: hidden; } /* overflow:hidden חשוב - בלעדיו זום (transform:scale) על התמונה "בורח" מחוץ לרצועה */
.activity-photo {
  width: 100%;
  /* הוגדל מ-clamp(170px,24vh,280px), ואז שוב מ-clamp(240px,32vh,400px) - עכשיו שהכפתורים
     (activity-band-links) עברו להיות כיתוב על התמונה במקום מתחתיה, אין יותר תוכן מתחת
     שדוחק את הרצועה להיות נמוכה - אז התמונה יכולה להיות הרבה יותר גדולה ודומיננטית. */
  height: clamp(400px, 34vw, 660px); /* 2026-10: היה clamp(380px,50vh,600px) - רצועה נמוכה מדי חתכה ראשים של מטפסים; גובה לפי רוחב (vw) שומר אחוז קבוע מהתמונה גלוי */
  /* object-fit:cover כברירת מחדל - ממלא את הרצועה יפה בלי פסים ריקים בצדדים, בדיוק כמו תמונה רגילה
     באתר. תמונה שיש לה הגדרת חיתוך/זום מפורשת (נשמרה דרך admin/photo-setting-edit.php) מקבלת
     object-fit:contain במקום זה, inline (ר' photo_frame_style() ב-includes/photo-helpers.php) -
     שם זום 100% מציג את כל התמונה במקום תמיד למלא/לחתוך, וה-background ממלא את הפס הריק. */
  object-fit: cover;
  background: var(--surface);
  display: block;
  object-position: 50% 50%;
}
.activity-photo-placeholder {
  width: 100%;
  height: clamp(400px, 34vw, 660px); /* 2026-10: היה clamp(380px,50vh,600px) - רצועה נמוכה מדי חתכה ראשים של מטפסים; גובה לפי רוחב (vw) שומר אחוז קבוע מהתמונה גלוי */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  /* הוסרו פסים צבעוניים (border-top/border-bottom: 3px solid var(--branch-color)) לבקשת מיכה -
     עיצוב נקי יותר, בלי מסגרת צבעונית מעל/מתחת לתמונה (גם על ה-placeholder). */
  color: var(--ink-soft);
  font-size: 1rem;
}
/* היררכיה 2 (תת-נושא בתוך עמוד, למשל חוגים/נבחרות/מחנות): כותרת בצד ההתחלה (right ב-RTL,
   left ב-LTR - ר' inset-inline-end/text-align:start למטה) של התמונה, קצת מתחת למרכז - לא
   ממורכזת ולא צמודה לתחתית כמו בעבר. */
.activity-caption {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.5) 100%);
}
.activity-caption-inner {
  position: absolute;
  /* inset-inline-start/text-align:start (לא right/text-align:right) - כדי שבעמוד האנגלי
     (html dir="ltr", ר' includes/head.php) הכותרת והקישורים יעברו אוטומטית לצד שמאל
     (כמו בשאר הרכיבים הלוגיים באתר, למשל .nav-toggle/.tab-strip למטה), במקום להישאר
     תקועים פיזית מימין גם באנגלית. חשוב: inline-START ולא inline-END - כי מיקום ה"התחלה"
     בעברית (RTL) הוא הצד הימני (איפה שהתוכן היה תמיד, עם right:20px המקורי), ורק
     ב-LTR הוא עובר אוטומטית לשמאל. שימוש שגוי ב-inline-end (כמו שהיה כאן קודם) הזיז את
     זה בטעות לצד השמאלי גם בעברית - זה בדיוק הבאג שדווח. */
  inset-inline-start: 20px;
  bottom: 24px;
  max-width: 70%;
  text-align: start;
  pointer-events: auto;
}

/* כפתורי הרצועה (הרשמה / שאלות נפוצות / וכו') כטקסט ישיר על התמונה - באותו רעיון בדיוק
   כמו .tile-menu בדף בחירת הסניף: בלי קופסה, רק טקסט לבן עם צל לקריאות, וצבע הסניף בהובר. */
.activity-band-links {
  display: flex;
  flex-direction: column;
  /* flex-start ולא flex-end בכוונה: הדף RTL (dir="rtl"), ובקונטיינר flex עם flex-direction:column
     ציר ה-cross (האופקי) מיושר לפי כיווניות ה-writing-mode, לא לפי "ימין/שמאל" פיזי - כלומר
     flex-end בעמוד RTL מיישר לשמאל, לא לימין! זה בדיוק הבאג שדווח (קישורים/כותרת שקצרים מהפריט
     הרחב ביותר בעמודה "נתלים" משמאל במקום מימין, ונראים "רחוקים יותר מהפינה" - הבדל בולט
     בין רצועות עם כותרת/כפתור קצרים לרצועות עם כותרת/כפתור ארוכים). flex-start מיישר לימין
     בעמוד RTL - בדיוק מה שרוצים כאן (כל הכפתורים צמודים לקצה הימני של .activity-caption-inner,
     שכבר ממוקם עם inset-inline-start:20px - ר' לעיל). */
  align-items: flex-start;
  gap: 6px;
  margin-top: 12px;
}
.activity-band-links a {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  transition: color .15s ease;
}
.activity-band-links a:hover {
  color: var(--branch-color);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.activity-caption h1,
.activity-caption h2 {
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.activity-caption h1 { font-size: clamp(1.8rem, 4.2vw, 2.4rem); margin-bottom: 2px; font-weight: 900; letter-spacing: .01em; }
.activity-caption h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 900; letter-spacing: .01em; }

/* גרסת נייד של .activity-media/.activity-photo (מסגרת אנכית 4:5 קבועה, במקום הרצועה הרחבה
   של הדסקטופ) - בכוונה כאן, אחרי החוקים הבסיסיים למעלה, ולא בתוך ה-@media הישן של דף השער
   (בתחילת הקובץ): שני הצדדים (כאן ובדסקטופ) קובעים .activity-photo { height: ... } באותה
   ספציפיות בדיוק (מחלקה אחת) - ב-CSS מכריע מי שמאוחר יותר בקובץ, לא ה-@media. כשהכלל הזה
   ישב לפני החוקים הבסיסיים (בתוך ה-@media של דף השער), התמונה בנייד "נתקעה" בגובה הנמוך של
   הדסקטופ (clamp) במקום למלא את התיבה הגבוהה של 4:5 - והכותרת (activity-caption, שממלאת נכון
   את כל .activity-media) "צנחה" למקום ריק מתחת לתמונה הקצרה בפועל, כאילו נעלמה. */
@media (max-width: 720px) {
  /* מסגרת ברוחב מלא (כמו בדסקטופ) במקום "כרטיס" מוזח בצדדים - עם גובה יחסי לרוחב המסך
     (vw, לא vh - ברוחב שהמסך קובע) וקצת חיתוך (object-fit:cover) כדי שהיחס לא ייצא קיצוני
     לתמונות פורטרט. פשרה בין שתי גרסאות קיצוניות: מסגרת 4:5 קודמת (חתכה חזק לרוחב בתמונות
     לרוחב של ירושלים) מול "בלי שום חיתוך" (תמונות פורטרט של רחובות היו יוצאות גבוהות מאוד). */
  .activity-media {
    width: 100%;
    margin: 0;
  }
  .activity-photo,
  .activity-photo-placeholder {
    width: 100%;
    height: clamp(320px, 82vw, 520px);
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* ===== עדויות/ציטוטים (למשל "הורים ומטפסים מספרים על טיפוס טיפולי") =====
   הרצועה עצמה (therapeutic.php#stories) מציגה רק כותרות - ר' .testimonial-heading-list למטה -
   הובר/קליק פותח חלון מודאלי (js/testimonial-modal.js) עם התוכן. המחלקות כאן (.testimonial וכו')
   עדיין משמשות בתוך תוכן החלון המודאלי עצמו, כדי לשמור על אותה עיצוב טקסט עשיר. */
.testimonial p { margin: 0 0 10px; }
.testimonial p:last-child { margin-bottom: 0; }
.testimonial-intro { font-weight: 700; margin-bottom: 12px; }
.testimonial-signature { color: var(--ink-soft); font-size: .92rem; font-style: italic; }

/* רשימת כותרות עדויות בלבד - אותו רעיון בדיוק כמו .article-list (מאמרים) למעלה: כותרת,
   הפרדה בקו, בלי תקציר גלוי (לא כמו מאמרים - כאן הכל בחלון המודאלי, לא נפתח inline). */
.testimonial-heading-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.testimonial-heading-item { border-bottom: 1px solid var(--line); }
.testimonial-heading-item:first-child { border-top: 1px solid var(--line); }
.testimonial-heading-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.testimonial-heading-link:hover, .testimonial-heading-link:focus {
  background: var(--surface);
  color: var(--branch-color);
}

/* ===== חלון מודאלי לעדות מלאה (מוזרק בתוך therapeutic.php, מופעל ע"י js/testimonial-modal.js) =====
   אותו סגנון בדיוק כמו .faq-modal/.holiday-modal/.contact-modal, כדי שכל החלונות המודאליים
   באתר ייראו אחיד. */
.testimonial-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 640px;
  width: min(640px, calc(100% - 32px));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.testimonial-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.testimonial-modal-title {
  margin: 0 0 14px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.testimonial-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.testimonial-modal-close:hover { color: var(--ink); }

@media (max-width: 600px) {
  .testimonial-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 22px 18px;
  }
}

/* ===== כרטיסי "מי המדריכים שלנו" בטיפוס טיפולי (includes/therapeutic-instructors-cards.php) =====
   כרטיס רגיל (.card, ר' .card-grid למעלה) עם ריבוע placeholder לתמונה בראש - תמונות אמיתיות
   עוד לא הועלו, זה רק מקום שמור בגודל צנוע (לא תמונה גדולה כמו .activity-photo-placeholder). */
.instructor-card-grid { align-items: stretch; }
.instructor-card {
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  min-height: 0;
  cursor: default;
}
/* כרטיס עם תמונה פותח תמונה מוגדלת (ר' .detail-modal-photo) - סמן זכוכית מגדלת כרמז. */
.instructor-card:has(.shop-item-photo) { cursor: zoom-in; }
.instructor-card:hover {
  background: var(--surface);
  border-color: var(--ink);
  transform: none;
}
.instructor-card:hover h3 { color: var(--ink); }
.instructor-photo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px dashed var(--line);
  margin-bottom: 12px;
}
/* תמונת מוצר אמיתית בכרטיס חנות (includes/shop.php) - אותו ריבוע בדיוק כמו
   .instructor-photo-placeholder (גודל/מרווח עקביים), פעם שיש תמונה אמיתית ל-assets/photos/shop-<id>.jpg. */
.shop-item-photo {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 12px;
}
.instructor-card-text h3 { margin: 0 0 2px; }
.instructor-role { font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.instructor-bio-placeholder { font-style: italic; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
}
.btn-red { background: var(--branch-color); color: #fff; }
.btn-red:hover { background: color-mix(in srgb, var(--branch-color) 78%, black); text-decoration: none; }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: rgba(0,0,0,.05); text-decoration: none; }

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  scroll-margin-top: 90px; /* כדי שקישורי עוגן (#hours, #location) לא ייחסמו ע"י הכותרת הדביקה */
}
.section:first-child { padding-top: 28px; }
.section > h1:first-child,
.section > h2:first-child { margin-top: 0; } /* לא מכפילים את ה-padding עם מרווח ברירת-מחדל של הדפדפן */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 76px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 14px;
  background: var(--surface);
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.card:hover {
  text-decoration: none;
  background: var(--branch-color);
  border-color: var(--branch-color);
  transform: translateY(-2px);
}
.card:hover h3 { color: #fff; }
.card h3 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.card p { color: var(--ink-soft); font-size: .92rem; margin: 8px 0 0; }

/* 2026-09, לבקשת מיכה: "כל המסגרות (כמו בדף מחירים) רק משנות צבע כשעומדים עליהן. זה מאד מוזר" -
   .card:hover למעלה משתלט על צבע הרקע גם על div.card רגילים שהם לא קישור/כפתור בכלל (יש להם
   style="cursor:default;" בדיוק כדי לסמן "לא קליקבילי"). מסמנים כרטיס כזה עם class נוסף
   card-static, שמבטל את שינוי הצבע/ההזזה של ה-hover - הכרטיס פשוט לא מגיב בעכבר, תואם למה
   שה-cursor:default כבר אמר. עדכון: "זה צריך להתנהג בדיוק כמו במחירים - רק שם הפריט והמחיר,
   ובהובר נפתח חלון של הפרטים" - card-static נשאר רק לכרטיסים שבאמת אין להם שום פרט נוסף
   להסתיר (כרטיס פרטי הסניף ב-contact.php - תוכן אינטראקטיבי, טלפון/מייל/וואטסאפ לחיצים, צריך
   להיות גלוי תמיד; כרטיס "שפן הסלע" בעמוד partners - שם+מיקום בלבד, אין פרט נוסף להראות).
   כל כרטיס עם תיאור/פרטים נוספים (כמו "חבילת היכרות" ב-first.php, ביו חברי הצוות) עבר ל-
   .detail-card למטה - בדיוק כמו prices.php/adults.php - שם, בניגוד לכאן, הכרטיס הופך לכפתור
   קליקבילי-להצגה (לא לניווט) שפותח חלון עם פרטים מלאים בהובר, במקום רק להסיר את הבעיה. */
.card.card-static:hover {
  background: var(--surface);
  border-color: var(--ink);
  transform: none;
}
.card.card-static:hover h3 { color: var(--ink); }

/* רשימת מאמרים (למשל "טיפוס טיפולי") - כותרת בלבד, תקציר נפתח בהובר/פוקוס, קליק -> מאמר מלא. */
.article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.article-item { border-bottom: 1px solid var(--line); }
.article-item:first-child { border-top: 1px solid var(--line); }
.article-link {
  display: block;
  padding: 16px 4px;
  text-decoration: none;
  transition: background .15s ease;
}
.article-link:hover, .article-link:focus { background: var(--surface); text-decoration: none; }
.article-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  transition: color .15s ease;
}
.article-link:hover .article-title, .article-link:focus .article-title { color: var(--branch-color); }
.article-excerpt {
  display: block;
  color: var(--ink-soft);
  font-size: .92rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .2s ease, opacity .2s ease, margin-top .2s ease;
}
.article-link:hover .article-excerpt, .article-link:focus .article-excerpt {
  max-height: 80px;
  opacity: 1;
  margin-top: 6px;
}

/* תמונת אווירה בעמוד "צור קשר" (contact.php) - לרוחב מלא של האזור (בדיוק כמו רצועות
   .activity-photo בשאר האתר), בלי מסגרת מעוגלת - לא עוד תמונה קטנה וממורכזת בקופסה. */
.contact-photo {
  margin: 0 0 24px;
}
.contact-photo img {
  width: 100%;
  height: clamp(240px, 34vh, 420px);
  object-fit: cover;
  display: block;
}
@media (max-width: 620px) {
  .contact-photo img { height: 220px; }
}

.info-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: .92rem;
}
.info-strip strong { color: var(--ink); }

/* "הוראות הגעה" - תפריט נפתח מתחת לכתובת/Waze בדף הבית של סניף (ר' includes/branch-home.php).
   .faq-item עצמו כבר מעוצב (ר' סעיף ה-FAQ למטה) - כאן רק ריווח קטן מלמעלה, כדי שלא ידבק ישר
   ל-.info-strip שמעליו. */
.location-directions { margin-top: 6px; }

/* תקציר "מה יש אצלנו" בעמוד הבית של הסניף (includes/branch-home.php, #amenities) - נקודות
   עם עיגול צבעוני בצבע הסניף. inset-inline-start/padding-inline-start (לא right/left) כדי
   שהעיגול יישב בצד הנכון אוטומטית גם ב-RTL (עברית) וגם ב-LTR (אנגלית, ר' תיקון dir ב-head.php). */
.amenities-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.amenities-list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  font-size: .95rem;
}
.amenities-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--branch-color);
}
.amenities-cta { margin: 0; }

table.schedule { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.schedule th, table.schedule td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; }
table.schedule th { color: var(--ink-soft); font-weight: 600; }

/* ===== טבלת שיבוץ שבועית (יום × שעה) - register-group.php =====
   כל תא (גם ריק) הוא קופסה נפרדת עם גבול ברור ורדיוס - לא רק קווי הפרדה דקים.
   border-collapse:separate + border-spacing נותן את הרווח בין הקופסאות. */
.schedule-grid-wrap { overflow-x: auto; margin-top: 12px; }
table.schedule-grid { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
table.schedule-grid th, table.schedule-grid td { padding: 0; text-align: center; }
table.schedule-grid th {
  background: var(--header-bg);
  color: var(--ink-soft);
  font-weight: 700;
  font-size: .88rem;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
table.schedule-grid th:first-child { width: 90px; border: none; background: none; }
table.schedule-grid td:first-child { width: 90px; }
.grid-time, .grid-cell, .grid-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.grid-time { background: var(--header-bg); color: var(--ink-soft); font-weight: 700; font-size: .8rem; }
.grid-empty { background: var(--surface); }
.grid-cell {
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--branch-color) 26%, var(--surface));
  border-color: color-mix(in srgb, var(--branch-color) 55%, var(--line));
  transition: background .15s ease;
}
.grid-cell:hover { background: var(--branch-color); color: #fff; text-decoration: none; }
.grid-cell.is-team { background: color-mix(in srgb, var(--branch-color) 46%, var(--surface)); }
.grid-cell.is-team:hover { background: var(--branch-color); }
/* חוג/נבחרת שעדיין לא נפתחו בפועל (open:false ב-data/schedule.json) - לא קליקבילי, מסומן "בקרוב". */
.grid-cell.is-soon {
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border-style: dashed;
  color: var(--ink-soft);
  cursor: default;
}
.soon-badge { font-size: .68rem; font-weight: 700; opacity: .8; }

/* ===== טפסים באתר (הרשמה וכו') ===== */
.site-form { display: flex; flex-direction: column; max-width: 520px; }
.site-form label { margin-top: 14px; margin-bottom: 6px; font-size: .9rem; color: var(--ink-soft); }
.site-form input[type="text"],
.site-form input[type="tel"],
.site-form input[type="email"],
.site-form select,
.site-form textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}
.site-form textarea { resize: vertical; }
.checkbox-line { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--ink-soft); }
.checkbox-line input { margin-top: 4px; }

/* ולידציה בצד הלקוח (js/register-form.js) - שדה חובה שלא מולא/לא תקין מקבל מסגרת אדומה +
   הודעה אדומה קטנה מתחתיו ("שדה 'X' לא תקין", ר' data-error-label בטופס). 2026-09, לבקשת
   מיכה - כדי שהמשתמש יראה מיד מה שגוי בלי לאבד את שאר מה שכבר מילא בטופס. */
.site-form .field-invalid { border-color: var(--red) !important; }
.site-form .field-error { color: var(--red-dark); font-size: .82rem; margin-top: 4px; }
.site-form .field-error[hidden] { display: none; }

.terms-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 18px;
  max-width: 640px;
  font-size: .9rem;
  color: var(--ink-soft);
}
.terms-box p { margin: 0 0 10px; }
.terms-box p:last-child { margin-bottom: 0; }
.terms-box strong { color: var(--ink); }
.terms-box ol { margin: 0 0 14px; padding-inline-start: 20px; }
.terms-box ol:last-child { margin-bottom: 0; }
.terms-box li { margin-bottom: 5px; }
.terms-box li:last-child { margin-bottom: 0; }

/* ===== שאלות נפוצות - אקורדיון: כל שאלה נסגרת/נפתחת בהקלקה, ורק תשובה אחת פתוחה בכל קבוצה
   (מתבצע דרך <details name="..."> משותף לכל השאלות באותה קבוצה - ללא JS). ===== */
.faq-list { max-width: 720px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .faq-answer { padding: 0 0 18px; color: var(--ink-soft); }
.faq-item .faq-answer p { margin: 0 0 10px; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }
.faq-item .faq-answer ul,
.faq-item .faq-answer ol { margin: 0 0 10px; padding-inline-start: 20px; }

.sig-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 180px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}

.click-table td form { margin: 0; }
.btn-sm {
  display: inline-block;
  background: var(--branch-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 15px;
  font-size: .85rem;
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn-sm:hover { background: color-mix(in srgb, var(--branch-color) 78%, black); text-decoration: none; color: #fff; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #08350d;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}
.btn-whatsapp:hover { background: #1ebe5b; text-decoration: none; color: #08350d; }

.form-error {
  background: rgba(193, 39, 45, .08);
  border: 1px solid #C1272D;
  color: var(--red-dark);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: .9rem;
}
/* 2026-09, לבקשת מיכה: הודעת "הטופס נשלח בהצלחה" אחרי שליחת טופס הרשמה לחוגים (ר'
   js/register-form.js) - אותו רכיב באנר בדיוק כמו .form-error, ירוק במקום אדום. */
.form-success {
  background: rgba(30, 125, 52, .08);
  border: 1px solid #1e7d34;
  color: #1e7d34;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: .9rem;
}

/* ===== קירות שותפים (עמוד "שותפים וחברים שלנו") - כרטיס בהיר כי ללוגואים רקע לבן ===== */
.partner-card {
  background: #ffffff;
  border-color: var(--line);
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.partner-card:hover { background: var(--branch-color); border-color: var(--branch-color); }
.partner-card img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; }
.partner-card h3 { color: #1a1a1a; }
.partner-card:hover h3 { color: #fff; }
.partner-card .partner-loc { color: #55585f; font-size: .85rem; font-weight: 400; display: block; margin-top: 2px; }
.partner-card:hover .partner-loc { color: #fff; }

/* ===== Footer - שורה אחת ===== */
.site-footer {
  margin-top: 40px;
  background: var(--header-bg);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.footer-line {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .85rem;
  text-align: center;
}
.footer-line a { color: var(--ink-soft); }
.footer-line a:hover { color: var(--ink); }
.footer-line .sep { opacity: .4; }

/* ===== חלון קופץ (popup) - בסגנון הצהוב של האתר הישן =====
   מנוהל דרך data/popups.json + js/popup.js. ניתן להוסיף/לערוך מתוך ממשק הניהול (admin/). */
.site-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,12,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
}
.site-popup {
  background: var(--yellow);
  color: #1a1a1a;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  padding: 34px 30px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.site-popup h2 { font-size: 1.3rem; margin: 0 0 10px; }
.site-popup p { margin: 0 0 22px; color: #33301c; white-space: pre-line; } /* 2026-09: תוכן הפופאפ מוזרק כ-textContent (js/popup.js) - pre-line כדי שירידות שורה בתוך data/popups.json (למשל רשימה עם א./ב.) יוצגו בפועל ולא יתמזגו לשורה אחת */
.site-popup .popup-close {
  position: absolute;
  top: 10px;
  left: 14px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #1a1a1a;
}
.site-popup .popup-actions { display: flex; flex-direction: column; gap: 10px; }
.site-popup .btn-red { display: block; }

/* כפתור החץ להרחבת/כיווץ קבוצה בתפריט הנייד (ר' header.php, js/main.js) - מוסתר כברירת
   מחדל בכל רוחב מסך (לא רק כשה-@media למטה לא חל): הוא שייך אך ורק לאקורדיון של תפריט
   הנייד, ובלי השורה הזו כאן (מחוץ ל-@media) הוא הופיע גם בתפריט הרחב של הדסקטופ, כי
   ל-<button> יש display ברירת מחדל של הדפדפן כשאין חוק מפורש שחל עליו. ה-@media למטה
   רק מחזיר אותו לגלוי, ורק כשהתפריט הנייד פתוח (main-nav.nav-open). */
.nav-item-toggle { display: none; }

/* 2026-09, לבקשת מיכה (צילום מסך: "ילדים ונוער" חופף ללוגו/שם המותג בפינה הימנית העליונה) -
   הסף היה 860px, אבל בדיקה בפועל (getBoundingClientRect על כל פריטי main-nav + brand-item,
   בדיוק כמו שכבר תועד למטה לגבי 480px) מראה שהתפריט הרחב (8 קטגוריות, אחרי הוספת "אירועים")
   זקוק בפועל ל-~1011px רוחב כדי להיכנס בלי לחיצה - כלומר בכל רוחב בין 861px ל-~1011px
   (למשל חלון דפדפן לא-ממוקסם במחשב נייד רגיל) היה "אזור מת": עדיין מוצג התפריט הרחב (לא
   עבר עדיין להמבורגר), אבל בלי מספיק מקום - אז ה-flex-shrink הרגיל (בלי flex-wrap ובלי
   flex-shrink:0 על הפריטים) דחס גם את .brand-item וגם את פריט הניווט הראשון (הכי קרוב אליו
   ב-RTL) זה לתוך זה, בדיוק אותה תופעה שכבר תועדה למטה במסכים צרים מאד. הסף הועלה ל-1040px -
   מרווח ביטחון מעל ה-1011px הנדרש בפועל (לשני הסניפים - נמדד זהה) - כדי שהתפריט הרחב יוצג
   רק כשבאמת יש לו מקום, ומתחת לזה תמיד יוצג תפריט ההמבורגר (שאין בו בעיית חפיפה כלל, כי הוא
   טור אנכי במקום שורה). */
@media (max-width: 1040px) {
  .main-nav { display: none; }
  .main-nav.nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--header-bg);
    padding: 6px 20px 10px;
    gap: 0;
    z-index: 60;
    border-top: 1px solid var(--line);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .main-nav.nav-open .nav-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .main-nav.nav-open .nav-item:last-child { border-bottom: none; }

  .nav-item-row { display: flex; align-items: center; }
  .main-nav.nav-open .nav-link {
    flex: 1;
    width: auto;
    text-align: right;
    padding: 13px 2px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
  }

  /* חץ פתיחה/סגירה של כל קבוצה - כפתור נפרד מהקישור עצמו (ר' header.php): לחיצה
     על הכותרת עצמה ממשיכה להוביל לעמוד הסקירה של הנושא, ולחיצה על החץ פותחת/סוגרת
     רק את תתי-הכותרות שלו. אקורדיון - פתיחת קבוצה סוגרת קבוצה אחרת שהייתה פתוחה
     (ר' js/main.js), כדי שהרשימה הנפתחת תישאר קצרה ולא תיפתח כמקשה אחת ארוכה. */
  .nav-item-toggle {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 1.3rem;
    line-height: 1;
    padding: 10px 8px;
    cursor: pointer;
    transition: transform .15s ease;
  }
  .main-nav.nav-open .nav-item-toggle { display: block; }
  .nav-item.dd-open .nav-item-toggle { transform: rotate(90deg); color: var(--branch-color); }

  /* תתי-הכותרות: סגורות כברירת מחדל, נפתחות רק לקבוצה הפעילה (dd-open) - עם צבע
     מושתק (ink-soft) והזחה+קו ימני, כדי שההיררכיה מול כותרות הקבוצה (לבן, מודגש)
     תיראה בבירור, ולא הכל באותו צבע לבן כמו קודם. */
  .main-nav.nav-open .dropdown {
    position: static;
    display: none;
    background: none;
    border: none;
    margin: 0 0 8px;
    padding: 0 0 2px 16px;
    border-right: 2px solid var(--line);
  }
  .main-nav.nav-open .nav-item.dd-open .dropdown {
    display: flex !important;
  }
  .main-nav.nav-open .dropdown a {
    color: var(--ink-soft);
    font-weight: 400;
    font-size: .9rem;
    padding: 9px 10px;
  }
  .main-nav.nav-open .dropdown a:hover,
  .main-nav.nav-open .dropdown a:active {
    color: var(--ink);
    background: var(--bg);
  }

  .nav-toggle { display: block; margin-inline-start: 8px; }
  .branch-switch { margin-inline-start: auto; }
}

/* 2026-09, לבקשת מיכה (צילום מסך מהנייד): בטלפון צר (≤480px, נבדק בפועל ב-320/375/390px)
   השורה העליונה - כפתור המבורגר + "EN | רחובות | ירושלים" (branch-switch) + לוגו+שם המותג
   (brand-item) - לא הייתה מצטמצמת מספיק כדי להיכנס לרוחב המסך. הבעיה לא הייתה "רק" גלישה
   (overflow-x) - כי ל-.nav-wrap אין overflow:hidden, ה-flex-shrink כן דחס את .brand-item
   לרוחב קטן בהרבה מהתוכן שלו (נבדק ונמדד: ברוחב 390px .brand-item קיבל רק 83px, אבל הטקסט
   "טיפוס אורבני" בפועל זקוק ליותר) - והטקסט שלא הצליח להיכנס "גלש" ויזואלית שמאלה, ישר
   על תוך .branch-switch (זה בדיוק מה שנראה בצילום המסך: "ירושלים" הסגול חופף ל"אורבני").
   התיקון: מצמצמים כאן את המרווחים/גדלים כדי שכל השורה תיכנס בלי לחיצה קיצונית על אף
   איבר (נבדק ואומת ברוחב 320px ו-390px - בלי חפיפה, ר' גם overflow-wrap למטה כרשת ביטחון
   נוספת אם עדיין חסר מקום במסך צר יותר מזה). */
@media (max-width: 480px) {
  .nav-wrap { padding: 12px 14px; gap: 10px; }
  .brand-logo { height: 38px; }
  .brand-name { font-size: .85rem; }
  .brand-branch { font-size: .68rem; }
  .branch-switch { font-size: .78rem; gap: 5px; }
}
/* רשת ביטחון: אם בכל זאת אין מספיק מקום (למשל מסך צר במיוחד, או טקסט תרגום ארוך יותר) -
   עדיף ששם המותג/הסניף יישבר באמצע מילה בתוך התיבה שלו, מאשר "יגלוש" ויזואלית מחוץ לה
   ויחפוף לאיבר השכן (ר' הסבר מעל). לא תלוי במדיה-קוארי - לא מזיק גם בדסקטופ, שם ממילא
   תמיד יש מספיק מקום ולכלל הזה אין שום השפעה בפועל. */
.brand-name, .brand-branch { overflow-wrap: break-word; }

/* ===== חלון מודאלי לשאלות נפוצות (מוזרק ע"י js/faq-modal.js) =====
   נפתח בלחיצה על קישורי "שאלות נפוצות" באתר, ומציג רק את הקטגוריה הרלוונטית מתוך faq.php
   במקום לנווט לדף המלא. dialog נטיבי - Esc וה-backdrop מגיעים "בחינם" מהדפדפן. */
.faq-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 640px;
  width: min(640px, calc(100% - 32px));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.faq-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.faq-modal-title {
  margin: 0 0 6px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.faq-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.faq-modal-close:hover { color: var(--ink); }
.faq-modal-body.faq-list { margin-top: 10px; }
.faq-modal-body .faq-item:last-child { border-bottom: none; }

@media (max-width: 600px) {
  .faq-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 22px 18px;
  }
}

/* ===== כפתור + חלון מודאלי לשעות פתיחה בחגים ובחופשים =====
   מוזרק ע"י includes/holiday-hours.php (בתוך עמוד הבית של סניף, בסעיף "שעות פתיחה") -
   התוכן מגיע מוכן מהשרת (עד 4 השורות העתידיות הקרובות), js/holiday-modal.js רק פותח/סוגר
   את ה-dialog. אותו סגנון בדיוק כמו .faq-modal, כדי שכל החלונות המודאליים באתר ייראו אחיד. */
.holiday-hours-btn { margin-top: 14px; }
.holiday-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 640px;
  width: min(640px, calc(100% - 32px));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.holiday-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.holiday-modal-title {
  margin: 0 0 14px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.holiday-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.holiday-modal-close:hover { color: var(--ink); }
.holiday-modal table.schedule { font-size: .88rem; }

@media (max-width: 600px) {
  .holiday-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 22px 18px;
  }
}

/* ===== חלון מודאלי ליצירת-קשר-מהירה (מוזרק ע"י js/contact-modal.js) =====
   נפתח מכל קישור "צור קשר"/"ליצור קשר" שמצביע ל-contact.php (פוטר, חנות, מחירים, שאלות
   נפוצות, רצועת ימי הולדת וכו') וגם מאייקוני יצירת הקשר בעמוד contact.php עצמו. אותו סגנון
   בדיוק כמו .faq-modal/.holiday-modal למעלה, כדי שכל החלונות המודאליים באתר ייראו אחיד. */
.contact-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 440px;
  width: min(440px, calc(100% - 32px));
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.contact-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.contact-modal-title {
  margin: 0 0 6px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.contact-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.contact-modal-close:hover { color: var(--ink); }
.contact-modal-form { margin-top: 10px; }
.contact-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.contact-modal-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.contact-modal-phone-reveal {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
}
.contact-modal-phone-reveal a { font-weight: 700; }
/* הודעת "חסרים שדות" גלויה (js/contact-modal.js) - במקום בועית-הדפדפן הקטנה שקל לפספס. */
.contact-modal-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fde8e8;
  color: #a01818;
  font-weight: 700;
}
.contact-modal-form input.is-missing { border-color: #d62828; box-shadow: 0 0 0 2px rgba(214,40,40,.25); }

/* ===== חלון מודאלי "בחירת מחנה" (מוזרק ע"י js/camp-modal.js) =====
   נפתח מכפתור "הרשמה למחנה" (href_type: camp-picker, ר' includes/snippets.php) - לפני חלון
   יצירת-הקשר-המהירה עצמו (.contact-modal למעלה), מציג את רשימת המחנות הקרובים לבחירה.
   אותו סגנון בסיס בדיוק כמו שאר החלונות המודאליים באתר. */
.camp-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 440px;
  width: min(440px, calc(100% - 32px));
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.camp-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.camp-modal-title {
  margin: 0 0 6px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.camp-modal-intro {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: .95rem;
}
.camp-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.camp-modal-close:hover { color: var(--ink); }
.camp-modal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camp-modal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition: border-color .15s ease, background .15s ease;
}
.camp-modal-item:hover,
.camp-modal-item:focus-visible {
  border-color: var(--branch-color);
  background: rgba(0,0,0,.03);
}
.camp-modal-item-label {
  font-weight: 700;
}
.camp-modal-item-dates {
  color: var(--ink-soft);
  font-size: .88rem;
  white-space: nowrap;
}
.camp-modal-empty {
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 480px) {
  .camp-modal-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ===== "רצועת" הפעלה לסרטון הבטיחות (safety.php#video) - אותה תמונת אווירה (activity_photo)
   כמו בכל רצועה אחרת, אבל כאן העטיפה עצמה היא <button> (data-video-open, ר' js/video-modal.js)
   ולא רק תמונה סטטית - קליק בכל מקום על התמונה פותח את חלון הסרטון. איפוס עיצוב ברירת המחדל
   של <button> כדי שיתנהג ויתראה בדיוק כמו .activity-media רגיל. ===== */
.video-trigger { cursor: pointer; }
.video-trigger:focus-visible { outline: 3px solid var(--branch-color); outline-offset: -3px; }
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  /* רווח קטן כדי שהמשולש (▶) ייראה ממורכז אופטית בתוך העיגול, לא רק גיאומטרית */
  padding-inline-start: 6px;
  pointer-events: none;
  transition: background .15s ease;
}
.video-trigger:hover .video-play-icon,
.video-trigger:focus-visible .video-play-icon {
  background: var(--branch-color);
}

/* ===== חלון מודאלי לסרטון הבטיחות (מוזרק ע"י js/video-modal.js) =====
   אותו סגנון בדיוק כמו שאר החלונות המודאליים באתר, אבל רחב יותר (מתאים לנגן וידאו). */
.video-modal {
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 800px;
  width: min(800px, calc(100% - 32px));
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.video-modal::backdrop {
  background: rgba(10,10,12,.6);
}
.video-modal-title {
  margin: 0 0 14px;
  padding-inline-end: 26px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.video-modal-close {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}
.video-modal-close:hover { color: var(--ink); }
.video-modal-body video,
.video-modal-body img {
  display: block;
  width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  background: #000;
}
.video-modal-coming-soon {
  text-align: center;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

@media (max-width: 600px) {
  .video-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 22px 18px;
  }
}

@media (max-width: 600px) {
  .contact-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    padding: 22px 18px;
  }
}

/* אייקוני יצירת קשר (מייל/וואטסאפ/טלפון) בכל כרטיס סניף בעמוד contact.php - כל אחד פותח
   את .contact-modal למעלה עם data-contact-branch מפורש. עיגולים פשוטים בצבע הסניף, בלי
   תלות ב-.btn (שם השימוש הוא בתוך כרטיס בהיר-ניטרלי, לא מעל תמונה). */
.contact-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.contact-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.contact-icon-btn:hover {
  background: var(--branch-color);
  border-color: var(--branch-color);
  color: #fff;
}

/* ===== כרטיסי "hover לפרטים" (מחירים ב-jerusalem|rehovot/prices.php, ולוח החוגים ב-adults.php) =====
   2026-09, לבקשת מיכה: "כל המסגרות (כמו בדף מחירים) רק משנות צבע כשעומדים עליהן. זה מאד מוזר.
   הייתי מעדיף שלא ישנו צבע, וייפתח חלון שמפרט מה זה" - במקום .card:hover הרגיל (שמשתלט על
   הרקע בצבע הסניף, מיועד לכרטיסים שהם קישורים אמיתיים כמו ב-first.php), הכרטיס כאן הוא עכשיו
   <button> אמיתי (data-detail-open, ר' js/hover-detail-card.js) שלא משנה צבע ב-hover בכלל - רק
   "מרים" קלות בצל. hover על הכרטיס פותח (ומעביר עכבר משם - סוגר לבד) חלון עם הפרטים המלאים.
   עדכון: "צריך להקטין את הכפתורים ולא להציג את הטקסט המפורט. הוא יוצג רק בהובר על הכפתור" -
   הכרטיס עצמו מציג רק כותרת (+ כותרת-משנה אופציונלית, למשל מחיר) - קטן וקומפקטי יותר מ-.card
   רגיל (min-height/padding נמוכים יותר). עדכון נוסף: "יש מסגרות דומות גם בדפים אחרים (חוגי
   מבוגרים) וזה צריך להתנהג אותו דבר" - אותו class/JS בדיוק (לא היה ספציפי-מחירים מלכתחילה,
   ר' data-detail-* ב-js/hover-detail-card.js), בלי כותרת-משנה (data-detail-subtitle ריק - הפסקה
   מוסתרת אוטומטית). */
.detail-card {
  cursor: pointer;
  font-family: inherit;
  border-color: var(--ink);
  min-height: 0;
  padding: 10px 14px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.detail-card:hover,
.detail-card:focus-visible {
  /* 2026-09, לבקשת מיכה: "המחירים... זה סתם נצבע בסגול" - חייב לאפס כאן במפורש
     background/border-color/color, כי .card:hover (הכלל הכללי, למעלה) מגדיר את אותה
     סגוליות-CSS בדיוק (class אחד + pseudo-class אחד) ומגיע לפניו בקובץ, כך שבלי איפוס
     מפורש כאן הוא ממשיך לחול על .detail-card - בדיוק כמו .card.card-static:hover. */
  background: var(--surface);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  outline: none;
}
.detail-card:hover h3,
.detail-card:focus-visible h3 { color: var(--ink); }
.detail-card:focus-visible { outline: 2px solid var(--branch-color); outline-offset: 2px; }

/* חלון הפרטים עצמו - בדסקטופ נפתח/נסגר לבד עם ה-hover (ר' js/hover-detail-card.js), לכן בכוונה
   *לא* dialog.showModal() כמו שאר החלונות המודאליים באתר (.camp-modal/.video-modal למעלה) -
   showModal לוכד פוקוס ומוסיף ::backdrop שחוסם את שאר הדף, מה שלא מתאים לחלון שאמור "לרחף"
   ולהיעלם מעצמו. dialog.show() רגיל לא ממורכז אוטומטית כמו :modal - לכן מיקום קבוע (fixed)
   וממורכז ידנית כאן, עם z-index שמעל ה-header הדביק (50) ותפריט הנייד (60). */
.detail-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 2026-10 (בדיקת מובייל): ל-<dialog> יש ברירת מחדל של inset/margin:auto - בעמוד RTL ה-right:0
     שלה גבר על left:50%, והחלון זז הצידה (בנייד חצי ממנו יצא מהמסך). מאפסים במפורש. */
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 120;
  border: none;
  border-radius: 14px;
  padding: 30px 26px;
  max-width: 440px;
  width: min(440px, calc(100% - 32px));
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
/* תמונה מוגדלת בראש החלון (data-detail-photo, כרגע כרטיסי צוות/מדריכים - ר' js/hover-detail-card.js).
   החלון עצמו מעט רחב יותר כשיש תמונה, כדי שהתמונה תהיה גדולה באמת ולא רק פי 4 מהכרטיס. */
.detail-modal.has-photo {
  max-width: 480px;
  width: min(480px, calc(100% - 32px));
  max-height: 92vh;
  padding: 18px 18px 24px;
}
.detail-modal-photo {
  display: block;
  width: 100%;
  max-height: 62vh;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 14px;
}
.detail-modal-photo[hidden] { display: none; }
.detail-modal-title {
  margin: 0 0 4px;
  font-size: 1.3rem;
  color: var(--branch-color);
}
.detail-modal-subtitle {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 700;
}
/* "בכל חלון כזה צריכה להיות רשימה עם בולטים" - <ul> (ר' js/hover-detail-card.js) - בולט לכל
   שורת פרט, במקום פסקה רציפה אחת. */
.detail-modal-list {
  margin: 0;
  padding-inline-start: 1.15em;
  color: var(--ink-soft);
}
.detail-modal-list li {
  margin: 0 0 4px;
}
.detail-modal-list li:last-child {
  margin-bottom: 0;
}
/* קישור פעולה אופציונלי בתוך החלון (data-detail-link, ר' js/hover-detail-card.js) - למשל "לתיאום
   מפגש היכרות פרטי" ב-first.php. מוסתר כברירת מחדל (hidden, ר' JS) כשאין data-detail-link. */
.detail-modal-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--branch-color);
}
.detail-modal-link:hover { text-decoration: underline; }

/* ===== ווידג'ט נגישות עצמאי (js/accessibility-widget.js) =====
   לבקשת מיכה, 2026-09: "וגם תוסף נגישות לאתר" - מיישם בפועל את הרשימה שכבר מובטחת
   בהצהרת הנגישות (accessibility.php, סעיף "ההתאמות באתר"). כל הכללים כאן פועלים על
   מחלקות שמתווספות ל-<html> - הן ע"י הסקריפט המונע-הבהוב ב-includes/head.php (בטעינת
   עמוד, מ-localStorage) והן ע"י js/accessibility-widget.js עצמו בזמן ריצה (כשמשנים
   הגדרה בפאנל) - אותה מחלקה בדיוק בשני המקרים, כך שאין הבדל בהתנהגות. */

/* --- קישור "קפיצה לתוכן המרכזי" - הפריט הראשון שניתן לקבל פוקוס בעמוד, מוסתר מחוץ
   למסך עד שמגיעים אליו ב-Tab (לא display:none - חייב להישאר בר-מיקוד). --- */
.a11y-skip-link {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  transition: top .15s ease;
}
.a11y-skip-link:focus { top: 0; }

/* --- כפתור צף לפתיחת פאנל הנגישות (ר' html.a11y-panel-start למטה להחלפת צד) --- */
.a11y-toggle-btn {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  z-index: 9000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.a11y-toggle-btn:hover { background: var(--branch-color); }
.a11y-toggle-btn svg { width: 28px; height: 28px; }
html.a11y-panel-start .a11y-toggle-btn { inset-inline-start: auto; inset-inline-end: 18px; }
html.a11y-panel-start .a11y-panel { inset-inline-start: auto; inset-inline-end: 18px; }

/* --- פאנל ההגדרות --- */
.a11y-panel {
  position: fixed;
  bottom: 80px;
  inset-inline-start: 18px;
  z-index: 9001;
  width: min(340px, calc(100vw - 36px));
  max-height: min(75vh, 620px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding: 18px;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.a11y-panel-title { margin: 0; font-size: 1.1rem; }
.a11y-panel-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px 8px;
}
.a11y-panel-close:hover { color: var(--ink); }
.a11y-group { border-top: 1px solid var(--line); padding: 12px 0; }
.a11y-group:first-child { border-top: none; padding-top: 0; }
.a11y-group h3 { margin: 0 0 8px; font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.a11y-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .92rem; cursor: pointer; }
.a11y-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .92rem; flex-wrap: wrap; }
.a11y-row span { flex: 1 1 auto; }
.a11y-row button, .a11y-swatches button, .a11y-stepper button {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: .85rem;
}
.a11y-row button:hover { border-color: var(--branch-color); }
.a11y-row button.active, .a11y-swatches button.active, .a11y-stepper button.active {
  background: var(--branch-color);
  color: #fff;
  border-color: var(--branch-color);
}
.a11y-panel-foot { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.a11y-reset-btn {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 700;
  cursor: pointer;
}
.a11y-reset-btn:hover { background: var(--red-dark); }

@media (max-width: 480px) {
  .a11y-panel, html.a11y-panel-start .a11y-panel {
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    width: auto;
    bottom: 74px;
  }
}

/* --- תיאורי תמונות (alt-text גלוי, ר' applyImageDescriptions ב-JS) --- */
.a11y-img-caption {
  display: block;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-top: 4px;
  font-style: italic;
}

/* --- גודל טקסט/תצוגה מוגדל - סולם על <html>, יעיל כי כל האתר בנוי ביחידות rem --- */
html.a11y-text-1 { font-size: 107%; }
html.a11y-text-2 { font-size: 114%; }
html.a11y-text-3 { font-size: 123%; }
html.a11y-text-4 { font-size: 134%; }

/* --- גופן קריא --- */
html.a11y-readable-font body, html.a11y-readable-font body * {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* --- ריווח מוגדל (שורות/מילים/אותיות) --- */
html.a11y-spacing body, html.a11y-spacing body * {
  line-height: 1.9 !important;
  letter-spacing: .03em !important;
  word-spacing: .12em !important;
}

/* --- הדגשת קישורים - רק קישורי-תוכן "רגילים" בלי class (לא כפתורי CTA/כרטיסים ממותגים,
   כדי לא לעוות את כל כפתורי האתר) --- */
html.a11y-highlight-links a:not([class]) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  font-weight: 700 !important;
}

/* --- הדגשת כותרות --- */
html.a11y-highlight-headings :is(h1, h2, h3, h4, h5, h6) {
  outline: 2px dashed currentColor !important;
  outline-offset: 4px;
  background: rgba(242, 213, 68, .3) !important;
}

/* --- הדגשת מעבר עכבר (hover) על קישורים/כפתורים --- */
html.a11y-hover-highlight a:hover,
html.a11y-hover-highlight button:hover,
html.a11y-hover-highlight [role="button"]:hover,
html.a11y-hover-highlight summary:hover {
  outline: 3px solid var(--branch-color) !important;
  outline-offset: 2px;
}

/* --- עצירת אנימציות ותנועה (duration/delay ולא animation:none, כדי לשמר את מצב-הסיום
   של אנימציות fill-mode ולא "לאפס" אלמנטים שאמורים כבר להיות גלויים) --- */
html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* --- ניגודיות כהה --- */
html.a11y-dark-contrast body { background-color: #000 !important; }
html.a11y-dark-contrast body * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #444 !important;
}
html.a11y-dark-contrast a { color: #ffd400 !important; }

/* --- ניגודיות בהירה --- */
html.a11y-light-contrast body { background-color: #fff !important; }
html.a11y-light-contrast body * {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}
html.a11y-light-contrast a { color: #0033cc !important; text-decoration: underline !important; }

/* --- החלפת צבע טקסט - פריסט עצמאי, לא קשור למצבי הניגודיות למעלה --- */
html.a11y-color-blue body, html.a11y-color-blue body * { color: #003399 !important; }
html.a11y-color-yellow body { background-color: #000 !important; }
html.a11y-color-yellow body * { color: #ffd400 !important; background-color: #000 !important; }

/* --- הווידג'ט עצמו נשאר תמיד בעיצוב הרגיל שלו, גם כשמצב ניגודיות/צבע-טקסט פעיל על
   שאר העמוד - הסלקטורים כאן עם 2 מחלקות (html.XXX + .a11y-panel) מנצחים לפי specificity
   את "html.XXX body *" למעלה (1 מחלקה בלבד + 2 תגיות) בלי תלות בסדר ההגדרה בקובץ. --- */
html.a11y-dark-contrast .a11y-panel, html.a11y-dark-contrast .a11y-panel *,
html.a11y-light-contrast .a11y-panel, html.a11y-light-contrast .a11y-panel *,
html.a11y-color-blue .a11y-panel, html.a11y-color-blue .a11y-panel *,
html.a11y-color-yellow .a11y-panel, html.a11y-color-yellow .a11y-panel * {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.a11y-dark-contrast .a11y-toggle-btn, html.a11y-light-contrast .a11y-toggle-btn,
html.a11y-color-blue .a11y-toggle-btn, html.a11y-color-yellow .a11y-toggle-btn {
  background-color: var(--ink) !important;
  color: #fff !important;
}
html.a11y-dark-contrast .a11y-reset-btn, html.a11y-light-contrast .a11y-reset-btn,
html.a11y-color-blue .a11y-reset-btn, html.a11y-color-yellow .a11y-reset-btn {
  background-color: var(--red) !important;
  color: #fff !important;
}
html.a11y-dark-contrast .a11y-row button.active, html.a11y-dark-contrast .a11y-swatches button.active, html.a11y-dark-contrast .a11y-stepper button.active,
html.a11y-light-contrast .a11y-row button.active, html.a11y-light-contrast .a11y-swatches button.active, html.a11y-light-contrast .a11y-stepper button.active,
html.a11y-color-blue .a11y-row button.active, html.a11y-color-blue .a11y-swatches button.active, html.a11y-color-blue .a11y-stepper button.active,
html.a11y-color-yellow .a11y-row button.active, html.a11y-color-yellow .a11y-swatches button.active, html.a11y-color-yellow .a11y-stepper button.active {
  background-color: var(--branch-color) !important;
  color: #fff !important;
}

/* --- סמן עכבר מוגדל (שחור/לבן) - SVG חץ מוטבע כ-data URI --- */
html.a11y-cursor-black, html.a11y-cursor-black * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M4 2 L4 34 L13 26 L19 38 L25 35 L19 23 L30 23 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-cursor-white, html.a11y-cursor-white * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M4 2 L4 34 L13 26 L19 38 L25 35 L19 23 L30 23 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* ===== הירו-על-כל-הדף (payment-done.php) - לבקשת מיכה: "תגדיל את התמונה לכל הדף, תקטין
   את הכותרת קצת ותשים את כל הטקסט על התמונה". מחלקת-שינוי נוספת על .hero-photo (דרך הפרמטר
   $extraClass ב-render_hero(), ר' includes/photo-helpers.php) - לא שינוי של .hero-photo
   עצמה, כדי שלא להשפיע על שאר 5 עמודי ההירו שכבר משתמשים באותה פונקציה. ===== */
.hero-photo-cover {
  height: 100vh;
  min-height: 480px;
}
.hero-photo-cover h1 {
  /* קצת יותר קטן מהכותרת הענקית הרגילה (clamp(2.6rem,9vw,6.2rem)) - כאן יש גם פסקת טקסט
     מתחת לכותרת (bodyHtml ב-render_hero), אז לא צריך שהכותרת לבדה "תצבע" את כל התמונה. */
  font-size: clamp(2.1rem, 6.5vw, 4.4rem);
}
.hero-photo-cover .hero-inner p {
  color: #fff;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  max-width: 640px;
  margin: 18px auto 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* ===== הוראות הגעה בעמוד payment-done.php - לבקשת מיכה: "לא הכנסת את הוראות ההגעה לפי
   סניף" ואז "עדיין רואים את הוראות ההגעה לשני הסניפים, צריך שמי שנרשם בירושלים יהיו הוראות
   לירושלים ומי שברחובות - ברחובות" - כרטיס יחיד לסניף המנוחש בלבד ($display_branch, לא שני
   סניפים זה-לצד-זה) עם כתובת/טלפון/Waze בפועל (אותה .info-strip שכבר קיימת בדף הבית של סניף)
   + ההנחיות המפורטות אם קיימות (.location-directions, אותו snippet ממש). ===== */
.payment-done-directions-branch {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.payment-done-directions-branch h3 { margin: 0 0 8px; font-size: 1rem; }
.payment-done-directions-branch .info-strip {
  border: none;
  padding: 0 0 6px;
  gap: 6px 16px;
  font-size: .9rem;
}

/* ===== דף גלריה (gallery.php): לשוניות סניף + מסנן קטגוריות + גריד מוזאיקה (עמודות CSS) +
   lightbox להגדלה (ר' js/gallery.js). בלי ספרייה חיצונית. לבקשת מיכה, 2026-10-19. ===== */
.gallery-page { max-width: 1180px; margin: 0 auto; padding: 48px 20px 64px; }
.gallery-page h1 { margin: 0 0 8px; }
.gallery-page-intro { color: var(--ink-soft); margin: 0 0 28px; }

.gallery-tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.gallery-tab {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.gallery-tab.active { color: var(--ink); border-bottom-color: var(--red); }

.gallery-branch { display: none; }
.gallery-branch.active { display: block; }
.gallery-branch-title { font-size: 1.2rem; margin: 0 0 14px; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.gallery-filter {
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.gallery-filter:hover { border-color: var(--ink-soft); }
.gallery-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.gallery-grid { columns: 3; column-gap: 12px; }
.gallery-item {
  display: block;
  break-inside: avoid;
  margin: 0 0 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: zoom-in;
  line-height: 0;
}
.gallery-item[hidden] { display: none; }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .35s ease, filter .35s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.05); filter: brightness(1.06); }

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 64px;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.gallery-lb-close, .gallery-lb-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lb-close:hover, .gallery-lb-nav:hover { background: rgba(255, 255, 255, .28); }
.gallery-lb-close { top: 16px; inset-inline-end: 16px; font-size: 2rem; line-height: 1; }
.gallery-lb-nav { top: 50%; transform: translateY(-50%); }
/* RTL: "הקודם" מימין, "הבא" משמאל (כיוון הקריאה); ב-LTR הפוך */
.gallery-lb-prev { inset-inline-start: 12px; }
.gallery-lb-next { inset-inline-end: 12px; }
[dir="rtl"] .gallery-lb-prev, [dir="rtl"] .gallery-lb-next { font-size: 0; }
[dir="rtl"] .gallery-lb-prev::before { content: "\276F"; font-size: 1.3rem; }
[dir="rtl"] .gallery-lb-next::before { content: "\276E"; font-size: 1.3rem; }

@media (max-width: 900px) {
  .gallery-grid { columns: 2; }
}
@media (max-width: 560px) {
  .gallery-page { padding: 32px 12px 48px; }
  .gallery-grid { column-gap: 8px; }
  .gallery-item { margin-bottom: 8px; }
  .gallery-lightbox { padding: 56px 8px 24px; }
  .gallery-lb-nav { top: auto; bottom: 12px; transform: none; }
}

/* מפת Google Maps בסעיף "איפה אנחנו" של דף הבית של סניף (includes/branch-home.php). */
.location-map { margin: 14px 0 6px; }
.location-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 8px;
  background: #e8e8e8;
}
.location-map-link { display: inline-block; margin-top: 8px; font-size: .95rem; }
@media (max-width: 700px) {
  .location-map iframe { height: 280px; }
}

/* "צור קשר" בתפריט הראשי: זהה לשאר הפריטים, רק מודגש (bold). */
.nav-link.nav-bold { font-weight: 700; }

/* לוח חוגי המבוגרים (includes/adults.php): כרטיס סטטי לכל חוג - תמונת מדריך/ה + שם החוג + יום/שעה +
   מדריך/ה. בלי hover ובלי חלון פרטים (לבקשת מיכה, 2026-10-20). */
.class-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.class-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-align: start; }
.class-card-photo { flex: 0 0 auto; width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--bg); }
.class-card-initial { display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; color: var(--ink-soft); }
.class-card-body h3 { margin: 0 0 6px; font-size: 1.05rem; }
.class-card-when { margin: 0; font-weight: 600; }
.class-card-who { margin: 2px 0 0; color: var(--ink-soft); font-size: .95rem; }