/* Site footer (Yair 8.11.2026 18:34 "תסדר את הפוטר, הוא לא נראה טוב"): one footer for every page, in the home page's own
   language: a navy (ink) band with a hand-drawn red wave on its top edge, paper text, the cream card with the offset shadow.
   Self-contained (literal colours), so it reads the same under the demo-5 stylesheet and under the inner-page skin. */
.sf{position:relative;z-index:2;background:#0E1E4A;color:#C9CEE0;padding:58px 0 34px;margin-top:clamp(36px,5vw,64px);font-family:'Assistant',system-ui,sans-serif;font-size:16px;line-height:1.55;border:0}
.sf__wave{position:absolute;top:-13px;left:0;width:100%;height:14px;display:block;pointer-events:none}
.sf .wrap{position:relative}
.sf a{color:#D5DAE8;text-decoration:none}
.sf a:hover{color:#F3ECDF;text-decoration:underline;text-decoration-color:#D63A40;text-decoration-thickness:2px;text-underline-offset:5px}
.sf :focus-visible{outline:3px solid #FF9EA2;outline-offset:3px;border-radius:6px}
.sf h2{margin:0;font-family:'Suez One','Assistant',serif;font-weight:400;letter-spacing:0;color:#F3ECDF;font-size:19px;line-height:1.3}

/* separation (Yair 8.11.2026 18:54 "אין הפרדה ברורה בין הפוטר לסקשיין מעליו"): a strip of paper always sits between the
   last section and the footer (home and /למשפחות end on a navy section), and the hand-drawn red wave rides the footer's top
   edge inside that strip, so the boundary reads the same on every page. Body background is paper on both shells. */

/* top row: brand, reach (WhatsApp + email), teachers card */
.sf__top{display:grid;gap:26px;align-items:center;padding-bottom:34px;border-bottom:1px solid rgba(243,236,223,.16)}
.sf__brand{display:grid;gap:6px;justify-items:start;align-content:start}
.sf__brand img{width:137px;height:auto}
.sf .f-tag{font:500 14px/1.3 'Rubik','Assistant',sans-serif;color:#F3ECDF;letter-spacing:.01em}
.sf__brand p{margin:6px 0 0;color:#C9CEE0;font-size:15.5px;max-width:34ch}
.sf__reach{display:grid;gap:14px;justify-items:start}
.sf .sf__wa{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 22px;border-radius:12px;background:#F3ECDF;color:#0E1E4A;border:2px solid #F3ECDF;
  font:700 17px/1 'Assistant',system-ui,sans-serif;box-shadow:4px 5px 0 #D63A40;transition:transform .18s,box-shadow .18s;white-space:nowrap}
.sf .sf__wa svg{color:#D63A40;flex:none}
.sf .sf__wa:hover{color:#0E1E4A;text-decoration:none;transform:translate(-1px,-1px);box-shadow:5px 6px 0 #D63A40}
.sf .sf__wa:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #D63A40}
.sf .sf__mail{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:#D5DAE8;min-height:32px}
.sf .sf__mail svg{color:#FF9EA2;flex:none}
.sf__teach{position:relative;background:#FFFBF4;color:#38426A;border-radius:14px;padding:22px 22px 20px;box-shadow:6px 7px 0 rgba(0,0,0,.3);transform:rotate(-1deg)}
.sf__teach::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(217,196,163,.92);transform:rotate(3deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sf .sf__teach h2{color:#0E1E4A;font-size:24px;margin-bottom:4px}
.sf__teach p{margin:0 0 14px;font-size:16px;color:#38426A}
.sf .sf__tbtn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:12px;background:#0E1E4A;color:#FFFBF4;border:2px solid #0E1E4A;font:700 16px/1 'Assistant',system-ui,sans-serif;box-shadow:4px 5px 0 rgba(14,30,74,.18)}
.sf .sf__tbtn:hover{color:#FFFBF4;text-decoration:none;background:#1b2d63}

/* link map: three balanced columns ("לפי עיר" stacked under "Class A") */
.sf__map{display:grid;gap:0;padding:30px 0 6px}
.sf__grp summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sf__grp summary::-webkit-details-marker{display:none}
.sf__grp summary::marker{content:""}
.sf__grp nav{display:grid;gap:2px 18px}
.sf__grp nav a{font-size:15.5px;line-height:1.35;padding:6px 0;white-space:nowrap}

/* bottom bar: copyright + legal */
.sf__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;margin-top:26px;padding-top:20px;padding-inline-end:88px;border-top:1px solid rgba(243,236,223,.16)}
.sf .pv{margin:0;font-size:14px;color:#B9BFD4;border:0;padding:0}
.sf__legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.sf__legal a,.sf .pv a{font-size:14px;color:#D5DAE8}

/* phones: link groups fold into accordions (site.js closes them under 761px; open without JS) */
@media (max-width:760px){
  .sf{padding:50px 0 calc(112px + env(safe-area-inset-bottom))}
  .sf__top{gap:22px;padding-bottom:30px}
  .sf__reach{justify-items:stretch}
  .sf .sf__wa{justify-content:center}
  .sf .sf__mail{justify-self:start}
  .sf__teach{margin:6px 2px 0}
  .sf__map{padding:8px 0 0}
  .sf__col{display:contents}
  .sf__grp{border-bottom:1px solid rgba(243,236,223,.16)}
  .sf__grp summary{min-height:56px;cursor:pointer}
  .sf__grp summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid #FF9EA2;border-bottom:2px solid #FF9EA2;margin-top:-4px;transform:rotate(45deg);transition:transform .2s}
  .sf__grp[open] summary::after{transform:rotate(-135deg);margin-top:6px}
  .sf__grp nav{padding:0 0 14px}
  .sf__grp--two nav{grid-template-columns:1fr 1fr}
  .sf__grp nav a{padding:9px 0;white-space:normal}
  .sf__bar{flex-direction:column;align-items:flex-start;margin-top:4px;padding-inline-end:0;border-top:0}
  .sf__legal{display:grid;grid-template-columns:auto auto;gap:4px 28px}
  .sf__legal a{padding:6px 0}
}
@media (min-width:761px){
  .sf__grp summary{pointer-events:none;margin-bottom:10px}
  .sf__grp summary h2{position:relative;padding-bottom:9px}
  .sf__grp summary h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:46px;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 7'%3E%3Cpath d='M1 4.5C9 1.5 15 6.5 23 3.5S37 1.5 45 4' fill='none' stroke='%23D63A40' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
  .sf__map{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);gap:0 36px}
  .sf__col{display:grid;gap:26px;align-content:start}
  .sf__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sf__teach{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px}
  .sf__teach h2,.sf__teach p{grid-column:1}
  .sf__teach p{margin:0}
  .sf .sf__tbtn{grid-column:2;grid-row:1/3}
}
@media (min-width:1100px){
  .sf__top{grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr) minmax(0,1.25fr)}
  .sf__teach{grid-column:auto;display:block}
  .sf__teach p{margin:0 0 14px}
  .sf__map{gap:0 56px}
}
/* English: brand, reach and the link list in one row */
.sf--en .sf__enav div{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:10px}
.sf--en .sf__enav a{padding:6px 0;font-size:15.5px}
@media (min-width:1100px){.sf--en .sf__top{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr)}}
@media (min-width:761px) and (max-width:1099px){.sf--en .sf__enav{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.sf .sf__wa,.sf__grp summary::after{transition:none}}
.sf--en .sf__top{border-bottom:0;padding-bottom:8px}

/* Option A, the hand-cut edge (Yair 8.11.2026 19:27 "לא אוהב את הסיומת של הסקשיין האחרון ואחריו הפוטר"): no paper strip;
   the footer, one shade deeper than the ink sections, rises into the last section as a soft asymmetric curve with a fine
   paper rim, so the shape itself is the boundary on navy pages and on sand pages. */
.sf{margin-top:0;background:#091534;padding-top:70px}
.sf__edge{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:clamp(30px,5.5vw,80px);display:block;pointer-events:none}
@media (max-width:760px){.sf{padding-top:54px}}

/* the site's red hand-drawn stroke riding on the curved edge (Yair 8.11.2026 19:42 "להוסיף קו אדום כמו שמופיע בכל האתר על גבי קו ההפרדה המעוגל") */
.sf__red{stroke-width:3.4px;stroke-dasharray:1;stroke-dashoffset:0}
.js-draw .sf__red{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,.1,.2,1) .1s}
.js-draw .sf.drawn .sf__red{stroke-dashoffset:0}
@media (max-width:760px){.sf__red{stroke-width:2.8px}}
@media (prefers-reduced-motion:reduce){.js-draw .sf__red{stroke-dashoffset:0;transition:none}}
