/* ---------------------------------------------------------------------------
   Focusity marketing site -- shared header and footer
   ---------------------------------------------------------------------------
   The blog, the tools and the info pages (privacy, support, accessibility)
   wear the same header and footer as /home, so the site reads as one place
   instead of four. /home keeps its own inline copy because its header also
   drives the section indicator; the look here is the same (DESIGN.md:
   Navigation, Store Badges and Footer).

   Every class is prefixed (.sh-*, .ft-*) so it cannot collide with the page
   stylesheets, which already use .wrap, .btn and .nav for other things.
--------------------------------------------------------------------------- */

.sh-wrap{max-width:1160px;margin-inline:auto;padding-inline:24px;}
@media(max-width:640px){.sh-wrap{padding-inline:18px;}}

/* --- Header ------------------------------------------------------------- */
header.sh{position:sticky;inset-block-start:0;z-index:50;font-family:'Rubik',system-ui,sans-serif;
  transition:background .3s ease,box-shadow .3s ease;}
header.sh.scrolled{background:rgba(251,250,255,.86);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 #e9e6f5;}
.sh-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;}
.sh a{text-decoration:none;}
.sh-brand{display:flex;align-items:center;flex:none;min-block-size:44px;}
.sh-logo{display:block;block-size:34px;inline-size:auto;}
.sh-links{display:flex;align-items:center;gap:6px;}
.sh-links a,.sh-login{font-weight:500;font-size:.96rem;line-height:1.4;color:#2b2450;padding:10px 12px;border-radius:10px;
  transition:background .2s ease,color .2s ease;}
.sh-links a:hover{background:#f3f1ff;color:#4f46e5;}
.sh-login:hover{color:#4f46e5;}
.sh-links a[aria-current="page"]{color:#4f46e5;}
.sh-cta{display:flex;align-items:center;gap:8px;flex:none;}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-weight:700;font-size:.93rem;line-height:1.4;padding:10px 18px;border-radius:12px;
  background:#4f46e5;color:#fff;
  box-shadow:0 1px 2px rgba(20,11,48,.14),0 10px 22px -12px rgba(20,11,48,.45);
  transition:background .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);}
.sh-btn:hover{background:#4338ca;color:#fff;transform:translateY(-1px);}
.sh-btn:active{transform:scale(.98);}
@media(hover:none){.sh-btn:hover{transform:none;}}
.sh-btn .cta-short{display:none;}
.sh-toggle{display:none;align-items:center;justify-content:center;inline-size:44px;block-size:44px;flex:none;
  border:1px solid #e9e6f5;background:#fff;border-radius:12px;color:#140b30;cursor:pointer;}
.sh-toggle svg{inline-size:20px;block-size:20px;}
.sh-panel{position:absolute;inset-inline:0;inset-block-start:100%;padding:8px;background:#fff;border:1px solid #e9e6f5;
  border-radius:14px;box-shadow:0 2px 4px rgba(20,11,48,.05),0 30px 64px -30px rgba(20,11,48,.34);display:none;z-index:60;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .12s ease,transform .12s ease,display .12s allow-discrete;}
.sh-panel[data-open="true"]{display:block;opacity:1;transform:none;
  transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1),display .18s allow-discrete;}
@starting-style{.sh-panel[data-open="true"]{opacity:0;transform:translateY(-6px) scale(.98);}}
.sh-panel a{display:block;padding:13px 14px;border-radius:10px;font-weight:500;color:#140b30;}
.sh-panel a:hover,.sh-panel a:focus-visible{background:#f3f1ff;color:#4f46e5;}
.sh-panel a[aria-current="page"]{color:#4f46e5;}
@media(max-width:980px){.sh-links,.sh-login{display:none;}.sh-toggle{display:inline-flex;}}
@media(max-width:640px){.sh-logo{block-size:28px;}}
@media(max-width:379px){.sh-btn .cta-long{display:none;}.sh-btn .cta-short{display:inline;}.sh-inner{gap:10px;}}
@media(prefers-reduced-motion:reduce){header.sh,.sh-panel,.sh-panel[data-open="true"],.sh-btn{transition:none;}}

/* --- Footer ------------------------------------------------------------- */
footer.ft{background:#140b30;color:#aeb4d8;padding-block:44px;margin-block-start:80px;
  font-family:'Rubik',system-ui,sans-serif;line-height:1.65;}
footer.ft :focus-visible{outline-color:#fff;}
footer.ft a{text-decoration:none;}
.ft-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ft-brand{display:flex;align-items:center;gap:12px;}
.ft-logo{display:block;block-size:30px;inline-size:auto;filter:brightness(0) invert(1) opacity(.92);}
.ft-links{display:flex;gap:20px;flex-wrap:wrap;}
/* 44px tall from the padding, and at least 44px wide for short words like "תמיכה". */
.ft-links a{font-size:.9rem;color:#aeb4d8;transition:color .2s ease;display:inline-block;padding-block:10px;margin-block:-10px;
  min-inline-size:44px;text-align:center;}
.ft-links a:hover{color:#fff;}
.ft-lang{display:inline-flex!important;align-items:center;gap:6px;}
.ft-lang svg{inline-size:15px;block-size:15px;flex:none;}
.ft-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;margin-block-start:30px;
  padding-block-start:26px;border-block-start:1px solid rgba(174,180,216,.18);}
.ft-h{margin:0 0 8px;font-weight:600;font-size:.9rem;color:#fff;}
.ft-more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px;}
.ft-more li{margin:0;}
.ft-more a{display:inline-block;padding-block:7px;font-size:.9rem;color:#aeb4d8;transition:color .2s ease;}
.ft-more a:hover{color:#fff;}
@media(max-width:640px){.ft-more{grid-template-columns:1fr;}}
.ft-social{display:flex;gap:10px;}
.ft-social a{inline-size:44px;block-size:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#aeb4d8;border:1px solid rgba(174,180,216,.22);
  transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;}
.ft-social a:hover{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.07);transform:translateY(-2px);}
.ft-social a:focus-visible{outline:2px solid #38bdf8;outline-offset:3px;}
.ft-social svg{inline-size:19px;block-size:19px;}
@media(prefers-reduced-motion:reduce){.ft-social a:hover{transform:none;}}
.ft small{color:#9aa0c8;font-size:.9rem;display:block;margin-block-start:18px;}