@charset "UTF-8";

/* ============================================================================
   Real Media - חבילת תיקוני נגישות לאתר drkaplan-walach.co.il
   ת"י 5568 חלק 1 / WCAG 2.0 רמה AA
   ----------------------------------------------------------------------------
   הקובץ מאורגן לפי קריטריון. כל בלוק נושא את מספר הקריטריון ואת הנימוק
   המדוד שבגללו הוא קיים. אין תלות בשום ספרייה חיצונית.

   סדר הבלוקים בקובץ:
     0.  עזרים משותפים (מוסתר ויזואלית)
     1.  1.3.1  - טיפוגרפיה של ההדר והפוטר אחרי שינוי תגיות הכותרות
     2.  2.4.1  - יעד קישורי הדילוג (#content)
     3.  3.3.2  - תוויות נראות בטופס יצירת הקשר
     4.  1.2.2  - שכבת כתוביות לסרטון + כפתור הפעלה/כיבוי
     5.  1.2.3  - בלוק התמליל מתחת לסרטון
     6.  1.4.3  - יחסי ניגודיות (תפריט, טקסט גוף, הירו, כרטיסי בלוג,
                  פסקת המבוא לטופס, אריחי השירותים בעמוד הרוסי)
     7.  2.4.7  - חיווי פוקוס (ווידג'ט החיפוש + כותרות אקורדיון/טאבים)
     8.  1.4.1  - קישורים בגוף הטקסט לא מסומנים בצבע בלבד
   ============================================================================ */


/* ============================================================================
   0. עזרים משותפים
   ============================================================================ */

/* "מוסתר ויזואלית" - הטקסט נשאר זמין לקורא מסך ולניווט לפי כותרות,
   אבל אינו תופס מקום ואינו נראה. אין שימוש ב-display:none או ב-visibility:hidden
   כי הם היו מסתירים את הטקסט גם מקורא המסך.

   שני שמות המחלקה מוגדרים יחד בכוונה: .realmedia-accessibility-visually-hidden משמש את מודול
   1.3.1 של העמוד הרוסי (ה-H1 המוזרק), ו-.realmedia-accessibility-sr-only משמש את מודול 1.2.3
   (הרמז שמקושר ל-iframe דרך aria-describedby). ההתנהגות זהה, והאיחוד כאן
   מונע שכפול של אותה הגדרה בשני מקומות. */
.realmedia-accessibility-visually-hidden,
.realmedia-accessibility-sr-only
{
    position: absolute !important;   /* חובה: להוציא מזרימת המסמך בלי להסתיר מ-AT */
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ============================================================================
   1. 1.3.1 - מבנה כותרות בהדר ובפוטר
   ============================================================================ */

/* פרטי הקשר בהדר (כתובת + שני מספרי הטלפון) מומרים ב-JS מתגיות H5/H3 לתגית p.
   בתבנית, ה-font-size מגיע מכלל מבוסס-מחלקה (ולכן נשמר), אבל ה-margin
   וה-line-height מגיעים מכלל מבוסס-תגית של הכותרות - ולכן חייבים לשחזר אותם
   כאן, אחרת המעבר ל-p מגדיל את גובה השורה מ-21.6px ל-27px ומאפס את
   ה-margin-top של 8px, מה שמזיז את ההדר.
   הערכים כאן נמדדו בפועל על העמוד החי (getComputedStyle):
   font-size: 18px, line-height: 21.6px (= 1.2), margin: 8px 0 0. */
.elementor-location-header .elementor-widget-image-box p.elementor-image-box-title,
.elementor-location-header .elementor-widget-icon-box p.elementor-icon-box-title
{
    margin: 8px 0 0;
    line-height: 1.2;
}

/* כותרות שלושת גושי הפוטר.
   הכלל מקבע את הטיפוגרפיה הקיימת של שלוש כותרות העמודות בפוטר
   ("המרפאה" / "קישורים מהירים" / "שעות פעילות המרפאה").
   כרגע הוא no-op מוחלט - הערכים זהים למה שנמדד בעמוד החי
   (20px / 600 / line-height 20px / margin 0).
   הוא נחוץ ברגע שהתיקון ייעשה במקור באלמנטור ותגית הווידג'ט תשונה
   מ-H5 ל-H2: ה-20px הנוכחי מגיע מכלל מבוסס-תגית h5 ולא מהגדרת
   טיפוגרפיה של הווידג'ט, ולכן בלי הכלל הזה מעבר ל-H2 היה משנה את הגודל.

   חשוב: הסלקטור ממוקד לשלושת מזהי הווידג'טים בלבד ולא לכל הסקציה,
   כי באותה סקציה יש עוד שישה וידג'טי heading (שורות שעות הפעילות)
   שמרונדרים כ-div ב-16px - כלל רחב היה מגדיל אותם ל-20px ומאריך
   את הפוטר ב-12px (נמדד בפועל). */
.elementor-location-footer .elementor-element-d07d2e2 .elementor-heading-title,
.elementor-location-footer .elementor-element-fdcdee7 .elementor-heading-title,
.elementor-location-footer .elementor-element-15d1e26 .elementor-heading-title
{
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}


/* ============================================================================
   2. 2.4.1 - יעד קישורי הדילוג
   ============================================================================ */

/* מכל התוכן הראשי מקבל פוקוס תכנותי בלבד (tabindex="-1") אחרי לחיצה על
   "דילוג לתוכן". הוא אינו רכיב אינטראקטיבי, אינו נמצא בסדר הטאבים, ולכן
   טבעת הפוקוס שהדפדפן מצייר סביבו (נמדד: outline "auto 1px rgb(0,95,204)"
   סביב כל שטח העמוד) רק מבלבלת.
   הכלל ממוקד ל-#content בעל tabindex="-1" בלבד, כדי שלא יבטל סימון פוקוס
   של שום רכיב אינטראקטיבי אמיתי. */
#content[tabindex="-1"]:focus,
#content[tabindex="-1"]:focus-visible
{
    outline: none;
    box-shadow: none;
}


/* ============================================================================
   3. 3.3.2 - תוויות נראות לעין בטופס יצירת הקשר (Elementor Form)
   ----------------------------------------------------------------------------
   הרקע האפקטיבי מאחורי הטופס נמדד כ-rgb(255,255,255) בשני המופעים
   (הטופס המוטמע בעמוד השירות והטופס שבתוך פופאפ 982).
   ============================================================================ */

/* .elementor-field-group הוא flex עם flex-wrap: wrap,
   ולכן תווית ברוחב 100% תופסת שורה משל עצמה מעל השדה */
.elementor-form.realmedia-accessibility-labels-visible .elementor-field-group > label.elementor-field-label
{
    position: static;
    order: -1;              /* התווית תמיד לפני השדה בסדר הוויזואלי */
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    margin: 0 0 6px;
    padding: 0;
    overflow: visible;
    clip: auto;             /* ביטול ה-clip של elementor-screen-only */
    clip-path: none;
    color: #333333;         /* 12.63:1 מול הרקע הלבן */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;      /* RTL: מיושר לימין */
    cursor: pointer;        /* הקלקה על התווית ממקדת את השדה */
}

/* כוכבית שדה חובה - ויזואלית בלבד (aria-hidden בקוד ה-JS),
   כדי שהשם הנגיש של השדה יישאר נקי */
.elementor-form.realmedia-accessibility-labels-visible .realmedia-accessibility-required-mark
{
    margin-inline-start: 3px;
    color: #a4262c;         /* 6.42:1 מול הרקע הלבן */
    font-weight: 700;
}

/* הסבר קבוע בראש הטופס: מה משמעות הכוכבית */
.elementor-form.realmedia-accessibility-labels-visible .realmedia-accessibility-form-legend
{
    flex: 0 0 100%;
    width: 100%;
    margin: 0 5px 14px;
    padding: 0;
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
    text-align: start;
}

/* רמז פורמט לשדה (מגיע מתוך מאפיין title שאלמנטור מייצר לשדה הטלפון) */
.elementor-form.realmedia-accessibility-labels-visible .realmedia-accessibility-field-hint
{
    flex: 0 0 100%;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    color: #4a4a4a;         /* 8.59:1 מול הרקע הלבן */
    font-size: 13px;
    line-height: 1.4;
    text-align: start;
}

/* בטלפון נייד - התוויות לא ידחסו את השדות */
@media (max-width: 767px)
{
    .elementor-form.realmedia-accessibility-labels-visible .elementor-field-group > label.elementor-field-label
    {
        font-size: 14px;
        margin-bottom: 5px;
    }
}


/* ============================================================================
   4. 1.2.2 - כתוביות מסונכרנות לסרטון המוטמע (video id -N_HZS8uNRY)
   ----------------------------------------------------------------------------
   ווידג'ט אלמנטור: .elementor-element-e18fdac (video.default)
   ה-iframe: iframe#widget2.elementor-video

   שימו לב: הכללים האלה מתעוררים רק כאשר מערך CUES בקובץ ה-JS מלא.
   כל עוד הוא ריק, שכבת הכתוביות אינה נבנית כלל וכל הבלוק הזה לא בא לידי ביטוי.
   ============================================================================ */

/* העוטף .elementor-wrapper הוא position:static כברירת מחדל (נמדד),
   ולכן חייבים להפוך אותו ל-relative כדי לעגן אליו את שכבת הכתוביות. */
.elementor-widget-video .elementor-wrapper.realmedia-accessibility-cc-host
{
    position: relative;
}

/* שכבת הכתובית עצמה - יושבת מעל פס הבקרה של יוטיוב */
.realmedia-accessibility-cc-overlay
{
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: clamp(40px, 13%, 68px);
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 0 0.75rem;
    /* חובה: אחרת השכבה חוסמת קליקים על כפתורי הנגן */
    pointer-events: none;
}

.realmedia-accessibility-cc-overlay[hidden]
{
    display: none;
}

.realmedia-accessibility-cc-overlay__cue
{
    max-width: 94%;
    margin: 0;
    padding: 0.3em 0.65em;
    /* יחס ניגודיות של לבן מול השכבה הזו הוא 13.6:1 גם מעל פריים לבן לגמרי */
    background-color: rgba(0, 0, 0, 0.82);
    color: #ffffff;
    font-family: Rubik, "Varela Round", sans-serif;
    font-size: clamp(15px, 2.6vw, 20px);
    line-height: 1.45;
    text-align: center;
    border-radius: 4px;
    white-space: pre-line;
    /* הסרטון בעברית והעמוד ב-RTL - בידוד דו-כיווני כדי שפיסוק לא יקפוץ */
    unicode-bidi: isolate;
}

.realmedia-accessibility-cc-overlay__cue:empty
{
    display: none;
}

/* --- כפתור הדלקה/כיבוי של הכתוביות --- */

.realmedia-accessibility-cc-controls
{
    display: flex;
    justify-content: flex-start;
    margin-block-start: 0.5rem;
}

/* ערכת הנושא hello-elementor מגדירה
   [type="button"]:focus, ..., button:focus, button:hover { background-color:#c36 }
   בסגוליות (0,1,1), שגוברת על סלקטור מחלקה בודד (0,1,0) וצובעת את הכפתור
   בוורוד ברגע שהוא מקבל פוקוס. לכן כל מצב נכתב כאן במפורש עם מחלקה +
   פסאודו-מחלקה (0,2,0) - כך גוברים על ערכת הנושא בלי שום important. */
.realmedia-accessibility-cc-toggle,
.realmedia-accessibility-cc-toggle:focus,
.realmedia-accessibility-cc-toggle:focus-visible,
.realmedia-accessibility-cc-toggle:active
{
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1em;
    border: 1px solid #005c81;
    border-radius: 4px;
    /* כחול המותג של האתר (נמדד: rgb(0,124,174)) - לבן עליו נותן 4.67:1 */
    background-color: #007cae;
    color: #ffffff;
    font-family: "Varela Round", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
}

.realmedia-accessibility-cc-toggle:hover,
.realmedia-accessibility-cc-toggle:focus:hover
{
    background-color: #005c81;
    color: #ffffff;
}

.realmedia-accessibility-cc-toggle:focus,
.realmedia-accessibility-cc-toggle:focus-visible
{
    outline: 3px solid #d40000;
    outline-offset: 2px;
}

/* מצב "כתוביות כבויות" - כפתור הפוך, גם הוא בכל המצבים */
.realmedia-accessibility-cc-toggle[aria-pressed="false"],
.realmedia-accessibility-cc-toggle[aria-pressed="false"]:focus,
.realmedia-accessibility-cc-toggle[aria-pressed="false"]:active
{
    background-color: #ffffff;
    color: #0a3d52;
}

.realmedia-accessibility-cc-toggle[aria-pressed="false"]:hover,
.realmedia-accessibility-cc-toggle[aria-pressed="false"]:focus:hover
{
    background-color: #e8f2f7;
    color: #0a3d52;
}

@media (prefers-reduced-motion: no-preference)
{
    .realmedia-accessibility-cc-toggle
    {
        transition: background-color 0.15s ease-in-out;
    }
}


/* ============================================================================
   5. 1.2.3 - חלופה טקסטואלית (תמליל) לסרטון המוטמע
   ----------------------------------------------------------------------------
   נבנה מתחת לווידג'ט .elementor-element-e18fdac, על רקע לבן (נמדד: body #fff).

   שימו לב: הבלוק נבנה רק כאשר מערך TRANSCRIPT בקובץ ה-JS מלא.
   כל עוד הוא ריק, מודול 1.2.3 מתקן רק את השם הנגיש של ה-iframe.
   ============================================================================ */

.realmedia-accessibility-video-alt
{
    margin-block-start: 1rem;
    /* התמליל ברוסית בתוך עמוד RTL - מיישרים אותו לשמאל */
    direction: ltr;
    text-align: start;
    font-family: Rubik, "Varela Round", sans-serif;
}

/* חובה: ההורה .elementor-widget-wrap הוא display:flex (נמדד), ולכן ה-<section>
   המוזרק מתכווץ ל-300px בתוך עמודה של 550px ולא מיושר לשאר התוכן. */
.elementor-widget-wrap > .realmedia-accessibility-video-alt,
.realmedia-accessibility-video-alt
{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.realmedia-accessibility-video-alt__title
{
    margin: 0 0 0.5rem;
    color: #0a3d52;              /* 10.2:1 מול לבן */
    font-family: "Varela Round", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
}

.realmedia-accessibility-video-alt__details
{
    border: 1px solid #b9ccd6;
    border-radius: 4px;
    background-color: #f6f9fb;
}

.realmedia-accessibility-video-alt__summary
{
    display: block;              /* מנטרל את המשולש של ווב-קיט כדי לשלוט בעיצוב */
    padding: 0.65em 0.9em;
    color: #0a3d52;              /* 9.8:1 מול #f6f9fb */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.realmedia-accessibility-video-alt__summary::-webkit-details-marker
{
    display: none;
}

.realmedia-accessibility-video-alt__summary::before
{
    content: "\25B8";            /* משולש ימינה */
    display: inline-block;
    margin-inline-end: 0.5em;
    color: #007cae;
}

.realmedia-accessibility-video-alt__details[open] > .realmedia-accessibility-video-alt__summary::before
{
    content: "\25BE";            /* משולש למטה */
}

.realmedia-accessibility-video-alt__summary:hover
{
    background-color: #e8f2f7;
}

.realmedia-accessibility-video-alt__summary:focus-visible,
.realmedia-accessibility-video-alt__summary:focus
{
    outline: 3px solid #d40000;
    outline-offset: -3px;
}

.realmedia-accessibility-video-alt__body
{
    padding: 0 0.9em 0.9em;
    border-block-start: 1px solid #dbe6ec;
    color: #24333b;              /* 11.9:1 מול #f6f9fb */
    font-size: 16px;
    line-height: 1.65;
}

.realmedia-accessibility-video-alt__body > p
{
    margin: 0.8em 0 0;
}

.realmedia-accessibility-video-alt__note
{
    margin: 0.9em 0 0;
    color: #3d4d56;              /* 8.2:1 מול #f6f9fb */
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference)
{
    .realmedia-accessibility-video-alt__summary
    {
        transition: background-color 0.15s ease-in-out;
    }
}


/* ============================================================================
   6. 1.4.3 - יחסי ניגודיות
   ============================================================================ */

/* [1] פריט התפריט הפעיל (וגם הובר/פוקוס) בהדר -> #6EC1E4 על לבן = 2.02:1
       [2] טקסט הגוף הדומיננטי -> #7A7A7A על לבן = 4.29:1
   שורש הבעיה בשניהם: ערכת הצבעים הגלובלית של אלמנטור מעולם לא הותאמה,
   והמשתנים נשארו בברירת המחדל. שינוי המשתנים מתקן עשרות אלמנטים בבת אחת.
   שני המשתנים אוחדו לבלוק אחד כי הם מוגדרים על אותו סלקטור בדיוק. */
body.elementor-kit-692
{
    --e-global-color-primary: #007CAE;
    --e-global-color-text: #6B6B6B;
}

/* [1] גיבוי מפורש לאותם סלקטורים שאלמנטור מייצר, עם body בתחילה
       כדי לנצח בספציפיות (0,4,1 מול 0,4,0) בלי !important */
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--main .elementor-item:hover,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--main .elementor-item:focus,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--main .elementor-item.elementor-item-active,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--main .elementor-item.highlighted
{
    color: #007CAE;
    fill: #007CAE;
}

/* [1] חובה - מניעת רגרסיה: התפריט הנפתח/מובייל יושב על "גלולה" כהה #3F444B,
       ושם #6EC1E4 כבר עומד בתקן (4.87:1). בלי השורות האלה הכהיית המשתנה
       הייתה מורידה אותו ל-2.10:1, כלומר יוצרת ליקוי חדש. */
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--dropdown a.elementor-item-active,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--dropdown a.elementor-item:hover,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--dropdown a.elementor-item:focus,
body .elementor-935 .elementor-element.elementor-element-11f8e8f .elementor-nav-menu--dropdown a.elementor-item.highlighted
{
    color: #6EC1E4;
}

/* [2] המופע היחיד שבו צבע הטקסט נצרב ידנית בהגדרת הווידג'ט
       (עמוד השתלים, post-1304):
       .elementor-1304 .elementor-element-d054c0a { color:#7A7A7A }
       הוא לא עובר דרך המשתנה ולכן צריך שורה נפרדת. */
body .elementor-1304 .elementor-element.elementor-element-d054c0a
{
    color: #6B6B6B;
}

/* [3] כותרות ההירו בדף הבית מעל צילום המרפאה.
       שכבת ההצללה קיימת אך חלשה מדי (opacity 0.42). מוסיפים שכבת שחור
       אחידה מתחת לגרדיאנט המותג ומחזקים את השקיפות. שומר על הגרדיאנט
       הכחול-שחור המקורי ומבטיח מינימום 4.5:1 גם בקרופ של המובייל. */
body .elementor-2 .elementor-element.elementor-element-51e6d5d4 > .elementor-background-overlay
{
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        linear-gradient(90deg, var(--e-global-color-95645b9) 1%, var(--e-global-color-41c4c6e5) 50%);
    opacity: 0.72;
}

/* [4] פסקת המבוא לטופס יצירת הקשר - #777777 על לבן = 4.48:1 (נדרש 4.5).
       הצבע נצרב ידנית בהגדרת הווידג'ט ולכן אינו עובר דרך --e-global-color-text:
         post-950.css: .elementor-950 .elementor-element-1d8da4c5 { color:#777777 }
         post-982.css: .elementor-982 .elementor-element-62be713 { color:#777777 }
       (950 = תבנית עמוד השירות, 982 = הפופאפ - אותה פסקה בדיוק בשני המופעים.
       שני אלה הם המופעים היחידים של #777777 בכל קובצי ה-CSS של האתר - נבדק
       בגריפ על תשעת קובצי post-*.css + global.css.)
       הסלקטור המקורי הוא (0,3,0); התוספת של body נותנת (0,3,1) ומנצחת בלי
       !important - בדיוק אותה טכניקה שבה מטופל [2] למעלה.
       #6B6B6B על לבן = 5.31:1. */
body .elementor-950 .elementor-element.elementor-element-1d8da4c5,
body .elementor-982 .elementor-element.elementor-element-62be713,
/* 1056 = תבנית הפוסט הבודד. אותה פסקה בדיוק, מזהה ווידג'ט שלישי.
   התווספה 17.08.2026 אחרי שגריפ על כל 43 קובצי ה-CSS מצא שלושה מופעים
   של #777777 ולא שניים. הגריפ המקורי המתועד למעלה כיסה תשעה קבצים בלבד,
   ולכן כל 14 הפוסטים באתר נשארו עם 4.47:1 - כלומר תבנית שלמה החמיצה
   את התיקון. זו הסיבה שעדיף סלקטור מבני על פני רשימת מזהים. */
body .elementor-1056 .elementor-element.elementor-element-52f91990
{
    color: #6B6B6B;
}

/* [4ב] עמוד 18 - חמישה span עם הצבע צרוב במאפיין style בתוך התוכן עצמו:
        style="color: rgb(122, 122, 122)" = 4.29:1 על לבן (נדרש 4.5).
        סגנון מוטבע גובר על כל גיליון סגנונות, ולכן זה המקום היחיד בחבילה
        שבו !important מוצדק - אין דרך אחרת להגיע אליו מ-CSS.
        ההיקף מצומצם לצבע המדויק הזה בלבד, ולא לכל סגנון מוטבע.
        #6B6B6B = 5.31:1. */
body [style*="rgb(122, 122, 122)"],
body [style*="rgb(122,122,122)"],
body [style*="#7a7a7a"],
body [style*="#7A7A7A"]
{
    color: #6B6B6B !important;
}

/* [4ג] עמוד 8 - הכותרת "מומחית בכירורגיית פה ולסתות".
        הצבע #007CAE על רקע לבן הוא 4.67:1 ותקין, אבל הווידג'ט מוסיף
        text-shadow: 0 0 10px rgba(0,0,0,0.3) שמכהה את הרקע של הטקסט עצמו
        ל-#f1f1f1, ואז היחס יורד ל-4.13:1.
        מסירים את ההילה ולא את הצבע - כך הכחול המותגי נשאר בדיוק כפי שהוא,
        והיחס חוזר ל-4.67:1. */
body .elementor-8 .elementor-element.elementor-element-b29313a .elementor-heading-title
{
    text-shadow: none;
}

/* [5] ווידג'ט כרטיסי הבלוג (posts / archive-posts).
       שלושה צבעים שמגיעים מברירת המחדל של אלמנטור ולא הותאמו מעולם:
         .elementor-posts .elementor-post__meta-data  -> #ADADAD  2.24:1  (12px)
         .elementor-posts .elementor-post__excerpt p  -> #777777  4.48:1  (14px)
         .elementor-widget-posts .elementor-post__read-more -> var(--e-global-color-accent)
                                                    = #61CE70  1.99:1  (12px)
       שלושתם טקסט רגיל (מתחת ל-18.66px), ולכן נדרש 4.5:1.

       למה לא לשנות את --e-global-color-accent עצמו, כפי ששונה --e-global-color-text:
       המשתנה הזה משמש גם ברקעים כהים ובכפתורים ברחבי האתר, והכהייתו הייתה
       יוצרת ליקויים חדשים במקומות שלא נמדדו. לכן ההיקף כאן מצומצם לווידג'ט
       הכרטיסים בלבד.

       הירוק החדש הוא #61CE70 מוכהה בפקטור 0.60 - אותו גוון (hue 128°) בדיוק,
       רק כהה יותר: #3A7C43 = 5.07:1 על לבן.
       האפור החדש #6B6B6B = 5.31:1, זהה ל---e-global-color-text שכבר נקבע ב-[1]. */
body .elementor-posts .elementor-post__meta-data
{
    color: #6B6B6B;
}

body .elementor-posts .elementor-post__excerpt p
{
    color: #6B6B6B;
}

body .elementor-widget-posts .elementor-post__read-more,
body .elementor-widget-archive-posts .elementor-post__read-more
{
    color: #3A7C43;
}

/* מצבי הובר/פוקוס של אותו קישור - כדי שלא יחזרו לירוק הבהיר */
body .elementor-widget-posts .elementor-post__read-more:hover,
body .elementor-widget-posts .elementor-post__read-more:focus,
body .elementor-widget-archive-posts .elementor-post__read-more:hover,
body .elementor-widget-archive-posts .elementor-post__read-more:focus
{
    color: #2C5F33;
}

/* [6] אריחי השירותים בעמוד הרוסי (page-id-735).
       11 כותרות אריח, לבן על צילום, 14px - כלומר טקסט רגיל שדורש 4.5:1.
       שכבת ההצללה הקיימת היא background-color:#00000078 (אלפא 0.47), ובמדידת
       פיקסלים (הטקסט הופך לשקוף והרקע הבהיר ביותר מתחתיו נמדד) שש מהן נפלו:
       3.59 / 3.61 / 3.67 / 3.85 / 3.89 / 4.23:1.

       הפתרון אינו הכהיית כל האריח אלא שכבת גרדיאנט בתחתיתו בלבד:
       הטקסט יושב תמיד בחלק התחתון של האריח. נמדד בשלושה רוחבים - הכותרת
       הגבוהה ביותר מתחילה ב-50.7% מלמטה ב-1920px, ב-60.5% מלמטה ב-768px
       (שם הכותרות נשברות ליותר שורות) וב-37.8% ב-375px. לכן העוצמה מלאה עד
       72% מלמטה והדהייה מסתיימת ב-96% - מרווח ביטחון מעל הכותרת הגבוהה ביותר
       שנמדדה, והחלק העליון של הצילום נשאר כפי שהוא.
       חישוב: אלפא מצטברת בתחתית = 1 - (1-0.47)*(1-0.38) = 0.67.

       ההיקף מוגבל לעמוד הרוסי בכוונה: באריחים המקבילים בדף הבית ובעמוד השירות
       הכותרת היא 25px (טקסט גדול, נדרש 3:1) והם נמדדו 3.03-4.70:1 - עוברים.
       הכהייתם הייתה שינוי עיצובי מיותר.

       background-image ולא background-color: כך הכלל אינו מתנגש עם
       .elementor-735 ... .elementor-cta:not(:hover) .elementor-cta__bg-overlay
       שקובע את הצבע, והוא חל גם במצב hover (שבו האתר מסיר את ההצללה). */
body.page-id-735 .elementor-cta--skin-cover .elementor-cta__bg-overlay
{
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0.38) 72%,
        rgba(0, 0, 0, 0) 96%
    );
}


/* ============================================================================
   7. 2.4.7 - חיווי פוקוס
   ============================================================================ */

/* --- 7א. כותרות אקורדיון / טאבים / טוגל --- */

/* הליקוי שתועד בעמוד השירות: כותרות האקורדיון הן div עם tabindex="0",
   ולכן הן נמצאות במסלול ה-Tab (נמדד: עצירה מספר 26 במסלול מקלדת אמיתי),
   אבל אלמנטור מאפס להן את חיווי הפוקוס:
   .elementor-accordion .elementor-tab-title:focus { outline:none }
   נמדד לפני התיקון: outlineStyle=none, boxShadow=none, backgroundColor
   ללא שינוי - ובהשוואת צילומי מסך של אותה כותרת ממוקדת מול לא ממוקדת
   0 פיקסלים שונים מתוך 67,071.

   outline-offset שלילי במכוון: הכותרות תופסות את מלוא רוחב הווידג'ט
   ויושבות בתוך מכולות עם overflow, ולכן טבעת חיצונית עלולה להיחתך.
   ציור בתוך גבולות האלמנט מבטיח שהטבעת תמיד נראית.
   #00374F על הרקע הלבן = 12.4:1, ומול המסגרת האפורה של הכותרת > 3:1. */
body .elementor-accordion .elementor-tab-title:focus,
body .elementor-accordion .elementor-tab-title:focus-visible,
body .elementor-toggle .elementor-tab-title:focus,
body .elementor-toggle .elementor-tab-title:focus-visible,
body .elementor-tabs .elementor-tab-title:focus,
body .elementor-tabs .elementor-tab-title:focus-visible,
body .elementor-tab-title[tabindex]:focus,
body .elementor-tab-title[tabindex]:focus-visible
{
    outline: 3px solid #d40000;
    outline-offset: -3px;
}

/* --- 7ב. ווידג'ט החיפוש בהדר --- */

body .elementor-search-form input[type="search"].elementor-search-form__input:focus
{
    outline: 3px solid #d40000;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.9);
}

body .elementor-search-form .elementor-search-form__toggle:focus
{
    outline: 3px solid #d40000;
    outline-offset: 3px;
    border-radius: 2px;
}

body .elementor-search-form .dialog-lightbox-close-button:focus
{
    outline: 3px solid #d40000;
    outline-offset: 3px;
    border-radius: 2px;
}

/* חובה - מניעת רגרסיה מהכהיית --e-global-color-text ב-[1] של סעיף 6:
   בחלון החיפוש המלא הרקע הוא rgba(0,0,0,0.8) מעל לבן (נמדד: rgb(51,51,51)),
   וטקסט ההקלדה נצבע על ידי הכלל הבא מתוך global.css של אלמנטור:
     .elementor-widget-search-form.elementor-search-form--skin-full_screen
       input[type="search"].elementor-search-form__input { color: var(--e-global-color-text) }
   הסגוליות שלו היא (0,4,1). הניסוח הקודם כאן היה (0,3,2) - כלומר הפסיד,
   וטקסט ההקלדה ירד ל-2.37:1. הניסוח הנוכחי מוסיף את המחלקה
   .elementor-widget-search-form ואת body, ומגיע ל-(0,4,2) - מנצח בלי
   !important. לבן על rgb(51,51,51) = 12.63:1.
   הסלקטור הקצר יותר נשמר כרשת ביטחון לתבניות שבהן הווידג'ט אינו עטוף
   באותה מחלקה. */
body .elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input,
body .elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input:focus,
body .elementor-widget-search-form.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input,
body .elementor-widget-search-form.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input:focus
{
    color: #FFFFFF;
}

body .elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input::placeholder,
body .elementor-widget-search-form.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input::placeholder
{
    color: #E8E8E8;
    opacity: 1;
}

/* התוספת החסרה - בלעדיה 2.4.7 לא נסגר:
   כשחלון החיפוש סגור המכולה היא opacity:0 בלבד, ולכן השדה (0x0)
   וכפתור הסגירה (tabindex=0) נשארים בסדר הטאבים ומשתמש מקלדת
   נוחת על עצירת פוקוס בלתי נראית. אלמנטור מוסיף/מסיר את המחלקה
   .elementor-search-form--full-screen מהמכולה, ולכן visibility
   מותנה-מחלקה מוציא אותם מסדר הטאבים ב-CSS טהור.
   מוגבל לסקין full_screen כדי לא להסתיר ווידג'ט חיפוש רגיל. */
body .elementor-search-form--skin-full_screen .elementor-search-form__container:not(.elementor-search-form--full-screen)
{
    visibility: hidden;
}

body .elementor-search-form--skin-full_screen .elementor-search-form__container.elementor-search-form--full-screen
{
    visibility: visible;
}


/* ----------------------------------------------------------------------------
   7ב. חיווי פוקוס אדום על כל קישור באתר
   ----------------------------------------------------------------------------
   הבדיקה על 44 העמודים מצאה ש-163 אריחי ה-CTA של אלמנטור ב-37 עמודים
   מדווחים focus-visible ומחשבים outline - ובכל זאת צובעים 0 מתוך 119,392
   פיקסלים. שתי סיבות מצטברות:
     א. .elementor-widget-container הוא overflow:hidden, ולכן טבעת חיצונית נחתכת.
     ב. .elementor-cta__bg-overlay ממוקם אבסולוטית מעל הקישור ומכסה טבעת פנימית.

   לכן שתי שכבות ולא אחת:
     - outline רגיל לכלל הקישורים באתר.
     - טבעת ::after לאריחים, מצוירת בתוך הקישור ומעל שכבת הרקע. כל 163
       העוגנים הם position:relative, והשכבה שמכסה אותם מגיעה עד z-index 2.

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

body a:focus
{
    outline: 3px solid #d40000 !important;
    outline-offset: 2px;
}

body a:focus-visible
{
    outline: 3px solid #d40000 !important;
    outline-offset: 2px;
}

/* בלחיצת עכבר לא מציגים טבעת, בדפדפן שיודע להבחין */
body a:focus:not(:focus-visible)
{
    outline: none !important;
}

/* אריחי ה-CTA - הטבעת מצוירת פנימה, כי המכל חותך כל דבר שיוצא ממנו */
body a.elementor-cta:focus::after
{
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 3px solid #d40000;
    z-index: 3;             /* מעל .elementor-cta__bg-overlay שמגיע ל-2 */
    pointer-events: none;
}

body a.elementor-cta:focus:not(:focus-visible)::after
{
    display: none;
}


/* ============================================================================
   8. 1.4.1 - קישורים בתוך גוף הטקסט מסומנים בצבע בלבד
   ----------------------------------------------------------------------------
   #007CAE מול טקסט הגוף האפור = 1.09:1 (נדרש 3:1 כדי שצבע לבדו יספיק).
   הפתרון: קו תחתון קבוע - טכניקת WCAG G182, תיקון הכשל F73.

   תוקן: הסלקטור המקורי ".elementor-widget-theme-post-content a" סרק את
   כל ווידג'ט התוכן והוסיף קו תחתון גם ל-7 כותרות אקורדיון ול-2 קישורי
   טלפון בעמוד השתלים. כאן ההיקף מצומצם לגוף טקסט אמיתי בלבד.
   ============================================================================ */

body .elementor-widget-text-editor .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"]):not([class*="elementor-accordion"]):not([class*="elementor-tab"]):not([class*="elementor-toggle"]),
body .elementor-widget-theme-post-content .elementor-widget-text-editor a:not([class*="elementor-button"]):not([class*="elementor-icon"]):not([class*="elementor-accordion"]):not([class*="elementor-tab"]):not([class*="elementor-toggle"]),
body .elementor-widget-theme-post-content > .elementor-widget-container > p a:not([class*="elementor-button"]):not([class*="elementor-icon"]),
body .elementor-widget-theme-post-content > .elementor-widget-container > ul a:not([class*="elementor-button"]):not([class*="elementor-icon"]),
body .elementor-widget-theme-post-content > .elementor-widget-container > ol a:not([class*="elementor-button"]):not([class*="elementor-icon"])
{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

body .elementor-widget-text-editor .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"]):not([class*="elementor-accordion"]):not([class*="elementor-tab"]):not([class*="elementor-toggle"]):hover,
body .elementor-widget-text-editor .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"]):not([class*="elementor-accordion"]):not([class*="elementor-tab"]):not([class*="elementor-toggle"]):focus,
body .elementor-widget-theme-post-content > .elementor-widget-container > p a:not([class*="elementor-button"]):not([class*="elementor-icon"]):hover,
body .elementor-widget-theme-post-content > .elementor-widget-container > p a:not([class*="elementor-button"]):not([class*="elementor-icon"]):focus
{
    text-decoration-thickness: 2px;
}


/* ----------------------------------------------------------------------------
   8ב. 1.4.1 - קישורים בגופי אקורדיון ובווידג'ט HTML
   ----------------------------------------------------------------------------
   הסריקה על 44 העמודים מצאה עשרה קישורים שנשארו מסומנים בצבע בלבד, בשלושה
   עמודים: 1148 (שיקום הפה), 10 (צור קשר) ו-437 (חוות דעת). היחס מול הטקסט
   הסובב הוא 1.14:1 ו-1.07:1 - נדרש 3:1 כדי שצבע לבדו יספיק - ואין קו תחתון,
   אין מסגרת, ואין שינוי במעבר עכבר או בפוקוס. כלומר טכניקת G183 אינה זמינה
   באף אחד משני חצאיה, וזה כשל F73 ברמה A.

   הכלל בסעיף 8 לא הגיע אליהם כי הם אינם בווידג'ט text-editor: ארבעה בגוף
   אקורדיון בעמוד 1148, ארבעה בעמוד 10, ושניים בייחוס של MedReviews שהוא
   ווידג'ט HTML.

   ההיקף מכוון ל-p ול-li בתוך גוף האקורדיון בלבד, ולא ל-.elementor-tab-title -
   הרחבה גורפת הייתה מוסיפה קו תחתון גם לכותרות האקורדיון, וזו בדיוק הטעות
   שתוקנה בסעיף 8. אומת חי: הכלל נוגע בעשרת העוגנים האלה ובאף אחד אחר.

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

body .elementor-tab-content p a:not([class*="elementor-button"]):not([class*="elementor-icon"]),
body .elementor-tab-content li a:not([class*="elementor-button"]):not([class*="elementor-icon"]),
body .elementor-widget-html .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"])
{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-skip-ink: auto;
}

body .elementor-tab-content p a:not([class*="elementor-button"]):not([class*="elementor-icon"]):hover,
body .elementor-tab-content p a:not([class*="elementor-button"]):not([class*="elementor-icon"]):focus,
body .elementor-tab-content li a:not([class*="elementor-button"]):not([class*="elementor-icon"]):hover,
body .elementor-tab-content li a:not([class*="elementor-button"]):not([class*="elementor-icon"]):focus,
body .elementor-widget-html .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"]):hover,
body .elementor-widget-html .elementor-widget-container a:not([class*="elementor-button"]):not([class*="elementor-icon"]):focus
{
    text-decoration-thickness: 2px;
}