/* round 3 (Yair 8.11.2026 11:50): the full r6 header (all section links and dropdowns, the tagline beside the logo)
   on the demo-5 pages too (home, /למשפחות). The r6 header rules from site.css + the demo-5 skin of demo5-skin.css,
   extracted for pages that load demo 5's own style.css instead of site.css. Generated once from those files; keep in step. */
.hdr{--ground:#F3ECDF;--sand:#E9DDC8;--white:#FFFBF4;--rule:rgba(14,30,74,.16);--ink:#0E1E4A;--ink-2:#38426A;--muted:#4F5370;--teal:#0E1E4A;--teal-2:#38426A;--display:'Suez One',system-ui,sans-serif;--text:'Assistant',system-ui,sans-serif;--r:14px;--gut:clamp(16px,4vw,56px);--max:1320px;--shadow:4px 5px 0 rgba(14,30,74,.13)}
.hdr{position:sticky;top:0;z-index:50;background:#faf6f0fa;border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:80px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-inline-end:auto;min-height:44px}
.brand img{width:46px;height:46px}
.brand b{display:block;font:800 22px/1 var(--display)}
.brand small{display:block;font:600 13px/1.3 var(--text);color:var(--muted)}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.nav summary{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:16.5px;cursor:pointer;list-style:none;white-space:nowrap}
.nav summary::-webkit-details-marker{display:none}
.nav>a:hover,.nav summary:hover{background:var(--sand)}
.nav>a[aria-current=page],.nav summary[data-current]{box-shadow:inset 0 -2px 0 var(--teal-2);border-radius:10px 10px 0 0;color:var(--ink)}
.nav details{position:relative}
.nav details[open] summary svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:280px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r);padding:8px;box-shadow:0 20px 44px -22px #0f3b4466;display:grid}
.drop a{display:flex;flex-direction:column;justify-content:center;min-height:44px;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600}
.drop a small{font-weight:400;color:var(--muted);font-size:14.5px}
.drop a:hover,.drop a[aria-current=page]{background:var(--ground)}
.drop.cols{grid-template-columns:1fr 1fr;min-width:360px}
.drop .dh{grid-column:1/-1;font:700 13.5px/1.35 var(--text);color:var(--muted);padding:6px 12px 2px}
.talk{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;color:var(--ink-2);font-weight:700;text-decoration:none;flex:none}
.talk svg{color:#1d8f4f;flex:none}
.hdr .btn{min-height:46px;padding:0 18px;font-size:16.5px}
.menu{display:none}
.menu>summary{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;list-style:none;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--rule)}
.menu summary::-webkit-details-marker{display:none}
.menu[open]>summary{background:var(--sand)}
.sheet{position:fixed;inset:80px 0 0;background:var(--ground);padding:8px var(--gut) 120px;overflow:auto;display:grid;align-content:start}
.sheet a{display:flex;align-items:center;min-height:52px;padding:0 4px;border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600;font-size:18px}
.sheet a[aria-current=page]{color:var(--teal-2);font-weight:800}
.sheet .grp{font:700 14px/1.35 var(--text);color:var(--muted);padding:18px 4px 4px}
.sheet .btn{margin-top:20px;border-bottom:0;justify-content:center;color:#fff}
@media(max-width:1240px){.nav{display:none}.menu{display:block}.talk span{display:none}}
@media(max-width:760px){.hdr .wrap{min-height:70px;gap:12px}.hdr .btn{display:none}.sheet{inset:70px 0 0}.brand img{width:40px;height:40px}}
@media(max-width:360px){.brand small{display:none}}
.talk.tel span{direction:ltr}
.talk.tel svg{color:var(--teal-2)}
.hdr .wrap{gap:14px}
@media(max-width:760px){.talk.tel{display:none}}
.drop.cols{min-width:380px}
.nvg{position:relative;display:flex;align-items:center;border-radius:10px}
.nav .nvg details{position:static}
.nav .nvh{display:flex;align-items:center;min-height:44px;padding-inline:12px 2px;border-radius:10px 0 0 10px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:16.5px;white-space:nowrap}
.nav .nvg summary{padding:0 6px 0 8px;min-width:30px;justify-content:center}
.nvg:hover{background:var(--sand)}
.nvg:hover .nvh,.nvg:hover summary{background:transparent}
.nvg .nvh:hover{text-decoration:underline;text-decoration-thickness:1px}
.nvg[data-current]{box-shadow:inset 0 -2px 0 var(--teal-2);border-radius:10px 10px 0 0}
.nvg[data-current] .nvh{color:var(--ink)}
.nvg .drop{top:calc(100% + 6px)}
.sheet a.grp{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:14px 4px 6px;border-bottom:1px solid var(--rule);font:800 19px/1.3 var(--display);color:var(--ink)}
.sheet a.grp span{display:inline-flex;align-items:center;gap:6px;font:700 15px/1.3 var(--text);color:var(--teal-2)}
.sheet details.sg{border-bottom:1px solid var(--rule)}
.sheet details.sg summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 4px;cursor:pointer;list-style:none;font:800 19px/1.3 var(--display);color:var(--ink)}
.sheet details.sg summary::-webkit-details-marker{display:none}
.sheet details.sg[open] summary svg{transform:rotate(180deg)}
.sheet details.sg>div{display:grid;padding:0 12px 10px}
.sheet details.sg>div a:last-child{border-bottom:0}
.sheet a.sg-top{font:800 19px/1.3 var(--display);min-height:56px}
@media(max-width:760px){.hdr .btn[data-start]{display:inline-flex;min-height:40px;padding:0 12px;font-size:15px;margin-inline-start:auto}.hdr .brand{margin-inline-end:0}}
@media(max-width:760px){.hdr .btn[data-start]{padding:0 14px;white-space:nowrap}.hdr .brand{flex:none;min-width:0}.hdr .brand b{white-space:nowrap}.hdr .brand small{display:none}}
.sheet details.sg summary svg{flex:none;color:var(--teal-2);transition:transform .2s}
.brand{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}
.brand img.brand-logo{width:114px;height:auto;display:block}
.hdr .brand small{display:block;font:600 12.5px/1.2 var(--text);color:var(--muted);white-space:nowrap;letter-spacing:.01em}
@media(max-width:760px){.hdr .brand img.brand-logo{width:92px}.hdr .brand small{display:block;font-size:12px}}
@media (max-width:760px){.hdr .wrap>.btn-go{display:none}}
@media (max-width:760px){.hdr .wrap>.btn-go{display:inline-flex;align-items:center;width:auto;min-height:40px;padding:0 11px;font-size:14px;white-space:nowrap;margin-inline-start:auto;flex:none}.hdr .sheet .btn-go{display:flex;justify-content:center;margin-top:18px;min-height:48px}}
@media (max-width:370px){.hdr .wrap>.talk{display:none}.hdr .wrap>.btn-go{padding:0 9px;font-size:13.5px}}
@media (max-width:420px){.hdr .wrap{gap:8px}}
@media (max-width:340px){.hdr .wrap>.btn-go{padding:0 8px;font-size:13px}}
@media (max-width:399px){.hdr .brand small{display:none}}
.hdr{background:rgba(243,236,223,.94)!important;border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.2)}
.menu .sheet,.drop{background:var(--white)!important;border:1px solid var(--rule)!important;box-shadow:var(--shadow)!important;border-radius:var(--r)!important}
.hdr .nav a,.hdr .nav summary,.hdr .nvh{font:600 16.5px/1.2 'Assistant',system-ui,sans-serif}
.hdr .nvh:hover,.hdr .nav>a:hover{text-decoration:underline;text-decoration-color:#D63A40;text-decoration-thickness:2px;text-underline-offset:8px}
.hdr .talk{border:1.5px solid #0E1E4A;border-radius:99px;padding:7px 12px;color:#0E1E4A;font:600 15px 'Assistant',sans-serif}
/* demo 5's own .nav (its old header bar) must not style r6's <nav class="nav"> */
.hdr .nav{position:static;top:auto;z-index:auto;background:none;backdrop-filter:none;border:0}
.hdr .wrap{max-width:var(--max);padding:0 var(--gut)}
.hdr .btn-go,.sheet .btn-go{background:#D63A40;border-color:#D63A40;color:#fff;box-shadow:4px 5px 0 rgba(14,30,74,.2)}
.hdr .btn-go:hover{background:#B92C33;border-color:#B92C33}
.hdr .btn{font-family:var(--text);white-space:nowrap;flex:none;gap:8px}
.hdr a{color:var(--ink)}
.hdr svg{flex:none}
@media(max-width:420px){.hdr .brand small{display:block!important;white-space:normal!important;font-size:11px!important;line-height:1.15!important;max-width:86px;letter-spacing:0}}
@media(max-width:1440px) and (min-width:1241px){.hdr .talk.tel span{display:none}.hdr .talk.tel{padding:7px 10px}.hdr .wrap{gap:10px}}
/* round 3: a backdrop-filter on .hdr makes it the containing block of the fixed phone menu sheet (the sheet was clipped to the header); solid paper instead */
.hdr{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(243,236,223,.98)!important}
body:has(.hdr details.menu[open]) .fab{display:none}

@media (min-width:1241px){.hdr>.wrap{padding-inline:clamp(20px,2vw,30px)}}
@media (min-width:1241px) and (max-width:1365px){.hdr .talk:not(.tel)>span{display:none}.hdr .talk:not(.tel){padding-inline:10px}}
@media (min-width:1500px){.hdr>.wrap{max-width:1440px}}

/* Yair 8.11.2026 18:59 (header slim-down): 5 menu items, a small round WhatsApp icon, one red CTA; the teacher pill left the header */
.hdr .talk.talk-ic{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;gap:0;border:1.5px solid #0E1E4A;border-radius:50%;background:#FFFBF4;justify-content:center}
.hdr .talk.talk-ic svg{color:#1d8f4f}
.hdr .talk.talk-ic:hover,.hdr .talk.talk-ic:focus-visible{border-color:#1d8f4f;background:#fff}
.drop a.drop-sub{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--rule);border-radius:0 0 10px 10px}

/* Yair 8.11.2026 19:49 (header balance): the menu sits in the middle of the bar between the logo (right) and the
   WhatsApp + red CTA group (left), even gaps between the items, and the bar's content lines up with the page content
   below it at every width (no stretched bar on wide screens). Desktop only; the phone menu and tablet bar are unchanged. */
@media (min-width:1241px){
  .hdr>.wrap{max-width:1240px;padding-inline:36px;gap:12px}
  .hdr .brand{margin-inline-end:0;flex:none}
  .hdr .nav{flex:1 1 auto;justify-content:center;gap:clamp(10px,1.1vw,18px);margin-inline:clamp(16px,2vw,32px);min-width:0}
}
@media (min-width:1241px){.hdr .nav>a,.hdr .nav .nvh,.hdr .nav summary{color:var(--ink)}}