/* ═══════════════════════════════════════════════════════════════
   mobile-fixes.css — Global mobile UX fixes
   Loaded LAST to override per-page font-sizes that trigger iOS zoom.
   ═══════════════════════════════════════════════════════════════ */

/* ─── WCAG AA contrast: darker orange for small text on light backgrounds ───
   #FF8334 on white = 2.79:1 (fails AA). Acceptable only for large+bold text (CTA buttons).
   For small orange text on light backgrounds, use the darker --orange2 (#C2570A = 4.0:1).
   This rule applies to TEXT (not button backgrounds) under 1rem to push it to AA-pass. */
.text-orange-sm,
small.u-text-orange,
.svc-from,
.service-from,
.price-note {
  color: #c2410c !important; /* darker orange (#c2410c on white = 4.7:1, AA-pass) */
}

/* ─── Disabled button states (clear visual + cursor) ─── */
button:disabled,
button[aria-disabled="true"],
input[type="submit"]:disabled,
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: auto; /* still receive events for cursor display */
}
button:disabled:active,
.btn:disabled:active { transform: none !important; }

/* ─── Tabular numbers for stable price/date alignment ───
   font-variant-numeric: tabular-nums ensures all digits have the same width.
   Critical for: invoice tables, delivery cards (₪ values), date columns,
   countdowns (ETA tick), tabular dashboards. Without it, "₪1,234" and "₪999"
   may jitter as the count updates. */
.price,
.amount,
.total,
.eta-value,
[class*="-price"],
[class*="-amount"],
[class*="-total"],
[class*="-eta-"],
.lt-eta-clock, .clp-clock,
.lt-eta-tick, .clp-tick,
.track-eta-clock, .track-eta-tick,
.stat-num, .stats-bar td,
table td:has(+ td),
.dr-amount, .price-bar {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── IS 5568: phone/email/url/number inputs render LTR ───
   Hebrew is RTL but numeric/Latin content (phone, email, ID) reads LTR.
   Forcing direction at the input level matches user expectation and how
   Hebrew screen readers prefer to speak digits. */
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="number"] {
  direction: ltr !important;
  text-align: right !important; /* still right-aligned for RTL form layout */
}
/* Israeli ID number pattern — explicit LTR + numeric keypad on mobile */
input[name="id"],
input[name="teudat_zehut"],
input[id*="teudat"],
input[id*="idnum"],
input[id*="IdNum"] {
  direction: ltr !important;
  inputmode: numeric;
}

/* ─── iOS Safari auto-zoom prevention ───
   iOS zooms IN on any input with font-size < 16px on focus.
   Force minimum 16px on all editable controls — only on mobile,
   where the visual impact of 16px is acceptable (looks normal). */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select,
  .form-input,
  .addr-input,
  .addr-google-input,
  .addr-num-input,
  .b-input,
  .b-select,
  .b-textarea,
  .details-input,
  .details-textarea,
  .loc-input,
  .manual-dist-input,
  .q-textarea,
  .task-note,
  .notes-textarea {
    font-size: 16px !important;
  }

  /* Smaller helper text on labels can stay small */
  .form-group label,
  .b-field-label,
  .details-label,
  .form-section-title {
    /* unchanged — these are labels not inputs */
  }
}

/* ─── Touch targets: ensure ≥44px min height on key interactive elements (mobile) ─── */
@media (max-width: 768px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-pri,
  .btn-sec,
  .btn-calc,
  .btn-wa,
  .btn-phone,
  .btn-next,
  .btn-back,
  .btn-order,
  .b-submit,
  button[type="submit"],
  .nav-item,
  .filter-chip,
  .faq-tab,
  .faq-category,
  .tab,
  .chip,
  .pill {
    min-height: 44px;
  }
  /* FAQ tabs: ensure label is readable */
  .faq-tab {
    font-size: 14px !important;
    padding: 10px 16px !important;
    display: inline-flex;
    align-items: center;
  }
}

/* ─── Prevent horizontal scroll on body (iOS Safari)─── */
html, body {
  overflow-x: hidden;
  /* clip חוסם גלילה אופקית בלי להפוך את body למיכל גלילה — hidden ביטל את
     position:sticky של התפריט העליון בכל האתר (סריקה 28/09). hidden נשאר
     כגיבוי לדפדפנים בלי תמיכה ב-clip */
  overflow-x: clip;
}

/* ─── Hide stuck Google Maps Places legacy warning panel if any ─── */
.pac-container[style*="display: none"] { display: none !important; }

/* ─── Mobile-only: bottom CTA bar should not cover content ─── */
/* רק בדף שיש בו את הסרגל הישן. בלי סרגל (טפסי ההזמנה, הפורטל) נשאר פס ריק של 84px בתחתית.
   דפים עם ההדר החדש מקבלים ריווח משלהם מ-header.css. */
@media (max-width: 768px) {
  body:has(.mobile-cta) { padding-bottom: 84px; }  /* room for fixed mobile-cta bar */
}

/* ─── Reduce hero font sizes on very small phones to prevent overflow ─── */
@media (max-width: 380px) {
  .hero-title,
  .h-title,
  .page-hero h1,
  .biz-headline,
  .ads-hero h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }
}

/* ─── Tap-delay reduction (was an old iOS issue, doesn't hurt) ─── */
.btn, button, [role="button"] {
  touch-action: manipulation;
}

/* ─── Sticky elements: ensure they have safe top offset on iOS notch ─── */
@media (max-width: 768px) {
  .exp-nav,
  .topbar,
  .navbar {
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* The drawer CTA is styled only inside the 768px block below, so outside it the
   injected link rendered as bare text in the desktop bar on every page.
   Hidden by default; the media block re-shows it where it belongs. (2026-08-12) */
.btn-primary-mobile-menu { display: none; }

/* ─── Topbar CTA on mobile: hide from header (it overflows the 69px bar),
   but show as a prominent orange button inside the nav drawer when open. */
@media (max-width: 768px) {
  /* Hide from collapsed topbar */
  header.topbar a.btn-primary {
    display: none;
  }
  /* When the drawer opens, drop a clear orange CTA at the BOTTOM of the menu.
     Uses a CSS-only ::after on the drawer — content via custom property. */
  nav#mainNav.is-open {
    padding-bottom: 12px !important;
  }
  /* Promote the in-drawer service links visually */
  nav#mainNav.is-open .nav-svc {
    border-bottom: 1px solid rgba(15, 46, 99, .08);
    padding: 14px 18px !important;
    font-size: 1.02rem !important;
  }
  /* Add a clickable orange CTA via a sibling link auto-injected by mobile-cta-mgmt below.
     Fallback: style any .btn-primary-mobile-menu element as orange CTA. */
  .btn-primary-mobile-menu {
    display: block;
    margin: 10px 16px 4px 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FF8334, #C2570A);
    color: #fff !important;
    text-align: center;
    font-weight: 800;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(255, 131, 52, .35);
    text-decoration: none;
  }
}

/* ─── Mobile CTA bar: respect bottom safe-area for iPhone home indicator ─── */
@media (max-width: 768px) {
  .mobile-cta,
  .mobile-cta-bar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  }
}

/* ─── Hero background fix (P1 bug) ───
   redesign.min.css declares .hero { background: var(--bg) } which becomes WHITE.
   The hero text is WHITE (set in styles.css / shared.css).
   Result: white-on-white → invisible hero on express/iturim/business/meshloach etc.
   This restores the brand blue gradient. Loaded last so it wins the cascade. */
section.hero,
div.hero,
.hero:not(.iturim-hero):not(.business-hero):not(.b2b-hero) {
  background: linear-gradient(145deg, #001a3a, #071c47, #0F2E63, #1B4FA8, #1A57C2) !important;
}
.hero h1,
.hero .h-title,
.hero .h-sub,
.hero-subtitle,
.hero-badge {
  color: #ffffff !important;
}
.hero h1 .accent,
.hero .highlight {
  color: #FF8334 !important;
}

/* ─── Mobile compactness: reduce vertical wasted space ───
   Default section padding on this site is 48px top/bottom. On mobile, that
   means a single screen barely fits one card. Tighten the rhythm so users see
   more value per scroll without making the layout feel cramped. */
@media (max-width: 768px) {
  /* Generic sections */
  section.section,
  section.clients-section,
  section.how-it-works,
  section.stats-section,
  section.testimonials-section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  /* Final/large CTA sections that ship 80px top+bottom — cut to 48px */
  section.cta-section,
  section.final-cta,
  section.netz-newsletter {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  /* Service cards: trim padding from 32×24 to 22×18 — same look, more density */
  .service-card,
  .svc-card,
  .feature-card {
    padding: 22px 18px !important;
  }
  /* Hero: tighten top spacing under fixed header */
  section.hero {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }
  /* H2 section titles: trim margin */
  section h2,
  .section-title,
  .section h2 {
    margin-bottom: 16px !important;
  }
}

/* ─── A11y: respect prefers-reduced-motion (WCAG 2.3.3) ─── */
@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;
  }
}

/* ─── A11y: visible focus indicators on all interactive (WCAG 2.4.7) ─── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  /* היה #FF8334 בטענה של "high contrast" — בפועל 2.86:1 מול לבן
     ו-1.00:1 על כפתור כתום, כלומר נעלם לגמרי היכן שהכי נחוץ.
     הכחול נותן 13.49:1 על לבן ו-4.71:1 על כתום — היחיד שעובר בשניהם. */
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* 2.3, חוק 11 (0.5): בעמודי האתר הטבעת 2px נייבי, מרחק 2px. הכלל שלמעלה נשאר ללוח הניהול ולדשבורד
   (לא טוענים tokens.css, ולכן ה-fallback מחזיר את הערכים שלו), ופורטל הלקוחות (#portalMain) לא בכלל
   (נטע, 20/10/2026: לא עכשיו). :where() — בלי ספציפיות נוספת, כך שכללי "רקע כהה = טבעת לבנה" ממשיכים לגבור.
   בונוס: ב-429, 500, מעקב ותשלום var(--focus) לא מוגדר, ועד עכשיו לא הייתה שם טבעת בכלל */
:where(html:not(:has(#portalMain))) button:focus-visible,
:where(html:not(:has(#portalMain))) a:focus-visible,
:where(html:not(:has(#portalMain))) input:focus-visible,
:where(html:not(:has(#portalMain))) textarea:focus-visible,
:where(html:not(:has(#portalMain))) select:focus-visible,
:where(html:not(:has(#portalMain))) [role="button"]:focus-visible {
  outline: var(--nz-focus-width, 3px) solid var(--nz-focus-color, var(--focus));
  outline-offset: var(--nz-focus-offset, 2px);
}

/* ─── Theme toggle FAB: cascade was being defeated by redesign.min.css ───
   The button was rendering as inline-block 17.5x21.5px instead of fixed 44x44.
   Force the intended floating-button styling here (mobile-fixes.css loads last). */
button.netz-theme-toggle {
  position: fixed !important;
  /* Stacked ABOVE the a11y trigger (bottom:84, 56px tall) so they don't overlap on the right edge */
  bottom: 152px;
  right: 20px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  cursor: pointer;
  font-size: 1.2rem !important;
  box-shadow: 0 6px 24px rgba(15, 46, 99,.12) !important;
  z-index: 97 !important;
  padding: 0 !important;
}
button.netz-theme-toggle.show {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* On mobile, stack ABOVE the a11y trigger (bottom:152, 48px tall) — not on top of it */
@media (max-width: 768px) {
  button.netz-theme-toggle { bottom: 212px !important; right: 12px !important; }
}

/* ─── A11y: skip link (will activate when added to HTML) ─── */
.skip-to-content {
  position: absolute;
  top: -100px;
  right: 16px;
  /* shared.css ממרכז עם translateX(50%) — כאן העוגן הוא right:16px,
     וה-transform שדולף דחף את הקישור 68px אל מחוץ למסך (נמדד 22/09) */
  transform: none;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 800;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-to-content:focus { top: 16px; }