/* =====================================================================
   Contrast + Visibility Fixes — prisha-misuy.co.il
   Created 2026-05-09
   Site-wide accessibility fixes addressing WCAG-AA failures found in
   the comprehensive audit (8 pages × desktop + mobile).
   ===================================================================== */

/* ============================================================
   1. SELECT PLACEHOLDERS — was 3.7:1 on light grey, now 5.0:1
   ============================================================ */
.hero-lead-form select:invalid,
.crov2-quiz select:invalid,
form.lead-form select:invalid,
.calc-form select:invalid {
  color: #4B5563 !important;  /* was #5B677A — now passes WCAG-AA on #F8FAFC */
}
.hero-lead-form input::placeholder,
.hero-lead-form textarea::placeholder,
.crov2-quiz input::placeholder,
.bottom-lead-card input::placeholder,
.bottom-lead-card textarea::placeholder,
.calc-form input::placeholder {
  color: #4B5563 !important;
  opacity: 1 !important;
}

/* ============================================================
   2. FOOTER TEXT — was 3.6:1 on dark navy (fails AA), now 5.4:1+
   ============================================================ */
.site-footer .footer-bottom,
.site-footer .footer-bottom *,
.site-footer .footer-col p,
.site-footer .footer-col li,
.site-footer .footer-col a {
  color: #94A3B8 !important;
}
.site-footer .footer-col h3,
.site-footer .footer-col h4 { color: #fff !important; }
.site-footer a:hover { color: #FFD93D !important; }

/* ============================================================
   3. CALENDAR HIGHLIGHT BADGE — month text on gold was 2.1:1, now 12:1
   ============================================================ */
.calendar-event.is-highlight .calendar-date-badge {
  color: #0B2E4A !important;
}
.calendar-event.is-highlight .calendar-date-badge .day,
.calendar-event.is-highlight .calendar-date-badge .month,
.calendar-event.is-highlight .calendar-date-badge .year {
  color: #0B2E4A !important;
}

/* ============================================================
   4. GLOSSARY TOC LETTER HOVER — was 2.7:1, now 12:1
   ============================================================ */
.glossary-toc-letters a:hover,
.glossary-toc-letters a:focus,
.glossary-toc-letters a:active {
  background: #C9A24D !important;
  color: #0B2E4A !important;  /* was #fff on gold — failed */
  border-color: #C9A24D !important;
}

/* ============================================================
   5. GLOSSARY HERO STATS — labels on translucent overlay were ~3:1
   ============================================================ */
.glossary-hero .glossary-stats {
  background: rgba(0, 0, 0, 0.22) !important;  /* darker overlay so white text reads */
  color: #fff !important;
}
.glossary-hero .glossary-stats span,
.glossary-hero .glossary-stats .num {
  color: #FFD93D !important;
}
.glossary-hero .glossary-stats .label,
.glossary-hero .glossary-stats {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
   6. TESTIMONIAL TAG — default fallback if inline bg fails
   ============================================================ */
.testimonial-tag {
  background-color: #0B2E4A;  /* fallback before inline style applies */
  color: #fff !important;
}
/* Even if cache strips inline style, tag is still readable */

/* ============================================================
   7. TRUST BADGES — verify all variants are readable
   ============================================================ */
/* Hero (dark gradient) — explicit white */
.igtax-service-hero .igtax-hero-trust .trust-badge {
  color: rgba(255, 255, 255, 0.95) !important;
}
.igtax-service-hero .igtax-hero-trust .trust-badge svg {
  color: #FFD93D !important;
}

/* CRO v2 trust badges inside white form cards — explicit dark */
.hero-lead-form-card .crov2-trust-badges,
.hero-lead-form-card .crov2-trust-badge,
.bottom-lead-card .crov2-trust-badges,
.bottom-lead-card .crov2-trust-badge,
.lead-form-card .crov2-trust-badges,
.lead-form-card .crov2-trust-badge,
.pdfgate-card .crov2-trust-badges,
.pdfgate-card .crov2-trust-badge {
  color: #4b5563 !important;
}
.hero-lead-form-card .crov2-trust-badge svg,
.bottom-lead-card .crov2-trust-badge svg,
.lead-form-card .crov2-trust-badge svg {
  color: #15803D !important;  /* always green check, regardless of context */
}

/* ============================================================
   8. UX META PILL on dark backgrounds (rare but possible)
   ============================================================ */
.uxe-meta-pill { color: #4b5563 !important; }
.uxe-meta-pill svg { color: #C9A24D !important; }

/* ============================================================
   9. LOSS CALCULATOR — replace emoji with SVG (cross-platform)
   ============================================================ */
.crov2-loss-calc h3::before {
  content: "" !important;  /* hide emoji — let JS-generated SVG render */
  display: none !important;
}
.crov2-loss-calc h3 {
  position: relative;
  padding-right: 26px;  /* RTL: dot icon on right */
}
.crov2-loss-calc h3::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #DC2626;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  animation: crov2-pulse-dot 2s ease-in-out infinite;
}
@keyframes crov2-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.0); }
}

/* ============================================================
   10. MOBILE — text-shadow off on small screens (blur on small text)
   ============================================================ */
@media (max-width: 480px) {
  h2 .h2-text span[style*="text-shadow"],
  .h2-text span[style*="text-shadow"] {
    text-shadow: none !important;
  }
}

/* ============================================================
   11. MOBILE — ticker + WA + chat-trigger collision (M2)
   ============================================================ */
@media (max-width: 768px) {
  /* When sticky bar present, stack: chat-trigger on top, then ticker, then bar */
  body.has-crov2-bottom-bar #igchat-trigger,
  body.has-crov2-bottom-bar .igchat-trigger {
    bottom: 92px !important;
    right: 12px !important;
    z-index: 9991 !important;
  }
  body.has-crov2-bottom-bar .floating-whatsapp { display: none !important; }
  body.has-crov2-bottom-bar .crov2-ticker {
    bottom: 92px !important;  /* same row as chat trigger */
    left: 76px !important;     /* leaves room for chat trigger */
    right: auto !important;
    max-width: calc(100vw - 96px) !important;
    z-index: 9986 !important;
  }
}

/* ============================================================
   12. MOBILE — trust-badge wrap conflict (M1)
   ============================================================ */
@media (max-width: 768px) {
  .igtax-hero-trust {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .igtax-hero-trust .trust-badge {
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}
@media (max-width: 360px) {
  /* Allow individual badges to wrap their text if needed */
  .igtax-hero-trust .trust-badge {
    white-space: normal !important;
    text-align: center !important;
  }
}

/* ============================================================
   13. MOBILE — H1 max 2 lines on shotrim/long titles
   ============================================================ */
@media (max-width: 768px) {
  .igtax-service-hero h1 {
    overflow-wrap: break-word !important;
    word-break: keep-all !important;
    hyphens: none !important;  /* Hebrew doesn't hyphenate */
  }
}

/* ============================================================
   14. MOBILE — h2 keyword spans don't overflow
   ============================================================ */
@media (max-width: 480px) {
  .igtax-h2-with-icon .h2-text span[style*="font-size"] {
    font-size: 1.1em !important;  /* was 1.25em — too tall on mobile */
  }
}

/* ============================================================
   15. SCENARIOS HUB — keep purple but ensure text contrast
   ============================================================ */
.scenarios-hub-hero h1,
.scenarios-hub-hero p {
  color: #fff !important;
}
.scenarios-hub-hero p strong { color: #FFD93D !important; }

/* ============================================================
   16. PROGRESS BAR — visible on white bg (currently a thin line, keep)
   ============================================================ */
.uxe-progress-bar {
  background: linear-gradient(90deg, #C9A24D 0%, #15803D 100%) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   17. FORM ERROR/INVALID states — visible
   ============================================================ */
.hero-lead-form input:invalid:not(:placeholder-shown),
.crov2-quiz input:invalid:not(:placeholder-shown),
.bottom-lead-card input:invalid:not(:placeholder-shown) {
  border-color: #DC2626 !important;
}

/* ============================================================
   18. DISABLED BUTTON STATE — visible but de-emphasized
   ============================================================ */
button:disabled,
.crov2-quiz button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #cbd5e0 !important;
  color: #4b5563 !important;
}

/* ============================================================
   19. LINK CONTRAST inside dark panels (eg disclaimer)
   ============================================================ */
.igtax-disclaimer a,
.site-footer a:not(:hover) {
  color: #FFD93D !important;
  text-decoration: underline;
}
.igtax-disclaimer a:hover { color: #fff !important; }

/* ============================================================
   20. FAQ SUMMARY +/− indicator — make consistent
   ============================================================ */
.igtax-faq details summary::after,
.article-faq-item summary::after {
  color: #C9A24D !important;
  font-weight: 700 !important;
}