/*
Theme Name: Beralle - היחידה ללימודי חוץ בית ברל
Theme URI: https://www.beralle.org
Author: היחידה ללימודי חוץ בית ברל
Description: תבנית ייעודית לאתר היחידה ללימודי חוץ של המכללה האקדמית בית ברל. עיצוב נקי בהשראת המיתוג הרשמי: ירוק #228269, פונט Rubik, תמיכת RTL מלאה.
Version: 1.9.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: beralle
*/

:root{
  --sage:#d9e9df;
  --green:#228269;
  --green-d:#014127;
  --ink:#1a1a1a;
  --muted:#5a6660;
  --soft:#f2f8f4;
  --line:#e0eae4;
  --gold:#ffc530;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Rubik',sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===== Top bar ===== */
.topbar{background:var(--sage);padding:10px 0}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .t{font-size:13.5px;color:var(--green-d);font-weight:500}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1.4px solid var(--green);color:var(--green-d);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600;background:transparent;display:inline-block}

/* ===== Header ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:99}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:18px}
.logolink{display:flex;align-items:center;gap:14px}
.logolink img.logo{height:58px;width:auto;display:block}
/* הלוגו העגול המסתובב. 58.5px על התיבה = מעגל נראה של 58px, בדיוק גובה לוגו המילים.
   הקבצים כבר חתוכים סימטרית סביב מרכז הסיבוב, ולכן הטבעת לא מתנדנדת. */
.roundmark{position:relative;display:block;flex:0 0 auto;width:58.5px;height:58.5px}
.roundmark img{position:absolute;inset:0;width:100%;height:100%;display:block}
.rm-ring{animation:rm-spin 26s linear infinite;transform-origin:50% 50%;will-change:transform}
@keyframes rm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rm-ring{animation:none}}
.main-nav ul{display:flex;gap:26px;list-style:none;font-size:15px;font-weight:500;flex-wrap:wrap}
.main-nav a:hover{color:var(--green)}
.main-nav .current-menu-item > a{color:var(--green);font-weight:700}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:600;padding:12px 26px;border-radius:100px;font-size:15px;border:none;cursor:pointer;transition:.15s}
.btn:hover{background:var(--green-d);color:#fff}
.btn.line{background:transparent;border:1.5px solid var(--green);color:var(--green)}
.btn.line:hover{background:var(--green);color:#fff}
/* כפתור קריאה לפעולה בזהב המותג. ניגודיות ירוק כהה על זהב עוברת AA */
.btn.gold{background:var(--gold);color:var(--green-d);border:none}
.btn.gold:hover{background:#f0b419;color:var(--green-d)}
.menu-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--green-d)}

/* ===== Hero ===== */
.hero{padding:44px 0 60px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:42px;line-height:1.22;font-weight:800}
.hero h1 .sep{color:var(--green)}
.hero .sub,.hero > .wrap > div > p{margin:18px 0 26px;font-size:17.5px;line-height:1.75;color:var(--muted);max-width:560px;font-weight:300}
.cta-row{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
/* פס העובדות: ה-✓ לא קיים ב-Rubik ונופל לפונט מערכת עם מטריקות אחרות,
   ולכן בלי גובה קבוע ל-b שתי הכותרות לא יושבות על אותו קו. */
.facts{display:flex;gap:36px;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap;align-items:flex-start}
.fact b{font-size:26px;color:var(--green);display:block;font-weight:800;line-height:34px;height:34px}
.fact span{font-size:13.5px;color:var(--muted);display:block;line-height:1.35}
.hero-photo img{width:100%;height:430px;object-fit:cover;border-radius:24px 100px 24px 24px;border:1px solid var(--line);box-shadow:0 18px 44px rgba(1,65,39,.14)}

/* ===== Sections ===== */
.section{padding:64px 0}
.sec-head{text-align:center;margin-bottom:42px}
.sec-head h2,.sec-head h1{font-size:32px;font-weight:800}
.sec-head h2 em,.sec-head h1 em{font-style:normal;color:var(--green)}
.sec-head p{color:var(--muted);margin-top:8px;font-size:16.5px;font-weight:300}

/* ===== שתי שורות בתי הספר בדף הבית, סטטיות =====
   אין תנועה אופקית: הכרטיס עומד במקומו, כדי שהגולש יוכל ללחוץ על בית הספר
   שהוא מחפש. (שונה ב-2.9.2026 לבקשת רוני)

   10.9.2026, הסדר שרוני קבעה: **שישה בשורה העליונה, חמישה בתחתונה,
   והתחתונה ממורכזת מתחת לעליונה.**

   הגריד הוא שתים-עשרה עמודות וכל ריבוע תופס שתיים. זה נותן בדיוק את אותו
   רוחב ריבוע כמו גריד של שש - (W-90)/6 בשני המקרים - אבל מאפשר להזיז את
   השורה התחתונה בחצי ריבוע, וזה בדיוק המרכוז שצריך לחמישה מתחת לשישה.

   `:nth-child(7):nth-last-child(5)` תופס את הריבוע השביעי **רק כשיש בדיוק
   אחד-עשר**. אם יתווסף בית ספר שנים-עשר הכלל מפסיק לחול מעצמו, והפריסה
   חוזרת לשש ושש מלאות בלי לגלוש. **בית ספר נוסף = לעדכן גם את הכלל הזה.** */
.mq{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.mq-row,.mq-track{display:contents}
.mq .card{grid-column:span 2}
.mq .card:nth-child(7):nth-last-child(5){grid-column:2/span 2}
/* מעבר עכבר: מסגרת זהב בלבד. בלי הרמה ובלי זום על התמונה, כמו במצב שאושר */
.mq .card:hover,.mq .card:focus-visible{transform:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 10px 22px rgba(1,65,39,.10)}
.mq .card:hover .ph img,.mq .card:focus-visible .ph img{transform:none}
.mq .card:focus-visible{outline:3px solid var(--green-d);outline-offset:2px}
/* עמוד הביניים של היוצרים (page-hayotsrim.php), 17.9.2026: שני כרטיסים באמצע,
   כל אחד ברוחב של שתי עמודות בגריד של דף הבית, כדי שייראו כמו האריחים שם. */
.mq.mq-duo{grid-template-columns:repeat(2,1fr);max-width:520px;margin:0 auto}
.mq.mq-duo .card{grid-column:auto}
.hayotsrim-band{background:var(--green-d);padding:44px 0;text-align:center}
.hayotsrim-band h1{margin:0;line-height:0}
.hayotsrim-band img{width:340px;max-width:80%;height:auto;display:inline-block}

.card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.18s;display:block}
.card:hover{box-shadow:0 12px 26px rgba(34,130,105,.15);transform:translateY(-3px)}
/* יחס ולא גובה קבוע: עם height קבוע היחס משתנה במסך צר ו-cover חותך סנטרים */
.card .ph{aspect-ratio:212/210;background:#eef5f1;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:.3s}
.card:hover .ph img{transform:scale(1.04)}
.card .tx{padding:14px 14px 16px}
.card h3,.card h2{font-size:14.5px;font-weight:700;line-height:1.35}
.card small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;line-height:normal}

/* ===== ארכיון בתי הספר =====
   3.9.2026: העמוד /schools/ השתמש ב-.schools-grid ו-.school-card משלו, ולכן
   נראה אחרת מדף הבית: בלי המסגרת הצהובה במעבר עכבר, עם הרמה וזום שכבר בוטלו
   בדף הבית, ועם חיתוך תמונה אחר. כל אלה נמחקו, והעמוד בנוי מ-.mq ו-.card,
   בדיוק כמו דף הבית. אין יותר שני מקומות לתחזק. */

/* ===== About band ===== */
.band{background:var(--soft);border-block:1px solid var(--line)}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.band h2{font-size:30px;font-weight:800;margin-bottom:14px}
.band p{line-height:1.8;color:var(--muted);margin-bottom:12px;font-weight:300}
.checks{list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 22px}
.checks li{padding:13px 0;border-bottom:1px solid var(--line);font-weight:500;font-size:15.5px}
.checks li:last-child{border-bottom:none}
.checks li::before{content:'✓';color:var(--green);font-weight:800;margin-left:10px}

/* ===== Lead form ===== */
.lead-box{background:var(--green-d);border-radius:18px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff}
.lead-box img.wlogo{height:56px;width:auto;margin-bottom:16px}
.lead-box h2{font-size:29px;font-weight:800;margin-bottom:8px}
.lead-box p{opacity:.85;line-height:1.7;font-weight:300}
.lead-box .note{font-size:13.5px;margin-top:12px;color:#bfe3d3;font-weight:500}
.lead-form{display:grid;gap:11px}
.lead-form input,.lead-form select,.lead-form textarea{padding:13px 16px;border:none;border-radius:10px;font-family:'Rubik',sans-serif;font-size:15px;width:100%}
.lead-form .btn{background:var(--green)}
.lead-form .btn:hover{background:#2c9a7d}
.lead-msg{background:#fff;color:var(--green-d);border-radius:10px;padding:12px 16px;font-weight:600}
/* תיבת ההסכמה לעדכונים והודעת הפרטיות מתחת לכפתור, 22.10.2026 (תיקון 13).
   הכלל .lead-form input נותן לכל שדה רוחב מלא וריפוד, ולכן מאפסים אותם לתיבה.
   ההודעה ב-p, ו-.lead-box p מחליש אותה ל-85% - מבטלים, כדי לשמור על ניגודיות. */
.lead-form .lead-consent{display:flex;align-items:flex-start;gap:10px;margin:3px 0 1px;font-size:13.5px;line-height:1.55;color:#e3f1ea;cursor:pointer}
.lead-form .lead-consent input{flex:none;width:18px;height:18px;padding:0;margin:1px 0 0;border-radius:4px;accent-color:var(--gold);cursor:pointer}
.lead-box .lead-privacy{opacity:1;font-size:12.5px;line-height:1.65;font-weight:400;color:#bfe3d3}
.lead-privacy a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lead-privacy a:hover{color:var(--gold)}
/* על הרקע הירוק הכהה מסגרת המיקוד הירוקה הרגילה לא נראית */
.lead-box :focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ===== Blog / content ===== */
.content-area{padding:52px 0}
.content-area .wrap{max-width:860px}
.entry-title{font-size:36px;font-weight:800;margin-bottom:18px}
.entry-content p{margin-bottom:16px;line-height:1.85}
.entry-content h2{font-size:26px;font-weight:700;margin:28px 0 12px;color:var(--green-d)}
.entry-content h3{font-size:20px;font-weight:700;margin:22px 0 10px}
.entry-content ul,.entry-content ol{margin:0 20px 16px 0}
.entry-content a{color:var(--green);text-decoration:underline}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:.18s;display:block}
.post-card:hover{box-shadow:0 12px 26px rgba(34,130,105,.13)}
.post-card .ph{height:170px;background:var(--soft)}
.post-card .ph img{width:100%;height:100%;object-fit:cover}
.post-card .tx{padding:16px}
.post-card h3{font-size:17px;font-weight:700;line-height:1.4}
.post-card time{font-size:12.5px;color:var(--muted)}

/* ===== School single ===== */
.school-hero{background:var(--soft);border-bottom:1px solid var(--line);padding:52px 0}
.school-hero .wrap{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
.school-hero h1{font-size:36px;font-weight:800}
.school-hero .lead-name{color:var(--green);font-weight:600;font-size:18px;margin-top:6px}
.school-hero img{width:100%;border-radius:14px;border:1px solid var(--line)}

/* ===== FAQ ===== */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq-item summary{padding:16px 20px;font-weight:600;cursor:pointer;background:#fff;list-style:none;position:relative}
.faq-item summary::after{content:'+';position:absolute;left:20px;color:var(--green);font-size:20px;font-weight:700}
.faq-item[open] summary::after{content:'-'}
.faq-item .a{padding:0 20px 16px;color:var(--muted);line-height:1.8}

/* ===== Footer ===== */
.site-footer{padding:36px 0;font-size:14px;color:var(--muted)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:26px}
.site-footer .foot-brand{display:flex;align-items:center;gap:12px}
.site-footer .foot-logo{height:44px;width:auto}
.site-footer .roundmark{width:44px;height:44px}
/* קישורי הפוטר: נקודה מפרידה בין הפריטים וקו תחתון עדין שמראה שהם לחיצים. */
.site-footer nav ul{display:flex;gap:0;list-style:none;flex-wrap:wrap;align-items:center}
/* הנקודה יושבת בסוף הפריט הקודם ולא בתחילת הבא, כדי שכששורה נשברת
   היא לא תישאר תלויה לבדה בתחילת השורה החדשה. */
.site-footer nav li:not(:last-child)::after{content:"·";margin:0 11px;color:#9fb3a9}
.site-footer nav a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:#b9cec4}
.site-footer nav a:hover{color:var(--green);text-decoration-color:var(--green)}
.site-footer a:hover{color:var(--green)}

/* ===== נגישות ===== */
.skip-link{position:absolute;right:-9999px;top:0;z-index:999;background:var(--green-d);color:#fff;padding:10px 18px;border-radius:0 0 10px 0}
.skip-link:focus{right:0}
/* נגישות 10.10.2026: היעד של קישור הדילוג מקבל פוקוס (tabindex="-1"), בלי מסגרת סביב כל התוכן */
#main:focus{outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--green-d);outline-offset:2px}

/* ===== Responsive ===== */
@media(max-width:960px){
  .hero .wrap,.band .wrap,.lead-box,.school-hero .wrap{grid-template-columns:1fr}
  .mq{grid-template-columns:repeat(2,1fr)}
  /* אותו כלל בשתי עמודות: כרטיס אחרון שנשאר לבדו נפרש על שתיהן ומתמרכז,
     ברוחב של עמודה אחת, כדי שלא ייווצר תא ריק לצידו. */
  /* מבטלים את פריסת שתים-עשרה העמודות של הדסקטופ: כאן ריבוע = עמודה. */
  .mq .card,
  .mq .card:nth-child(7):nth-last-child(5){grid-column:auto}
  .mq .card:last-child:nth-child(2n+1){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
  .hero h1{font-size:32px}
  .hero-photo img{height:300px}
  .main-nav{display:none;position:absolute;top:100%;right:0;left:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px 20px}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:14px}
  /* הדר מובייל. בלי min-width:0 ובלי הקטנה, .logolink נדחס מתחת לרוחב התוכן שלו
     והלוגו העגול גולש שמאלה ויושב בדיוק על כפתור התפריט. הסדר במובייל:
     לוגו בימין, כפתור הייעוץ באמצע, כפתור התפריט בקצה השמאלי.
     ללוגו נותנים max-height ולא height, כדי שכשהוא כן נדחס הוא יקטן ביחס נכון
     ולא יימתח. --hm הוא גובה סימני הלוגו, ומכתיב גם את מידת הכפתור. */
  .nav{--hm:clamp(30px,11vw,44px);gap:clamp(6px,2.5vw,12px);padding:10px clamp(12px,4vw,20px);flex-wrap:nowrap}
  .logolink{gap:clamp(6px,2vw,10px);min-width:0;flex:0 1 auto}
  .logolink img.logo{height:auto;width:auto;max-height:var(--hm);max-width:100%}
  .roundmark{width:var(--hm);height:var(--hm)}
  .nav-cta{order:2}
  .nav .btn{flex:0 0 auto;padding:9px clamp(10px,3.5vw,16px);font-size:clamp(12px,3.4vw,14px);white-space:nowrap}
  .menu-toggle{display:flex;order:3;flex:0 0 auto;align-items:center;justify-content:center;width:var(--hm);height:var(--hm);padding:0}
  .menu-toggle svg{width:20px;height:20px;display:block}
  .post-list{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){.post-list{grid-template-columns:1fr}.lead-box{padding:30px}}


/* ===================================================================
   שכבת המובייל - נוספה 24.8.2026
   הכל כאן חי רק מתחת ל-860px. הדסקטופ לא מושפע משורה אחת מכאן.
   =================================================================== */

/* ---- חשיפה בגלילה ---- */
/* המתג html.sr-on נדלק מ-JS בלבד, ולכן בלי JS העמוד מוצג במלואו */
@media (max-width:860px){
  html.sr-on [data-sr]{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--sd,0ms),
               transform .55s cubic-bezier(.22,.61,.36,1) var(--sd,0ms);
    will-change:opacity,transform;
  }
  html.sr-on [data-sr].sr-in{opacity:1;transform:none}
  html.sr-on .card[data-sr] .ph img{
    transform:scale(1.06);
    transition:transform .85s cubic-bezier(.22,.61,.36,1) var(--sd,0ms);
  }
  html.sr-on .card[data-sr].sr-in .ph img{transform:none}
}

/* ---- הטלפון הצהוב בתפריט של דף הבית (3.9.2026) ----
   יושב במקום פריט "צרו קשר". מעבר עכבר או מיקוד מקלדת מרימים את השפופרת
   ופותחים למטה את "התקשרו" ו"וואטסאפ". הכל ב-CSS, בלי JS.
   מתחת ל-860px הוא מוסתר, ושם הטלפון הצף בפינה עושה את אותה עבודה. */
/* עמודת ה-CTA בקצה השמאלי של ההדר: כפתור "לייעוץ לימודים", ומתחתיו,
   בדף הבית בלבד, הטלפון הצהוב ממורכז אליו.
   הטלפון יושב במיקום מוחלט ולא בזרימה, כדי שהוא לא ידחוף את הכפתור כלפי מעלה:
   הלוגו, שורת התפריט והכפתור חייבים להישאר על אותו קו אופקי.
   את המקום שהטלפון תופס נותנים בריפוד התחתון של .nav בדף הבית בלבד. */
.nav-cta{position:relative;flex:0 0 auto}
.nav-cta .navph{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%)}
@media(min-width:861px){
  .home .site-header .nav{padding-bottom:71px}
}
.navph{position:relative;display:block}
.navph-btn{
  display:block;width:54px;height:51px;padding:0;margin:0;
  background:none;border:none;cursor:pointer;position:relative;overflow:visible;
  -webkit-tap-highlight-color:transparent;
}
.navph-btn:focus-visible{outline:3px solid var(--green-d);outline-offset:4px;border-radius:10px}
/* הצל שייך לתמונה, לא לתיבת הכפתור */
.navph-img{position:absolute;inset:0;filter:drop-shadow(0 5px 10px rgba(1,65,39,.26))}
.navph-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;transition:opacity .22s ease}
.navph-img .ph-b{opacity:0}
.navph:hover .ph-a,.navph:focus-within .ph-a{opacity:0}
.navph:hover .ph-b,.navph:focus-within .ph-b{opacity:1}
/* שתי האפשרויות נפתחות כלפי מטה, כי הטלפון יושב בראש העמוד */
.navph-opts{
  position:absolute;top:calc(100% + 12px);right:50%;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;transform:translate(50%,6px);
  transition:opacity .18s ease,transform .18s ease;z-index:120;
}
.navph:hover .navph-opts,.navph:focus-within .navph-opts{opacity:1;pointer-events:auto;transform:translate(50%,0)}
.navph-opt{
  display:flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;
  box-shadow:0 10px 24px rgba(1,65,39,.16);
  color:var(--green-d);font-size:14px;font-weight:600;white-space:nowrap;
}
.navph-opt:hover{border-color:var(--green);color:var(--green-d)}
.navph-opt .circ{width:28px;height:28px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;flex:none}
.navph-opt .circ svg{width:15px;height:15px;stroke:#fff;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- בחירת שירות דואר על כתובת המייל שבפס העליון (3.9.2026) ----
   `mailto:` פונה לתוכנת הדואר המוגדרת אצל הגולש, ובמחשב שאין בו כזו לא קורה כלום.
   לכן במחשב הלחיצה פותחת בחירה קצרה, וכל אפשרות פותחת חלון כתיבה כשהכתובת
   כבר בשדה "אל". בנייד אין בחירה: שם mailto עובד. הכל נבנה ב-JS,
   ובלי JS הכפתור נשאר קישור mailto רגיל. */
.mailpick{position:relative;display:inline-block}
.mailpick > .pill{cursor:pointer}
.mailpick-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  display:flex;flex-direction:column;min-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 12px 28px rgba(1,65,39,.18);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:130;
}
/* נגישות 10.10.2026: visibility מוציא את האפשרויות ממעבר ה-Tab כשהתפריט סגור,
   כדי שהמיקוד לא ייעלם לתוך תפריט שקוף. Enter על כתובת המייל פותח אותו. */
.mailpick.on .mailpick-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.mailpick-opt{
  display:block;padding:8px 14px;border-radius:8px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--green-d);
}
.mailpick-opt:hover,.mailpick-opt:focus-visible{background:var(--soft);color:var(--green-d)}
/* האפשרות השלישית היא כפתור ולא קישור, ולכן מאפסים לה את מראה הכפתור */
.mailpick-copy{
  width:100%;text-align:right;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;
  border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;padding-top:10px;
}
.mailpick-copy.ok{color:var(--green)}


/* ---- כפתור הטלפון הצהוב ---- */
.yfab{display:none}
@media (max-width:860px){
  /* במובייל הטלפון הצף בפינה מחליף את זה שבהדר */
  .nav-cta .navph{display:none}
  .yfab{
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    position:fixed;bottom:18px;left:18px;z-index:70;
  }
  .yfab-opts{
    display:flex;flex-direction:column;gap:10px;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }
  /* נגישות 10.10.2026: סגור = מחוץ למעבר ה-Tab, כמו בעמודי בתי הספר */
  .yfab.open .yfab-opts{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
  .yfab-opt{
    display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;
    padding:9px 18px 9px 9px;box-shadow:0 8px 22px rgba(0,0,0,.16);
    color:var(--green-d);font-size:14px;font-weight:600;white-space:nowrap;
  }
  .yfab-opt .circ{
    width:32px;height:32px;border-radius:50%;background:var(--green);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .yfab-opt .circ svg{width:16px;height:16px;stroke:#fff;fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* הטלפון עומד בפני עצמו. בלי עיגול ובלי מסגרת, רק צל.
     overflow גלוי בכוונה, כדי שהשפופרת המורמת תעלה מעל שפת הכפתור. */
  .yfab-btn{
    position:relative;width:88px;height:84px;
    background:none;border:none;box-shadow:none;
    cursor:pointer;padding:0;overflow:visible;
    -webkit-tap-highlight-color:transparent;
  }
  .yfab-btn:focus-visible{outline:3px solid var(--green-d);outline-offset:6px;border-radius:12px}
  .yfab-ph{position:absolute;inset:0;pointer-events:none;z-index:1;
    filter:drop-shadow(0 8px 14px rgba(1,65,39,.30))}
  /* שני הפריימים חתוכים במסגרת משותפת אחת, ולכן הבסיס לא זז כשהשפופרת עולה */
  .yfab-ph img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;display:block;transition:opacity .22s ease}
  .yfab-ph .ph-b{opacity:0}
  .yfab.open .yfab-ph .ph-a{opacity:0}
  .yfab.open .yfab-ph .ph-b{opacity:1}
  /* ההילה הירוקה הפועמת הוסרה ב-2.9.2026 לבקשת רוני.
     הכפתור הוא טלפון צהוב עומד בפני עצמו, עם צל רך בלבד. */
  /* שלא יכסה את שורת הקרדיט בתחתית */
  .site-footer{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  html.sr-on [data-sr]{opacity:1;transform:none;transition:none}
  html.sr-on .card[data-sr] .ph img{transform:none;transition:none}
  .yfab-opts{transition:none}
  .yfab-ph img{transition:none}
}

/* ===================== נגישות, 10.10.2026 =====================
   תפריט הנגישות (הכפתור בפינה הימנית התחתונה) והמצבים שהוא מפעיל.
   הכפתורים הצפים של הטלפון יושבים בשמאל, ולכן הימין פנוי. */
.a11y-menu{position:fixed;right:18px;bottom:18px;z-index:90;font-family:'Rubik',sans-serif;direction:rtl}
.a11y-toggle{width:52px;height:52px;border-radius:50%;border:0;background:var(--green-d);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(1,65,39,.28)}
.a11y-toggle svg{width:30px;height:30px}
.a11y-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.a11y-panel{position:absolute;right:0;bottom:64px;width:min(316px,calc(100vw - 36px));background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(1,65,39,.18);padding:16px 16px 14px}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.a11y-title{font-size:18px;font-weight:700;color:var(--green-d);margin:0}
.a11y-close{width:36px;height:36px;border:0;border-radius:10px;background:var(--soft);color:var(--green-d);display:flex;align-items:center;justify-content:center;cursor:pointer}
.a11y-close svg{width:18px;height:18px}
.a11y-zoom{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);border-radius:12px;padding:6px;margin:0 0 10px}
.a11y-zbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;border-radius:9px;background:#fff;color:var(--green-d);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.a11y-zbtn svg{width:20px;height:20px}
.a11y-zval{min-width:52px;text-align:center;font-weight:700;color:var(--green-d)}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--green-d);font:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;text-align:center}
.a11y-opt svg{width:24px;height:24px;color:var(--green)}
.a11y-opt[aria-pressed="true"]{background:var(--green-d);border-color:var(--green-d);color:#fff}
.a11y-opt[aria-pressed="true"] svg{color:#fff}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:10px 2px 0;border-top:1px solid var(--line)}
.a11y-reset{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;color:var(--green-d);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.a11y-reset svg{width:18px;height:18px}
.a11y-statement{color:var(--green-d);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:12px 4px}
@media (hover:hover) and (pointer:fine){
  .a11y-toggle:hover{background:var(--green)}
  .a11y-zbtn:hover,.a11y-opt:hover,.a11y-reset:hover{border-color:var(--green);background:var(--soft)}
  .a11y-opt[aria-pressed="true"]:hover{background:var(--green-d)}
}
@media print{.a11y-menu{display:none}}

/* הגדלת התצוגה: zoom מגדיל טקסט, תמונות ורווחים יחד, כמו הגדלה של הדפדפן */
html.a11y-zoom-1 body{zoom:1.1}
html.a11y-zoom-2 body{zoom:1.2}
html.a11y-zoom-3 body{zoom:1.3}

/* שחור-לבן: על <html> ולא על body, כדי שאלמנטים קבועים (הדר, כפתורים צפים) יישארו במקום */
html.a11y-gray{filter:grayscale(1)}

/* ניגודיות כהה: רקע שחור, טקסט לבן, קישורים צהובים. תמונות לא משתנות. */
html.a11y-dark body,html.a11y-dark body *:not(img):not(svg):not(svg *):not(canvas):not(video){background-color:#000 !important;color:#fff !important;border-color:#fff !important;box-shadow:none !important;text-shadow:none !important}
html.a11y-dark body a,html.a11y-dark body a *:not(svg):not(svg *){color:#ffe14d !important}
html.a11y-dark .a11y-opt[aria-pressed="true"]{background-color:#ffe14d !important;color:#000 !important}
html.a11y-dark .a11y-opt[aria-pressed="true"] *{color:#000 !important}

/* ניגודיות בהירה: רקע לבן, טקסט שחור, קישורים כחולים כהים */
html.a11y-light body,html.a11y-light body *:not(img):not(svg):not(svg *):not(canvas):not(video){background-color:#fff !important;color:#000 !important;border-color:#000 !important;box-shadow:none !important;text-shadow:none !important}
html.a11y-light body a,html.a11y-light body a *:not(svg):not(svg *){color:#0a2fa0 !important}
html.a11y-light .a11y-opt[aria-pressed="true"]{background-color:#000 !important;color:#fff !important}
html.a11y-light .a11y-opt[aria-pressed="true"] *{color:#fff !important}

/* הדגשת קישורים */
html.a11y-links a{text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:3px !important}
html.a11y-links a:not(.a11y-statement){outline:2px dashed currentColor;outline-offset:2px}

/* גופן קריא */
html.a11y-font body,html.a11y-font body *:not(svg):not(svg *){font-family:Arial,'Helvetica Neue',Helvetica,sans-serif !important;letter-spacing:.01em}

/* עצירת אנימציות: גם הלוגו המסתובב, החשיפה בגלילה ושובל העכבר */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.a11y-still .beralle-trail{display:none !important}
html.a11y-still .reveal,html.a11y-still .reveal-stagger>*{opacity:1 !important;transform:none !important}