/* ═══════════════════════════════════════════════════════════
   site-polish.css  ·  שכבה משותפת לכל עמודי האתר
   נטענת אחרי ה-CSS של כל עמוד, ולכן גוברת עליו.
   מרוכז כאן כדי שתיקון אחד יחול על כל העמודים.
   ═══════════════════════════════════════════════════════════ */

/* ══ POLISH PASS ══════════════════════════════════════ */
/* 1. תגית קטנה - לא נמתחת לרוחב, וטיפוגרפיה נעימה לעברית */
.section-tag{
  display:inline-flex;align-items:center;
  width:max-content;max-width:100%;
  align-self:flex-start;
  text-transform:none;
  letter-spacing:.03em;
  font-size:.72rem;
  font-weight:700;
  padding:.32rem .95rem;
  background:linear-gradient(180deg,rgba(42,232,160,.14),rgba(42,232,160,.06));
  border:1px solid rgba(42,232,160,.28);
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;
  margin-bottom:.9rem;
}
.section-header .section-tag,
.pain-wrap .section-tag,
.shift-wrap .section-tag{margin-inline:auto}

/* 2. HERO - קצת יותר צפוף ומסודר */
.hero-text{gap:1.15rem}
#hero .hero-text h1{letter-spacing:-.01em}
.hero-text .divider{margin:.2rem 0}
.hero-sub{line-height:1.75}
.hero-actions{margin-top:.3rem}
.hero-micro{opacity:.85;letter-spacing:.06em}
.hero-solo{border-width:1px;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 46px var(--green-glow)}

/* 3. כרטיסי תיק עבודות - מסגרת עדינה יותר */
.media-card{border-radius:16px;border-color:rgba(255,255,255,.07)}
.media-card:hover{box-shadow:0 16px 44px rgba(0,0,0,.55),0 0 22px var(--green-glow)}
.ptab{letter-spacing:.01em}

/* 4. מובייל - שההירו לא ייקח מסך שלם */
@media(max-width:900px){
  .section-tag{align-self:center;margin-inline:auto}
  #hero{min-height:auto;padding-top:88px;padding-bottom:2.5rem}
  .hero-inner{gap:1.25rem}
  .hero-text{gap:.9rem}
  #hero .hero-text h1{font-size:clamp(1.85rem,7.4vw,2.5rem);line-height:1.2}
  .hero-lead{font-size:1.02rem!important}
  .hero-sub{font-size:.92rem!important;line-height:1.7}
  .hero-solo{max-width:340px;margin:0 auto}
  .hero-solo img{max-height:380px}
  .hero-actions{gap:.7rem}
}
@media(max-width:480px){
  #hero{padding-top:80px}
  .section-tag{font-size:.68rem;padding:.28rem .8rem}
  .hero-solo{max-width:290px}
  .hero-solo img{max-height:330px}
  .hero-micro{font-size:.78rem}
}

/* ══ UI/UX PASS - נגישות, מגע, יציבות ══════════════════ */

/* §1 דילוג לתוכן */
.skip-link{position:absolute;top:-100px;right:1rem;z-index:2000;background:var(--green);color:#fff;
  font-weight:700;font-size:.9rem;padding:.75rem 1.25rem;border-radius:0 0 12px 12px;transition:top .2s}
.skip-link:focus{top:0}
#main-content:focus{outline:none}

/* §1 כיבוד הגדרת "הפחתת תנועה" של המכשיר */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .h1-line,.hero-solo,.reveal{opacity:1!important;transform:none!important;filter:none!important}
  .hero-glow{animation:none!important}
}

/* §4 אייקונים וקטוריים במקום אימוג'י */
.ico{width:16px;height:16px;flex-shrink:0}
.mobile-menu .ico,.form-submit .ico{width:18px;height:18px}

/* §4 מצב פעיל שונה ממצב ריחוף - אחרת נראה כאילו לחצת */
.ptab:hover:not(.active){background:var(--card2);border-color:var(--green);color:var(--white)}
.ptab.active{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.ptab{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.mobile-menu a{display:flex;align-items:center;gap:.6rem}
.form-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}

/* §2 שטחי מגע - מינימום 44px */
.ptab{min-height:44px}
.social-icon{width:44px;height:44px}
.modal-close,.lb-close{width:44px!important;height:44px!important}
.rev-nav{width:44px!important;height:44px!important}
.rev-nav:active{transform:scale(.92)}
/* כפתורי גודל הטקסט בלוח הנגישות עצמו היו קטנים מדי לאצבע */
.a11y-size-btns button{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
.a11y-size-btns button:active{transform:scale(.94)}
/* כפתור סגירה בתוך flex התכווץ מתחת למידה שהוגדרה לו */
.modal-close,.lb-close,.rev-nav{flex:0 0 auto}
.cookie-btn-accept,.cookie-btn-decline{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#cookie-read-more{background:none;border:0;padding:.75rem .25rem;margin:-.75rem 0;font:inherit;
  color:var(--green-hi);text-decoration:underline;cursor:pointer}
.nav-logo{min-height:44px;padding-block:.25rem}
.footer-links a{display:inline-flex;align-items:center;min-height:40px}
.contact-link{display:inline-flex;align-items:center;min-height:44px}

/* §3 יציבות פריסה - התמונות מקבלות מידות אמיתיות ב-HTML כדי לשמור מקום */
.footer-brand img{width:auto}
.nav-logo img{width:auto}

@media(max-width:768px){
  .footer-links a{min-height:44px}
}

/* ══════════════════════════════════════════════════════
   CRAFT PASS - איך האתר מרגיש למגע
   ══════════════════════════════════════════════════════ */

/* עקומות תנועה חזקות. ברירות המחדל של CSS רכות מדי
   ומרגישות אקראיות. אלה מרגישות מכוונות. */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --dur-press:140ms;
  --dur-fast:180ms;
  --dur-base:220ms;
  --dur-slow:300ms;
  --transition:.22s cubic-bezier(.23,1,.32,1);
}

/* מעברים ממוקדים במקום "הכל" - רק transform ו-opacity
   רצים על כרטיס המסך ולא מכריחים חישוב פריסה מחדש */
.btn,.form-submit,.ptab,.social-icon,.slider-arrow,.play-btn,
.a11y-btn,.wa-float,.ig-float,.modal-close,.lb-close{
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-base) ease,
             border-color var(--dur-base) ease,
             color var(--dur-base) ease,
             box-shadow var(--dur-base) ease}
.media-card,.stats-card,.relief-card,.learn-card,.tl-step,.offer-card{
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) ease,
             box-shadow var(--dur-base) ease}
.contact-link,.nav-logo,.nav-hamburger,.opp-item,.faq-item{
  transition:transform var(--dur-press) var(--ease-out),
             color var(--dur-base) ease,
             border-color var(--dur-base) ease,
             background-color var(--dur-base) ease}
.contact-link:active,.nav-hamburger:active{transform:scale(.96)}

/* תגובה ללחיצה. בלי זה הממשק מרגיש מת - אתה לוחץ
   ושום דבר לא מאשר לך שהוא שמע */
.btn:active,.form-submit:active,.ptab:active,
.cookie-btn-accept:active,.cookie-btn-decline:active{transform:scale(.97)}
.social-icon:active,.a11y-btn:active,.wa-float:active,
.ig-float:active,.modal-close:active,.lb-close:active{transform:scale(.92)}
.slider-arrow:active{transform:translateY(-50%) scale(.92)}
.media-card:active{transform:translateY(-4px) scale(.985)}
.faq-q:active .faq-arrow{transform:scale(.9)}
.faq-item.open .faq-q:active .faq-arrow{transform:rotate(180deg) scale(.9)}

/* ריחוף רק במכשירים עם עכבר. במגע, "ריחוף" נתקע
   אחרי הקלקה והכרטיס נשאר מורם */
@media(hover:none){
  .media-card:hover,.stats-card:hover,.relief-card:hover,
  .learn-card:hover,.tl-step:hover,.offer-card:hover{transform:none;box-shadow:none}
  .a11y-btn:hover,.wa-float:hover,.ig-float:hover,
  .media-card:hover .play-btn{transform:none}
  .btn-primary:hover,.btn-outline:hover,.btn-wa:hover,
  .btn-cal:hover,.form-submit:hover{transform:none}
}

/* ── לייטבוקס: הרגע שבו רואים את העבודה ────────────── */
/* היה display:none ואז display:flex - קפיצה חדה בלי מעבר */
#lightbox{display:flex;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
#lightbox.open{visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity var(--dur-base) var(--ease-out),visibility 0s}
.lb-inner{transform:scale(.96);opacity:0;
  transition:transform 260ms var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
#lightbox.open .lb-inner{transform:scale(1);opacity:1}
.lb-close,.lb-nav{opacity:0;transition:opacity var(--dur-base) var(--ease-out) 80ms,
  transform var(--dur-press) var(--ease-out),background var(--dur-base) ease}
#lightbox.open .lb-close,#lightbox.open .lb-nav{opacity:1}

/* ── מודאלים: נכנסים מהמרכז (הם לא תלויים בכפתור) ──── */
.modal-overlay{transition:opacity var(--dur-base) var(--ease-out);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-box{transform:scale(.96) translateY(10px);opacity:0;
  transition:transform 260ms var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.modal-overlay.open .modal-box{transform:none;opacity:1}

/* ── תפריט נייד ולוח נגישות ─────────────────────────── */
.mobile-menu{display:flex;overflow:hidden;max-height:0;opacity:0;
  padding-top:0;padding-bottom:0;border-top-width:0;
  transition:max-height var(--dur-slow) var(--ease-out),
             padding var(--dur-slow) var(--ease-out),
             opacity var(--dur-fast) ease}
.mobile-menu.open{max-height:560px;opacity:1;
  padding-top:1rem;padding-bottom:1rem;border-top-width:1px}
.a11y-panel{display:flex;opacity:0;pointer-events:none;
  transform:scale(.95) translateY(8px);transform-origin:bottom right;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.a11y-panel.open{opacity:1;pointer-events:auto;transform:none}

/* ── שאלות ותשובות ──────────────────────────────────── */
/* max-height ניחש גובה, אז סגירה של תשובה קצרה נתקעה
   רגע באוויר. grid-template-rows מודד את הגובה האמיתי */
.faq-a{display:grid;grid-template-rows:0fr;max-height:none!important;
  padding:0 1.4rem;opacity:0;
  transition:grid-template-rows var(--dur-slow) var(--ease-out),
             padding var(--dur-slow) var(--ease-out),opacity 160ms ease}
.faq-a>p{overflow:hidden;min-height:0}
.faq-item.open .faq-a{grid-template-rows:1fr;padding:0 1.4rem 1.1rem;opacity:1}
.faq-arrow{transition:transform var(--dur-base) var(--ease-out),
  background var(--dur-base) ease,border-color var(--dur-base) ease}

/* ── גילוי בגלילה ───────────────────────────────────── */
/* 28px זה מרחק גדול שקורא כאיטי. 16px מספיק כדי
   להרגיש תנועה בלי לגרור */
.reveal,.reveal-left{transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
.reveal{transform:translateY(16px)}
.reveal-left{transform:translateX(20px)}

/* כרטיסים נכנסים בזה אחר זה במקום כולם ביחד */
.reveal .stg>*,.reveal.stg>*{opacity:0;transform:translateY(14px);
  transition:opacity 440ms var(--ease-out),transform 440ms var(--ease-out)}
.reveal.visible .stg>*,.reveal.visible.stg>*{opacity:1;transform:none}
.reveal.visible .stg>*:nth-child(1),.reveal.visible.stg>*:nth-child(1){transition-delay:20ms}
.reveal.visible .stg>*:nth-child(2),.reveal.visible.stg>*:nth-child(2){transition-delay:65ms}
.reveal.visible .stg>*:nth-child(3),.reveal.visible.stg>*:nth-child(3){transition-delay:110ms}
.reveal.visible .stg>*:nth-child(4),.reveal.visible.stg>*:nth-child(4){transition-delay:155ms}
.reveal.visible .stg>*:nth-child(5),.reveal.visible.stg>*:nth-child(5){transition-delay:200ms}
.reveal.visible .stg>*:nth-child(6),.reveal.visible.stg>*:nth-child(6){transition-delay:245ms}
.reveal.visible .stg>*:nth-child(n+7),.reveal.visible.stg>*:nth-child(n+7){transition-delay:290ms}

/* ── סמן מותאם ──────────────────────────────────────── */
/* היה נקודה קבועה בלי שום תגובה, כלומר ביטלנו לגולש
   את הסמן של המערכת ולא נתנו לו שום סימן מה לחיץ */
@media(hover:hover) and (pointer:fine){
  #custom-cursor{border:1.5px solid transparent;
    transition:width var(--dur-fast) var(--ease-out),
               height var(--dur-fast) var(--ease-out),
               background var(--dur-fast) ease,
               border-color var(--dur-fast) ease,
               box-shadow var(--dur-fast) ease,
               opacity 150ms ease}
  #custom-cursor.on-interactive{width:40px;height:40px;
    background:rgba(42,232,160,.13);border-color:rgba(42,232,160,.85);
    box-shadow:0 0 24px rgba(42,232,160,.3)}
  #custom-cursor.clicking{width:14px;height:14px}
  #custom-cursor.on-interactive.clicking{width:30px;height:30px}
}

/* כיבוד הגדרת הפחתת תנועה גם על כל מה שנוסף כאן */
@media (prefers-reduced-motion: reduce){
  .reveal .stg>*,.reveal.stg>*{opacity:1!important;transform:none!important;transition-delay:0ms!important}
  .lb-inner,.modal-box{transform:none!important}
}

/* ── תוספות שכבה משותפת (חלות על כל העמודים) ────────── */

/* שטחי מגע בעמודים הפנימיים */
.nav-back,.btn-home,.btn-submit{display:inline-flex;align-items:center;gap:.5rem;min-height:44px}
.nav-back:active,.btn-home:active,.btn-submit:active{transform:scale(.97)}
.ty-icon .ico,.icon .ico{width:44px;height:44px}

/* שדות טופס נוחים לאצבע */
input,textarea,select{min-height:44px}
textarea{min-height:88px}

/* הסמן המותאם לא מסתיר את מה שכותבים */
@media(hover:hover) and (pointer:fine){
  input,textarea,[contenteditable="true"]{cursor:text}
  select,option,label{cursor:pointer}
  #custom-cursor.on-text{opacity:0}
}

/* טבעת מיקוד עקבית בכל העמודים - חובה לניווט במקלדת */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--green-hi,#2ae8a0);outline-offset:2px;border-radius:6px}