/**
 * Interaction & motion layer
 * ---------------------------------------------------------------------------
 * Loaded after style.css so it can refine Tailwind utilities without a rebuild.
 * Everything here is additive polish: hover depth, tap feedback, keyboard focus
 * and a light scroll reveal. Nothing here changes layout, colour or copy, so it
 * can be removed by dequeuing one stylesheet.
 *
 * Every motion rule is disabled under prefers-reduced-motion (see the bottom).
 */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
  --lift: -4px;
  --shadow-rest: 0 1px 2px rgba(52, 52, 52, 0.04);
  --shadow-hover: 0 14px 32px -12px rgba(42, 90, 174, 0.28), 0 4px 10px -4px rgba(52, 52, 52, 0.10);
}

/* ===========================================================================
 * 1. Keyboard focus — visible, branded, and never shown for mouse users.
 * ========================================================================= */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2a5aae;
  outline-offset: 3px;
  border-radius: 6px;
}
.bg-secondary a:focus-visible,
.bg-primary a:focus-visible,
#colophon a:focus-visible,
#ss-emergency-cta a:focus-visible {
  outline-color: #ffffff;
}

/* ===========================================================================
 * 2. Cards — lift and bloom on hover, press in on tap.
 * ========================================================================= */
#ss-our-services .group,
#ss-our-services-v2 .group,
#ss-trust-badges li,
#ss-why-choose-us li,
#ss-why-choose-us-v2 li,
#ss-testimonials .rounded-\[10px\],
#ss-related-services a,
#ss-offer-cards > div > div,
#ss-blog-listing article {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
  will-change: transform;
}
#ss-our-services .group:hover,
#ss-our-services-v2 .group:hover,
#ss-trust-badges li:hover,
#ss-why-choose-us li:hover,
#ss-why-choose-us-v2 li:hover,
#ss-testimonials .rounded-\[10px\]:hover,
#ss-related-services a:hover,
#ss-offer-cards > div > div:hover,
#ss-blog-listing article:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-hover);
}

/* Icons inside a hovered card grow very slightly — the "something noticed me" cue. */
#ss-our-services .group svg,
#ss-our-services-v2 .group svg,
#ss-trust-badges li svg,
#ss-why-choose-us li svg,
#ss-why-choose-us-v2 li svg,
#ss-quick-actions a svg {
  transition: transform var(--dur) var(--ease-out);
}
#ss-our-services .group:hover svg,
#ss-our-services-v2 .group:hover svg,
#ss-trust-badges li:hover svg,
#ss-why-choose-us li:hover svg,
#ss-why-choose-us-v2 li:hover svg,
#ss-quick-actions a:hover svg {
  transform: scale(1.09) rotate(-2deg);
}

/* ===========================================================================
 * 3. Quick action tiles — the four coloured blocks under the hero.
 * ========================================================================= */
#ss-quick-actions a {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
#ss-quick-actions a:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px -14px rgba(0, 71, 19, 0.45);
}

/* ===========================================================================
 * 4. Buttons and pills — gentle rise, real press.
 * ========================================================================= */
a.rounded-full,
button.rounded-full,
.wp-block-button__link,
input[type="submit"] {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
a.rounded-full:hover,
button.rounded-full:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(52, 52, 52, 0.35);
}
a.rounded-full:active,
button.rounded-full:active,
#ss-quick-actions a:active,
.wp-block-button__link:active,
input[type="submit"]:active {
  transform: translateY(0) scale(0.975);
  box-shadow: none;
  transition-duration: 90ms;
}

/* Cards get the same honest press feedback on touch, where hover never fires. */
#ss-our-services .group:active,
#ss-trust-badges li:active,
#ss-why-choose-us li:active,
#ss-service-areas a:active {
  transform: scale(0.985);
  transition-duration: 90ms;
}

/* ===========================================================================
 * 5. Service-area pills — fill in rather than just changing border.
 * ========================================================================= */
#ss-service-areas a {
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
#ss-service-areas a:hover {
  background-color: #2a5aae;
  border-color: #2a5aae;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ===========================================================================
 * 6. Brand logos — come up to full strength on hover.
 * ========================================================================= */
#ss-brands li {
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
#ss-brands li img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
#ss-brands li:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 90, 174, 0.35);
  box-shadow: var(--shadow-hover);
}
#ss-brands li:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ===========================================================================
 * 7. Text links — underline grows from the left instead of snapping on.
 * ========================================================================= */
#colophon a:not(.rounded-full):not([aria-label]),
.prose a:not(.rounded-full) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  text-decoration: none;
}
#colophon a:not(.rounded-full):not([aria-label]):hover,
.prose a:not(.rounded-full):hover {
  background-size: 100% 1px;
}

/* ===========================================================================
 * 8. Chevrons nudge in the direction they point.
 * ========================================================================= */
a:has(svg) svg.shrink-0,
li a svg.h-4 {
  transition: transform var(--dur) var(--ease-out);
}
a:hover > svg.shrink-0,
li a:hover svg.h-4 {
  transform: translateX(3px);
}

/* ===========================================================================
 * 9. Scroll reveal — set by js/interactions.js, which adds .fa-reveal to
 *    sections and .is-in once they enter the viewport. If the JS never runs,
 *    nothing is hidden, so content can't be lost behind a broken animation.
 * ========================================================================= */
.fa-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.fa-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ===========================================================================
 * 10. Respect the system setting. Everything above becomes instant.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fa-reveal { opacity: 1; transform: none; }
  #ss-our-services .group:hover,
  #ss-trust-badges li:hover,
  #ss-why-choose-us li:hover,
  #ss-quick-actions a:hover,
  a.rounded-full:hover { transform: none; }
}