/*
 * Rendered-relevancy fixes (google-god-mode pass, 2026-07-14).
 *
 * Root cause: the jt2 redesign stylesheet loads LAST and sets
 * `.section { background: transparent }`. Every dark band that declared
 * its background at single-class specificity in an earlier file lost its
 * background while keeping its white text - so the practice-route heroes
 * rendered as white-on-white voids. The theme carries the root fix (same
 * rules, end of redesign.css); this ops layer makes production correct
 * NOW without waiting for a theme pull, and is harmless once the theme
 * catches up (identical values).
 */

.legal-pillar-hero.section {
  background:
    linear-gradient(135deg, rgba(7, 21, 47, 0.98), rgba(39, 46, 70, 0.94)),
    radial-gradient(circle at 18% 20%, rgba(197, 164, 92, 0.24), transparent 34%) !important;
}

.practice-hub-hero.section {
  background:
    linear-gradient(135deg, rgba(7, 21, 47, 0.96), rgba(39, 46, 70, 0.92)),
    radial-gradient(circle at 16% 18%, rgba(197, 164, 92, 0.22), transparent 34%) !important;
}

.practice-hub-cta.section {
  background: linear-gradient(135deg, #07152f, #10264a) !important;
}

/* Checker heading: theme `.entry-content h3` (0-1-1) beats `.jt-mp__h`
 * (0-1-0), painting navy-on-navy inside the checker's dark header band. */
.entry-content .jt-mp__head .jt-mp__h,
.jt-mp__head .jt-mp__h {
  color: #fff !important;
}

.entry-content .jt-mp__head .jt-mp__sub,
.jt-mp__head .jt-mp__sub {
  color: #c6d0e4 !important;
}

/* Mobile: article tables must scroll inside their own box instead of
 * crushing columns into single-word lines. */
@media (max-width: 768px) {
  .practice-landing__pillar-content table,
  .legal-pillar-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .practice-landing__pillar-content table td,
  .practice-landing__pillar-content table th,
  .legal-pillar-content table td,
  .legal-pillar-content table th {
    white-space: normal;
    min-width: 9rem;
  }
}

/* Homepage hero: DAYLIGHT aerial of Tel Aviv (owner order 2026-07-16 #2:
 * daytime, similar view, NO gradient). Readability per NN/g and Smashing
 * Magazine research: the text block sits on a frosted light panel (the
 * "solid rectangle behind text" technique NN/g calls dead simple and very
 * reliable) - the photo stays bright and unfiltered, the words stay navy
 * on near-white at AAA contrast on any screen. */
.home .jt2-hero,
body.home section.jt2-hero {
  background: url('https://jus-tice.co.il/wp-content/uploads/2026/07/hero-tlv-day-optimized.jpg') center 34% / cover no-repeat !important;
}

.home .jt2-hero > div:first-child {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px;
  padding: 30px 32px;
  box-shadow: 0 18px 50px -22px rgba(10, 22, 48, 0.45);
}

.home .jt2-hero h1 {
  color: #14213d !important;
  text-shadow: none !important;
}

.home .jt2-hero .jt2-hero__lead,
.home .jt2-hero > div:first-child p {
  color: #26324e !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  .home .jt2-hero,
  body.home section.jt2-hero {
    background: url('https://jus-tice.co.il/wp-content/uploads/2026/07/hero-tlv-day-mobile.jpg') center 30% / cover no-repeat !important;
  }

  .home .jt2-hero > div:first-child {
    padding: 20px 18px;
    border-radius: 18px;
  }
}

.jt2-hero__credit {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 10px;
  font-size: 10px;
  color: rgba(20, 33, 61, 0.55);
  z-index: 2;
}


/* ---------- Floating action stack v2 (owner order 2026-07-16 #2) ----------
 * ONE action per corner - the aesthetic-ownership law ("no stacked floating
 * elements, one contact bar") + the forum consensus (a cluster of floating
 * buttons converts worse than one clear choice).
 *
 * RIGHT (thumb side in RTL): ONLY the broad WhatsApp strip - WPCode snippet
 * 12035 renders it (site logo + WhatsApp logo + page title/URL prefilled
 * message). The theme's premium-pass-3.css squashed it into an anonymous
 * 54px circle (font-size:0, site logo hidden); these rules, same
 * specificity but later in the cascade, restore the strip the owner chose.
 * The ops duplicate pill (justice-wa-float) is retired in code.
 *
 * LEFT: the AI assistant pill lowest, the tawk chat bubble above it. */
html body.rtl a.whatsapp-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(76vw, 360px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  left: auto !important;
  right: max(14px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 11px 16px !important;
  border-radius: 999px !important;
  background-color: #1fb355 !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 99990 !important;
  box-shadow: 0 10px 28px -10px rgba(9, 64, 33, 0.55) !important;
}

html body.rtl a.whatsapp-button img:first-child {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  background: #fff !important;
  object-fit: contain !important;
  margin: 0 !important;
}

html body.rtl a.whatsapp-button img:last-of-type {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  html body.rtl a.whatsapp-button {
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px 13px !important;
    font-size: 13.5px !important;
    max-width: 76vw !important;
  }

  /* premium-pass-3.css (max-width:760px) hides the strip on the mobile
   * homepage outright with body.home.rtl (0-3-3). The owner chose the
   * strip as THE WhatsApp control - restore it at the same specificity,
   * later in the cascade. */
  html body.home.rtl a.whatsapp-button {
    display: flex !important;
  }
}

/* AI assistant pill: LEFT corner (inline-end in RTL), always-labeled,
 * animated. The old mobile rule that swung it to the right corner is gone -
 * that is what stacked it over WhatsApp. */
.jt-ai-fab__label {
  max-width: none !important;
}

.jt-ai-fab {
  padding: 12px 18px !important;
  bottom: 18px !important;
  inset-inline-end: 18px !important;
  inset-inline-start: auto !important;
  animation: jtPulse 2.6s ease-out infinite;
}

@keyframes jtPulse {
  0%   { box-shadow: 0 8px 26px rgba(10, 18, 38, 0.35), 0 0 0 0 rgba(231, 199, 101, 0.55); }
  70%  { box-shadow: 0 8px 26px rgba(10, 18, 38, 0.35), 0 0 0 14px rgba(231, 199, 101, 0); }
  100% { box-shadow: 0 8px 26px rgba(10, 18, 38, 0.35), 0 0 0 0 rgba(231, 199, 101, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .jt-ai-fab { animation: none; }
}

/* tawk bubble: same LEFT column, one clear slot above the AI pill. */
body iframe[title="chat widget"],
body [id^="tawkchat"] {
  bottom: 84px !important;
}

@media (max-width: 768px) {
  .jt-ai-fab {
    bottom: 12px !important;
    inset-inline-end: 12px !important;
    inset-inline-start: auto !important;
    padding: 11px 14px !important;
  }

  .jt-ai-fab__label { font-size: 13.5px !important; }

  body iframe[title="chat widget"],
  body [id^="tawkchat"] {
    bottom: 76px !important;
  }
}

/* Narrow phones: the labeled AI pill (left) and the WhatsApp strip (right)
 * are together wider than the viewport at the same bottom line - measured
 * 9px of kiss at 390px. The pill steps one slot up; the strip owns the
 * bottom line alone, the tawk bubble moves one slot higher. */
@media (max-width: 480px) {
  .jt-ai-fab {
    bottom: 68px !important;
  }

  body iframe[title="chat widget"],
  body [id^="tawkchat"] {
    bottom: 128px !important;
  }
}

/* homepage map: prominent, roomy, filters visible */
.home .jtcm-wrap { margin-top: 10px; }
.home #jt-cinema-map { height: 520px; }
@media (max-width: 640px) { .home #jt-cinema-map { height: 420px; } }