/* ---------------------------------------------------------------------------
 * Hadar - site-wide layer: floating WhatsApp + the horizontal-scroll fix.
 * Loads on every page (see hadar-styles.php).
 * ------------------------------------------------------------------------- */

/* Kill the sideways drift while scrolling.
 * Cause: the decorative leaves and other widgets use Elementor entrance
 * animations (fadeInLeft / fadeInRight), which are animate.css keyframes
 * starting at translate3d(-100%,0,0). Mid-animation the element sits outside
 * the viewport and inflates the page's scrollWidth, so the browser shows a
 * horizontal scrollbar and the page appears to slide around.
 *
 * `clip` and not `hidden`: overflow:hidden turns the element into a scroll
 * container, which silently breaks position:sticky and anchor scrolling.
 * clip removes the sideways scroll without that side effect. */
html,
body {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * Mobile dropdown menu ran off the right edge and got clipped.
 *
 * Cause: the nav widget uses Full Width ("stretch"), which is positioned by
 * Elementor's JS - and that JS computes a physical `left` offset with no RTL
 * branch (no is_rtl reference in frontend.min.js). On an RTL site the widget
 * sits on the right, the computed offset is wrong, and the panel overflows.
 * html{overflow-x:clip} then clips it instead of letting it scroll.
 *
 * Fix without relying on that JS: the header container is sticky, i.e. a
 * positioned element, so it is the dropdown's containing block. Pinning both
 * insets to 0 makes the panel span the header exactly, and using left AND
 * right together is direction-agnostic - nothing to get backwards in RTL.
 * !important is required: the stretch JS writes width/left as inline styles.
 * ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
 * Floating WhatsApp button
 * ------------------------------------------------------------------------- */
/* Physical `right`, not inset-inline-start: the wrapper carries dir="ltr" (so the
 * SVG is not mirrored) inside an RTL document, which makes the logical value
 * ambiguous to reason about. Bottom-RIGHT by Julia's call — the UserWay
 * accessibility widget sits on the opposite side, so they do not collide. */
.hadar-fab {
  position: fixed;
  right: 16px;
  left: auto;
  bottom: 22px;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.hadar-fab-btn {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #847365;
  color: #fff;
  box-shadow: 0 0 22px rgba(132, 115, 101, .55), 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .15s ease, box-shadow .2s ease;
  animation: hadar-fab-wobble 2.8s ease-in-out infinite;
}

.hadar-fab-btn:hover,
.hadar-fab-btn:focus-visible {
  transform: scale(1.08);
  color: #fff;
  animation-play-state: paused;
}

.hadar-fab-btn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  position: relative;
  z-index: 1;
}

/* the ring that keeps pulsing outwards */
.hadar-fab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(132, 115, 101, .55);
  animation: hadar-fab-pulse 2s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes hadar-fab-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(132, 115, 101, .55); }
  70%  { box-shadow: 0 0 0 18px rgba(132, 115, 101, 0); }
  100% { box-shadow: 0 0 0 0 rgba(132, 115, 101, 0); }
}

@keyframes hadar-fab-wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  12%      { transform: rotate(-10deg) scale(1.06); }
  24%      { transform: rotate(8deg) scale(1.06); }
  36%      { transform: rotate(-6deg); }
  48%      { transform: rotate(4deg); }
  60%      { transform: rotate(0); }
}

@media (max-width: 767px) {
  .hadar-fab {
    right: 12px;
    bottom: 16px;
  }
  .hadar-fab-btn {
    width: 50px;
    height: 50px;
  }
  .hadar-fab-btn svg {
    width: 26px;
    height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hadar-fab-btn,
  .hadar-fab-btn::before {
    animation: none;
  }
}