/* =========================================================================
   מתנ"ס כפר תבור (מרכז 145) — סכמה 65
   הקובץ נכתב מחדש בעת המעבר מסכמה 6 לסכמה 65.
   כל הערכים נמדדו מקובצי העיצוב (desktop.jpg 1920x2691, mobile 385x3842)
   ולא הוערכו בעין. הצבעים נדגמו מקובצי המקור של המעצב (Asset 86-92.png).

   מבנה: כללים גלובליים (צבעים, מנגנונים) -> מדידות דסקטופ בתוך min-width ->
   התאמות מובייל בתוך max-width. הסדר הזה חיוני: הקובץ נטען אחרי
   responsive.css, ולכן כלל לא-ממודר כאן גובר על כללי המובייל של הסכמה
   באותה ספציפיות ומבטל אותם.
   ========================================================================= */

:root {
    /* ---- פלטת המותג, נדגמה מ-Asset 86-92.png (עיגולי הבאנר) ---- */
    --t-green: #2a994f;
    /* ירוק ראשי */
    --t-navy: #1e2b7a;
    /* כחול ראשי */
    --t-icon-blue: #4192c9;
    /* מסגרת אייקוני החיפוש/נגישות בהדר */
    --t-h2: #3e498d;
    /* צבע הכותרות הגדולות */
    --t-rule: #b4b5af;
    /* הפס האפור מתחת לכותרת */
    --t-disc-alpha: 0.91;
    /* אטימות עיגולי הבאנר, נמדדה 232/255 */

    /* ---- דריסת משתני הסכמה ----
       --yellow הוא צבע ההדגשה של סכמה 65 (כפתורים, טאבים, תגיות) ולא
       "צהוב" ממש; בעיצוב של כפר תבור תפקיד ההדגשה עובר לירוק.
       --dark-blue הוא הכחול הראשי של הסכמה ומוחלף לכחול של המותג. */
    --yellow: #2a994f;
    --dark-blue: #1e2b7a;
}


/* =========================================================================
   1. כללי
   ========================================================================= */

/* פס הגרדיאנט הצבעוני של הסכמה מוחלף בפס ירוק אחיד (נמדד 5px מתחת
   לבאנר, 11px מעל הפוטר). התמונה מוסרת ולא נצבעת מחדש. */
.grediant_pattern:after {
    background-image: none;
    background-color: var(--t-green);
    height: 11px;
}

.hero-banner-main.grediant_pattern:after {
    height: 5px;
}

/* אותו פס גרדיאנט חוזר בשני מקומות נוספים שדף הבית לא חושף, ולכן הם התגלו
   רק בבדיקת הדפים הפנימיים: הפס שמתחת לבאנר של כל דף פנימי, והפס האנכי לצד
   תפריט המובייל הפתוח. שניהם הופכים לירוק אחיד; גבהי הסכמה נשמרים, כי
   לדפים הפנימיים אין קובץ עיצוב שאפשר למדוד ממנו. */
.inner-banner::before {
    background-image: none;
    background-color: var(--t-green);
}

nav.active:before {
    background-image: none;
    background-color: var(--t-green);
}

/* הקישוט מתחת לכותרות: בסכמה זו זו קשת (smile.svg) ובעיצוב זהו מלבן אפור
   אחיד ברוחב 115px וגובה 5px, ולכן מוסרים את התמונה ומשאירים רקע צבוע. */
.smile:after {
    background-image: none;
    background-color: var(--t-rule);
    width: 115px;
    height: 5px;
    bottom: 40px;
}

footer .smile:after {
    background-color: #ffffff;
    bottom: 24px;
}

/* המרווחים סביב הכותרת נמדדו בנפרד לכל סקשן: מהדיו לפס האפור, ומהפס לתוכן.
   שינוי padding-bottom מזיז גם את הפס (הוא ממוקם יחסית לתחתית ה-h2), ולכן
   כל זוג מכוונן יחד — אחרת תיקון של אחד מקלקל את השני.
   אירועים: 20px מהדיו לפס, 34px מהפס לכרטיסים.
   חוגים:   25px מהדיו לפס, 24px מהפס לשורת החיפוש. */
.events-main h2 {
    padding-bottom: 48px;
}

.events-main .smile:after {
    bottom: 34px;
}

.tab-main h2 {
    padding-bottom: 42px;
}

.tab-main .smile:after {
    bottom: 24px;
}

h2,
.h2 {
    color: var(--t-h2);
}


/* =========================================================================
   2. סרגל הרשתות החברתיות
   ========================================================================= */

/* סדר האייקונים בעיצוב: וואטסאפ, פייסבוק, מייל, אינסטגרם, יומן.
   header65 פולט אותם בסדר אחר, ומכיוון שחלק מהם מותנים בנתונים (אינסטגרם
   ווואטסאפ מוצגים רק אם השדה מלא) אי אפשר להסתמך על nth-child. הבורר לפי
   שם קובץ האייקון עמיד לכל צירוף. דפדפן ללא :has() מקבל את סדר הסכמה. */
.icon-sidebar li:has(img[src*="whatsapp"]) {
    order: 1;
}

.icon-sidebar li:has(img[src*="facebook"]) {
    order: 2;
}

.icon-sidebar li:has(img[src*="mail"]) {
    order: 3;
}

.icon-sidebar li:has(img[src*="instagram"]) {
    order: 4;
}

.icon-sidebar li:has(img[src*="calendar"]) {
    order: 5;
}

.icon-sidebar li a {
    background-color: var(--t-navy);
}

.icon-sidebar li a:hover {
    background-color: var(--t-green);
}


/* =========================================================================
   3. באנר ראשי — צבעים ומנגנונים (מידות: ראה בלוקי ה-min-width)
   ========================================================================= */

.hero-banner-main .single-slide .btn {
    border-color: var(--t-green);
    background-color: var(--t-green);
    color: #ffffff;
}

.hero-banner-main .single-slide .btn:hover {
    background-color: #ffffff;
    color: var(--t-green);
    border-color: var(--t-green);
}

.hero-banner-main .swiper-pagination-bullet-active {
    background-color: var(--t-navy);
    border-color: #ffffff;
}

/* ---- צבעי עיגולי הפעילויות ----
   הצבע נקבע לפי מיקום (nth-child) ולא לפי מחלקה, כי הסכמה לא מקצה מחלקה
   לכל שורה — לכן סדר השורות (shluhaOrder) הוא שקובע איזה צבע נוחת על איזה
   עיגול. הסדר הנדרש מימין לשמאל מפורט במסמך המסירה לצוות התוכן. */
.hero-banner-main .activity-list li:nth-child(1) .single__activity {
    /* גיל רך וצהרונים */
    background-color: rgba(42, 153, 79, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(2) .single__activity {
    /* בית המוסיקה */
    background-color: rgba(221, 0, 1, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(3) .single__activity {
    /* חוגי הספורט */
    background-color: rgba(30, 43, 122, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(4) .single__activity {
    /* חוגים ומחול */
    background-color: rgba(186, 105, 30, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(5) .single__activity {
    /* קתדרה ומועדון אביב */
    background-color: rgba(112, 106, 140, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(6) .single__activity {
    /* ילדים ונוער */
    background-color: rgba(70, 123, 176, var(--t-disc-alpha));
}

.hero-banner-main .activity-list li:nth-child(7) .single__activity {
    /* ספרייה */
    background-color: rgba(129, 25, 25, var(--t-disc-alpha));
}


/* =========================================================================
   4. אירועים
   ========================================================================= */

/* הסכמה פורשת טקסטורה (pattern.png) מאחורי הסקשן; בעיצוב הרקע לבן נקי. */
.events-main {
    background-image: none;
    background-color: #ffffff;
}

/* גל ירוק מתחת לתמונת הכרטיס. אותו מנגנון של הסכמה, רק בגרסה ירוקה. */
.with-smile figure:after {
    background-image: url(../schema65/images/site/shape-green145.svg);
}

/* בעיצוב הכרטיס רחב 292px והמרווח בין כרטיסים 14px; ריפוד ברירת המחדל של
   bootstrap (15px) נותן 278px. שינוי הריפוד בלבד — הרוחב נשאר 25% ולכן
   השורה נשארת בת ארבעה כרטיסים. */
.events-main .row>[class*="col-lg-3"] {
    padding-left: 7.75px;
    padding-right: 7.75px;
}

.events-main .single-event {
    border-radius: 10px;
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.45);
}

.single-event figure img {
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}

/* מספר היום בעיצוב ירוק (בסכמה הוא בצבע ההדגשה הצהוב); הגודל 54px של
   הסכמה נמדד כנכון ולכן לא נדרס. */
.events-main .single-event .event-date {
    color: var(--t-green);
}

/* ה-PHP עוטף את החודש/התאריך העברי/השעה ב-span פנימי בתוך .event-date.
   ה-span הזה יורש font-size 54px, וה-strut של תיבות השורה שהוא יוצר מוסיף
   כ-24px רווח מיותר בין השורות. הפיכתו לבלוק עם גופן קטן מבטלת את ה-strut
   ומשאירה כל שורה בגובה תוכנה בלבד. */
.events-main .single-event .event-date>span {
    display: block;
    font-size: 12px;
    line-height: 1;
}

.events-main .single-event .event-month,
.events-main .event-desc .event-time {
    display: block;
}

/* ביטול ה-strut הסיר גם את הרווח הטבעי בין השורות; המרווחים כאן מחזירים
   בדיוק את הפער שנמדד בעיצוב (15px מתחת ל-"18", 9px מעל הקו העליון). */
.events-main .single-event .event-month {
    color: var(--t-navy);
    margin-top: 7px;
    margin-bottom: 7px;
}

/* התאריך העברי בעיצוב אפור בהיר ולא שחור, והקווים סביבו בהירים יותר. */
.events-main .single-event .right-info .event-pin {
    color: #808080;
    border-top-color: #bfbfbf;
    border-bottom-color: #bfbfbf;
    padding: 8px 0;
}

/* .event-time יורש font-weight:800 מ-.event-date; בעיצוב השעה במשקל רגיל,
   ובגודל 18px של הסכמה (נמדד 38px רוחב דיו ל-"20:30" בשני הצדדים). */
.events-main .event-desc .event-time {
    font-weight: 400;
    margin-top: 5px;
}

/* כותרת האירוע בעיצוב אפורה (#4a4a4a) — זהה לברירת המחדל של הסכמה,
   ולכן הצבע לא נדרס; רק המיקום נמדד. */
.events-main .event-desc .event-location,
.events-main span.event-location {
    color: #4b4b4b;
}

/* כפתור "להזמנת כרטיסים": מסגרת כחולה, מילוי לבן, גולש מתחת לכרטיס. */
.events-main .single-event .btn {
    min-width: 171px;
    padding: 12px 22px;
    font-size: 16px;
    border-color: var(--t-navy);
    color: var(--t-navy);
    background-color: #ffffff;
}

.events-main .single-event .btn:hover {
    background-color: var(--t-navy);
    color: #ffffff;
}

.events-main .view-all .btn.btn_blue {
    background-color: var(--t-green);
    border-color: var(--t-green);
    color: #ffffff;
}

.events-main .view-all .btn.btn_blue:hover {
    background-color: #ffffff;
    color: var(--t-green);
}


/* =========================================================================
   5. חוגים — שורת החיפוש
   ========================================================================= */

/* הבורר כאן חייב להיות .top-searchbar.form-section .form-group .form-control
   (0,4,0): הכלל של הסכמה .form-section .form-group .form-control הוא (0,3,0)
   וגובר על .top-searchbar input[type="text"] שהוא (0,2,1). שאר הערכים של
   הסכמה (גופן 18px, מסגרת #abaabc, רדיוס 50px) נמדדו כנכונים ולכן נשמרים —
   רק הריפוד יורד ב-1px כדי להגיע לגובה 51px שנמדד בעיצוב. */
.top-searchbar.form-section .form-group .form-control {
    max-width: none;
    width: 100%;
    padding: 11px 30px 11px 40px;
    margin-left: 0;
    /* הסכמה צובעת רק את שדה הטקסט באפור; בעיצוב גם הבוררים אפורים. */
    color: var(--light);
}

/* !important נדרש כאן משום שכלל הסכמה עצמו משתמש בו (הוא דורס את bootstrap),
   ובלעדיו החץ הכחול המקורי היה נשאר. */
.top-searchbar select {
    background: url(../schema65/images/site/arrowblue145.svg) #ffffff no-repeat 20px !important;
}

/* כפתור החיפוש: עיגול כחול מלא עם זכוכית מגדלת לבנה. */
.search-button-blue button {
    background-image: url(../schema65/images/site/search-blue145.svg);
    width: 49px;
    height: 49px;
    min-width: 49px;
}

/* בנייד הסכימה הופכת את כפתור החיפוש לכפתור טקסט רוחב-מלא: מבטלת את תמונת
   הרקע ומגדילה את הגופן ל-17px. הכלל שמעליו מחזיר את האייקון ואת הגודל 49px
   בלי media query, ולכן על הטלפון התקבל עיגול 49px שבו האייקון והמילה "חפש"
   מודפסים זה על זה והטקסט נחתך. מבטלים כאן רק את הטקסט — העיגול נשאר כפי
   שתוכנן, בדסקטופ ובנייד כאחד. */
@media only screen and (max-width: 991px) {
    .search-button-blue button {
        font-size: 0;
    }
}


/* =========================================================================
   5א. נכסים ממותגים שהסכמה מקודדת בקובץ ולא במשתנה
   ------------------------------------------------------------------------
   החלפת ה-:root לא מגיעה לצבע שצרוב בתוך קובץ SVG. הרשימה כאן נסרקה מכל
   ה-url() שב-screen.css. תיבות הסימון והסליידר היו זהב (#fcbe11) — הם לא
   נראים בדף הבית בלשונית ברירת המחדל, ולכן התגלו רק בסריקה הזו; הם מופיעים
   בלשוניות "מרכז", "גילאים" ו"ימים ושעות" וגם בדפים פנימיים.
   ========================================================================= */

.custom-checkbox label:before {
    background-image: url(../schema65/images/site/round145.svg);
}

.custom-checkbox input:checked+label:before {
    background-image: url(../schema65/images/site/round-check145.svg);
}

.irs--flat .irs-handle>i:first-child {
    background-image: url(../schema65/images/site/slider-round145.svg);
}

/* חצי הבורר והאקורדיון בדפים הפנימיים — אותו חץ, בכחול של המותג. */
.form-section .form-group .select .form-control,
.btn.with-arrow,
.accordian-main .card-header button.collapsed:before {
    background-image: url(../schema65/images/site/arrowblue145.svg);
}

/* כפתור החיפוש בדפים הפנימיים — אותו עיגול מלא של דף הבית. */
.search-main .s-btn-icon {
    background-image: url(../schema65/images/site/search-blue145.svg);
}

/* אותו גל ירוק כמו בכרטיסי האירועים, בגרסת הדפים הפנימיים. */
.inner-content-section .white-wrap .divImg:after {
    background-image: url(../schema65/images/site/shape-green145.svg);
}


/* =========================================================================
   6. חוגים — טאבים ופאנל
   ========================================================================= */

/* הקשת שמעל כל טאב היא אליפסה ענקית שהסכמה חותכת ב-overflow על ה-li.
   שומרים על המנגנון ומכווננים רק את הגובה (נמדד 16px) ואת הצבעים. */
.tab-main li.nav-item {
    padding-top: 16px;
}

/* גובה החלק המלבני של הטאב נמדד 56px (מ-2050 עד 2106), ולא 60. */
.tab-main .nav-pills .nav-link {
    background-color: var(--t-green);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 0 18px 0;
}

.tab-main .nav-pills .nav-link:before {
    background-color: var(--t-green);
    top: -16px;
}

/* הטאב הפעיל בעיצוב לבן עם מתאר ירוק וטקסט כחול — הפוך מברירת המחדל. */
.tab-main .nav-pills .nav-link.active,
.tab-main .nav-pills .nav-link:hover,
.nav-pills .show>.nav-link {
    background-color: #ffffff;
    color: var(--t-navy);
}

.tab-main .nav-pills .nav-link.active:before,
.tab-main .nav-pills .nav-link:hover::before {
    background-color: #ffffff;
    border: 1px solid var(--t-green);
}

/* פאנל התוכן: לבן עם מסגרת ירוקה דקה, מעוגל בכל ארבע הפינות. */
.tab-main .tab-content>.tab-pane {
    background-color: #ffffff;
    border: 1px solid var(--t-green);
    border-radius: 20px;
}

/* ---- רשימת האייקונים "תחום עניין" ---- */
/* התוויות בעיצוב שחורות (נדגם #000000), לא כחולות. */
.tab-main .icon-list li h6 {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    margin-top: 8px;
}

/* רוחב האייקונים נמדד 48-77px בעיצוב וזהה ברינדור; רק תקרת הגובה מורמת,
   אחרת אייקונים גבוהים מרוחבם (baby/old/masc) נחתכים ל-76px. */
.tab-main .icon-list img,
.tab-main .icon-list svg {
    max-width: 76px;
    max-height: 92px;
}

.tab-main .icon-list li figure {
    min-height: 87px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

/* הריפוד התחתון של הרשימה נמדד גדול יותר מהעליון (40 מול 51). */
.tab-main .icon-list {
    padding: 40px 0 51px;
}

/* אייקוני "תחום עניין" נטענים כ-SVG מוטמע, וכל אחד מהם צבוע לבן במקור: חלקם
   בקו לבן (stroke:#fff) וחלקם במילוי לבן (fill:#fff). בסכמה הפאנל שמאחוריהם
   כהה ולכן זה עובד; כאן הפאנל לבן (ראו הכלל של .tab-pane למעלה), ולבן על לבן
   פשוט נעלם — עשרה עיגולי טקסט בלי שום אייקון, שמופיעים רק בריחוף, כי הסכמה
   צובעת אז את הקו ב-var(--yellow) (אצלנו ירוק).

   שלוש משפחות של קבצים, וכל אחת נשברת אחרת:
     - רוב האייקונים משתמשים ב-.a (קו) — נצבע כאן.
     - "קייטנות" מוסיף .b, שהסכמה צובעת רק כ-path.b בעוד שבקובץ זה זה polyline,
       ולכן לא נתפס שם.
     - "מוסיקה" ו"ריקוד ומחול" בנויים מצורות בלי מחלקה כלל, עם מילוי לבן; להן
       צריך fill ולא stroke.
   הערה שכדאי להכיר: ה-<style> שבתוך כל SVG מוטמע אינו מוגבל ל-SVG שלו אלא חל
   על כל המסמך, כך שעשרת הקבצים דורסים זה את מחלקת .a של זה. לכן הצביעה חייבת
   להגיע מכאן, בסלקטור ממוקד, ולא להסתמך על מה שכתוב בקובץ עצמו.

   ההחרגה של .cls-1 נשמרת לקבצים ישנים יותר שמשתמשים בשם המחלקה הזה. */
.tab-main .icon-list li svg .a,
.tab-main .icon-list li svg .b,
.tab-main .icon-list li svg .cls-1 {
    stroke: #1d1d1b;
}

.tab-main .icon-list li svg .cls-1 {
    fill: none;
}

.tab-main .icon-list li svg path:not(.a):not(.b):not(.cls-1),
.tab-main .icon-list li svg polygon:not(.a):not(.b):not(.cls-1) {
    fill: #1d1d1b;
}

.tab-main .icon-list li a:hover svg .a,
.tab-main .icon-list li a:hover svg .b,
.tab-main .icon-list li a:hover svg .cls-1 {
    stroke: var(--t-green);
}

.tab-main .icon-list li a:hover svg path:not(.a):not(.b):not(.cls-1),
.tab-main .icon-list li a:hover svg polygon:not(.a):not(.b):not(.cls-1) {
    fill: var(--t-green);
}

/* הלשוניות הפנימיות (מרכז / גילאים / ימים ושעות) יושבות על אותו פאנל לבן,
   ולכן הטקסט הלבן של הסכמה היה נעלם. !important נדרש כי .text-white היא
   מחלקת עזר של bootstrap שמוגדרת עם !important. */
.tab-main .tab-content .text-white,
.tab-main .tab-content h5.text-white,
.tab-main .round-list li span.text-white {
    color: var(--t-navy) !important;
}

/* אותה סיבה, אבל בלי .text-white ולכן לא נתפס בכלל שמעליו: הסכמה צובעת את
   התוויות "משעה:" / "עד שעה:" (ו-"מגיל:" / "עד גיל:") בלבן, כי הפאנל היה
   כחול. על פאנל לבן הן נעלמו לגמרי. */
.tab-main .tab-content .white-box label {
    color: var(--t-navy);
}

.tab-main .tab-content .btn.btn-yellow {
    background-color: var(--t-green);
    border-color: var(--t-green);
    color: #ffffff;
}


/* =========================================================================
   7. פוטר
   ========================================================================= */

/* footer65 מדפיס style="position:static" ישירות על התגית, ולכן ה-:after
   של grediant_pattern (position:absolute) מאבד את העוגן שלו ונוחת בראש
   העמוד במקום מעל הפוטר.

   הפתרון הראשון היה position:relative על הפוטר — והוא שבר את לוח האירועים:
   .clendario הוא float:right והפוטר לא עושה לו clear, כך שהשניים חופפים בכל
   הסכמה. כל עוד הפוטר סטטי, הפלוט מצויר מעל רקע הפוטר והלוח נראה; ברגע
   שהפוטר מקבל position הוא עובר לשלב ציור מאוחר יותר, מכסה את הלוח, והדף
   נראה ריק. לכן הפס מצויר כאן כ-border-top על הפוטר — אותה תוצאה חזותית
   בדיוק, בלי לגעת במיקום ובלי לשנות את סדר הציור. */
footer.grediant_pattern:after {
    display: none;
}

footer.grediant_pattern {
    border-top: 11px solid var(--t-green);
}

/* דף לוח האירועים (type=calendario) פולט .clendario עם float:right, והפוטר
   של הסכמה לא עושה לו clear — כלומר תיבת הפוטר מתחילה מיד מתחת להדר והלוח
   צף מעליה. בכל מרכז בסכמה זה גורם לכחול של הפוטר לדלוף לצד הלוח לכל גובה
   העמוד. clear:both מחזיר את הפוטר למקומו הטבעי מתחת לתוכן. */
footer {
    clear: both;
}

footer {
    background-color: var(--t-navy);
    padding: 40px 0 44px;
}

footer h2 {
    color: #ffffff;
    font-size: 32px;
    padding-bottom: 56px;
}

footer .form-section .form-group,
footer input[type="email"],
footer input[type="tel"] {
    max-width: 309px;
}

/* main65 מדפיס <div class="form-group"><select class="form-control"> בלי
   העטיפה .select שכללי הפוטר של הסכמה מצפים לה, ולכן ה-select נשאר עם עיצוב
   ה-form-control של bootstrap (מסגרת מלאה ופינות מעוגלות) במקום קו תחתון
   כמו שאר השדות. כאן מיישרים אותו לשאר הטופס. */
footer .form-section .form-group select.form-control {
    max-width: 309px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #ffffff;
    background-color: transparent;
    background-image: url(../schema65/images/site/arrowwhite.svg);
    background-repeat: no-repeat;
    background-size: 18px 10px;
    background-position: 0 center;
    color: #ffffff;
    font-size: 20px;
    height: auto;
    padding: 0 0 4px 0;
}

/* ה-reCAPTCHA הוא ווידג'ט אמיתי ברוחב ~304px שהמעצב לא שרטט כלל. הוא לא
   מוסר (הוא ההגנה של הטופס מפני ספאם) אלא יורד לשורה משלו, כך ששורת השדות
   נראית בדיוק כמו בעיצוב. ראה הערה בדוח. */
.footer-form form {
    flex-wrap: wrap;
}

.footer-form .g-recaptcha {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* בלי order הכפתור שאחריו נדחף לשורה שלישית. */
    order: 1;
}

/* כפתור "שלח": מילוי לבן וטקסט כחול, בניגוד לכפתור ההדגשה של הסכמה. */
.footer-form .btn.btn-yellow {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--t-navy);
    min-width: 166px;
    padding: 13px 22px;
}

.footer-form .btn.btn-yellow:hover {
    background-color: var(--t-green);
    border-color: #ffffff;
    color: #ffffff;
}


/* =========================================================================
   8. דסקטופ (>= 992px) — צבעים ורכיבים שאינם תלויי רוחב
   ========================================================================= */

@media only screen and (min-width: 992px) {

    /* בעיצוב אין לוגו מוקטן ואין חצי תפריט בדסקטופ — שניהם נועדו למובייל.
       תת-התפריט בדסקטופ נפתח ממילא ב-hover, ולכן החץ מיותר. */
    .top_header .logo_mobile,
    .top_header .dropdown-icon-nav {
        display: none;
    }

    /* הלוגו של כפר תבור רחב ונמוך; ברירת המחדל של הסכמה (70px) חותכת אותו. */
    .top_header .logo {
        max-height: 78px;
    }

    /* פריטי התפריט בעיצוב שחורים ולא כחולים.
       שים לב לקידומת #full_wrapper: ב-screen.css יש כלל
       a:not(main.page div.class-page-main a, .classMDiscription2 a, .textRow a)
       שספציפיותו (0,2,4) — הוא גובר על כל בורר תפריט רגיל, כולל על הכלל של
       הסכמה עצמה, ומקבע כל קישור ל-16px. המזהה מעלה אותנו ל-(1,2,2)
       ומייתר שימוש ב-!important. */
    #full_wrapper .top_header .menu_main>li>a {
        color: #000000;
        font-weight: 400;
    }

    .top_header .menu_main>li>a:before {
        background-color: var(--t-green);
        bottom: -14px;
        height: 4px;
    }

    /* רשת ביטחון: התפריט הוא flex ללא wrap, ולכן תפריט אמיתי ארוך גולש
       אופקית במקום להתקפל. שמות התפריט הם תוכן שמשתנה מהמנהל, ולכן אסור
       שהפריסה תישבר בגללם. */
    .top_header .menu_main {
        flex-wrap: wrap;
    }

    .top_header .hedaer_right {
        min-width: 0;
    }

    /* אייקוני החיפוש והנגישות: עיגול בגוון תכלת, נמדד #4192c9 */
    .top_header .header_last img,
    .top_header .header_last .search svg {
        max-width: 33px;
        width: 33px;
    }

    /* כפתור "איזור אישי": נצמד לשפה השמאלית של המסך ומעוגל רק בצדו הימני.
       נמדד 129x63 עם הטקסט ב-17px. */
    .top_header .user {
        background-color: var(--t-navy);
        padding: 15px 20px 15px 16px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .top_header .user a {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    /* בלי זה "איזור אישי" נשבר לשתי שורות ומגביה את הכפתור ל-92px. */
    .top_header .user span {
        font-size: 17px;
        letter-spacing: -0.85px;
        white-space: nowrap;
    }
}


/* =========================================================================
   9. מידות שנמדדו מקנבס העיצוב (>= 1400px)
   ------------------------------------------------------------------------
   העיצוב שורטט על קנבס 1920. בין 992 ל-1399 הסכמה מקטינה בעצמה את התפריט
   (28px מרווח, 18px גופן); דריסה שלה שם מרחיבה את ההדר מעבר לרוחב המסך
   וגורמת לגלילה אופקית (נמדד docWidth 1358 ברוחב 1200). לכן כל המידות
   שנמדדו מהקנבס יושבות כאן, מ-1400 ומעלה — אותו סף שבו .container של
   הסכמה נפתח ל-1230px, כלומר הרוחב שהעיצוב מניח.
   ========================================================================= */

@media only screen and (min-width: 1400px) {

    /* ---- הדר ---- */

    /* גובה ההדר נמדד 102px ותיבת הלוגו 78px, כלומר 12px מרווח למעלה ולמטה.
       min-height על שורת התוכן מקבע את הגובה ל-102 גם אם קובץ הלוגו שיועלה
       ביחס אחר וקצר מ-78px (המצב כרגע: 65px). */
    .top_header {
        padding: 12px 0;
    }

    .top_header>.d-flex {
        min-height: 78px;
    }

    /* בעיצוב תיבת הלוגו היא 126x78 ונעצרת 104px מקצה המסך. */
    .top_header .logo {
        max-width: 126px;
        margin-left: 0;
    }

    /* ברירת המחדל היא margin-left:auto על הלוגו, כלומר כל העודף נבלע מימין
       לתפריט והתפריט נדחק שמאלה. בעיצוב התפריט צמוד ללוגו והעודף נמצא בין
       התפריט לאייקונים שבקצה השמאלי. */
    .top_header .header_left {
        margin-left: 0;
        margin-right: 104px;
    }

    /* .hedaer_right מתכווץ לרוחב תוכנו, ולכן ה-auto שמתחתיו אינו מקבל עודף
       לחלק; בלי flex:1 האייקונים לא מגיעים לשפה השמאלית. */
    .top_header .hedaer_right {
        flex: 1;
    }

    .top_header .header_last {
        margin-right: auto;
    }

    .top_header .header_last>div {
        margin-right: 16px;
    }

    /* טופס החיפוש אינו div ולכן לא נתפס בכלל שמעליו; בעיצוב יש 16px גם כאן. */
    .top_header .header_last .as-form {
        margin-right: 16px;
    }

    /* ---- באנר ---- */

    /* מיקום תיבת ההודעה: בעיצוב הקצה הימני שלה נמצא ב-1722px, כלומר מחוץ
       ל-container של 1230px. הרחבת ה-container של הבאנר בלבד (ל-1554px)
       מזיזה אותה בדיוק לשם ונשארת בטוחה במסכים צרים, כי .container ממילא
       מוגבל ל-100% מהרוחב. שאר הסקשנים לא מושפעים — ה-ul של העיגולים יושב
       מחוץ ל-container. */
    .hero-banner-main .container {
        max-width: 1554px;
    }

    /* רוחב התיבה נמדד 451px, וראשה 259px מתחת לראש הבאנר (24% מגובהו). */
    .hero-banner-main .hero-banner-inner {
        max-width: 451px;
        padding: 24vh 0 1vh 0;
    }

    /* תיבת ההודעה: בעיצוב כחולה למחצה, מעוגלת, וללא המסגרת הבהירה. */
    .hero-banner-main .single-slide {
        background-color: rgba(30, 43, 122, 0.86);
        border: 0;
        border-radius: 20px;
        padding: 26px 32px 44px 32px;
    }

    /* עיגולי הפעילויות: קוטר מילוי 170px, טבעת לבנה 3px (סה"כ 176),
       ומרווח 214px בין מרכזי עיגולים סמוכים. */
    .hero-banner-main .single__activity {
        width: 176px;
        height: 176px;
        border-width: 3px;
        padding: 18px;
        box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.55);
    }

    .hero-banner-main .activity-list li {
        margin: 0 19px 30px 19px;
    }

    .hero-banner-main .single__activity img {
        max-width: 62px;
        max-height: 62px;
    }

    .hero-banner-main .single__activity span {
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -0.6px;
        margin-top: 6px;
        line-height: 1;
    }
}


/* =========================================================================
   10. מידות ביניים (>= 768px)
   ========================================================================= */

@media only screen and (min-width: 768px) {

    /* במובייל הסכמה מגדילה את כותרת האירוע ל-23px; בדסקטופ נמדד 20px. */
    .events-main .event-desc h4 {
        font-size: 20px;
        font-weight: 600;
    }

    /* בעיצוב ארבעת שדות החיפוש ממלאים את כל רוחב הקונטיינר (283px כל אחד
       ברוחב 1200px), בעוד שברירת המחדל של הסכמה היא 18.9% ומשאירה רווח בצד. */
    .top-searchbar.form-section .form-group {
        width: calc((100% - 49px) / 4 - 4px);
        max-width: none;
        margin-left: 4px;
    }

    /* המרווח בין שדות הפוטר נמדד 17px (ברירת המחדל של הסכמה 14px). במובייל
       הסכמה מסדרת את הטופס בעמודה עם margin-left:0, ולכן זה נשאר בדסקטופ. */
    footer .form-section .form-group,
    footer .footer-form input[type="email"],
    footer .footer-form input[type="tel"] {
        margin-left: 17px;
    }
}


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

@media only screen and (max-width: 991px) {

    /* בעיצוב אין לוגו מוקטן בסרגל הכחול העליון — רק הלוגו שבפס הלבן שמתחתיו. */
    .top_header .logo_mobile {
        display: none;
    }

    /* הפס הלבן נמדד 55px עם לוגו בגובה 33px (ברירת המחדל: 47px ולוגו 23px). */
    .top_header .header_left {
        padding: 11px 15px;
    }

    .top_header .logo {
        max-width: 66px;
        max-height: 33px;
        margin-left: 0;
    }

    .top-searchbar.form-section .form-group {
        width: 100%;
        max-width: none;
        margin-left: 0;
    }
}

@media only screen and (max-width: 767px) {

    /* הסכמה מציגה במובייל את הבאנר כפס בגובה 40.3vw בראש הסקשן (יחס התמונה
       של מרכז אחר) ומשאירה מתחתיו רקע כחול אחיד. בעיצוב של כפר תבור התמונה
       היא הרקע של כל אזור העיגולים, והפס הכחול היחיד הוא רצועת ההודעות.
       לכן: ללא ריפוד עליון, והתמונה נפרשת על כל הסקשן. */
    .hero-banner-main {
        padding-top: 0;
        background-size: cover;
        background-position: center top;
    }

    /* גובה ההדר הקבוע ירד ל-130px (75 כחול + 55 לבן), ולכן גם הריווח שהסכמה
       שומרת עבורו ב-body יורד — אחרת נשאר פס לבן של 24px מעל הבאנר. */
    body {
        padding-top: 130px;
    }

    /* קוטר העיגול במובייל נמדד 130px מילוי + טבעת 3px = 136px, והמרווח בין
       שני העיגולים בשורה 40px. תא של 45% מרכז אותם בדיוק שם. */
    .hero-banner-main .activity-list li {
        width: 45%;
        height: 150px;
    }

    .hero-banner-main .single__activity {
        width: 136px;
        height: 136px;
        padding: 12px;
    }

    /* המרווח בין רצועת ההודעות לשורת העיגולים הראשונה נמדד 32px. */
    .hero-banner-main .hero-banner-inner {
        padding-bottom: 30px;
    }
}


/* =========================================================================
   12. מרווח התפריט (>= 1651px)
   ------------------------------------------------------------------------
   המרווח 70px נמדד מהסקיצה, שבה שישה פריטים קצרים. התפריט האמיתי של 145
   מונה שמונה פריטים ארוכים יותר, והסכמה מקטינה בעצמה את המרווח מתחת ל-1650
   (ל-48px) ומתחת ל-1399 (ל-28px). לכן הערך מהסקיצה חל רק מעל 1650 — מתחת
   לכך עדיף המנגנון של הסכמה, שנועד בדיוק לזה.
   ========================================================================= */

@media only screen and (min-width: 1651px) {

    .top_header .menu_main>li {
        margin-right: 70px;
    }

    /* פריט עם תת-תפריט עטוף ב-.nav-item-dropdown-wrap, ולכן הקישור שלו אינו
       ילד ישיר של ה-li — בלי הבורר השני הוא נשאר על 16px של הכלל הגלובלי. */
    #full_wrapper .top_header .menu_main>li>a,
    #full_wrapper .top_header .menu_main>li>.nav-item-dropdown-wrap>a {
        font-size: 20px;
        letter-spacing: -0.4px;
        white-space: nowrap;
    }
}