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

   הפרדה מכוונת: כשהדמו משתנה אפשר לחלץ מחדש את site.css בלי לדרוס אף התאמה.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. תפריטי וורדפרס
   המחלקות .mega ו-.dsub כבר מודבקות על תת-התפריטים ב-inc/nav.php, כך ש-site.css
   מעצב אותם בלי לדעת שהם הגיעו מוורדפרס. מה שנשאר כאן הוא רק מה ש-wp_nav_menu
   מוסיף מעצמו ושהדמו לא הכיר.
   -------------------------------------------------------------------------- */

.nlinks li,
.dnav li,
.mega li,
.dsub li { list-style: none; }

.nlinks .sub-menu,
.dnav .sub-menu { margin: 0; padding: 0; }

/* הפאנל של הדמו הכיל קישורים ישירות. בוורדפרס יש שכבת li באמצע, והיא זו
   שמקבלת את מיקום התא ברשת. */
.mega > li { display: block; }

/* בדמו היו בפאנל 12 פריטים תמיד, ולכן שלושה טורים קבועים היו נכונים. רחל
   יכולה לבנות תת-תפריט של שניים או של שנים-עשר, ומספר טורים קבוע שגוי בשני
   הכיוונים: רשימה קצרה פותחת חלון ריק, וארוכה נמתחת מעבר לרוחב האתר.
   auto-fit מתאים את מספר הטורים לתוכן, ורוחב מרבי מכריח אותו לגלוש לשורה
   שנייה במקום להמשיך הצידה. */
/* ⚠️ עד שלושה פריטים יורדים אחד מתחת לשני, ולא נפרשים לרוחב.
   auto-fit לבדו שם שני פריטים זה לצד זה ופותח חלון רחב עם שני קישורים
   באמצע, וזה נראה כמו טעות ולא כמו תפריט. */
.mega {
	grid-template-columns: 1fr;
	min-width: 210px;
	max-width: min(700px, calc(100vw - 40px));
}
.mega:has(> li:nth-child(4)) {
	grid-template-columns: repeat(auto-fit, minmax(178px, max-content));
}

/* פריט אב במגירה: קישור שממשיך להיות קישור, וכפתור צר שפותח את הרשימה.
   הכפתור נבנה ב-JS, ולכן בלי JS הקישור עדיין עובד והרשימה פשוט פתוחה. */
.dnav .menu-item-has-children > a { flex: 1; }
.dnav .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.dnav .menu-item-has-children > .dsub { flex: 1 0 100%; }
.dnav .dtog {
	flex: 0 0 auto;
	width: 56px;
	justify-content: center;
	border-inline-start: 1px solid var(--cream-deep);
}

/* בלי JS אין כפתור, ואז רשימה סגורה היא רשימה אבודה. */
.no-js .dsub { max-height: none; }

/* הכתובת בפס העליון. בדמו היו שם רק שני טלפונים, אבל לעסק מקומי הכתובת היא
   חצי מהסיבה שגולש מתקשר, והיא לא צריכה להיות רק בפוטר. */
.mast__addr { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   1.5 גלישה אופקית
   שני דברים גולשים שמאלה כשהם סגורים: המגירה, שיושבת מחוץ למסך ב-translateX,
   ופאנל מגה-תפריט רחב, ש-visibility:hidden לא מוציא מחישוב גודל המסמך. ב-RTL
   גלישה שמאלה מגדילה את scrollWidth ויוצרת פס גלילה אופקי בכל עמוד.

   clip ולא hidden: hidden היה הופך את השורש למיכל גלילה ושובר את position:
   sticky של הניווט. clip חותך בלי ליצור מיכל.
   -------------------------------------------------------------------------- */

html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   2. Hello Elementor ואלמנטור
   -------------------------------------------------------------------------- */

/* Hello מגביל את הרוחב בעצמו. הרוחב שלנו מנוהל ב-.wrap, אז מנטרלים כפילות. */
.site-main,
.page-content > .elementor { max-width: none; padding: 0; }

/* אלמנטור מוסיף ריפוד לסקציות. הסקציות שלנו כבר מרופדות ב-.sec, וכשהשניים
   מצטברים נוצר חלל כפול שנראה כמו טעות. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: 1180px; }

/* טקסט שנכתב באלמנטור יורש את הטיפוגרפיה שלנו ולא את ברירת המחדל שלו. */
.elementor-widget-text-editor,
.elementor-widget-heading { font-family: var(--sans); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. דילוג לתוכן
   נדרש ב-WCAG 2.4.1. מוסתר עד שהוא מקבל פוקוס, ואז קופץ פנימה.
   -------------------------------------------------------------------------- */

.skip {
	position: absolute;
	inset-inline-start: 12px;
	top: -60px;
	z-index: 200;
	padding: 10px 18px;
	background: var(--ink);
	color: #fff;
	font-weight: 600;
	transition: top var(--t);
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   4. הקריאה לפעולה — המחליף של אלמנטור פרו
   מופיע 15 פעם באתר, אז הוא חייב להיראות טוב גם באמצע טקסט וגם כבלוק עצמאי.
   -------------------------------------------------------------------------- */

.rcta {
	margin: clamp(28px, 4vw, 44px) 0;
	padding: clamp(24px, 3.5vw, 38px);
	background: var(--cream-deep);
	border-inline-start: 3px solid var(--gold);
	text-align: start;
}
.rcta__title {
	font-family: var(--display);
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 8px;
}
.rcta__text {
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-soft);
	max-width: 52ch;
	margin: 0 0 18px;
}
.rcta .btn { margin: 0; }

/* --------------------------------------------------------------------------
   5. בלוק הלפני/אחרי כשהוא מוטמע בעמוד פנימי
   בעמוד הבית הוא יושב בתוך .sec שכבר נותן לו מרווח. כשרחל תניח אותו בתוך
   עמוד טיפול, אין לו כלום מסביב.
   -------------------------------------------------------------------------- */

.ba-block { margin: clamp(30px, 4vw, 48px) 0; }
.ba-block .bagrid { margin-top: 18px; }
.ba-block > .lead { margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   6. הדפסה
   מטופלת כאן ולא ב-site.css כי היא נוגעת גם ברכיבים של וורדפרס.
   -------------------------------------------------------------------------- */

@media print {
	.mast, nav, .drawer, .scrim, .wa, .a11y, .skip, .rkb__toggle { display: none !important; }
	.rcta { border: 1px solid #999; background: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   7. נפילה חזרה לשם האתר כטקסט
   הלוגו נשלף מספריית המדיה, וכשהוא לא נמצא הכותרת עדיין צריכה להיראות כמו
   כותרת ולא כמו חור.
   -------------------------------------------------------------------------- */

.brand__text {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--ink);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. עמודים פנימיים
   הדמו היה עמוד בית בלבד. 117 העמודים האחרים הם רוב האתר ורוב התנועה, והם
   צריכים את אותה שפה: כותרת עם פירורי לחם, עמודה צרה לקריאה, וסוף שמוביל
   הלאה. הצבעים והטיפוגרפיה מגיעים מהמשתנים של site.css.
   -------------------------------------------------------------------------- */

.phead {
	background: var(--cream);
	border-bottom: 1px solid var(--line);
	padding: clamp(30px, 5vw, 58px) 0 clamp(24px, 4vw, 40px);
}
.phead h1 {
	font-family: var(--display);
	font-size: clamp(27px, 4.4vw, 46px);
	font-weight: 500;
	line-height: 1.18;
	color: var(--ink);
	margin: 0;
	max-width: 22ch;
}
.phead .lead { margin: 14px 0 0; max-width: 62ch; }
.pmeta { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }

.crumbs { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "‹"; margin-inline-end: 6px; opacity: .5; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--mocha-dp); }
.crumbs [aria-current] { color: var(--ink); }

/* עמודה צרה לקריאה. 68ch הוא סביב 12 מילים בשורה בעברית, שזה הטווח שבו העין
   מוצאת את תחילת השורה הבאה בלי לחפש. */
.wrap--text { max-width: 780px; }

.entry { padding: clamp(28px, 4vw, 52px) 0; }
.entry--builder { padding: 0; }   /* עמוד אלמנטור מרפד את עצמו */

.entry .wrap--text > * + * { margin-top: 1.1em; }
.entry h2 {
	font-family: var(--display);
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 500;
	line-height: 1.3;
	margin-top: 1.7em;
}
.entry h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; margin-top: 1.5em; }
.entry p, .entry li { font-size: 17px; line-height: 1.85; color: var(--ink-soft); }
.entry ul, .entry ol { padding-inline-start: 1.3em; }
.entry li + li { margin-top: .5em; }
.entry img { max-width: 100%; height: auto; }
.entry a { color: var(--mocha-dp); text-decoration: underline; text-underline-offset: 3px; }
.entry blockquote {
	border-inline-start: 3px solid var(--gold);
	padding-inline-start: 20px;
	font-size: 18px;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   9. רשימות מאמרים, מאמרים קשורים, עימוד וחיפוש
   -------------------------------------------------------------------------- */

.plist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
}
.pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	overflow: hidden;
	transition: var(--t);
}
.pcard:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(var(--scrim), .08); }
.pcard__pic img { display: block; width: 100%; height: 190px; object-fit: cover; }
.pcard__txt { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard__txt h2 { font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.35; margin: 0; }
.pcard__txt p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; flex: 1; }
.pcard__txt time { font-size: 12.5px; color: var(--ink-soft); opacity: .8; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rel {
	display: block;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	transition: var(--t);
}
.rel:hover { box-shadow: 0 14px 34px rgba(var(--scrim), .08); }
.rel b { display: block; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.35; }
.rel span { display: block; margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

.pagination, .pagelinks { margin-top: clamp(26px, 3.5vw, 40px); }
.pagination .nav-links, .pagelinks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers, .pagelinks > * {
	min-width: 42px;
	padding: 9px 13px;
	border: 1px solid var(--line);
	text-align: center;
	font-size: 15px;
	color: var(--ink);
}
.pagination .page-numbers.current { background: var(--mocha); border-color: var(--mocha); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--gold); }

.rsearch { display: flex; gap: 8px; margin-top: 18px; max-width: 460px; }
.rsearch input {
	flex: 1;
	padding: 12px 15px;
	border: 1px solid var(--line);
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--ink);
}
.rsearch input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   10. הטופס
   Contact Form 7 מייצר markup משלו. במקום לעצב אותו פעמיים, ממפים את השדות
   שלו על אותו עיצוב שהדמו נתן לשדות שנכתבו ביד.
   -------------------------------------------------------------------------- */

.rform .wpcf7 { margin: 0; }

/* CF7 עוטף כל שדה ב-<p> משלו וגם אנחנו עוטפים ב-p, ושני ה-margin מצטברים
   לרווח כפול בין השדות. אפס לשניהם, והמרווח נקבע פעם אחת ב-gap. */
.rform .wpcf7-form { display: flex; flex-direction: column; gap: 12px; }
.rform .wpcf7-form p { margin: 0; }
.rform .wpcf7-form br { display: none; }
.rform input[type="text"],
.rform input[type="tel"],
.rform input[type="email"],
.rform textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	background: #fff;
	font: inherit;
	font-size: 15.5px;
	color: var(--ink);
	transition: var(--t);
}
.rform textarea { min-height: 108px; height: 108px; resize: vertical; }
.rform input:focus-visible, .rform textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rform input::placeholder, .rform textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.rform .wpcf7-submit { width: 100%; cursor: pointer; }

/* הודעות של CF7. ברירת המחדל שלו היא מסגרת צהובה עבה שלא שייכת לשום עיצוב. */
.rform .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 15px;
	border: 0;
	border-inline-start: 3px solid var(--gold);
	background: var(--cream-deep);
	font-size: 14.5px;
	line-height: 1.6;
}
.rform .wpcf7-not-valid-tip { margin-top: 5px; font-size: 13px; color: #b0403a; }
.rform .wpcf7-not-valid { border-color: #b0403a; }
.rform__missing { color: #b0403a; font-size: 14px; }

/* --------------------------------------------------------------------------
   11. סקציות שנשלפו מהדמו לתוך שורטקודים
   -------------------------------------------------------------------------- */

/* בדמו ה-hero היה <header> ולכן ירש ריפוד. כאן הוא שורטקוד בתוך תוכן העמוד. */
.hero + .sec, .about-sec + .rkb { margin-top: 0; }
.about-sec { display: block; }

/* --------------------------------------------------------------------------
   12. גלריות הלפני/אחרי הישנות
   -------------------------------------------------------------------------- */

.gshots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	margin-top: clamp(20px, 3vw, 32px);
}
.gshots figure { margin: 0; background: #fff; border: 1px solid var(--line); }
.gshots img { display: block; width: 100%; height: auto; }
.gshots figcaption {
	padding: 10px 14px;
	font-size: 13.5px;
	color: var(--ink-soft);
	border-top: 1px solid var(--line);
}

/* הגלריות שנכתבו בעורך עצמו, בעמודי /גלריה/ ו-/המלצות/. ברירת המחדל של
   וורדפרס היא תמונונת 150 פיקסל בטבלה, וזה נראה כמו 2010. */
.entry .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
	margin: 24px 0;
}
.entry .gallery br { display: none; }
.entry .gallery-item { margin: 0 !important; width: auto !important; }
/* ⚠️ contain ולא width:100%. חלק מהתמונות הישנות קיימות רק בגודל 150 פיקסל,
   כי המקור שהועלה ב-2017 היה קטן. מתיחה ל-250 הופכת אותן למטושטשות. עדיף
   תמונה קטנה וחדה במרכז התא מאשר תמונה גדולה ומרוחה. */
.entry .gallery-icon {
	aspect-ratio: 1 / 1;
	background: var(--cream);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.entry .gallery-icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 0 !important;
}
.entry .gallery-caption { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }


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

.prose { background: var(--cream); border-top: 1px solid var(--line); }
.prose__body { max-width: 760px; }
.prose__body p { font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); margin: 0 0 1.1em; }
.prose__body h2,
.prose__body h3 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.32;
	color: var(--ink);
	margin: 1.6em 0 .5em;
	break-after: avoid-column;
}
.prose__body h2 { font-size: clamp(19px, 2.2vw, 23px); }
.prose__body h3 { font-size: clamp(17px, 1.9vw, 19px); }
.prose__body > :first-child { margin-top: 0; }

@media (max-width: 900px) {
	.prose__body { columns: 1; }
}

/* --------------------------------------------------------------------------
   14. תקרה למסכים רחבים
   --shell נגזר מגובה החלון ביחס 16:9, כדי שסקציה מלאת רוחב לא תימתח לרוחב
   המסך. במסך אולטרה־וויד גבוה החישוב הזה מגיע ל-2133 פיקסל והרכיב עדיין
   נמתח. עוצרים ב-1920: הרקע ממשיך עד הקצה, התוכן לא.
   -------------------------------------------------------------------------- */

:root { --shell: min(1920px, max(1232px, calc(100vh * 16 / 9))); }

/* --------------------------------------------------------------------------
   15. ביקורות גוגל
   הדמו עיצב .rev עם <p> ו-.who. כאן הן <figure> עם <blockquote>, כי זו ציטטה
   של אדם אחר ולא טקסט של האתר, וקורא מסך צריך לדעת את זה.
   -------------------------------------------------------------------------- */

.rev { display: flex; flex-direction: column; margin: 0; }
.rev blockquote {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--card-tx);
	flex: 1;
}
.rev .who { align-items: center; }
.rev .who b { display: block; font-weight: 600; }
.rev .who small { display: block; font-size: 12.5px; color: var(--ink-soft); opacity: .85; }
.rev .av { flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* הדירוג הכולל. מספר אחד גדול עושה יותר מששה כרטיסים. */
.rscore { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rscore .stars { margin: 0; font-size: 18px; }
.rscore b { font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--ink); }

.gbadge { display: block; margin-top: 30px; }
.gbadge .btn { display: inline-flex; }


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

.wa {
	--wa: #25D366;
	--wa-dark: #128C7E;
	inset-inline-end: 22px;
	bottom: 22px;
	width: auto;
	min-width: 56px;
	width: max-content;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wa);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(18, 140, 126, .34);
	transition: gap .28s cubic-bezier(.22,1,.36,1), background var(--t), box-shadow var(--t);
}
.wa__ico {
	flex: none;
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wa svg { width: 27px; height: 27px; fill: #fff; }

/* התווית נסגרת ברוחב ולא ב-display, כדי שהמעבר יהיה חלק ושקורא מסך עדיין
   יקרא אותה. white-space מונע ממנה להישבר בזמן שהיא נפתחת. */
/* flex:none חובה. בלעדיו הילד מתכווץ לרוחב המיכל (56 פיקסל), ה-max-width
   שמשתנה בריחוף לא מזיז כלום, והכפתור נשאר עיגול עם תווית בלתי נראית. */
.wa__txt {
	flex: none;
	max-width: 0;
	opacity: 0;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 600;
	transition: max-width .32s cubic-bezier(.22,1,.36,1), opacity .2s, padding .32s;
	padding-inline-end: 0;
}
.wa:hover, .wa:focus-visible { background: var(--wa-dark); box-shadow: 0 12px 30px rgba(18,140,126,.42); }
.wa:hover .wa__txt, .wa:focus-visible .wa__txt { max-width: 220px; opacity: 1; padding-inline-end: 20px; }

/* פעימה עדינה שמושכת את העין פעם אחת ונעצרת. אנימציה אינסופית ליד טקסט היא
   הסחה, ומי שביקש פחות תנועה לא אמור לראות אותה בכלל. */
.wa::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
	animation: wa-pulse 2.4s ease-out 3;
	pointer-events: none;
}
@keyframes wa-pulse {
	70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.wa, .wa__txt { transition: none; }
	.wa::before { animation: none; }
}

@media (max-width: 900px) {
	.wa { inset-inline-end: 16px; bottom: 16px; }
	.wa:hover .wa__txt, .wa:focus-visible .wa__txt { max-width: 0; opacity: 0; padding-inline-end: 0; }
}

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

.ck {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 120;
	background: #fff;
	border-top: 2px solid var(--gold);
	box-shadow: 0 -8px 30px rgba(var(--scrim), .14);
}
.ck__in {
	max-width: 1180px;
	margin: 0 auto;
	padding: 16px 26px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.ck__in b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.ck__in p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-soft); max-width: 70ch; }
.ck__btns { display: flex; gap: 10px; margin-inline-start: auto; flex-wrap: wrap; }
.ck__btns .btn { white-space: nowrap; }

.ck-reopen {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--mocha-dp);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* הכפתורים הצפים לא יושבים על הבאנר. המחלקה מגיעה מה-body ולא מסדר ה-DOM,
   כי הכפתורים מודפסים לפני הבאנר ובורר אחים לא תופס אותם. */
body.has-ck .wa, body.has-ck .a11y { bottom: 128px; }
@media (max-width: 700px) { body.has-ck .wa, body.has-ck .a11y { bottom: 190px; } }

@media (max-width: 700px) {
	.ck__in { padding: 14px 16px; gap: 12px; }
	.ck__btns { margin-inline-start: 0; width: 100%; }
	.ck__btns .btn { flex: 1; justify-content: center; }
}

@media print { .ck { display: none !important; } }


/* הקישורים המשפטיים בפוטר. מופרדים בנקודה ולא בקו אנכי, שנשבר ב-RTL. */
.flegal { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.flegal > * + *::before { content: "·"; margin-inline-end: 14px; opacity: .5; }


/* --------------------------------------------------------------------------
   18. גוש הטקסט במצב מקופל, ורצפי תמונות בעמודים הישנים
   -------------------------------------------------------------------------- */

.prose--fold { padding-block: clamp(26px, 3.5vw, 42px); }
.prose__fold { border: 1px solid var(--line); background: #fff; }
.prose__fold > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px clamp(18px, 2.5vw, 28px);
	cursor: pointer;
	list-style: none;
	font-family: var(--display);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 500;
	color: var(--ink);
}
.prose__fold > summary::-webkit-details-marker { display: none; }
.prose__fold > summary:hover { color: var(--mocha-dp); }
.prose__caret {
	flex: none;
	width: 9px; height: 9px;
	border-right: 1.8px solid var(--gold-tx);
	border-bottom: 1.8px solid var(--gold-tx);
	transform: rotate(45deg);
	transition: transform var(--t);
}
.prose__fold[open] .prose__caret { transform: rotate(225deg); }
.prose__fold[open] > summary { border-bottom: 1px solid var(--line); }
.prose__fold .prose__body { padding: clamp(18px, 2.5vw, 28px); max-width: 820px; }

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

.entry .imgrow + .imgrow { margin-top: calc(clamp(10px, 1.4vw, 16px) * -1 + clamp(10px, 1.4vw, 16px)); }
.entry .imgrow {
	display: grid;
	/* שני טורים ולא שלושה. אלה תמונות "לפני ואחרי", כלומר שתי תמונות בתוך
	   קובץ אחד, ובטור צר מדי אי אפשר לראות את ההבדל שהן אמורות להראות. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	margin: clamp(22px, 3vw, 34px) 0;
}
.entry .imgrow p { margin: 0 !important; }


.entry .imgrow > a { display: block; line-height: 0; }
/* ⚠️ contain ולא cover. אלה תמונות "לפני ואחרי", ו-cover חותך מהן שוליים,
   כלומר עלול לחתוך בדיוק את החצי שמראה את התוצאה. עדיף מסגרת עם שוליים
   מאשר ראיה חתוכה. */
.entry .imgrow img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border: 1px solid var(--line);
	background: var(--cream);
}

/* שורה של תמונות רחבות: טור אחד ויחס טבעי. שתי תמונות פנורמיות זו לצד זו
   יוצאות קטנות מכדי לראות בהן משהו, ויחס כפוי משאיר סביבן ריק.
   ⚠️ הבורר כופל את המחלקה בכוונה. בלי זה הסגוליות זהה לכלל הבסיס שמעליו,
   והכלל שמופיע אחרון מנצח — כלומר התיקון נטען ולא השפיע. */
.entry .imgrow.imgrow--wide { grid-template-columns: 1fr; }
.entry .imgrow.imgrow--wide img { aspect-ratio: auto; height: auto; }

/* ביטול הציפה. בעמודה של 780 פיקסל היא הגורם היחיד לבלגן, והיא מיותרת
   ברגע שיש רשת. */
.entry img.alignright, .entry img.alignleft, .entry img.aligncenter,
.entry .alignright, .entry .alignleft {
	float: none !important;
	margin-inline: auto !important;
	display: block;
}

/* תמונה בודדת בתוך פסקה: רוחב מלא של עמודת הקריאה, לא גודל מקרי. */
.entry p > img:only-child {
	display: block;
	width: 100%;
	height: auto;
	margin: clamp(18px, 2.5vw, 28px) auto;
	border: 1px solid var(--line);
}
.entry .imgrow p > img:only-child { margin: 0; border: 1px solid var(--line); }


/* --------------------------------------------------------------------------
   19. הדירוג בגיבור
   מעל הקפל, ליד הכפתורים. חמישה כוכבים ומספר אחד עושים יותר משורת שיווק,
   כי הם לא נכתבו על ידינו.
   -------------------------------------------------------------------------- */

.hstars {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	margin-top: 22px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--line);
	color: var(--ink);
	transition: var(--t);
}
.hstars:hover { border-color: var(--gold); background: #fff; }
.hstars__s { color: #AD7F0A; font-size: 15px; letter-spacing: 2px; }
.hstars b { font-family: var(--display); font-size: 20px; font-weight: 500; }
.hstars__t { font-size: 13.5px; color: var(--ink-soft); }

@media (max-width: 700px) {
	.hstars { margin-top: 16px; padding: 7px 11px; gap: 7px; }
	.hstars b { font-size: 18px; }
	.hstars__t { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   20. וידאו והדגשות בעמודים הישנים
   -------------------------------------------------------------------------- */

/* ⚠️ הווידאו נשאר בתוך עמודת הקריאה ולא פורץ ממנה. בגרסה קודמת הוא קיבל
   1425 פיקסל רוחב, כלומר 800 גובה, והשתלט על העמוד לפני שנקראה מילה. */
.entry .vidwrap {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	margin: clamp(22px, 3vw, 34px) 0;
	background: var(--ink);
	border: 1px solid var(--line);
}
.entry .vidwrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* הדגשה שהחליפה צבע קשיח מ-2016. אותה היררכיה, בפלטה של האתר. */
.entry .t-accent {
	color: var(--mocha-dp);
	font-weight: 600;
}
.entry p > .t-accent:only-child,
.entry p > strong > .t-accent:only-child {
	display: block;
	font-family: var(--display);
	font-size: clamp(19px, 2.2vw, 23px);
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
	margin-top: 1.4em;
}


/* --------------------------------------------------------------------------
   22. הגלריות של העורך הקלאסי
   וורדפרס מדפיס אותן כ-dl/dt/dd עם מחלקת gallery-columns-N שקובעת רוחב
   באחוזים. זה נשבר בכל רוחב שאינו זה שנבחר ב-2017. כאן זו רשת רספונסיבית
   אחת, ומספר הטורים נגזר מהמקום ולא מהמחלקה.
   -------------------------------------------------------------------------- */

.entry .gallery {
	display: grid !important;
	/* תא קטן בכוונה. חלק מהתמונות קיימות רק ב-150 פיקסל, ותא של 230 משאיר
	   אותן קטנות באמצע מסגרת ריקה. */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	margin: clamp(22px, 3vw, 34px) 0;
}

/* פריט גלריה שהתמונה שלו נמחקה מספריית המדיה נשאר כתא ריק ברשת. */
/* ⚠️ לא לפי המחלקה gallery-item. הפריט הריק בעמוד הפיגמנטציה לא נשא אותה,
   ולכן הוא נשאר תא ריק ברשת. הבורר הזה תופס כל ילד ישיר בלי תמונה. */
.entry .gallery > *:not(:has(img)) { display: none !important; }

/* ⚠️ align-items:start על הרשת, ובלי flex:1 על התא.
   בלעדיהם התא נמתח לגובה השורה, flex:1 מותח את המסגרת לאותו גובה, ו-
   aspect-ratio מתבטל מול גובה מוחלט. התוצאה שראינו: תמונה של 230 על 230
   שנמתחה ל-230 על 1500 ונראתה כמו פסי עור מרוחים. */
.entry .gallery { align-items: start; }

.entry .gallery .gallery-item {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
.entry .gallery .gallery-icon {
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cream);
	border: 1px solid var(--line);
	overflow: hidden;
	margin: 0;
}

/* ⚠️ contain ולא width:100%. חלק מהתמונות קיימות רק בגודל 150 פיקסל, כי
   המקור שהועלה ב-2017 היה קטן. מתיחה שלהן הופכת אותן למרוחות. */
.entry .gallery .gallery-icon img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border: 0 !important;
	margin: 0;
}
.entry .gallery .gallery-caption {
	margin: 8px 2px 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.entry .gallery br { display: none; }

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

.entry { padding: 0; }

/* ⚠️ ‎--cream‎ בפלטה של האתר הוא ‎#FFFFFF‎, כלומר לבן ממש. ההחלפה הראשונה
   בין ‎#fff‎ ל-‎var(--cream)‎ הייתה החלפה בין לבן ללבן, ולכן העמודים נראו
   לבנים לגמרי למרות שהסקציות עבדו. הגוון האמיתי הוא ‎--cream-deep‎. */
.csec {
	padding-block: clamp(34px, 5vw, 62px);
	background: #fff;
	position: relative;
}
.csec--alt { background: var(--cream-deep); }
.csec + .csec { border-top: 1px solid var(--line); }

/* ⚠️ הפתיח היה ברקע זהב, וזו הייתה טעות בשיטה. אם גם הפתיח צבוע וגם
   הסקציות מתחלפות, הצבע השני מופיע כמעט בכל מסך והוא מפסיק להיות הדגשה.
   עכשיו הפתיח לבן ומובחן בטיפוגרפיה בלבד: פסקה גדולה יותר. */
.csec--intro > .wrap > p:first-child {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.8;
	color: var(--ink);
}

/* הכותרת עם סימן זהב מעליה. הוא נותן לכותרת מעמד של פתיחת פרק במקום עוד
   שורה מודגשת באמצע טקסט. */
/* ⚠️ הכותרת שפותחת סקציה אינה תמיד H2. רוב המאמרים שלה משתמשים ב-H4, כי
   כך התבנית הישנה עיצבה כותרת פרק. הבורר תופס אותה לפי המיקום — הילד
   הראשון של הסקציה — ולא לפי רמת התגית. */
.csec > .wrap > h2,
.csec > .wrap > :is(h3, h4):first-child {
	position: relative;
	margin: 0 0 clamp(16px, 2vw, 24px);
	padding-top: 18px;
	font-family: var(--display);
	font-size: clamp(23px, 3.2vw, 34px);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
	max-width: 24ch;
}
.csec > .wrap > h2::before,
.csec > .wrap > :is(h3, h4):first-child::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 42px;
	height: 2px;
	background: var(--gold);
}

/* הפסקה שצמודה לכותרת פותחת את הפרק, ולכן היא כהה וגדולה מעט יותר. */
.csec > .wrap > h2 + p,
.csec > .wrap > :is(h3, h4):first-child + p {
	font-size: clamp(16px, 1.9vw, 18px);
	color: var(--ink);
}

.csec > .wrap > h3 {
	font-family: var(--display);
	font-size: clamp(18px, 2.1vw, 22px);
	font-weight: 500;
	color: var(--ink);
	margin: 1.9em 0 .5em;
}

/* רשימות: סימון בזהב במקום נקודה שחורה של הדפדפן. */
.csec ul { list-style: none; padding-inline-start: 0; }
.csec ul > li {
	position: relative;
	padding-inline-start: 24px;
	margin-bottom: .7em;
}
.csec ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: .72em;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--gold-tx);
	transform: rotate(45deg);
}
.csec ol { padding-inline-start: 1.3em; }
.csec ol > li::marker { color: var(--gold-tx); font-weight: 600; }

/* מודגש בתוך פסקה מקבל את צבע המותג ולא רק משקל כבד. */
.csec strong, .csec b { color: var(--mocha-dp); font-weight: 600; }

/* ציטוט */
.csec blockquote {
	margin: clamp(22px, 3vw, 32px) 0;
	padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
	background: #fff;
	border: 0;
	border-inline-start: 3px solid var(--gold);
	font-family: var(--display);
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 400;
	line-height: 1.7;
	color: var(--ink);
}
.csec--alt blockquote { background: #fff; }

/* הבלוקים הרחבים ממשיכים לפרוץ, גם בתוך סקציה. */
.csec .imgrow, .csec .gallery, .csec .vidwrap { margin-block: clamp(20px, 2.6vw, 30px); }

@media (max-width: 700px) {
	.csec { padding-block: clamp(26px, 7vw, 40px); }
}

@media print {
	.csec { background: none !important; border: 0; padding-block: 12px; }
}


/* סקציה שנבנתה באלמנטור, בתוך עמוד מעורב. מקבלת את אותו קצב כמו השאר, כדי
   שהעמוד לא ייראה כשני עמודים שונים שהודבקו זה לזה. */
.csec--builder > .wrap { max-width: 1180px; }
.csec--builder .elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }
.csec--builder .elementor-widget-wrap { padding: 0 !important; }


/* --------------------------------------------------------------------------
   24. עמוד בלי כותרות משנה
   41 עמודים באתר הם מאות מילים ברצף אחד בלי כותרת אחת. אי אפשר להוסיף להם
   כותרות בלי לכתוב טקסט חדש, אז הם מקבלים קנבס מעוצב, פתיח מובלט, וקצב
   נשימה בין הפסקאות.
   -------------------------------------------------------------------------- */

/* ⚠️ בלי כרטיס לבן על רקע קרם. זו הייתה שפה שנייה בתוך אותו אתר, ועמוד
   אחד נראה כמו סקציות ועמוד אחר כמו קונטיינר. הכל מיושר לשפת הסקציות:
   רקע מלא לרוחב, בלי מסגרת ובלי כרטיס. */
/* ⚠️ עמוד ללא כותרות משנה הוא סקציה אחת. כשהיא צבועה, הצבע השני מכסה
   מאה אחוז מהעמוד — כלומר "הדגשה" שלא מדגישה כלום, וזה בדיוק מה שסער
   תפס: "יש הרבה דפים שהצבע השני הוא הצבע היחיד". לבן, כמו כל השאר. */
.csec--plain > .wrap > p:first-of-type {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.8;
	color: var(--ink);
	padding-bottom: clamp(16px, 2vw, 22px);
	border-bottom: 1px solid var(--line);
	margin-bottom: clamp(20px, 2.6vw, 28px);
}
.csec--plain > .wrap > p { margin-bottom: 1.3em; }

/* כותרת ריקה שנשארה מהעורך הישן היא רק מרווח מיותר. */
.entry h1:empty, .entry h2:empty, .entry h3:empty,
.entry h4:empty, .entry h5:empty, .entry h6:empty { display: none; }

/* הסרטון ממורכז. ⚠️ margin-inline:auto לבדו לא ממרכז אלמנט שיושב בתוך
   בלוק זורם ב-RTL כשיש לו רוחב מרבי, ולכן גם display:block מפורש. */
.entry .vidwrap {
	display: block;
	margin-inline: auto !important;
}

/* --------------------------------------------------------------------------
   25. תקרת גובה לתמונות תוכן
   סריקה של 126 עמודים בדפדפן מצאה תמונות פורטרט בגובה 1,446 ו-1,638 פיקסל.
   תמונה כזאת תופסת מסך וחצי ודוחפת את כל הטקסט למטה. התקרה שומרת על היחס
   ומקטינה את הרוחב בהתאם, ולכן שום דבר לא נמתח.
   -------------------------------------------------------------------------- */

/* ⚠️ כל תמונה בתוכן, כולל בתוך סקציות אלמנטור. הבורר הקודם כיסה רק תמונות
   בתוך .csec ו-figure, ופספס את התמונות של אלמנטור שהן בדיוק הגבוהות. */
.entry img {
	max-height: min(72vh, 640px);
	width: auto;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
}

/* ברשתות ובגלריות הגובה נקבע על ידי התא, ולכן התקרה לא חלה שם. */
.entry .imgrow img,
.entry .gallery img,
.entry .vidwrap img { max-height: none; width: 100%; }
.entry .imgrow img { width: 100%; height: 100%; }

/* תוכן אלמנטור בתוך עמוד רגיל לא בולט מהמסך. העמוד הישן /דף-הבית/ נושא
   סליידר ברוחב מלא שנבנה לעמוד בית ולא לעמוד תוכן. */
.entry .elementor-section,
.entry .elementor-container,
.entry .elementor-widget-wrap { max-width: 100%; }
/* סליידר ברוחב מלא שנבנה לעמוד בית ונשאר בעמוד תוכן. */
.csec--builder, .entry .elementor-section { overflow-x: clip; }
.entry .elementor-section > .elementor-container { width: 100%; }

/* --------------------------------------------------------------------------
   26. הגנה סופית מפני עיוות תמונות
   ⚠️ שתי בעיות שנשארו אחרי סריקה של 126 עמודים היו כללי CSS שלנו עצמנו:
   height:100% בתוך רשת שהשורה שלה גבוהה, ורוחב שנכפה על תמונה בתוך ווידג'ט
   אלמנטור. בשני המקרים גם הרוחב וגם הגובה נקבעו, והתמונה נמתחה.

   object-fit:contain על כל תמונה בתוכן פותר את זה מהשורש: גם אם מיכל כלשהו
   יכפה מידות, התמונה תשב בתוכן בלי להימתח. זו רשת ביטחון, לא תיקון נקודתי.
   -------------------------------------------------------------------------- */

.entry img { object-fit: contain; }

/* ברשת התמונות היחס מגיע מ-aspect-ratio ולא מגובה השורה. */
.entry .imgrow img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: none;
}

/* תמונה בתוך ווידג'ט של אלמנטור: הרוחב שלה נקבע שם, והגובה חייב להישאר חופשי. */
.entry .elementor img { height: auto; }

/* --------------------------------------------------------------------------
   27. טופס יצירת קשר בסוף כל עמוד
   לבקשתה. הטופס שולח את שם העמוד ואת הכתובת בגוף המייל, כך שהיא רואה מאיזה
   טיפול הגיעה כל פנייה. זו הסיבה שהוא בכל עמוד ולא רק בעמוד צור קשר.
   -------------------------------------------------------------------------- */

.csec--form { background: var(--cream-deep); border-top: 1px solid var(--line); }
.cform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: start;
	max-width: 1000px;
	margin-inline: auto;
}
.cform__side h2 {
	font-family: var(--display);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 500;
	line-height: 1.25;
	margin: 8px 0 12px;
	color: var(--ink);
	max-width: 18ch;
}
.cform__side p { font-size: 16px; line-height: 1.8; color: var(--ink-soft); max-width: 42ch; }
.cform__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cform .rform { background: #fff; border: 1px solid var(--line); padding: clamp(18px, 2.6vw, 28px); }

@media (max-width: 820px) {
	.cform { grid-template-columns: 1fr; }
}

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

/* ⚠️ תוכן העניינים לבן. הוא יושב מיד מעל טופס יצירת הקשר שגם הוא בגוון
   השני, ושתי רצועות צמודות נקראות כרצועה אחת ענקית בתחתית כל עמוד. */
.csec--toc { background: #fff; padding-block: clamp(20px, 2.6vw, 30px); }

.entry #toc_container {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-inline-start: 3px solid var(--gold) !important;
	border-radius: 0;
	padding: clamp(16px, 2.2vw, 24px) !important;
	margin: 0 !important;
	float: none !important;
	font-size: 15px;
}
.entry #toc_container .toc_title {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	margin: 0 0 10px;
	text-align: start;
}
.entry #toc_container ul { margin: 0; padding-inline-start: 0; list-style: none; }
.entry #toc_container li { margin: 0 0 6px; padding-inline-start: 0; }
.entry #toc_container li::before { content: none; }
.entry #toc_container a {
	color: var(--ink-soft);
	text-decoration: none;
	line-height: 1.7;
}
.entry #toc_container a:hover { color: var(--mocha-dp); text-decoration: underline; text-underline-offset: 3px; }
.entry #toc_container .toc_number { color: var(--gold-tx); font-weight: 600; margin-inline-end: 6px; }
.entry #toc_container ul ul { margin-top: 6px; padding-inline-start: 18px; }

/* ⚠️ התוסף מקפל את הרשימה כברירת מחדל ומשאיר קופסה עם כותרת וקישור "הצג".
   תוכן עניינים מקופל לא עוזר לאף אחד: כל הערך שלו הוא לראות במבט אחד מה יש
   בעמוד. הרשימה נפתחת כאן בכוח, וכפתור ההצגה מיותר ולכן יורד. */
.entry #toc_container ul.toc_list { display: block !important; }
.entry #toc_container .toc_toggle { display: none !important; }
.entry #toc_container .toc_title { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   29. תיקוני ערכת האב
   ⚠️ ה-reset של הלו אלמנטור קובע ‎button:hover { background: #c36 }‎ — ורוד
   עז שנראה כמו צבע בדיקה שנשכח. הוא צובע כל כפתור שאין לו רקע משלו, ובעמוד
   הבית זה היה כפתור "הצגת המפה" שהאיר בוורוד בריחוף.
   -------------------------------------------------------------------------- */

.entry button:hover, .entry button:focus,
.pmapbtn:hover, .pmapbtn:focus,
.a11y-x:hover, .a11y-x:focus,
.dtog:hover, .dtog:focus,
.ck-reopen:hover, .ck-reopen:focus,
.rkb__toggle:hover, .rkb__toggle:focus { background: none; }

.pmapbtn:hover .pin { background: var(--mocha-dp); }

/* הטקסט מתחת לכפתור המפה גלש משני צידי הכפתור, כי הוא ירש nowrap. */
.pmapbtn small {
	display: block;
	white-space: normal;
	max-width: 30ch;
	margin-inline: auto;
	text-wrap: pretty;
}
.pmapbtn { max-width: 100%; }

/* --------------------------------------------------------------------------
   30. עמוד שנבנה כולו באלמנטור
   ⚠️ כאן הייתה טעות: נתתי ל-csec--builder רקע שמנת מלא, כדי שהעמוד לא יהיה
   לבן לגמרי. התוצאה הפוכה — עמוד אלמנטור הוא סקציה אחת, ולכן הוא נצבע
   כולו בצבע השני. זה בדיוק העמוד שסער שלח.
   הפתרון הוא לא רקע לסקציה אלא קצב בתוכה: הסקציות הפנימיות של אלמנטור
   מקבלות את אותו קצב כמו סקציות רגילות, מסומנות מה-PHP.
   -------------------------------------------------------------------------- */

.csec--builder { background: #fff; }

/* הגוון נמרח לרוחב מלא ולא רק ברוחב העמודה, אחרת נוצרת קופסה צפה
   באמצע העמוד במקום פס שמחלק אותו. */
/* רצועה בתוך רכיב טקסט של אלמנטור. אותו גוון ואותו ריפוד כמו סקציה רגילה,
   כדי ששתי משפחות העמודים ייראו זהות. */
.cband { padding-block: clamp(10px, 1.4vw, 16px); }
.cband--tint {
	background: var(--cream-deep);
	box-shadow: 0 0 0 100vmax var(--cream-deep);
	clip-path: inset(0 -100vmax);
	padding-block: clamp(24px, 3vw, 40px);
}
.cband--tint + .cband { padding-block-start: clamp(24px, 3vw, 40px); }

.csec--builder .elementor-top-section.csec-tint {
	background: var(--cream-deep);
	box-shadow: 0 0 0 100vmax var(--cream-deep);
	clip-path: inset(0 -100vmax);
	padding-block: clamp(24px, 3vw, 40px);
}

/* ------------------------------------------------------------------ *
 * 31. נעילת גלילה כשהמגירה פתוחה
 * ------------------------------------------------------------------ */

/* ⚠️ על html ולא על body. הכלל html{overflow-x:clip} שלמעלה הופך את html
   לאלמנט הגלילה, ולכן נעילה על body לא עוצרת דבר והעמוד גולל מתחת למגירה
   הפתוחה. הבורר המורכב כאן רק כדי לגבור על overflow-x של השורש. */
html.navopen {
	overflow: hidden;
}

/* 32. "קרא עוד" בכרטיס ארכיון */
.pcard__more {
	display: inline-block;
	margin-block-start: .5rem;
	font-weight: 600;
	/* ⚠️ היה --mocha (#B08A5A), שנותן 3.17 על לבן ונופל בתקן. --gold-tx
	   נותן 5.21 באותה משפחת גוון בדיוק. */
	color: var(--gold-tx);
	text-decoration: none;
}
.pcard__more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 33. קרדיט הבנייה
 * ------------------------------------------------------------------ */

/* שורה שקטה מתחת לשורת הזכויות. היא לא אמורה להתחרות בשום דבר בפוטר. */
.fby {
	margin-block-start: 14px;
	padding-block-start: 14px;
	/* ⚠️ הפוטר כאן בהיר. קו לבן שקוף עליו פשוט לא נראה, וזה מה שהיה כאן
	   בגרסה הראשונה — הקרדיט הופיע אבל בלי הפרדה מהשורה שמעליו. */
	border-top: 1px solid var(--line);
	font-size: 13px;
	opacity: .72;
	text-align: center;
}
.fby a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fby a:hover { opacity: 1; }

/* ------------------------------------------------------------------ *
 * 34. תוכן העניינים שלנו
 * ------------------------------------------------------------------ */

.ctoc > b {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--gold-tx);
	text-transform: uppercase;
}
.ctoc ol {
	margin: 0;
	padding-inline-start: 1.2em;
	columns: 2;
	column-gap: 32px;
}
@media (max-width: 700px) { .ctoc ol { columns: 1; } }
.ctoc li { margin-bottom: 8px; break-inside: avoid; }
.ctoc a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.ctoc a:hover { border-bottom-color: var(--gold-tx); }

/* גלילה רכה אל העוגן, עם מרווח מהכותרת הדביקה */
html { scroll-behavior: smooth; }
.csec [id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------------ *
 * 35. רכיב קריאה לפעולה (תחליף ל-Elementor Pro)
 * ------------------------------------------------------------------ */

.rcta { margin-block: 10px; }
.rcta__img { display: block; max-width: 100%; height: auto; margin-bottom: 12px; }
.rcta__title { margin: 0 0 6px; font-size: clamp(18px, 2vw, 22px); }
.rcta__desc { margin: 0 0 12px; }

/* הכפתור מעוצב כמו כפתור המשנה של האתר, כדי שהעמודים האלה לא ייראו זרים */
.rcta__btn {
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--mocha);
	border-radius: 2px;
	color: var(--mocha-dp);
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}
a.rcta__btn:hover { background: var(--mocha); color: #fff; }

/* ------------------------------------------------------------------ *
 * 36. תמונה שהוכנסה בגודל "בינוני" נשארת בינונית
 * ------------------------------------------------------------------ */

/* ⚠️ וורדפרס מסמן במחלקה איזה גודל הכותבת בחרה בעת ההכנסה. תמונה עם
   size-medium נבחרה במפורש כתמונה קטנה שיושבת בצד הטקסט — ולהציג אותה
   ב-640 פיקסל זה לעקוף את ההחלטה שלה.

   זה מה שקרה בעמוד /צור-קשר/: תמונת קישוט של 768 פיקסל תפסה את כל המסך
   הראשון ודחפה את טופס יצירת הקשר ל-2,400 פיקסל למטה. סער דיווח "אין
   טופס בדף של יצירת קשר" — הטופס היה שם, פשוט אף אחד לא הגיע אליו. */
.entry img.size-medium    { max-height: 340px; }
.entry img.size-thumbnail { max-height: 190px; }

/* בשורת תמונות היחס כבר נשלט על ידי התא, ואין צורך בתקרה נוספת */
.entry .imgrow img.size-medium,
.entry .imgrow img.size-thumbnail { max-height: none; }

/* ------------------------------------------------------------------ *
 * 37. שורת "זמין בקליניקה" בעמוד המותגים
 * ------------------------------------------------------------------ */

/* ⚠️ רוחלי ביקשה שאחרי כל חברה יופיע שהתכשירים זמינים אצלה. השורה כוללת
   את שם החברה ולא נוסח זהה שחוזר שש פעמים — ככה כל שורה ייחודית, וכל אחת
   נושאת את הצירוף שהיא רוצה להיתפס עליו בגוגל: שם המותג יחד עם חיפה. */
.entry .bcta {
	margin-block: 14px 0;
	padding: 12px 16px;
	border-inline-start: 2px solid var(--gold-tx, #9A7B52);
	background: var(--cream-deep, #F8F3EC);
	font-weight: 500;
}
.entry .bcta a { font-weight: 700; }

/* שורת ההבדלה שמעל תיאור כל מותג */
.entry .blead {
	margin-block: 0 10px;
	color: var(--gold-tx, #9A7B52);
	font-weight: 600;
}

/* לוגו המותג, מתחת לשם */
.entry .blogo { margin-block: 2px 10px; }
.entry .blogo img {
	max-height: 46px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	margin-inline: 0;
}

/* ⚠️ בתוך סקציה מודגשת הרקע של הרצועה זהה לרקע הסקציה, ולכן היא נעלמת —
   וחלק מהמותגים קיבלו הדגשה וחלק לא. בתוך סקציה מודגשת הרצועה לבנה, ככה
   היא בולטת באותה מידה בכל המותגים. */
.csec--alt .bcta,
.cband--tint .bcta,
.csec--intro .bcta { background: #fff; }

/* קישור לעמוד המותגים, בכותרת רצועת הלוגואים */
.rkb__more { margin-top: 10px; }
.rkb__more a {
	color: var(--gold-tx, #9A7B52);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.rkb__more a:hover { color: var(--mocha-dp, #5A4830); }

/* ================================================================== *
 * 38. כפתור הבלוק של וורדפרס — כפתור אחד לכל האתר
 * ------------------------------------------------------------------
 * ⚠️ זה היה הליקוי החמור באתר, ורוחלי היא שמצאה אותו (27.8.2026):
 * "לתיאום אבחון מקצועי והתאמת טיפול" הודפס בזהב #8A6634 על פחם #32373C,
 * יחס 2.31 מול 4.5 הנדרשים — **ב-29 עמודים.** אלה ברירות המחדל של ליבת
 * וורדפרס, שאף פעם לא נבחרו: הזהב הגיע מ-theme.json והפחם הוא צבע
 * ה-contrast המובנה. איש לא בחר את הצירוף, הוא פשוט נפל ככה.
 *
 * הכפתור כאן מיושר לאותו כפתור בדיוק שיש בשאר האתר — זהב מלא וכיתוב לבן —
 * כי היא ביקשה אחידות, ושתי מערכות כפתורים על אותו עמוד הן בדיוק חוסר
 * האחידות שהיא ראתה.
 * ================================================================== */
.entry .wp-block-button__link,
.entry .wp-element-button,
.entry .wp-block-button__link:visited {
	background-color: var(--gold-btn);
	color: #fff;
	border: 1px solid var(--gold-btn);
	border-radius: 0;
	padding: 14px 28px;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	text-decoration: none;
	transition: var(--t);
}
.entry .wp-block-button__link:hover,
.entry .wp-block-button__link:focus-visible,
.entry .wp-element-button:hover {
	background-color: var(--gold-btn-dp);
	border-color: var(--gold-btn-dp);
	color: #fff;
}
/* הווריאנט המתאר (outline) של וורדפרס מגיע בלי רקע כלל, ואז הכיתוב הזהוב
   נופל ישירות על הנייר. גם הוא מיושר. */
.entry .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--ink);
	border: 1px solid var(--gold-btn);
}
.entry .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--gold-btn);
	color: #fff;
}

/* ================================================================== *
 * 39. הודעת הטופס — הירוק של Contact Form 7 יוצא מהאתר
 * ------------------------------------------------------------------
 * ⚠️ הירוק (#46b450) הוא ברירת מחדל של התוסף ולא צבע של רוחלי. היא ביקשה
 * (27.8.2026) שההודעה "ההודעה נשלחה" תדבר באותה שפה כמו האתר.
 * הצבעים נבחרו לפי ניגודיות ולא לפי גוון: כהה על רקע בהיר מאותה משפחה.
 * ================================================================== */
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--gold);
	border-inline-start-width: 4px;
	background: var(--gold-soft);
	color: #5C4520;          /* 7.9:1 על F0E6D8 */
	font-size: 15px;
	line-height: 1.6;
	border-radius: 0;
}
/* שגיאה נשארת נבדלת — אחרת אי אפשר להבחין בין "נשלח" ל"לא נשלח" —
   אבל בגוון חם ולא באדום־תוסף. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--ember);
	background: #FBEDE9;
	color: #8C2A10;          /* 7.3:1 על FBEDE9 */
}
.wpcf7 form .wpcf7-not-valid-tip {
	color: #8C2A10;
	font-size: 13.5px;
	margin-top: 5px;
}

/* ================================================================== *
 * 40. סינון הגלריה לפי נושא
 * ------------------------------------------------------------------
 * בקשה של רוחלי (27.8.2026): "אם מישהו יש לו אקנה הוא יכול לראות רק לפני
 * ואחרי אקנה". הכפתורים יושבים על אותו כפתור־זהב של כל האתר כדי שלא
 * ייווצר סגנון כפתור שלישי — זו בדיוק חוסר האחידות שהיא ביקשה לסגור.
 * ================================================================== */
.bafil {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 6px;
}
.bafil__b {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	padding: 9px 20px;
	cursor: pointer;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--gold);
	transition: var(--t);
}
.bafil__b:hover {
	background: var(--gold-soft);
}
.bafil__b.is-on {
	background: var(--gold-btn);
	border-color: var(--gold-btn);
	color: #fff;
}
/* ⚠️ מסגרת המיקוד חייבת להישאר נראית גם על הכפתור הפעיל, שרקעו כהה.
   outline בצבע הדיו נעלם עליו, ולכן הוא לבן עם הפרדה כהה מסביב. */
.bafil__b:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.bafil__b.is-on:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 4px var(--ink);
}
.bafil__count {
	font-size: 14px;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.bapair[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* ברוחב טלפון חמישה כפתורים נשברים לשלוש שורות ודוחפים את התמונות
	   אל מתחת לקיפול. גלילה אופקית שומרת אותם בשורה אחת. */
	.bafil {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 4px;
		margin-inline: -26px;
		padding-inline: 26px;
	}
	.bafil::-webkit-scrollbar { display: none; }
	.bafil__b { flex: none; }
}

/* ================================================================== *
 * 41. שני עמודי אלמנטור ישנים — הכותרות חוזרות לשחור של האתר
 * ------------------------------------------------------------------
 * רוחלי (27.8.2026): "חלק מהכותרות מופיע בשחור וחלק בזהב". סרקתי את 128
 * העמודים: **492 מתוך 507 הכותרות כבר זהות.** כל החריגות יושבות על שני
 * עמודים בלבד — page-id-2 (עמוד בית ישן) ו-page-id-2384 (אודות כפול) —
 * ושניהם שרידים מהאתר הקודם שאינם מקושרים מאף תפריט.
 *
 * הצבעים לא נבחרו: הם באים מ-post-2.css ו-post-2384.css, קבצים שאלמנטור
 * מייצר לבד לכל עמוד, ומ-reset.css שלו שנותן אפור ‎#766D67. שלושה מקורות,
 * אף אחד מהם לא החלטה עיצובית.
 *
 * ⚠️ העמודים עצמם נשארים חיים ומאונדקסים ואף מילה לא יורדת מהם — רק הצבע
 * מיושר. עמוד שנמחק הוא דירוג שנמחק.
 *
 * ⚠️ ה-important נדרש: אלמנטור כותב ‎body.page-id-2 .elementor-element-XXX‎
 * עם מזהה אקראי שאי אפשר לחזות, ולכן אין דרך לנצח אותו בסלקטור בלבד.
 * הכלל מצומצם לשני מזהי העמודים האלה ולכותרות בלבד.
 * ================================================================== */
body.page-id-2 :is(h1, h2, h3, h4, h5, h6),
body.page-id-2 .elementor-heading-title,
body.page-id-2384 :is(h1, h2, h3, h4, h5, h6),
body.page-id-2384 .elementor-heading-title {
	/* ⚠️ היה --ink מהתקופה שההחלטה הייתה "כל הכותרות שחורות". ההחלטה
	   התהפכה, והכלל הזה נשאר וסתר את סעיף 42. שני כללים חשובים מנוגדים
	   שההכרעה ביניהם היא סדר השורות בקובץ — זה עובד עד לרפקטור הראשון. */
	color: var(--gold-tx) !important;
}
/* הלשונית הפתוחה באקורדיון איבדה את הזהב שסימן אותה, ולכן הסימון עובר
   לקו צדדי. בלי זה אי אפשר לראות איזו לשונית פתוחה. */
body.page-id-2 .elementor-tab-title.elementor-active {
	border-inline-start: 3px solid var(--gold);
	padding-inline-start: 12px;
}

/* ================================================================== *
 * 42. כותרות בזהב — ההחלטה של רוחלי
 * ------------------------------------------------------------------
 * "חלק מופיע בשחור וחלק מופיע בזהב היפה הזה, בוא נחליט שזה צריך להיות
 * אחיד" (27.8.2026). "היפה הזה" הוא התשובה: הזהב הוא מה שהיא רוצה, ולא
 * מה שהפריע לה. אחידות כאן פירושה שכולן זהב, לא שכולן שחור.
 *
 * ⚠️ הזהב כאן הוא ‎--gold-tx‎ (#8A6634) ולא ‎--gold‎ (#B08A5A). הבהיר נותן
 * 3.17 על לבן ונופל בתקן; הכהה נותן **5.21 על לבן ו-4.72 על הקרם**,
 * ושניהם עוברים את 4.5 הנדרשים — כלומר גם טקסט רגיל, לא רק כותרת.
 * הבדיקה נעשתה על שני המשטחים כי הכותרות יושבות על שניהם לסירוגין.
 *
 * ⚠️⚠️ **כל רמות הכותרות, h1 עד h6.** בגרסה הראשונה הגבלתי את זה ל-h1
 * ו-h2 מתוך שיקול שלי — "שמירה על היררכיה" — אבל רוחלי ביקשה אחידות, ולא
 * ביקשה היררכיה. סער תפס עמוד עם שבע כותרות h3 כהות ושאל למה. ההחלטה
 * שלה גוברת על ההעדפה שלי.
 *
 * ⚠️ הכלל גורף בכוונה ולא מונה מכלים. הניסיון הראשון פירט ‎.entry‎,
 * ‎.sec > .wrap‎, ‎.csec > .wrap‎ וכן הלאה — וכל מכל שלא נזכר ברשימה נשאר
 * כהה. **רשימת היתר היא בדיוק מה שגרם לפספוס.** ברירת המחדל היא זהב,
 * וחריג נכתב במפורש.
 *
 * הניגודיות נבדקה על שני המשטחים היחידים באתר: 5.21 על לבן, 4.72 על
 * הקרם. שניהם מעל 4.5, כלומר עוברים גם בתור טקסט רגיל ולא רק ככותרת.
 * ================================================================== */
/* ⚠️⚠️ ה-important כאן הכרחי, ולא מטעמי עצלות. ‎:is(h1..h6)‎ הוא סלקטור
   בעל הסגוליות **הנמוכה ביותר האפשרית** (0,0,1), וכמעט כל כלל אחר באתר
   גובר עליו: ‎.entry h2‎, ‎.phead h1‎, ‎.cband > h3‎, וגם ‎h1..h6 {color:inherit}‎
   של reset.css של אלמנטור. בלי important הכלל נראה נכון בקוד ולא משנה
   כלום בפועל — נמדד: 857 כותרות מתוך 1408 נשארו כהות.

   החלופה היא למנות מכלים, וזו בדיוק הגישה שכשלה קודם. עדיף כלל אחד
   שמנצח, ורשימת חריגים קצרה ומפורשת מתחתיו. */
:is(h1, h2, h3, h4, h5, h6) {
	color: var(--gold-tx) !important;
}

/* ⚠️ הקו הקטן שמעל הכותרת היה זהב על נייר לבן, וכשהכותרת עצמה נעשתה זהב
   הוא נבלע בה. הוא עובר לדיו כדי שיישאר סימן ולא כתם. */
.csec > .wrap > h2::before {
	background: var(--ink);
}

/* ⚠️ העמודים היתומים חוזרים לכלל אחד עם כל השאר. סעיף 41 כפה עליהם דיו
   כשההחלטה עוד הייתה "הכל שחור"; עכשיו ההחלטה התהפכה, והם מיושרים אליה.
   ה-important נשאר נדרש מול ה-CSS שאלמנטור מייצר לכל עמוד. */
body.page-id-2 :is(h1, h2),
body.page-id-2 .elementor-heading-title,
body.page-id-2384 :is(h1, h2),
body.page-id-2384 .elementor-heading-title {
	color: var(--gold-tx) !important;
}
body.page-id-2 :is(h3, h4, h5, h6),
body.page-id-2384 :is(h3, h4, h5, h6) {
	color: var(--gold-tx) !important;
}

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

/* ⚠️ ‎.entry a‎ (סעיף 231) ניצח את ‎.btn-gold‎ — סלקטור עם מחלקה *ועוד*
 * אלמנט גובר על מחלקה לבדה, והקובץ גם נטען אחריו. התוצאה: כפתור זהב עם
 * כיתוב זהב, **יחס 1.0 — טקסט בלתי נראה לחלוטין.** כלל הקישורים חייב
 * לעצור בגבול הכפתורים. */
.entry a.btn,
.entry a.btn:hover,
.entry a.btn-gold,
.entry a.btn-mocha,
.entry a.wp-block-button__link {
	color: #fff;
	text-decoration: none;
}
.entry a.btn-out {
	color: var(--ink);
}

/* הכותרות שלא נתפסו בסעיף 42 מפני שהן יושבות בתוך רכיבים ולא ישירות
   תחת ‎.wrap‎ — כותרת טופס יצירת הקשר (123 עמודים) וכותרות כרטיסי הארכיון.
   שתיהן כותרות שרוחלי רואה, ולכן הן חלק מ"אחיד". */
.cform__side > h2,
.pcard__txt > h2,
.cband > h2,
.rkb__headtext > h2,
.txt > h2 {
	color: var(--gold-tx);
}

/* ⚠️ לוח הנגישות היה החריג היחיד שהשארתי בדיו. הוסר: 5.21 עובר את התקן
   בנוחות, וכותרת אחת שונה מכל השאר היא בדיוק ה"למה זה לא אחיד" שרוחלי
   שאלה עליו מלכתחילה. */

/* הכתום בשני עמודי האלמנטור היתומים. ‎#DF4822‎ על לבן נותן 4.13 ולבן על
   ‎#DD4B26‎ נותן 4.11 — שניהם מתחת ל-4.5. הם מיושרים לזהב של האתר. */
body.page-id-2 [class*="elementor"] a,
body.page-id-2384 [class*="elementor"] a {
	color: var(--gold-tx);
}
body.page-id-2 .elementor-button,
body.page-id-2384 .elementor-button {
	background-color: var(--gold-btn) !important;
	color: #fff !important;
}
/* ⚠️ החריג הקודם כאן היה **רחב מדי**: הוא צבע בדיו את *כל* לשוניות
   האקורדיון, כולל אלה שיושבות על רקע בהיר, ולכן כותרת h2 אמיתית נשארה
   כהה בזמן שכל האתר עבר לזהב. המדידה הראתה שרק **לשונית אחת** יושבת על
   רקע זהב ‎#B18A5A‎; כל השאר על לבן או קרם.

   ההפרדה היא לפי תג ולא לפי מחלקה: מה שהוא באמת כותרת (h1–h6) הופך לזהב
   (4.88 על ‎#FBF7F1‎), ומה שהוא div — כפתור פתיחה של אקורדיון ולא כותרת —
   נשאר בדיו, וזה גם מה שמתקן את הלבן-על-זהב שנפל ב-3.17 ומגיע ל-4.76. */
/* ⚠️ המחלקה מוכפלת גם כאן. אלמנטור כותב
   ‎.elementor-element-4061170 .elementor-tab-title.elementor-active‎ —
   (0,3,1) מול (0,2,2) שלי, כלומר הוא מנצח. ההכפלה מעלה ל-(0,3,2). */
body.page-id-2.page-id-2 :is(h1, h2, h3, h4, h5, h6).elementor-tab-title,
body.page-id-2384.page-id-2384 :is(h1, h2, h3, h4, h5, h6).elementor-tab-title {
	color: var(--gold-tx) !important;
}
body.page-id-2 div.elementor-tab-title,
body.page-id-2384 div.elementor-tab-title {
	color: var(--ink) !important;
}

/* ⚠️ ‎post-2.css‎ של אלמנטור כותב ‎body.page-id-2 .elementor-widget-heading h2‎
   עם important — סגוליות (0,2,2), בדיוק כמו הכלל שלי, וההכרעה נופלת על
   סדר הקבצים. במקום להישען על זה, מחלקת הגוף נכפלת: ‎.page-id-2.page-id-2‎
   מעלה ל-(0,3,2) ומנצח חד־משמעית. זה לא טריק לשמו — זו הדרך היחידה לגבור
   על סלקטור עם מזהה אקראי שאי אפשר לחזות. */
body.page-id-2.page-id-2 [class*="elementor-element"] :is(h1, h2, h3, h4, h5, h6),
body.page-id-2384.page-id-2384 [class*="elementor-element"] :is(h1, h2, h3, h4, h5, h6) {
	color: var(--gold-tx) !important;
}
body.page-id-2.page-id-2 [class*="elementor-element"] div.elementor-tab-title,
body.page-id-2384.page-id-2384 [class*="elementor-element"] div.elementor-tab-title {
	color: var(--ink) !important;
}

/* ================================================================== *
 * 44. עמוד הגלריה — הרשת יוצאת מעמודת הטקסט
 * ------------------------------------------------------------------
 * ⚠️ ‎[rachelle_gallery]‎ בעמוד הגלריה יושב בתוך ‎.wrap--text‎, עמודה שרוחבה
 * 780 פיקסלים ונועדה לשורות קריאות של טקסט. התוצאה: עשרים זוגות צילומים
 * נדחסו ל-676 פיקסלים — **57% מהרוחב שהם מקבלים בעמוד הבית** — וזה בדיוק
 * העמוד שבו התמונות הן כל התוכן. בעמוד הבית הבעיה לא קיימת מפני ששם
 * הקיצור יושב בתבנית סקציות ולא בעמודת טקסט, ולכן היא לא נראתה עד שנבנה
 * עמוד הגלריה המסונן.
 *
 * הפריצה סימטרית ולכן נשארת ממורכזת: השוליים השליליים מחושבים מההפרש בין
 * רוחב העמודה לרוחב היעד, וחצי לכל צד.
 * ================================================================== */
.entry .wrap--text > .sec.basec {
	width: min(1180px, calc(100vw - 52px));
	margin-inline: calc((100% - min(1180px, 100vw - 52px)) / 2);
}
/* ⚠️ 100vw כולל את רוחב פס הגלילה, והרוחב שהפריסה מקבלת בפועל לא. ההפרש
   הוא כ-16 פיקסלים, והוא מזיז את הרשת מהמרכז — נמדד 42 מימין מול 58
   משמאל. מעל 1232 אין בכלל צורך ב-vw: הרוחב קבוע, וחישוב מ-100% של
   עמודת ההורה נותן מרכוז מדויק כי היא עצמה ממורכזת. */
@media (min-width: 1232px) {
	.entry .wrap--text > .sec.basec {
		width: 1180px;
		margin-inline: calc((100% - 1180px) / 2);
	}
}
/* ⚠️ ה-wrap הפנימי כבר מגביל ל-1180 ומוסיף ריפוד משלו. בלי האיפוס הזה
   נוצר ריפוד כפול והרשת מצטמצמת שוב, רק פחות. */
.entry .wrap--text > .sec.basec > .wrap {
	max-width: none;
}

/* ================================================================== *
 * 45. שני העמודים היתומים — הסיבוב האחרון
 * ------------------------------------------------------------------
 * ⚠️ סעיף 42 לא תפס אותם, ולא בגלל שגיאה בסלקטור אלא בגלל **סגוליות**:
 * אלמנטור כותב ‎body.page-id-2384 .elementor-element-0bb9501 .elementor-
 * heading-title‎ עם ‎!important‎ — שלוש מחלקות מול שתיים שלי. כששני כללים
 * שניהם ‎!important‎, הסגוליות מכריעה, וה-important שלי היה חסר משמעות.
 *
 * הפתרון אינו עוד ‎!important‎ אלא התאמת המבנה: ‎[class*="elementor-element"]‎
 * מחזיר את המחלקה השלישית בלי לנחש את המזהה האקראי, והתוספת של תג הכותרת
 * מעלה אותי מעליו. הקובץ גם נטען אחרי שלו, כך שגם תיקו נופל לטובתי.
 *
 * ⚠️ הכתום ‎--lux-coral‎ (#DD4B26) נותן בדיוק 4.11 מול לבן, בכיתוב של 18
 * פיקסלים מודגש — שיער אחד מתחת ל-18.66 שמעליו מותר 3:1. כלומר הוא נמדד
 * כטקסט רגיל וחייב 4.5. ההכהיה ל-#CC3F1C נותנת 4.89 לשני הכיוונים, והעין
 * כמעט לא מבחינה.
 * ================================================================== */
body.page-id-2 [class*="elementor-element"] :is(h1, h2).elementor-heading-title,
body.page-id-2384 [class*="elementor-element"] :is(h1, h2).elementor-heading-title {
	color: var(--gold-tx) !important;
}
body.page-id-2 [class*="elementor-element"] :is(h3, h4, h5, h6).elementor-heading-title,
body.page-id-2384 [class*="elementor-element"] :is(h3, h4, h5, h6).elementor-heading-title {
	color: var(--gold-tx) !important;
}
/* ⚠️ ההשערה ש-‎--lux-coral‎ ישנה את הרקע הייתה שגויה: אלמנטור לא כתב שם
   משתנה אלא את הערך עצמו, ‎rgb(221,75,38)‎, ישירות ב-post-2384.css. לכן
   ההגדרה מחדש של המשתנה לא נגעה בכלום, וצריך לפנות אל האלמנט עצמו.

   ⚠️⚠️ ‎elementor-element-bbfe3ec‎ הוא מזהה שאלמנטור מייצר, ואם מישהו יערוך
   את העמוד הזה באלמנטור הוא עלול להשתנות והכלל יפסיק לתפוס. זה מקובל כאן
   ורק כאן: מדובר בעמוד יתום שאינו מקושר מאף תפריט ואיש אינו עורך אותו.
   בשום מקום אחר באתר אין הישענות על מזהה כזה. */
/* ⚠️ ה-important כאן אינו עצלות. הכלל של אלמנטור הוא
   ‎.elementor-2384 .elementor-element.elementor-element-bbfe3ec > .elementor-widget-container‎
   — **ארבע מחלקות** מול שתיים ואלמנט אחד שלי, כלומר הוא מנצח בסגוליות
   ואין סלקטור סביר שגובר עליו בלי לשכפל את המזהה שלוש פעמים. */
body.page-id-2384 .elementor-element-bbfe3ec > .elementor-widget-container {
	background-color: #CC3F1C !important;
}
/* הכיתוב הלבן שיושב על הכתום — כאן הרקע מגיע מהאב, ולכן הכלל צריך לתפוס
   את הקישור עצמו ולא את המכל. */
body.page-id-2 [class*="elementor-element"] a,
body.page-id-2384 [class*="elementor-element"] a {
	color: inherit;
}

/* ================================================================== *
 * 46. יישור ערכת הטוקנים של עמוד הבית הישן
 * ------------------------------------------------------------------
 * ⚠️ `/דף-הבית/` (page-id-2) אינו עמוד אלמנטור רגיל: יש לו **גיליון עיצוב
 * שנכתב ביד** ב-`uploads/elementor/css/post-2.css`, עם ערכת טוקנים משלו
 * (`--rc-gold`, `--rc-gold-dark`, `--rc-text` וכו'). ההערה בראש הקובץ
 * אפילו מסבירה איך להדביק אותו ל"CSS נוסף".
 *
 * לכן כותרת אחת שם נשארה ב-`#8C683E` אחרי שכל האתר עבר ל-`#8A6634` — לא
 * בגלל סלקטור חזק יותר, אלא בגלל **משתנה אחר**. חיפוש הסלקטור האשם היה
 * מבוי סתום; התיקון הנכון הוא להגדיר מחדש את המשתנה עצמו, וכל מי שמשתמש
 * בו מתיישר בבת אחת.
 *
 * ההפרש בין שני הזהבים הוא 2/4/10 ברכיבי RGB — בלתי מורגש לעין. מה שתוקן
 * כאן הוא העיקרון: **גוון זהב אחד באתר, לא שניים.**
 * ================================================================== */
body.page-id-2.page-id-2 {
	--rc-gold: var(--gold);
	--rc-gold-dark: var(--gold-tx);
}

/* ================================================================== *
 * 47. שני חריגים שסער ביקש במפורש
 * ------------------------------------------------------------------
 * אחרי שכל 1408 הכותרות עברו לזהב, סער ביקש להחזיר לשחור בדיוק שני
 * דברים בראש עמוד הבית. שניהם חריגים מכוונים ולא פספוסים — מי שיסרוק
 * בעתיד ויראה כותרת לא־זהובה, שידע שזו בקשה ולא באג.
 * ================================================================== */

/* ⚠️ ה-important נדרש מול הכלל הגורף של סעיף 42, שגם הוא important.
   הסלקטור כאן ספציפי יותר ולכן מנצח. הוא מצומצם ל-.hero, שקיים רק
   בתבנית הסקציות של עמוד הבית — כותרות h1 בשאר האתר לא מושפעות. */
.hero .in > h1 {
	color: var(--ink) !important;
}

/* הכתובת בשורת ראש העמוד. היא הייתה ‎--ink-soft‎ (אפור) בזמן ששני מספרי
   הטלפון לצידה כבר היו ‎--ink‎ — כלומר שלושה פריטים באותה שורה בשני
   צבעים. עכשיו השורה אחידה. */
.mast__addr {
	color: var(--ink);
}

/* ================================================================== *
 * 48. הקישור לגלריה המלאה, מתחת ללפני/אחרי בעמוד הבית
 * ------------------------------------------------------------------
 * בעמוד הבית מוצגים שישה זוגות מתוך עשרים, ועד עכשיו לא הייתה שום דרך
 * לדעת שיש עוד — מי שהתרשמה מהתוצאות פשוט המשיכה לגלול.
 *
 * ⚠️ מכוון שזה קישור טקסט ולא כפתור: מתחת לרשת כבר יושב כפתור הזהב של
 * יצירת הקשר, ושני כפתורים צמודים מתחרים זה בזה. הקישור משתמש בדיוק
 * באותו סגנון של `.rkb__more` (רצועת הלוגואים) — אותה שפה, לא שפה שלישית.
 * ================================================================== */
.bamore {
	margin-top: 26px;
	text-align: center;
}
.bamore a {
	color: var(--gold-tx);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	transition: var(--t);
}
.bamore a:hover,
.bamore a:focus-visible {
	color: var(--gold-btn-dp);
}
/* ⚠️ החץ מסתובב בעברית: ‎←‎ מצביע שמאלה, וזה הכיוון "קדימה" ב-RTL.
   הוא aria-hidden, כדי שקורא מסך לא יקריא "חץ שמאלה" אחרי הטקסט. */
.bamore span {
	display: inline-block;
	margin-inline-start: 4px;
	transition: transform var(--t);
}
.bamore a:hover span {
	transform: translateX(-4px);
}

/* ================================================================== *
 * 49. שורת משנה מתחת לכותרת סקשן
 * ------------------------------------------------------------------
 * רוחלי ביקשה (27.8.2026) להוסיף מתחת ל"הטיפולים שלנו" שתי שורות קופי
 * "שייראה יותר מקצועי". השורה הראשונה היא הכרזה, השנייה היא ההסבר.
 *
 * ⚠️ השורה הראשונה בדיו ולא בזהב, בכוונה. הכותרת מעליה כבר זהובה, ושתי
 * שורות זהב צמודות מבטלות זו את זו — ההיררכיה כאן נוצרת מגודל ומשקל,
 * לא מצבע שלישי.
 * ================================================================== */
.sec-sub {
	color: var(--ink);
	font-family: var(--display);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 500;
	line-height: 1.45;
	margin-bottom: 8px;
	max-width: 52ch;
}
/* הפסקה שאחריה נצמדת אליה ולא פותחת מרווח חדש. */
.sec-sub + .lead {
	margin-top: 0;
}

/* ================================================================== *
 * 50. עמוד הגלריה — בז' רצוף
 * ------------------------------------------------------------------
 * סער (31.8.2026): "עדיף כבר שכל הדף של הגלריה יהיה בז', כי זה נראה
 * קצת מוזר עכשיו."
 *
 * המצב שהיה: ‎.phead‎ (הכותרת) ופסקת הפתיחה יושבים על לבן, ומתחתיהם
 * ‎.basec‎ (הרשת) ו-‎.csec--form‎ שכבר בז'. התוצאה היא עמוד חצוי — חצי עליון
 * לבן וחצי תחתון בז' — וזה בדיוק מה שנראה מוזר.
 *
 * ⚠️ הפתרון הוא לצבוע את ה-body ולא כל סקציה בנפרד: ה-‎.wrap‎-ים שבין
 * הסקציות אינם נושאים רקע משלהם, ולכן צביעה נקודתית הייתה משאירה
 * פסים לבנים דקים ביניהם.
 *
 * ⚠️ הכרטיסים עצמם נשארים לבנים (‎.bapair{background:#fff}‎) **בכוונה** —
 * זה מה שמפריד ביניהם לרקע עכשיו, אחרי שהרקע כבר לא לבן. בלי זה הרשת
 * מאבדת את הקצוות והצילומים נשפכים אחד לתוך השני.
 * ================================================================== */
body.page-id-51 {
	background: var(--cream-deep);
}
body.page-id-51 .phead,
body.page-id-51 .sec.basec,
body.page-id-51 .csec--form {
	background: var(--cream-deep);
}
/* הקו מתחת לכותרת נשאר: על רקע אחיד הוא ההפרדה היחידה בין הכותרת
   לרשת, והוא עדין מספיק (‎--line‎ על ‎--cream-deep‎) כדי לא לשבור את הרצף. */