/* =========================================================================
   מתנ"ס באר יעקב — מרכז 112 (pq2) — סכימה 81
   נכתב מחדש עבור המעבר מסכימה 29 לסכימה 81 (קובץ העיצוב הישן אינו רלוונטי —
   כל הכללים בו נכתבו למבנה של סכימה 29).
   פלטת המותג (נמדדה מקובץ העיצוב desktop.jpg ומקבצי העיגולים Asset 111-118,
   ותואמת לבריף):
     כחול #0972b8 | כתום #f99824
   צבעי המשנה (פסי התפריט ועיגולי הקטגוריות): ירוק-ליים #b4d339 | תכלת #09b5f0 |
   ורוד #ea0389 | אדום-כתום #dd4327 | טורקיז #007463 | אדום #cd171a
   הקובץ נטען פעמיים: HeaderClass בראש ה-<head>, ו-header81.php שוב אחרי
   screen.css/responsive.css (סדר המסמך — ראו ההערה שם).
   ========================================================================= */

:root {
    --by-blue: #0972b8;
    --by-orange: #f99824;
    --by-lime: #b4d339;
    --by-sky: #09b5f0;
    --by-pink: #ea0389;
    --by-redorange: #dd4327;
    --by-teal: #007463;
    --by-red: #cd171a;
    --by-blue-dark: #075a92; /* הכחול מוכהה ~20% — ריחוף */
    --by-orange-dark: #e08316; /* הכתום מוכהה ~10% — ריחוף */
}

/* -------------------------------------------------------------------------
   1. כותרת עליונה — לוגו
      בבסיס .logo מקבל רוחב קבוע (75/60/50/40px) לפי רוחב המסך, והתמונה גובה
      קבוע — עם הלוגו הרחב של באר יעקב (473x289) זה מעוות אותו. כאן הרוחב נגזר
      מהגובה. גבהים: 95px בדסקטופ (למטה, ≥1500), 65px במובייל — שניהם נמדדו
      מהמוקאפים (דיו הלוגו = 81% מגובה הקובץ); בין לבין — מדורג כדי שהתפריט ייכנס.
   ------------------------------------------------------------------------- */
.logo {
    width: auto;
}

.logo img {
    width: auto;
    max-width: none;
    height: 85px;
}

@media (max-width: 1499px) {
    .logo {
        width: auto;
    }

    .logo img {
        height: 70px;
    }
}

@media (max-width: 1199px) {
    .logo {
        width: auto;
    }

    .logo img {
        height: 56px;
    }
}

@media (max-width: 1023px) {
    .logo {
        width: auto;
    }

    .logo img {
        height: 65px;
    }
}

/* הבסיס קובע ב-≤435 רוחב 50px לתמונה */
@media (max-width: 435px) {
    .logo img {
        width: auto;
        height: 65px;
    }
}

/* במוקאפ (1920) הלוגו מצויר בגובה 95px (דיו 134x77 מתוך PNG של 473x289),
   1883px מהשמאל, והאייקונים צמודים לקצה השמאלי (15px). הגובה הנוסף נבלע
   בשוליים שליליים כדי שהכותרת תישאר בגובה 90px של פריטי התפריט. */
@media (min-width: 1500px) {
    header {
        padding-left: 0;
        padding-right: 37px;
    }

    .logo {
        margin-left: 32px;
    }

    .logo img {
        height: 95px;
        margin: -7px 0 -3px;
    }

    .header-right>div {
        padding: 0 11px;
    }

    /* שישה פריטים ב-222px במוקאפ (1332px) — הרווח נשאר בין התפריט לאייקונים */
    .main-navigation>ul {
        max-width: 1332px;
    }

    /* פס המבזקים במוקאפ ברוחב מלא (0-1920) — בבסיס הוא חורג 25px מימין */
    .flashes {
        margin-right: -37px;
        padding: 8px 36px 8px 6px;
    }
}

/* -------------------------------------------------------------------------
   2. תפריט עליון — פסי הצבע לפי מיקום. במוקאפ (משמאל לימין בסדר ה-DOM):
      כתום, ליים, תכלת, כחול, ורוד — ושוב כתום. זה מחזור של חמישה צבעים, ולכן
      הצבע נקבע ב-nth-child(5n+k) ולא דרך שש מחלקות הצבע של header81.php
      (המחזור שלהן הוא שישה, ועם יותר משישה פריטים היו שני כתומים צמודים).
      הספציפיות זהה לכללי הבסיס — מנצחים בסדר המסמך (הקישור החוזר ב-header81).
   ------------------------------------------------------------------------- */
.main-navigation>ul>li:nth-child(5n+1)::before {
    background-color: var(--by-orange);
}

.main-navigation>ul>li:nth-child(5n+2)::before {
    background-color: var(--by-lime);
}

.main-navigation>ul>li:nth-child(5n+3)::before {
    background-color: var(--by-sky);
}

.main-navigation>ul>li:nth-child(5n+4)::before {
    background-color: var(--by-blue);
}

.main-navigation>ul>li:nth-child(5n+5)::before {
    background-color: var(--by-pink);
}

/* בתפריט הנפתח של המובייל הפס עובר ל-a::before (responsive.css) — אותו מחזור */
@media (max-width: 1023px) {
    .main-navigation>ul>li:nth-child(5n+1)>a::before {
        background-color: var(--by-orange);
    }

    .main-navigation>ul>li:nth-child(5n+2)>a::before {
        background-color: var(--by-lime);
    }

    .main-navigation>ul>li:nth-child(5n+3)>a::before {
        background-color: var(--by-sky);
    }

    .main-navigation>ul>li:nth-child(5n+4)>a::before {
        background-color: var(--by-blue);
    }

    .main-navigation>ul>li:nth-child(5n+5)>a::before {
        background-color: var(--by-pink);
    }
}

/* לבאר יעקב 8 פריטים, אחד מהם ארוך ("אלפון צוות המרכז הקהילתי"). בבסיס לפריט
   גובה קבוע (90/84/70/61px) — מתחת ל-1350 התווית צריכה 3 שורות וגולשת מתחת
   לפס הצבע. כאן כל הפריטים גדלים יחד (stretch) כדי שהפסים יישארו בקו אחד,
   והגובה הקבוע של הבסיס נשאר כמינימום. */
@media (min-width: 1024px) {
    .main-navigation>ul {
        align-items: stretch;
    }

    .main-navigation>ul>li {
        display: flex;
    }

    /* ריפוד אנכי קטן מהבסיס כדי ששלוש שורות (60px) עדיין ייכנסו בגובה המקורי */
    .main-navigation>ul>li>a {
        flex: 1;
        height: auto;
        min-height: 90px;
        padding: 15px 6px;
    }
}

@media (min-width: 1024px) and (max-width: 1499px) {
    .main-navigation>ul>li>a {
        min-height: 84px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1350px) {
    .main-navigation>ul>li>a {
        min-height: 70px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .main-navigation>ul>li>a {
        min-height: 61px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* החץ של פריט עם תת-תפריט (script.js מוסיף לו span) — בצבע הפס שלו, כמו במוקאפ */
.main-navigation>ul>li.menu-children:nth-child(5n+1) span::before,
.main-navigation>ul>li.menu-children:nth-child(5n+1) span::after {
    background-color: var(--by-orange);
}

.main-navigation>ul>li.menu-children:nth-child(5n+2) span::before,
.main-navigation>ul>li.menu-children:nth-child(5n+2) span::after {
    background-color: var(--by-lime);
}

.main-navigation>ul>li.menu-children:nth-child(5n+3) span::before,
.main-navigation>ul>li.menu-children:nth-child(5n+3) span::after {
    background-color: var(--by-sky);
}

.main-navigation>ul>li.menu-children:nth-child(5n+4) span::before,
.main-navigation>ul>li.menu-children:nth-child(5n+4) span::after {
    background-color: var(--by-blue);
}

.main-navigation>ul>li.menu-children:nth-child(5n+5) span::before,
.main-navigation>ul>li.menu-children:nth-child(5n+5) span::after {
    background-color: var(--by-pink);
}

/* -------------------------------------------------------------------------
   3. מבזקים — "מבזקים" בכחול (בבסיס אדום); הרמקול וכפתור ההשהיה בכתום.
      ה-<style> שבתוך ה-SVG-ים המוטבעים חל על כל הדף: כלל ".a" של אייקוני הפוטר
      (לבנים) מגיע אחרון ודורס גם את אייקוני המבזקים — לכן הצבע נקבע כאן
      בספציפיות גבוהה יותר, ולא רק דרך $strokeColor ב-header81.php.
   ------------------------------------------------------------------------- */
.flashes>span {
    color: var(--by-blue);
}

/* "מבזקים" במוקאפ הדסקטופ גדול יותר: דיו 80px רוחב (ב-20px של הבסיס ~66px) ⇒
   24px. במוקאפ המובייל 63px ⇒ ה-20px של הבסיס. */
@media (min-width: 1024px) {
    .flashes h6 {
        font-size: 24px;
    }
}

.flashes>span svg .a,
.flashes-play svg .a,
.flashes-play svg .b {
    stroke: var(--by-orange);
}

/* כפתור ההשהיה הוא SVG בתוך שורת טקסט — שורת הבסיס (27px) מוסיפה לו מקום מתחת
   ומגביהה את הפס ל-54px; במוקאפ 45px. במוקאפ גם העיגול קטן יותר (21px). */
.flashes-play {
    display: flex;
    align-items: center;
}

.flashes-play svg {
    width: 21px;
}

/* -------------------------------------------------------------------------
   4. באנר ראשי — פס כתום מתחת להירו (בבסיס צהוב), עיגולי הקטגוריות.
   ------------------------------------------------------------------------- */
.home-banner {
    border-bottom-color: var(--by-orange);
}

/* צבע עיגול מגיע מהדאטה (big_bar.bbColor, כ-style מוטבע). שחור (#000000) הוא
   ברירת המחדל של בורר הצבע בניהול (198 שורות כאלו ב-pq2), וריק לא נותן צבע בכלל
   — בשני המקרים העיגול "לא הוגדר", ולכן מקבל את צבע המוקאפ לפי מיקומו.
   ה-!important נדרש כדי לגבור על ה-style המוטבע; צבע אמיתי שהוגדר בניהול לא
   נתפס בסלקטור ונשאר כמו שהוא. */
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+1) { background-color: var(--by-orange) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+2) { background-color: var(--by-lime) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+3) { background-color: var(--by-sky) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+4) { background-color: var(--by-blue) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+5) { background-color: var(--by-pink) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+6) { background-color: var(--by-redorange) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+7) { background-color: var(--by-teal) !important; }
.home-banner-category-item:is([style*="#000000"], [style*="background-color: ;"]):nth-child(8n+8) { background-color: var(--by-red) !important; }

/* אייקון עיגול חייב להיות ציור קו שקוף (SVG/PNG). קובץ PDF לא נטען כתמונה כלל
   ותמונת JPG אינה יכולה להיות שקופה — בשורות שנשארו מהאתר הישן (bbIcon = PDF
   ותמונות סטוק) מסתירים את תיבת האייקון, והעיגול מציג את הכותרת בלבד. */
.home-banner-category-img:has(> img:is([src$=".pdf" i], [src$=".jpg" i], [src$=".jpeg" i])) {
    display: none;
}

/* במוקאפ (1920) העיגול: מילוי 170px + טבעת לבנה 4px (178 סה"כ, בבסיס 140+5),
   רווח 34px בין עיגולים, והשורה 34px מעל הפס הכתום (בבסיס 65px).
   שמונה עיגולים כאלה דורשים 1662px — לכן הגודל והרווח נגזרים מרוחב המסך
   (8.85vw / 1.77vw = 170/34 ב-1920) עם רצפה בגדלי הבסיס, ונכנסים מ-1400 ומעלה.
   הרווח עובר ל-gap — ה-margin-right של הבסיס יושב גם על הפריט הראשון ומזיז את
   השורה כולה מהמרכז. מתחת ל-1400 נשארים על גדלי הבסיס. */
@media (min-width: 1400px) {
    .home-banner-category {
        bottom: 34px;
    }

    .home-banner-category-inner {
        gap: clamp(20px, 1.77vw, 34px);
    }

    .home-banner-category-item {
        margin: 0;
        border-width: 4px;
    }

    .home-banner-category-item a {
        width: clamp(140px, 8.85vw, 170px);
        height: clamp(140px, 8.85vw, 170px);
    }

    .home-banner-category-content span {
        font-size: clamp(20px, 1.15vw, 22px);
    }
}

/* 1024-1399: עיגולי הבסיס (150px + 15/12px) לא נכנסים שמונה בשורה — ב-1280 העיגול
   האחרון נחתך בקצה המסך. מקטינים בשלבים כך ששמונה נכנסים עד 1024; מעבר
   לשמונה השורה נשברת (wrap) במקום לגלוש. מעל 1400 השורה רשאית לחרוג מה-container
   (1292px) — שמונה עיגולי המוקאפ רחבים ממנו (1662px ב-1920). */
@media (min-width: 1024px) {
    .home-banner-category-inner {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 12px;
    }
}

@media (min-width: 1400px) {
    .home-banner-category .container {
        max-width: none;
    }
}

/* בבסיס הרווח הוא margin-right על כל פריט חוץ מהאחרון — ב-RTL זה הצד הלא נכון:
   הפריט הראשון מקבל רווח בקצה השורה, ושני העיגולים האחרונים נוגעים זה בזה.
   הרווח עובר ל-gap. */
@media (min-width: 1024px) and (max-width: 1399px) {
    .home-banner-category-inner {
        column-gap: 12px;
    }

    .home-banner-category-item,
    .home-banner-category-item:not(:last-child) {
        margin: 0;
    }
}

@media (min-width: 1024px) and (max-width: 1350px) {
    .home-banner-category-item a {
        width: 120px;
        height: 120px;
    }

    .home-banner-category-img {
        height: 48px;
        margin-bottom: 4px;
    }

    .home-banner-category-img img {
        max-height: 46px;
    }

    .home-banner-category-content span {
        font-size: 17px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .home-banner-category-item a {
        width: 105px;
        height: 105px;
    }

    .home-banner-category-inner {
        column-gap: 10px;
    }

    .home-banner-category-img {
        height: 40px;
    }

    .home-banner-category-img img {
        max-height: 38px;
    }

    .home-banner-category-content span {
        font-size: 15px;
    }
}

/* -------------------------------------------------------------------------
   5. מקטע חוגים
   ------------------------------------------------------------------------- */
.classes:after {
    background-color: var(--by-orange);
}

.classes-head h1 {
    color: var(--by-blue);
}

/* במוקאפ פס אפור 117x5 מתחת ל"חוגים" (כמו מתחת ל"אירועים קרובים" בבסיס),
   83px מראש הדיו של הכותרת ו-100px מעל הגלולה */
@media (min-width: 768px) {
    .classes-head h1:after {
        content: "";
        background-color: #878787;
        height: 5px;
        width: 117px;
        margin: 15px auto 15px;
        display: block;
    }
}

/* שלוש רמות container מקוננות: הפנימית (classes-tab-item) מורידה עוד 15px מכל
   צד — במוקאפ הגלולה ברוחב התוכן המלא (1293px), ובמובייל ~328px */
.classes-tab-content .classes-tab-item {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1024px) {
    /* ראש הדיו של "חוגים" 54px מתחת לפס הכתום (במוקאפ).
       תמונת הילדים (classes-bg-new.jpg, 3840x1842) מצוירת במוקאפ גדולה בהרבה
       מ-cover של הבסיס — כמעט בגודלה הטבעי. 188% / 88% נבחרו בחיפוש רשת מול
       המוקאפ (הפרש פיקסלים ממוצע 17.3 באזור הילדים, מול 34 ב-195% ו-28 ב-180%). */
    .classes {
        padding-top: 29px;
        background-size: 188% auto;
        background-position: 50% 88%;
    }

    /* דיו "חוגים" במוקאפ 161x53 — אותו גובה כמו 93px של "אירועים קרובים",
       ואותו ריווח אותיות שלילי שלה (-0.28rem) */
    .classes-head h1 {
        font-size: 93px;
        letter-spacing: -0.28rem;
    }

    /* גלולת הסינון במוקאפ 126px (בבסיס 138px) */
    .classes-filter-item {
        padding: 33px 0 19px;
    }

    /* במוקאפ שדות הבר מתפרסים על כל רוחב הגלולה עד כפתור החיפוש. בבסיס כל
       שדה ברוחב קבוע (1/6.8), כך שמספר שדות אחר משאיר חור. flex:1 מחלק את הרוחב
       שווה בשווה לכל מספר שדות; המרווח השמאלי משאיר מקום לכפתור העגול. */
    .classes-filter form > .container.container-fluid.d-flex {
        padding-left: 110px;
    }

    .classes-filter-item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* קו מפריד דק בין השדות (במוקאפ #c7c7c7, 69px — מ-37px מתחת לראש הגלולה
       ועד 21px מעל תחתיתה), באמצע הרווח של 20px בין שני שדות */
    .classes-filter-item + .classes-filter-item {
        position: relative;
    }

    .classes-filter-item + .classes-filter-item::after {
        content: "";
        position: absolute;
        top: 28px;
        right: -10px;
        width: 1px;
        height: 69px;
        background-color: #c7c7c7;
    }

    /* כפתור החיפוש העגול במוקאפ 73px (בבסיס 75px) */
    .classes-filter form input[type="submit"] {
        width: 73px;
        height: 73px;
    }
}

/* כפתור החיפוש העגול — בכחול המותג; ריחוף בכתום (בבסיס אדום) */
.classes-filter form input[type="submit"],
.classes-search input[type="submit"] {
    background-color: var(--by-blue);
}

.classes-search input[type="submit"]:hover,
.classes-filter form input[type="submit"]:hover {
    background-color: var(--by-orange);
}

/* במוקאפ יש שדה "שעות" אחד — מסתירים את שדה שעת הסיום (רלוונטי רק לבר הרגיל,
   כמו בדף רשימת החוגים; בבר של עמוד הבית אין שעות בייבוא אוטומטי) */
.classes-filter-item--totime {
    display: none;
}

/* במובייל שדות הסינון עטופים ב-div.container.d-flex (nowrap של bootstrap) —
   בלי זה הם נדחסים לשורה אופקית. כל שדה נהיה גלולה לבנה ברוחב מלא. */
@media (max-width: 1023px) {
    .classes-filter form > .container.container-fluid.d-flex {
        flex-direction: column;
        padding: 0;
    }

    .classes-head h1 {
        font-size: 46px;
    }
}

/* צ'קבוקסים בדרופדאונים של הבר — ה-<style> של hugim81searchbar.php מגיע אחרי
   הקובץ הזה בסדר המסמך, לכן !important. */
.classes-filter .bootstrap-select .dropdown-menu li.selected a.dropdown-item::before,
.classes-filter .bootstrap-select .dropdown-menu li a.dropdown-item.selected::before {
    border-color: var(--by-blue) !important;
    background-color: var(--by-blue) !important;
}

/* -------------------------------------------------------------------------
   6. אירועים קרובים
   ------------------------------------------------------------------------- */
/* הפס שמעל הפוטר (בבסיס צהוב 8px) */
.latest-events {
    border-bottom-color: var(--by-orange);
}

.latest-events h2 {
    color: var(--by-blue);
}

@media (min-width: 1351px) {
    /* דיו "אירועים קרובים" במוקאפ 475x71 = 93px עם הריווח של הבסיס;
       46px מהפס האפור לכרטיסים (בבסיס 35px) */
    .latest-events h2 {
        font-size: 93px;
        margin-bottom: 46px;
    }

    /* במוקאפ ארבעה כרטיסים ברוחב 409px עם רווח 50px (בבסיס 367px עם 90px) */
    .latest-events-slider {
        padding: 0 42px;
    }

    .latest-events-item {
        padding: 0 25px;
    }

    .latest-events-item-content {
        min-height: 128px;
    }
}

/* במוקאפ התמונה כמעט ריבועית (415x409; בבסיס 88%) והפינות מעוגלות 15px */
.latest-events-item-img {
    padding-top: 101.5%;
}

.latest-events-item-img img {
    border-radius: 15px 15px 0 0;
}

/* אירוע בלי תמונה (לכל תשעת האירועים של היום אין שורת event_images): בבסיס
   נשאר מלבן ריק בלי מסגרת. כאן — הלוגו על לבן, ומסגרת הכרטיס נסגרת סביבו;
   הכלל נעלם ברגע שלאירוע יש תמונה. */
.latest-events-item-img:not(:has(img)) {
    background: #fff url('https://matnasnet-static-files.s3.il-central-1.amazonaws.com/productImages2/112/2026/06/07/image1780822026.png') center 40% / 60% auto no-repeat;
    border: 1px solid #b6b6b6;
    border-bottom: 0;
    border-radius: 15px 15px 0 0;
}

/* גוף הכרטיס במוקאפ לבן עם מסגרת אפורה דקה וטקסט שחור (בבסיס כחול, מסגרת
   צהובה 2px וטקסט לבן) */
.latest-events-item-content {
    background-color: #fff;
    border: 1px solid #b6b6b6;
    border-radius: 0 0 15px 15px;
    color: #000;
}

@media (min-width: 1024px) {
    .latest-events-item-content {
        font-size: 24px;
    }
}

/* תגית התאריך — כחולה עם טקסט לבן, בגודל מלא (בבסיס אדומה ומוקטנת
   ב-scale(0.8)) והצל שלה עדין יותר במוקאפ */
.latest-events-item-info {
    background-color: var(--by-blue);
    color: #fff;
    transform: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

/* "לכל האירועים" — במוקאפ 240x80 עם טקסט ~25px (בבסיס 214x64, 22px).
   במובייל הכפתור ברוחב מלא ובגובה הבסיס (מוקאפ המובייל ~67px) — לכן scoped. */
@media (min-width: 768px) {
    .latest-events-all .button.button-border {
        padding: 27px 55px;
        font-size: 25px;
    }
}

/* במוקאפ 81px מתחתית הכרטיסים לכפתור (בבסיס 60px) */
@media (min-width: 1024px) {
    .latest-events-all {
        padding-top: 81px;
    }
}

/* במוקאפ המובייל מסגרת הכרטיס כחולה */
@media (max-width: 767px) {
    .latest-events-item-content,
    .latest-events-item-img:not(:has(img)) {
        border-color: var(--by-blue);
    }
}

/* -------------------------------------------------------------------------
   7. כפתורים — מלא: כתום (בבסיס אדום), מתאר: מסגרת כתומה ("לכל האירועים").
      ה-hover של הבסיס הופך את הכפתור לשקוף עם טקסט כהה — נשאר, רק המסגרת כתומה.
   ------------------------------------------------------------------------- */
.button,
a.button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--by-orange);
}

.button.button-border,
a.button.button-border,
button.button-border,
html input[type="button"].button-border,
input[type="reset"].button-border,
input[type="submit"].button-border {
    border-color: var(--by-orange);
    background-color: transparent;
}

.button:hover,
a.button:hover,
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: var(--by-orange);
    background-color: transparent;
}

.button.button-border:hover,
a.button.button-border:hover,
button.button-border:hover,
html input[type="button"].button-border:hover,
input[type="reset"].button-border:hover,
input[type="submit"].button-border:hover {
    background-color: var(--by-orange);
}

#continue {
    border-color: var(--by-orange);
    background-color: var(--by-orange);
}

#continue:hover {
    color: var(--by-orange);
}

/* -------------------------------------------------------------------------
   8. פוטר — טקסטורת הריבועים בכחול המותג (footer-bg-112.png, מ-footer.png
      של העיצוב) במקום footer-bg.jpg של הסכימה. אייקוני הקשר לבנים.
   ------------------------------------------------------------------------- */
footer {
    background-image: url('../../images/schema81/images/footer-bg-112.png');
}

footer .footer-contact svg .a {
    stroke: #fff;
}

/* "מה מעניין אותי" — במוקאפ חץ "שברון" לבן ועבה, לא המשולש של footer81.
   footer81 כותב את החץ כ-style מוטבע (רשימת המרכזים שכוללת את 112), לכן
   !important. */
#sendingList {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 9l7 6 7-6' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-size: 18px auto !important;
}

/* שורת זכויות היוצרים במוקאפ ~50px (בבסיס 90px, הטקסט צמוד לתחתית) */
.footer-copy {
    height: auto;
    padding: 18px 20px;
}

.footer-copy p {
    font-size: 11px;
}

/* בלוק ההרשמה לעדכונים — מדידות הדסקטופ (1920): כותרת דיו 292px (בבסיס
   33px ⇒ 309px), פס לבן 4px, הטופס 11px נמוך יותר והבלוק 24px נמוך יותר */
@media (min-width: 1024px) {
    .footer-top {
        padding-bottom: 44px;
    }

    .footer-top h4 {
        font-size: 31px;
        margin-bottom: 45px;
    }

    .footer-top h4:after {
        height: 4px;
        margin: 18px auto 20px;
    }
}

/* כפתור "שלח" כתום עם מסגרת לבנה (במוקאפ) */
.form-btn input[type="submit"] {
    background-color: var(--by-orange);
    border-color: #fff;
}

.form-btn input[type="submit"]:hover {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

/* -------------------------------------------------------------------------
   9. כפתור "לראש הדף" — footer81 פולט אותו, ול-screen.css אין לו שום כלל:
      בלי עיצוב פר-מרכז הוא יורש את ה-button הגנרי ונשאר בזרימה בתחתית הדף.
   ------------------------------------------------------------------------- */
.goToTop {
    position: fixed;
    bottom: 35px;
    right: 20px;
    z-index: 99;
    font-size: 16px;
    padding: 10px 15px;
    background-color: var(--by-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.goToTop:hover {
    background-color: var(--by-blue-dark);
    color: #fff;
    border: none;
}

/* במובייל סרגל הרשתות התחתון תופס את תחתית המסך — מרימים את הכפתור מעליו */
@media (max-width: 991px) {
    .goToTop {
        bottom: 100px;
        right: 10px;
    }
}

/* -------------------------------------------------------------------------
   10. סרגל רשתות חברתיות צף — צבעי המסגרות לפי המוקאפ: פייסבוק אדום-כתום,
       אינסטגרם ווואטסאפ ליים, מייל כחול. (יוטיוב וטיקטוק לא מופיעים במוקאפ.)
   ------------------------------------------------------------------------- */
.float-social ul li.yellow a {
    border-color: var(--by-redorange);
}

.float-social ul li.blue a,
.float-social ul li.red a {
    border-color: var(--by-lime);
}

.float-social ul li.green a {
    border-color: var(--by-orange);
}

.float-social ul li:last-child a {
    border-color: var(--by-blue);
}

/* בר הרשתות התחתון במובייל: רקע כחול ופס עליון כתום (במוקאפ 9px) */
@media (max-width: 991px) {
    .float-social {
        background-color: var(--by-blue);
        border-top-color: var(--by-orange);
    }

    .float-social ul li a {
        border-color: #fff;
    }
}

/* -------------------------------------------------------------------------
   11. טאבלט — אין מוקאפ; תיקוני מנגנון בלבד
   ------------------------------------------------------------------------- */
/* פס המבזקים: בבסיס margin-right: -35px (≤1499) מול ריפוד כותרת של 25/20/15px
   — הפס חורג מהמסך ב-10-20px (נחתך ע"י overflow-x של ה-body, אבל לא שייך לשם) */
@media (max-width: 1350px) {
    .flashes {
        margin-right: -25px;
    }
}

@media (max-width: 1199px) {
    .flashes {
        margin-right: -20px;
    }
}

@media (max-width: 1023px) {
    .flashes {
        margin-right: -15px;
    }
}

/* 768-991: בבסיס רוחב העיגול באחוזים (28%) מתוך שורה ברוחב fit-content —
   תלות מעגלית שמקריסה כל עיגול ל-10px (רק המסגרת). השורה ברוחב מלא פותרת,
   והעיגול מקבל את גודל הדסקטופ של הבסיס (150px) במקום 28% (עד 250px). */
@media (max-width: 991px) {
    .home-banner-category-inner {
        width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .home-banner-category-item {
        width: 150px;
    }
}

/* margin-right: 12px של הבסיס (≤1199, כל פריט חוץ מהאחרון) נשאר גם בטאבלט מעל
   ה-margin: 9px — רווחים לא שווים בין העיגולים. מיישרים ל-9px סביב כל עיגול. */
@media (min-width: 436px) and (max-width: 1023px) {
    .home-banner-category-item:not(:last-child) {
        margin-right: 9px;
    }
}

/* -------------------------------------------------------------------------
   12. מובייל — לפי by-mobile.jpg (375px)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* הפסים הכתומים במוקאפ המובייל 9px (בבסיס 6px מתחת להירו, 10px מעל הפוטר)
       והפס שבין החוגים לאירועים 8px (בבסיס 10px) */
    .home-banner {
        border-bottom-width: 9px;
    }

    footer {
        border-top-width: 9px;
    }

    .classes:after {
        height: 8px;
    }

    /* "חוגים" במוקאפ המובייל מודגש: דיו 67x20 ⇒ RubikBold 35px, וראש הדיו 95px
       מתחת לפס הכתום (בבסיס ~32px) */
    .classes {
        padding-top: 88px;
    }

    .classes-head h1 {
        font-family: 'RubikBold';
        font-size: 35px;
        line-height: 1;
    }

    /* 19px מקו הטאב הפעיל לגלולה הראשונה (בבסיס 23px), ו-210px של תמונת
       הילדים מתחת לכפתור (בבסיס 60vw = 225px) */
    .classes-tab-content {
        padding-top: 19px;
        padding-bottom: 56vw;
    }

    /* "אירועים קרובים": דיו 174x25 ⇒ 34px (בבסיס 55px); 32px מהפס לכרטיס */
    .latest-events h2 {
        font-size: 34px;
        margin-bottom: 32px;
    }

    /* כרטיס האירוע במוקאפ ברוחב 313px (27-340), והחצים חופפים לשוליו;
       גוף הכרטיס 98px עם שורת כותרת אחת ~19px */
    .latest-events-slider {
        max-width: none;
        padding: 0 31px;
    }

    .latest-events-item {
        padding: 0;
    }

    /* בבסיס (≤767) יש 10px בין התמונה לגוף הכרטיס — במוקאפ הם צמודים */
    .latest-events-item-content {
        min-height: 98px;
        margin-top: 0;
        padding: 45px 15px 14px;
        font-size: 19px;
    }

    /* טופס ההרשמה: במוקאפ 58px בין קווי השדות (בבסיס 72px) והשדה הראשון 28px
       גבוה יותר */
    .footer-top h4 {
        margin-bottom: 14px;
    }

    .footer-form-item {
        margin: 13px auto;
    }

    .footer-form .form-btn {
        padding-top: 23px;
    }

    /* בר הרשתות התחתון במוקאפ 85px (בבסיס 74px) */
    .float-social {
        padding: 19px 15px 20px;
    }
}

/* responsive.css דוחף את הכרטיסים 35px למטה ב-≤530 (top: 35px; margin-bottom:
   45/30px) — במוקאפ הכרטיס צמוד לכותרת, ו-24px מעל "לכל האירועים" */
@media (max-width: 530px) {
    .latest-events-item {
        top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 435px) {
    /* במוקאפ הלוגו 18px מראש הדף (בבסיס 15px) */
    header {
        padding-top: 18px;
    }

    /* הבסיס מוחק את תמונת ההירו בטלפון (background: #fff !important); במוקאפ
       המובייל היא רצועה מעל העיגולים — 168px ב-375 ⇒ 44.8vw, 26px מעל השורה
       הראשונה של העיגולים */
    .home-banner {
        padding-bottom: 0;
    }

    .home-banner::before {
        content: "";
        display: block;
        height: 44.8vw;
        margin-bottom: 18px;
        background: url('../../images/schema81/images/home-banner-112.jpg') center 30% / cover no-repeat;
    }

    /* במוקאפ: 3 עיגולים בשורה, קוטר 82px (21.87vw), 92px בין מרכזים ו-98px בין
       שורות. בבסיס הפריט הוא 27% מהורה שרוחבו fit-content — התלות המעגלית מקריסה
       את השורה לשניים. */
    .home-banner-category-inner {
        width: 100%;
        max-width: 100%;
    }

    .home-banner-category-item,
    .home-banner-category-item:not(:last-child) {
        width: 21.87vw;
        margin: 8px 5px;
        border-width: 4px;
    }

    /* הבסיס מסתיר את אייקוני העיגולים בטלפון; במוקאפ הם מוצגים (~32px) */
    .home-banner-category-img {
        display: block;
        height: 32px;
        margin-bottom: 3px;
    }

    .home-banner-category-img img {
        max-height: 32px;
    }

    /* במוקאפ "חוגים בשלוחות" נכנס בשורה אחת (דיו 60px) ⇒ 10.5px */
    .home-banner-category-content {
        padding: 4px 3px;
    }

    .home-banner-category-content span {
        font-size: 10.5px;
        letter-spacing: 0;
    }
}

/* -------------------------------------------------------------------------
   13. החלפות מכניות (literal sweep) — המקומות שבהם הסכימה קושחה את הכחול שלה
       (#0079c2 / #00a2dc / #1279bf / #0179c2) → כחול המותג. longhand-ים של צבע
       בלבד; בעמודים הפנימיים אין מוקאפ — החלפת צבע, לא החלטת עיצוב.
   ------------------------------------------------------------------------- */
.inner-pages-hedding { background-color: var(--by-blue); }
.inner-pages-info { border-bottom-color: var(--by-blue); }
.inner-pages-info-item { color: var(--by-blue); }
.inner-pages-info-item a { color: var(--by-blue); }
.inner-pages-content h1, .inner-pages-content h2, .inner-pages-content h3, .inner-pages-content h4, .inner-pages-content h5, .inner-pages-content h6 { color: var(--by-blue); }
.image-text-desc h1, .image-text-desc h2, .image-text-desc h3, .image-text-desc h4, .image-text-desc h5, .image-text-desc h6 { color: var(--by-blue); }
.contact-info h3 { color: var(--by-blue); }
.category-item-inner { border-color: var(--by-blue); }
.category-item-inner a { color: var(--by-blue); }
.class-text h4 { color: var(--by-blue); }
.class-text h5 { color: var(--by-blue); }
.class-text h6 { color: var(--by-blue); }
.class-text .button { background-color: var(--by-blue); border-color: var(--by-blue); }
.class-text .button:hover { color: var(--by-blue); border-color: var(--by-blue); }
.forms-main .form-btn input[type="submit"] { background-color: var(--by-blue); border-color: var(--by-blue); }
.forms-main .form-btn input[type="submit"]:hover { color: var(--by-blue); }
.popover-header { background-color: var(--by-blue); }
/* בבסיס הכלל הזה כולו !important — רק כך אפשר להחליף את הצבע */
#expirienceSlider #sidebar, #expirienceSlider #sidebar1 { background-color: var(--by-blue) !important; border-color: var(--by-blue) !important; }
.dropdown-menu .bs-searchbox input::-webkit-input-placeholder { color: var(--by-blue); }
.dropdown-menu .bs-searchbox input:-moz-placeholder { color: var(--by-blue); }
.dropdown-menu .bs-searchbox input::-moz-placeholder { color: var(--by-blue); }
.dropdown-menu .bs-searchbox input:-ms-input-placeholder { color: var(--by-blue); }
ul.dropdown-menu li .dropdown-item:hover, ul.dropdown-menu li .dropdown-item:focus { color: var(--by-blue); }
ul.dropdown-menu li .dropdown-item.active, ul.dropdown-menu li .dropdown-item:active { color: var(--by-blue); }
.as-sub-menu__btn { color: var(--by-blue); }
.as-tenders-table th { background-color: var(--by-blue); }
.as-tenders-table__td-title { background-color: var(--by-blue); }
.as-tenders-table__link:hover, .as-tenders-table__td-primary { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table thead th { background-color: var(--by-blue); }
.requireds-parent-page .as-tenders-table td > .requiredSpan > a:not(.ts-he-deatils--button) { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table td > .requiredSpan > a:not(.ts-he-deatils--button):hover { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table td > .requiredSpan > a.ts-he-deatils--button, .requireds-parent-page .as-tenders-table .ts--table-button-open { background-color: var(--by-blue); }
.requireds-parent-page .as-tenders-table td > .requiredSpan > a.ts-he-deatils--button:hover, .requireds-parent-page .as-tenders-table .ts--table-button-open:hover { background-color: var(--by-orange); }
.requireds-parent-page .as-tenders-table .ts--table-hidden-title { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table .ts--table-hidden-content a { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table .ts--table-hidden-content a:hover { color: var(--by-blue); }
.requireds-parent-page .as-tenders-table .ts--table-hidden-box { border-top-color: var(--by-orange); }
.inner-page-banner { border-bottom-color: var(--by-orange); }

/* החלפות שמקורן בכללי @media של responsive.css — באותו scope, אחרת צבע/רקע
   היו נצבעים גם ברוחבים שבהם הכלל המקורי לא חל */
@media (max-width: 1023px) {
    .classes-filter form input[type="submit"] { background-color: var(--by-blue); }
    .classes-tab-item input[type="submit"] { background-color: var(--by-blue); }

    /* כפתור "סיום" של גיליון הבחירה התחתון במובייל — ה-<style> של
       hugim81searchbar.php מגיע אחרי הקובץ הזה, לכן !important */
    .classes-filter .bootstrap-select div.dropdown-menu.show .popover-header .close:not(:disabled):not(.disabled),
    .classes-filter .bootstrap-select div.dropdown-menu.show .popover-header .close::after {
        color: var(--by-blue) !important;
    }
}

@media (max-width: 767px) {
    footer { border-top-color: var(--by-orange); }
    table.as-tenders-table td[data-label]::before { background-color: var(--by-blue); }
    .procedure-page .inner-pages-content .freeText tr { border-color: var(--by-blue); }
    .procedure-page .inner-pages-content .freeText th[data-label]:before,
    .procedure-page .inner-pages-content .freeText td[data-label]:before { color: var(--by-blue); }
}

/* 13א. דף חיפוש החוגים (page.php?type=hugSearch) — אליו שולח בר החיפוש של עמוד הבית
   (ייבוא אוטומטי) ופריט התפריט "החוגים שלנו". המודול צובע את עצמו במשתני --hsr-*
   על .hsr-root בתוך <style> שמגיע אחרי הקובץ הזה — div.hsr-root גובר בספציפיות. */
div.hsr-root {
    --hsr-accent: var(--by-blue);
    --hsr-accent-strong: var(--by-blue-dark);
    --hsr-accent-soft: #e6f1f8;
}

/* -------------------------------------------------------------------------
   14. עמודים פנימיים — תיקוני מנגנון של סכימה 81 (אותם תיקונים שנמצאו ב-QA של
       מרכז 54; אין לעמודים האלה מוקאפ).
   ------------------------------------------------------------------------- */

/* 14א. אריחי קישורים עם תמונה — דף מחלקה (class81.php) ודף שלוחה (scheme81.php).
   בבסיס האריח הוא שורה בגובה קבוע 123px: התמונה (עד 160px) תופסת את רוב הרוחב
   והכותרת נדחסת לעמודה צרה וגולשת מחוץ למסגרת. כאן התמונה מעל הכותרת, האריח
   גדל לפי התוכן, ואריחים באותה שורה נמתחים לגובה אחיד. אריח טקסט בלבד לא משתנה. */
.category-item {
    display: flex;
}

.category-item-inner {
    flex: 1;
}

.category-item-inner:has(> img.hugImage) {
    position: relative;
    height: auto;
    min-height: 123px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
}

/* ה-!important גובר על ה-style המוטבע של class81.php (max-height:160px, width:auto).
   תמונה אמיתית: רצועה ברוחב האריח, בלי חיתוך (contain). */
.category-item-inner > img.hugImage {
    width: 100% !important;
    height: 150px !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* הלוגו החלופי (אין תמונה לשורה — class81.php מסמן hugImage--logo) קטן ולא משתלט */
.category-item-inner > img.hugImage--logo {
    width: auto !important;
    height: auto !important;
    max-width: 60% !important;
    max-height: 56px !important;
}

.category-item-inner:has(> img.hugImage) a {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 6px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* כל האריח לחיץ, לא רק שורת הכותרת */
.category-item-inner:has(> img.hugImage) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* 14ב. דפי פירוט — חוג (hug81), אירוע (event81), עמוד תוכן ועמוד אב (page81/parent81),
   שלוחה (scheme81), צהרון (tzhoaron81): כולם .class-text ואחריו .class-img בתוך
   .class-page-main. בעיצוב המקורי של הסכימה הטקסט היה max-width: 45.6% ליד התמונה;
   השורה הזו הוסרה ב-screen.css ("Refactor CSS styles"), ומאז הטקסט ברוחב 100%
   והתמונה נשברת לשורה מתחת לו, בחצי ימין, עם חצי שמאל ריק. כאן — שוב זה לצד זה
   בדסקטופ (רוחב התמונה 46.39% של הבסיס), ומתחת ל-992 התמונה מעל הטקסט.
   דף מחלקה (class81) בנוי אחרת (.container-div) ואינו נתפס. */
@media (min-width: 992px) {
    .class-page-main:has(> .class-text):has(> .class-img) {
        flex-wrap: nowrap !important; /* גובר על .flex-wrap של bootstrap (utility עם !important) */
        align-items: flex-start;
        gap: 40px;
    }

    .class-page-main:has(> .class-img) > .class-text {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .class-page-main:has(> .class-text) > .class-img {
        flex: 0 0 46.39%;
    }
}

@media (max-width: 991px) {
    .class-page-main:has(> .class-text) > .class-img {
        order: -1;
        margin-bottom: 20px;
    }
}

/* 14ג. דף דרושים — תיאור המשרה מה-TinyMCE בנוי <li><p>טקסט</p></li>. הבסיס נותן
   list-style: inside, ולכן התבליט יושב בשורה משלו והטקסט יורד שורה. */
.requireds-parent-page .ts--table-hidden-box ul {
    margin: 0 0 12px 0;
    padding-right: 22px;
}

.requireds-parent-page .ts--table-hidden-box ul li {
    list-style-position: outside;
    margin-bottom: 4px;
}

.requireds-parent-page .ts--table-hidden-box li > p {
    margin: 0;
}