/* mirror-fixes.css — restores layouts that the original site produced with
   JavaScript, using CSS only. Loaded last, after all theme/Elementor CSS.
   Every rule here replaces a specific jQuery behaviour that no longer runs. */

/* ---------------------------------------------------------------------------
   1. Owl Carousel → clipped, JS-driven auto-rotating strip
   Owl turned N stacked items into a slider at runtime. Without it every item
   rendered in the flow (the homepage grew to ~29,000px).

   First attempt here was a CSS scroll-snap strip (swipe/drag to move it) —
   wrong call: it reads as a raw scrollable list of everything ("a bar you
   can drag with all the texts"), not a carousel, and a visible scrollbar/
   drag affordance was never part of the brief. This is closer to what Owl
   itself did: the outer element clips (overflow:hidden, no manual drag),
   an inner flex row mirror-shim.js creates gets animated with
   transform:translateX() on a timer — nothing to grab, nothing left showing
   past the edge, just automatic rotation. transform's px values are always
   physical/visual regardless of RTL — unlike scrollLeft, whose sign
   convention this avoids needing to know at all.
--------------------------------------------------------------------------- */
.owl-carousel {
  display: block !important;
  overflow: hidden;
  position: relative;
}
.mirror-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 20px;
  transition: transform 600ms ease;
}
.mirror-carousel-track > * {
  flex: 0 0 clamp(240px, 84vw, 360px);
  min-width: 0;
}
@media (min-width: 768px) {
  .mirror-carousel-track > * { flex-basis: clamp(280px, 30%, 380px); }
}
/* the hero quote slider is a single full-width slide */
.owl_3 .mirror-carousel-track { gap: 0; }
.owl_3 .mirror-carousel-track > * { flex-basis: 100%; }
/* An inline <style> block in the page head (a WP customizer injection, not
   this theme's own stylesheet) hides every slide but the first as a no-JS
   fallback: ".banner_slider-item:not(:nth-child(-n+1)){display:none}" —
   meant to be lifted by Owl's init. With that JS gone, 4 of the 5 hero
   quote slides were permanently invisible. !important to beat that rule
   regardless of its specificity. */
.banner_slider-item { display: block !important; }
/* owl's runtime-only chrome never renders without JS */
.owl-carousel .owl-nav,
.owl-carousel .owl-dots { display: none; }
/* .owl-carousel's !important above also overrides the theme's own responsive
   desktop/mobile carousel switch (main.css: .owl_1 hidden under 768px,
   .owl_2 — the same content again, for mobile — hidden from 768px up),
   which without this would render both at once on every screen size. */
@media (max-width: 767px) {
  .owl_1 { display: none !important; }
}
@media (min-width: 768px) {
  .owl_2 { display: none !important; }
}

/* ---------------------------------------------------------------------------
   2. Sidebar category accordion
   jQuery collapsed every panel except the current one. Without it all panels
   were open, and their absolutely-positioned lists pushed the page ~260px
   wider than the viewport (horizontal scroll on mobile).
--------------------------------------------------------------------------- */
.category_item:not(.open) > .link_list { display: none; }
.category_item > .header { cursor: pointer; }
/* Panels are absolutely positioned, which is what pushed the page ~260px past
   the viewport when they were all open. Taking them out of that flow keeps the
   overflow fixed whichever panel the visitor opens. */
.category_item > .link_list { position: static; width: auto; max-width: 100%; }

/* ---------------------------------------------------------------------------
   3. Off-canvas menu — closed by default, opened by the shim.
   Its sub-menus were collapsed by jQuery; without it all 27 links rendered as
   one flat list. Only the 7 top-level entries show; the three that have
   children expand on tap.
--------------------------------------------------------------------------- */
#el-mobile-menu { transition: right 250ms ease; }
#el-mobile-menu.is-open { right: 0 !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28); }
.el-menu-backdrop {
  position: fixed; inset: 0; background: rgba(10, 12, 24, 0.45);
  z-index: 998; border: 0; padding: 0; cursor: pointer;
}
.hamburger { cursor: pointer; }

#el-mobile-menu .sub-menu { display: none; }
/* Found the real bug behind three straight "still doesn't open" reports:
   there are actually TWO separate, independent CSS files styling this
   menu — main.css (targets ".el-menu-column .menu-header-menu-container
   ul#menu-header-menu", what the rest of this stylesheet assumes) and an
   older menu.css, which the real DOM ALSO matches exactly
   ("nav.menu-header-menu-container > ul#menu-header-menu.menu"). menu.css
   has its own complete, independent submenu mechanism keyed to a class
   this shim never sets (".el-drom-menu"), and its selector
   ("#el-mobile-menu nav ul.menu > li.menu-item-has-children > ul") is far
   more specific than the one below — so display:block was applying
   exactly as tested, while visibility:hidden; position:absolute;
   right:-999% from menu.css's un-toggled closed state was silently still
   winning underneath it the whole time. !important on every property that
   rule sets is what actually closes this — specificity alone was never
   going to beat it without also matching every property. */
#el-mobile-menu li.is-expanded > .sub-menu {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  right: auto !important;
  opacity: 1 !important;
  transform: none !important;
}
/* menu.css also draws its own chevron here — a real FontAwesome glyph
   (content:'\f107'), independently of this shim's .mm-toggle — landing
   in roughly the same spot and rendering as what looked like a doubled
   arrow. It has no click handling of its own; hide it outright. */
#el-mobile-menu li.menu-item-has-children::after { display: none !important; content: none !important; }
#el-mobile-menu li.menu-item-has-children { position: relative; }
/* main.css already reserves 85px at the end of these links
   (".menu-item-has-children a { max-width: calc(100% - 85px) }") for its
   own original submenu indicator — this is likely the real reason tapping
   these items did nothing: the toggle button below only covered 44px of
   that 85px, leaving a ~41px dead strip that belonged to neither the link
   nor the toggle. No extra padding needed here — main.css already shrinks
   the link; matching the toggle's width to that same 85px, instead of
   adding a second, smaller reservation on top of it, closes the gap
   exactly instead of guessing at a new one. */
#el-mobile-menu .mm-toggle {
  position: absolute; inset-inline-end: 0; top: 0; bottom: 0;
  width: 85px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: #ed6732;
  display: grid; place-items: center; z-index: 2;
}
#el-mobile-menu .mm-toggle::before {
  content: ""; width: 9px; height: 9px; margin-top: -4px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms ease;
}
#el-mobile-menu li.is-expanded > .mm-toggle::before { transform: rotate(135deg); margin-top: 4px; }
#el-mobile-menu .sub-menu a {
  font-size: 0.9em; opacity: 0.85; padding-inline-start: 20px;
  white-space: normal; line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   4. Header layout
   The theme puts an inline `justify-content:center` on .el-wrap-components, so
   the whole header group floats in the middle of the bar: the logo never
   reaches the right edge, and at widths where the desktop menu is hidden it
   drifts towards the centre. Spread the row instead — logo pinned to the right
   (the RTL start edge), action buttons to the left, menu between them.
--------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #el-main-header .el-wrap-components { justify-content: space-between !important; }
  /* the nav must keep its natural width — it wraps to two lines if squeezed */
  #el-main-header .el-menu-row { flex: 0 0 auto; }
}

/* The logo asset is 200×92, but the theme caps .el-logotype at 135px on every
   screen under 1500px, so it renders shrunken on any laptop. Give it its real
   width back. */
@media (min-width: 992px) {
  #el-main-header .el-logotype { width: 200px !important; max-width: 200px !important; padding-left: 0; }
  #el-main-header .el-logotype img { width: 200px; max-width: 100% !important; height: auto; }
}

/* The theme hides the desktop menu below 1084px but only reveals the burger
   below 991px — so between 992px and 1084px the site has no navigation at all
   (the live WordPress site has the same gap). Reveal the burger there. */
@media (min-width: 992px) and (max-width: 1084px) {
  /* the off-canvas panel itself is display:none above 991px — bring it back,
     otherwise the burger we reveal here has nothing to open */
  #el-mobile-menu {
    display: block !important;
    position: fixed !important;
    top: 0; bottom: 0; left: auto; right: -234px; width: 234px;
    overflow-y: auto;
    z-index: 999; /* must sit above the backdrop (998) */
  }
  /* burger sits next to the logo on the right, where a menu control belongs in
     RTL — not stranded at the far left of the bar */
  #el-main-header .el-wrap-components > * { order: 3; }
  #el-main-header .el-mb-logo-shop { order: 1; }
  #el-main-header .el-btn-menu.el-toggle-menu-btn {
    display: flex !important;
    position: static !important;
    order: 2;
    align-items: center;
    margin: 0 22px 0 auto;
  }
}

/* ---------------------------------------------------------------------------
   5. Elementor popups were injected and shown by JS; inline they would render
   as stray content in the page flow.
--------------------------------------------------------------------------- */
[data-elementor-type="popup"] { display: none !important; }

/* ---------------------------------------------------------------------------
   6. Safety net: no page should scroll sideways. `clip` (not `hidden`) keeps
   position: sticky working.
--------------------------------------------------------------------------- */
html, body { overflow-x: clip; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  #el-mobile-menu { transition: none; }
  .owl-carousel { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   7. Sidebar contact form — the time dropdown
   The theme styles text inputs but never the <select>: on the live site a
   plugin replaced it with a styled div at runtime. With the JavaScript gone the
   raw control shows through at 112×19px next to 259×52px inputs.
--------------------------------------------------------------------------- */
/* Every CF7 select, not only the sidebar: the same unstyled control shows up
   in the in-article lead form and in the fixed "לייעוץ משפטי אישי" panel. */
.wpcf7 select,
.wpcf7-form select {
  width: 100%; height: 52px; padding: 1px 15px; font-size: 16px;
  font-family: inherit; color: inherit; background: #fff;
  border: 1px solid #d9d9d9; border-radius: 0; box-sizing: border-box;
  appearance: none;
  /* caret drawn inline so it needs no extra request, on the right for RTL */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23888' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 15px center;
}

/* ---------------------------------------------------------------------------
   8. "Certificate" cards on the judgments page
   The title is white, and the dark certificate image it was meant to sit on is
   positioned 138px lower — so it renders white on white. This is how the live
   WordPress site renders too; it is a fix, not a restoration.
--------------------------------------------------------------------------- */
/* Two card shapes exist on this page: `.block > .title > h2` and `.block > h2`.
   Both are white; cover both. */
.el-article .block h2,
.el-article .block .title h2 {
  color: #1c1c2b;
  font-size: 20px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   9. Text that renders in the colour of what it sits on
   A number of WordPress headings come out white on white — the same on the
   live site, so not a migration regression, but unreadable either way. The
   white is inherited and no stylesheet rule targets these elements, so a
   selector-based fix would be guesswork. `scripts/fix-contrast.mjs` measures
   each page in a browser and marks only the elements that actually fail;
   this rule colours them, and nothing else.
--------------------------------------------------------------------------- */
/* !important is deliberate: these elements inherit their colour through deep
   theme selectors, and a single class loses to those on specificity. This is a
   correction applied only to elements measured as unreadable. */
.mirror-contrast-fix { color: #1c1c2b !important; }
.mirror-contrast-fix.is-on-dark { color: #fff !important; }


/* ---------------------------------------------------------------------------
   10. The 'time to call' select is missing its border in every form except
   the dedicated contact page
   The theme's own CSS (main.css) styles this select with a 2px border, but
   scoped to '.contact__form--content select' — the wrapper class the
   contact-page form uses. Every other instance of the same field (sidebar
   widgets, footer forms — the vast majority of the 1,838 forms on the site)
   sits in a plain '.form' wrapper the rule never matches, so it renders
   borderless next to text inputs that do have one. Present on the live site
   too; not a migration regression, just never fixed there either.
--------------------------------------------------------------------------- */
.wpcf7-form-control-wrap select.wpcf7-select {
  border: 2px solid #404042;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   11. Cookie / privacy consent bar (public/cookie-consent.js)
   No cookie-consent plugin exists on the live WordPress site (checked the
   full active-plugin list) — this is a new notice, not a restored one. Sits
   above the page but below the two higher-priority fixed widgets already at
   the bottom of the screen (the WhatsApp/call bubble at z-index 9999, and
   the “ליעוץ משפטי אישי” contact bar at the maximum z-index) so it never
   covers either — hence `bottom: 70px` instead of `bottom: 0`.
--------------------------------------------------------------------------- */
#cookie-consent-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 70px;
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: #1a1b30;
  color: #fff;
  padding: 14px 24px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  line-height: 1.6;
}
#cookie-consent-bar p { margin: 0; max-width: 900px; color: #fff !important; }
/* !important: some page in this site's inherited chrome sets a link colour
   that otherwise wins here — this bar's own background is the only thing
   that should decide its text colour. */
#cookie-consent-bar a { color: #fff !important; text-decoration: underline; }
#cookie-consent-bar a:hover { color: #f0f0f0 !important; }
#cookie-consent-bar button {
  flex: 0 0 auto;
  background: #ed6732;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#cookie-consent-bar button:hover { background: #dc4f17; }
@media (max-width: 640px) {
  #cookie-consent-bar { bottom: 78px; padding: 12px 16px; font-size: 13px; }
}



/* ---------------------------------------------------------------------------
   13. Hero banner background image never covers past its own natural width
   The theme sets background-repeat:no-repeat and background-position:center
   for .front_page .banner, but never background-size — so the image (a
   fixed 1980x600px file) renders at its natural size and simply stops
   covering the container on any screen wider than 1980px, centered, with
   visible gaps on both sides. Everything below the hero is built from flex
   layout, not a fixed-size image, so it keeps stretching full-width — the
   mismatch reported. background-size:cover is the standard responsive fix.
--------------------------------------------------------------------------- */
.front_page .banner { background-size: cover; }