/* =========================================================================
   Hitech revamp 2026 - floating WhatsApp + Call buttons (includes/ht-fab.blade.php).
   Loaded on every page by layouts/front.blade.php, so small and self-contained.

   One column at the bottom right, all centred on the same line, from the top:
   the back-to-top ring (44 px glass, styled in hitech-ui.css), Call (44 px glass),
   WhatsApp (56 px green). While the cookie card really covers the column, everything
   moves up above it (--ht-float-lift, set by hitech-fab.js); the "Request this
   service" button of service pages follows the same lift.
   Labels (Archivo) slide out on hover / keyboard focus; on phones the icons speak
   for themselves (and screen readers read the labels). Over the white bands each
   button's glass turns light on its own (.is-light, hitech-fab.js).
   The ring and Call step aside to the edge (is-tucked, hitech-fab.js) wherever they
   would cover something you can click, the request form or the footer's last line,
   and on phones while an article is read downwards; the whole column (is-tucked-wa)
   while a main button passes under any of the three. Keyboard focus brings a tucked
   button back. Only the buttons take clicks: the column's empty box never blocks
   the page under it.
   ========================================================================= */
:root {
  --ht-fab-edge: 24px;   /* distance from the screen edge */
  --ht-fab-main: 56px;   /* WhatsApp button */
  --ht-fab-sub: 44px;    /* Call button */
  --ht-fab-ring: 44px;   /* back-to-top ring (hitech-ui.css) */
  --ht-fab-gap: 12px;
  --ht-fab-bottom: calc(var(--ht-fab-edge) + env(safe-area-inset-bottom, 0px) + var(--ht-float-lift, 0px));
  --ht-fab-ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 767.98px) {
  :root {
    --ht-fab-edge: 16px;
    --ht-fab-main: 52px;
    --ht-fab-gap: 10px;
  }
}

.ht-fab {
  position: fixed;
  right: calc(var(--ht-fab-edge) + env(safe-area-inset-right, 0px));
  bottom: var(--ht-fab-bottom);
  z-index: 9990; /* under the theme's side menu (9991), the search panel and the cookie notice */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ht-fab-gap);
  width: var(--ht-fab-main);
  /* only the buttons take clicks: the column's empty box (the gaps, the place of a button that has
     stepped aside) never blocks what lies under it */
  pointer-events: none;
  transition: bottom .5s var(--ht-fab-ease), opacity .3s ease, visibility 0s linear 0s;
}
.rtl .ht-fab {
  right: auto;
  left: calc(var(--ht-fab-edge) + env(safe-area-inset-left, 0px));
}

.ht-fab__btn,
.ht-fab__btn:hover,
.ht-fab__btn:focus,
.ht-fab__btn:visited {
  color: #fff;
  text-decoration: none;
}
.ht-fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ht-fab-sub);
  height: var(--ht-fab-sub);
  border-radius: 50%;
  outline: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  /* the theme animates "all" on links; translate (the magnetic pull) is driven by hitech-ui.js */
  transition: transform .4s var(--ht-fab-ease), opacity .35s ease, background-color .3s ease, border-color .3s ease, box-shadow .45s var(--ht-fab-ease), color .3s ease;
  animation: ht-fab-in .8s var(--ht-fab-ease) .3s backwards; /* "backwards": the hover scale still eases */
}
.ht-fab__btn--call { animation-delay: .42s; }
.ht-fab__btn i {
  position: relative;
  z-index: 1;
  line-height: 1;
  pointer-events: none;
}
.ht-fab__btn:focus-visible {
  outline: 2px solid transparent; /* shows in forced colours (Windows high contrast), where box-shadows are dropped */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #4361ff;
}

/* Call: glass (the site's glass recipe), Signal blue under the mouse / focus. */
.ht-fab__btn--call {
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 8, 12, .7);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 10px 26px -10px rgba(0, 0, 0, .6);
  font-size: 16px;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ht-fab__btn--call { background: #0a0a0e; }
}
.ht-fab__btn--call:hover,
.ht-fab__btn--call:focus-visible {
  border-color: #4361ff;
  background: #4361ff;
  color: #fff;
}
@media (hover: hover) {
  .ht-fab__btn--call:hover { box-shadow: 0 0 0 1px rgba(67, 97, 255, .5), 0 14px 38px -12px rgba(67, 97, 255, .75); }
}
.ht-fab__btn--call:hover i { animation: ht-fab-ring .9s ease both; }
/* over the white bands: light glass, ink glyph. Decided for each button from the band under its
   own centre (.is-light, hitech-fab.js), not for the whole column at once. */
.ht-fab__btn--call.is-light {
  border-color: rgba(11, 11, 16, .14);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 40px -20px rgba(11, 11, 16, .35);
  color: #0b0b10;
}
.ht-fab__btn--call.is-light:hover,
.ht-fab__btn--call.is-light:focus-visible {
  border-color: #4361ff;
  background: #4361ff;
  color: #fff;
}
@media (hover: hover) {
  .ht-fab__btn--call.is-light:hover { box-shadow: 0 0 0 1px rgba(67, 97, 255, .5), 0 14px 38px -12px rgba(67, 97, 255, .75); }
}
.ht-fab__btn.is-light:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4361ff; }

/* WhatsApp: the green people know (a shade darker so the white glyph stays clear), with a soft
   ring that ripples out now and then. */
.ht-fab__btn--wa {
  width: var(--ht-fab-main);
  height: var(--ht-fab-main);
  background: #1da851;
  background-image: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 60%);
  box-shadow: 0 14px 32px -12px rgba(29, 168, 81, .75), 0 6px 16px -8px rgba(0, 0, 0, .6);
  font-size: 28px;
}
.ht-fab__btn--wa:hover,
.ht-fab__btn--wa:focus-visible { background-color: #178f44; }
@media (hover: hover) {
  .ht-fab__btn--wa:hover { box-shadow: 0 0 0 1px rgba(37, 211, 102, .45), 0 16px 40px -12px rgba(29, 168, 81, .9), 0 6px 16px -8px rgba(0, 0, 0, .6); }
}
.ht-fab__btn--wa::before,
.ht-fab__btn--wa::after { /* ripples */
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #25d366;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: ht-fab-ping 7s var(--ht-fab-ease) 2.2s infinite;
}
.ht-fab__btn--wa::after { animation-delay: 2.5s; }

@media (hover: hover) and (pointer: fine) {
  .ht-fab__btn:hover { transform: scale(1.07); }
}
.ht-fab__btn:active { transform: scale(.94); transition-duration: .12s; }

/* Labels: slide out to the left, under the mouse or with keyboard focus; the WhatsApp one also
   once per visit on computers ("is-hello", hitech-fab.js), never over a form or a main button. */
.ht-fab__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(10, 10, 12, .94);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  color: #fff;
  font-family: var(--ht-font, "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
  font-size: 14px;
  font-weight: 600;
  font-stretch: 112%;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transform: translate3d(12px, -50%, 0);
  pointer-events: none;
  transition: opacity .25s ease, transform .5s var(--ht-fab-ease);
}
.rtl .ht-fab__label {
  right: auto;
  left: calc(100% + 12px);
  font-family: "Cairo", sans-serif;
  font-stretch: normal;
  transform: translate3d(-12px, -50%, 0);
}
@media (hover: hover) and (pointer: fine) {
  .ht-fab__btn:hover .ht-fab__label {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }
}
.ht-fab__btn:focus-visible .ht-fab__label,
.ht-fab.is-hello .ht-fab__btn--wa .ht-fab__label {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
}

/* The back-to-top ring sits on top of the column, centred on the same line. */
.ht-fab ~ .progress-wrap {
  right: calc(var(--ht-fab-edge) + env(safe-area-inset-right, 0px) + (var(--ht-fab-main) - var(--ht-fab-ring)) / 2);
  bottom: calc(var(--ht-fab-bottom) + var(--ht-fab-main) + var(--ht-fab-sub) + 2 * var(--ht-fab-gap));
}
.rtl .ht-fab ~ .progress-wrap {
  right: inherit;
  left: calc(var(--ht-fab-edge) + env(safe-area-inset-left, 0px) + (var(--ht-fab-main) - var(--ht-fab-ring)) / 2);
}

/* Ring and Call step aside to the edge ("is-tucked"); WhatsApp too while a main button passes under
   the column ("is-tucked-wa"). A tucked button that gets keyboard focus comes back, so focus is
   always seen (and Enter never fires something out of sight). All of them slide with "transform"
   (the ring too): "translate" stays free for the magnetic pull (hitech-ui.js), so a ring that is
   under the mouse still slides away and fades out instead of snapping. */
.ht-fab.is-tucked .ht-fab__btn--call,
.ht-fab.is-tucked-wa .ht-fab__btn--wa {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(100% + var(--ht-fab-edge)), 0, 0);
}
.ht-fab.is-tucked ~ .progress-wrap {
  transform: translate3d(calc(100% + var(--ht-fab-edge) + 8px), 0, 0);
  pointer-events: none;
}
.rtl .ht-fab.is-tucked .ht-fab__btn--call,
.rtl .ht-fab.is-tucked-wa .ht-fab__btn--wa { transform: translate3d(calc(-100% - var(--ht-fab-edge)), 0, 0); }
.rtl .ht-fab.is-tucked ~ .progress-wrap { transform: translate3d(calc(-100% - var(--ht-fab-edge) - 8px), 0, 0); }
.ht-fab.is-tucked .ht-fab__btn--call:focus-visible,
.ht-fab.is-tucked-wa .ht-fab__btn--wa:focus-visible,
.rtl .ht-fab.is-tucked .ht-fab__btn--call:focus-visible,
.rtl .ht-fab.is-tucked-wa .ht-fab__btn--wa:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.ht-fab.is-tucked ~ .progress-wrap:focus-visible,
.rtl .ht-fab.is-tucked ~ .progress-wrap:focus-visible {
  transform: none;
  pointer-events: auto;
}

/* Out of the way: while the side menu or the search panel is open, while a form field is being
   filled in on a phone ("is-away", hitech-fab.js), and on paper. */
.menu-open .ht-fab,
html.ht-hs-lock .ht-fab,
.ht-fab.is-away {
  opacity: 0;
  visibility: hidden;
  transition: bottom .5s var(--ht-fab-ease), opacity .2s ease, visibility 0s linear .2s;
}
.ht-fab.is-away ~ .progress-wrap {
  opacity: 0;
  visibility: hidden;
}
/* Under the dark layer of a lightbox (Magnific: project galleries, the About video, z 1042-1046),
   like the rest of the page and the cookie card: nothing bright on top of the picture or its counter. */
body:has(> .mfp-bg) .ht-fab { z-index: 1041; }
@media print {
  .ht-fab { display: none !important; }
}

/* They come in once the theme's loading screen has gone. */
.pace-running:not(.pace-done) .ht-fab__btn,
.pace-running:not(.pace-done) .ht-fab__btn--wa::before,
.pace-running:not(.pace-done) .ht-fab__btn--wa::after { animation-play-state: paused; }

@keyframes ht-fab-in {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.55);
  }
}
@keyframes ht-fab-ping {
  0% { opacity: .7; transform: scale(1); }
  22%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes ht-fab-ring {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(-14deg); }
  30%, 60% { transform: rotate(12deg); }
  75% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ht-fab,
  .ht-fab__btn,
  .ht-fab__label { transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important; }
  .ht-fab__btn,
  .ht-fab__btn:hover i,
  .ht-fab__btn--wa::before,
  .ht-fab__btn--wa::after { animation: none !important; }
  .ht-fab__btn:hover,
  .ht-fab__btn:active { transform: none; }
}