/* ==========================================================================
   Vac-Ex SITE-WIDE ENHANCEMENTS
   Enqueued on every page after style.css and custom.css (inc/scripts.php).
   1. Animated "24/7 National Hire available" number in the header (≥1024px)
      CSS only; uses the existing header.php markup. The multi-number
      dropdown variant (.tel.v2) is left exactly as it was.
   2. Floating WhatsApp button, bottom right (markup in footer.php)
   ========================================================================== */

/* ==========================================================================
   1. ANIMATED HIRE NUMBER (desktop/laptop, ≥1024px)
   Markup used (unchanged, from header.php):
   <span class="tel">24/7 National Hire available: <a href="tel:…"><i class="icon-phone2"></i>01302 …</a></span>

   - Pulsing yellow "live" dot before the label (signals 24/7 availability)
   - Number framed as a call button, with the theme's phone icon in a yellow tile
   - Every 6s: the phone icon gives a short ring and a light sheen sweeps
     across the button. Calm the rest of the time.
   - Pauses on hover; switched off for prefers-reduced-motion.
   ========================================================================== */
@keyframes vx-live {
  0%   { box-shadow: 0 0 0 0 rgba(241, 221, 56, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(241, 221, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(241, 221, 56, 0); }
}
@keyframes vx-ring {
  0%, 16%, 100% { transform: rotate(0); }
  2%  { transform: rotate(-16deg); }
  4%  { transform: rotate(14deg); }
  6%  { transform: rotate(-12deg); }
  8%  { transform: rotate(10deg); }
  10% { transform: rotate(-6deg); }
  12% { transform: rotate(4deg); }
}
@keyframes vx-sheen {
  0%   { transform: translateX(0) skewX(-20deg); }
  18%, 100% { transform: translateX(520%) skewX(-20deg); }
}

@media (min-width: 1024px) {
  #header .tel:not(.v2) {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.25;
    text-transform: uppercase;
    color: #e4e5e8;
  }
  #header .tel:not(.v2)::before {             /* live dot */
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    margin-right: -4px;
    border-radius: 50%;
    background: #f1dd38;
    animation: vx-live 2s ease-out infinite;
  }
  #header .tel:not(.v2) a {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 5px 20px 5px 5px;
    border: 1px solid rgba(241, 221, 56, .55);
    background: rgba(241, 221, 56, .06);
    font-family: "Audiowide", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    color: #f1dd38;
    transition: background-color .2s ease, border-color .2s ease;
  }
  #header .tel:not(.v2) a:hover,
  #header .tel:not(.v2) a:focus-visible {
    background: rgba(241, 221, 56, .14);
    border-color: #f1dd38;
    color: #f1dd38;
  }
  #header .tel:not(.v2) a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  #header .tel:not(.v2) a i {                  /* theme hides this icon ≥768px; shown here as a yellow tile */
    display: grid !important;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    background: #f1dd38;
    color: #0c0a10;
    font-size: 17px;
    animation: vx-ring 6s ease-in-out 2s infinite;
  }
  #header .tel:not(.v2) a::after {             /* sheen */
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -30%;
    width: 22%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0));
    pointer-events: none;
    animation: vx-sheen 6s ease-in-out 2s infinite;
  }
  #header .tel:not(.v2) a:hover i,
  #header .tel:not(.v2) a:hover::after { animation-play-state: paused; }
}
@media (min-width: 1360px) {
  #header .tel:not(.v2) a { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #header .tel:not(.v2)::before,
  #header .tel:not(.v2) a i { animation: none; }
  #header .tel:not(.v2) a::after { display: none; }
}

/* ==========================================================================
   2. FLOATING WHATSAPP BUTTON (bottom right, every page)
   - The theme's back-to-top sits at right 77/95/100px, so a 56px button at
     right 20px never overlaps it.
   - Hidden while the mobile menu is open (body.menu-active).
   ========================================================================== */
.vx-wa {
  position: fixed;
  z-index: 95;
  right: 20px;
  bottom: 20px;
  display: block;
  text-decoration: none;
  transition: bottom .25s ease, transform .25s ease, opacity .25s ease;
}
.vx-wa__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;           /* WhatsApp brand green, for instant recognition */
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background-color .2s ease;
}
.vx-wa__btn svg { width: 30px; height: 30px; fill: currentColor; }
.vx-wa__btn::after {             /* soft halo, every few seconds */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: vx-wa-halo 4s ease-out 2s infinite;
  pointer-events: none;
}
@keyframes vx-wa-halo {
  0%   { opacity: .8; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(1.45); }
}
.vx-wa__label {               /* tooltip above the button, so the hit area is the button only */
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  padding: 9px 14px;
  background: #0c0a10;
  color: #fff;
  font: 700 0.8125rem/1.2 "Montserrat", sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.vx-wa:hover .vx-wa__btn, .vx-wa:focus-visible .vx-wa__btn { transform: scale(1.06); background: #1ebe5a; }
.vx-wa:hover .vx-wa__label, .vx-wa:focus-visible .vx-wa__label { opacity: 1; transform: none; }
.vx-wa:hover .vx-wa__btn::after { animation-play-state: paused; }
.vx-wa:focus-visible { outline: none; }
.vx-wa:focus-visible .vx-wa__btn { outline: 3px solid #f1dd38; outline-offset: 3px; }

@media (max-width: 767px) {
  .vx-wa { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .vx-wa__btn { width: 52px; height: 52px; }
  .vx-wa__btn svg { width: 28px; height: 28px; }
  .vx-wa__label { display: none; }
  body.menu-active .vx-wa { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vx-wa, .vx-wa__btn, .vx-wa__label { transition: none; }
  .vx-wa__btn::after { animation: none; display: none; }
}