/* pages/landing/computer-3d/css/base.css
   body + topbar styles. Uses variables + fonts from /assets/css/.
*/

/* ════════════════════════════════════════════════════════════════
   Computer 3D Preview Landing Page, MOCKUP v1
   ════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--text);
  /* line-height 1.7 (עומר ביקש 28/5/2026 ריווח קצת יותר לקריאות
     לקהל 50-75). היה 1.6, עלינו ב-0.1 כדי לתת אוויר בלי להגזים. */
  line-height: 1.7;
  font-size: 18px;
  overflow-x: hidden;
}

/* ─── SVG ICONS (Phosphor Icons Regular, 26/5/2026) ───────
   כל האייקונים בדף הם <svg class="icon"><use href="#icon-NAME"/></svg>
   המגיעים מ-SVG sprite בראש ה-body. fill: currentColor מאפשר שליטה
   בצבע דרך ה-CSS של ההורה. גודל ברירת מחדל 1em, override בכל קונטקסט. */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 36px; height: 36px; }
.icon-xl { width: 48px; height: 48px; }

/* הסגנון .hl-3d (צ'יפ "ב-3D") הוסר 27/5/2026, עומר ביקש לא להדגיש
   את ה-"3D" בכל מקום, רק להשאיר את העיצוב הקיים. */

/* topbar/CTA-checkmarks, ירוקים כדי לבדל ויזואלית מהטקסט */
.topbar .icon-sm,
.cta-sub .icon-sm,
.demo-meta .icon-sm {
  color: #22c55e;
}

/* CTA buttons עם אייקון, ליישור פנימי תקין (טקסט + אייקון). */
.cta-primary,
.demo-cta,
.final-cta,
.price-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* באדג'ים שמכילים אייקון, להכריח inline-flex כדי שהאייקון יהיה לצד הטקסט */
.topbar-item,
.cta-sub span,
.demo-meta span,
.living-no-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ─── TOP BAR ───────────────────────────────────────────── */
.topbar {
  background: var(--navy-dark);
  color: var(--orange-light);
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 0.92rem;
  font-weight: 600;
}
/* Topbar במובייל, פחות padding + gap קטן יותר כדי לא לתפוס יותר מדי גובה */
@media (max-width: 760px) {
  .topbar {
    padding: 10px 14px;
    gap: 14px;
    font-size: 0.84rem;
  }
}
@media (max-width: 480px) {
  .topbar {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
}
.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* ════════════════════════════════════════════════════════════════
   A11Y + GLOBAL POLISH (27/5/2026, ישיבת קבינט Gemini 3.5 + GPT)
   כל הכללים פה הם תיקונים גלובליים ל-WCAG ולחוויית מובייל לקהל
   50-75. ראה pages/landing/computer-3d/docs/ אם יווסף תיעוד.
   ════════════════════════════════════════════════════════════════ */

/* :focus-visible גלובלי, משתמשי מקלדת רואים בבירור איפה הם.
   3px כי 2px בלתי נראה לקהל 50-75 עם ראייה מוחלשת.
   offset 3px כדי שהמתאר לא ידבק לאלמנט עצמו. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--orange-deep, #b8551f);
  outline-offset: 3px;
  border-radius: 4px;
}

/* prefers-reduced-motion, בטיחות וסטיבולרית.
   קהל 60+ עם רגישות לתנועה (סחרחורות, מיגרנות) מקבל דף סטטי.
   חוסם גם את ה-auto-rotate של model-viewer דרך אטריבוט HTML שלו. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* -webkit-tap-highlight-color, מבטל את הריבוע האפור שמופיע על iOS
   כשנוגעים בכפתור. במקום, ה-:active מסביר משוב ויזואלי נקי. */
a, button, [role="button"], .cta-primary, .demo-cta, .final-cta, .price-cta,
.sticky-cta-close, .sticky-cta-text, .velocity-toast {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* :active state אחיד לטאצ', scale קטן מודיע "נגעת". */
@media (hover: none) {
  .cta-primary:active,
  .demo-cta:active,
  .final-cta:active,
  .price-cta:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
}

/* [hidden] override war (Sweep C), שיפור עדין.
   הסרת ה-!important היה מסוכן כי .topbar-item ו-.cta-sub span משתמשים
   ב-display:inline-flex שעוקף [hidden]. מתקנים נכון, הגדרה ברורה. */
[hidden],
[hidden][style] {
  display: none !important;
}