/* ===================================================================================

* Theme Name: Sunnyaid Child
* Theme URI: https://themeforest.net/user/xpressbuddy
* Author: XpressBuddy
* Author URI: https://wp.xpressbuddy.com/techco/
* Description: NDIS Disability & Elderly Care Service WordPress Theme
* Version: 1.0.0
* Template: sunnyaid
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* ===================================================================
   Homepage hero customisations
   =================================================================== */

/* Lift the hero content. The theme sets 145px via the pt-145 utility class;
   the header is position:relative so this padding is pure whitespace and
   safe to cut without the content sliding under the menu. */
.hero-style-one .hero__content-wrap.pt-145 {
  padding-top: 95px;
}

@media (max-width: 1199px) {
  .hero-style-one .hero__content-wrap.pt-145 {
    padding-top: 70px;
  }
}

/* Keep the two hero CTAs on one line from tablet up.
   The label size and horizontal padding scale off the button row's own
   width (container query units), not the viewport, because the Bootstrap
   container is a fixed 1140px at xl - so viewport units would keep growing
   the buttons after the column had stopped growing, and overflow it.
   The plain declarations above each clamp() are the fallback for browsers
   without container query support. */
@media (min-width: 768px) {

  .hero-style-one .hero-btn.btns {
    flex-wrap: nowrap;
    container-type: inline-size;
  }

  .hero-style-one .hero-btn.btns .thm-btn {
    white-space: nowrap;
    font-size: 15px;
    font-size: clamp(13px, 2.9cqi, 18px);
    padding: 20px 20px;
    padding: 20px clamp(14px, 3.4cqi, 38px);
  }

  /* Let the arrow icons hold their size while the labels drive the fit. */
  .hero-style-one .hero-btn.btns .thm-btn span {
    flex: 0 0 auto;
  }
}

/* Hide the blank fan-fact counter that rendered as a stray "0" under the
   CTAs. Hidden rather than removed from the data because the Elementor
   editor rewrites the empty repeater back on every save - see
   hourglass_hero_ndis_image() in functions.php. */
.hero-style-one .xb-fanfact {
  display: none;
}

/* NDIS registered-provider image, injected in place of that counter. */
.hero-style-one .hourglass-hero-ndis {
  padding-top: 45px;
}

.hero-style-one .hourglass-hero-ndis__img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .hero-style-one .hourglass-hero-ndis {
    padding-top: 35px;
  }

  .hero-style-one .hourglass-hero-ndis__img {
    max-width: 260px;
  }
}


/* ===================================================================
   Homepage testimonials
   =================================================================== */

/* Equal-height cards. Swiper gives every slide height:100% of the tallest
   slide, but the card inside kept its own content height - so shorter
   quotes left a ragged bottom edge. Stretching the slide and letting the
   card fill it makes every card match the tallest in view. */
.testimonial-slider .swiper-wrapper {
  align-items: stretch;
}

.testimonial-slider .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-slider .swiper-slide > .xb-testimonial {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Truncate the quote to four lines until the reader opens it. */
.xb-testimonial .xb-item--content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xb-testimonial.is-expanded .xb-item--content {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.xb-testimonial .hg-readmore {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.xb-testimonial .hg-readmore:hover,
.xb-testimonial .hg-readmore:focus-visible {
  opacity: 0.7;
}

.xb-testimonial .hg-readmore[hidden] {
  display: none;
}


/* ===================================================================
   Header phone CTA - "call now" treatment
   ===================================================================
   Goal is prominence: the button should pull the eye and read as an
   invitation to ring, not as decoration. Four things do the work -
   the accent fill, a breathing glow, two staggered rings pushing
   outward, and the handset shaking like it is ringing.

   The palette is inverted rather than invented: yellow-on-primary is
   already the theme's hover state for this exact button, so this makes
   the loud state the resting state and moves the dark fill to hover.
   =================================================================== */

.header-contact a {
  position: relative;
  background: var(--color-yellow);
  color: var(--color-primary);
  padding: 0 34px;
  animation: hg-phone-glow 2s ease-in-out infinite;
}

.header-contact a span {
  font-weight: 700;
}

.header-contact a svg path {
  fill: var(--color-primary);
}

/* Hover takes the dark fill, so the button still visibly responds. */
.header-contact a:hover,
.header-contact a:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.header-contact a:hover svg path,
.header-contact a:focus-visible svg path {
  fill: var(--color-white);
}

/* Two rings, offset by half the cycle, so one is always travelling. */
.header-contact a::before,
.header-contact a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid var(--color-yellow);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: hg-phone-ring 2s ease-out infinite;
}

.header-contact a::after {
  animation-delay: 1s;
}

/* Settle everything on hover - the visitor is already engaged, and the
   motion competes with the colour change. */
.header-contact a:hover,
.header-contact a:focus-visible {
  animation-play-state: paused;
}

.header-contact a:hover::before,
.header-contact a:hover::after,
.header-contact a:focus-visible::before,
.header-contact a:focus-visible::after {
  animation-play-state: paused;
  opacity: 0;
}

.header-contact a:hover svg,
.header-contact a:focus-visible svg {
  animation-play-state: paused;
}

/* The handset rings on the same 2s beat as the glow. The theme already
   nudges this svg up 2px, so every frame has to carry that translate. */
.header-contact a svg {
  transform-origin: center;
  animation: hg-phone-shake 2s ease-in-out infinite;
}

@keyframes hg-phone-glow {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(255, 212, 112, 0.5);
  }
  50% {
    box-shadow: 0 6px 26px rgba(255, 212, 112, 0.95);
  }
}

@keyframes hg-phone-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes hg-phone-shake {
  0%, 55%, 100% {
    transform: translateY(-2px) rotate(0deg);
  }
  60% {
    transform: translateY(-2px) rotate(-14deg);
  }
  65% {
    transform: translateY(-2px) rotate(14deg);
  }
  70% {
    transform: translateY(-2px) rotate(-11deg);
  }
  75% {
    transform: translateY(-2px) rotate(11deg);
  }
  80% {
    transform: translateY(-2px) rotate(-6deg);
  }
  85% {
    transform: translateY(-2px) rotate(0deg);
  }
}

/* Motion sensitivity: keep the prominence, drop the movement. */
@media (prefers-reduced-motion: reduce) {

  .header-contact a,
  .header-contact a svg,
  .header-contact a::before,
  .header-contact a::after {
    animation: none;
  }

  .header-contact a {
    box-shadow: 0 4px 18px rgba(255, 212, 112, 0.8);
  }
}