/**
 * Block Extensions — Frontend Styles
 *
 * Global CSS for custom attributes added to core blocks via block extensions.
 */

/* Reverse on mobile for core/group */
@media (max-width: 979px) {
  .is-reverse-on-mobile {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  /* core/columns has flex-wrap: wrap !important and flex-basis: 100% on children.
     In column-reverse direction, flex-basis applies to height not width,
     so children lose their full width. Override to fix stacking. */
  .wp-block-columns.is-reverse-on-mobile {
    flex-wrap: nowrap !important;
  }

  .wp-block-columns.is-reverse-on-mobile > .wp-block-column {
    flex-basis: auto !important;
  }
}

/* Mobile padding override for core/group and core/columns */
@media (max-width: 979px) {
  .has-mobile-pt {
    padding-top: var(--mobile-pt) !important;
  }

  .has-mobile-pb {
    padding-bottom: var(--mobile-pb) !important;
  }

  .has-mobile-pl {
    padding-left: var(--mobile-pl) !important;
  }

  .has-mobile-pr {
    padding-right: var(--mobile-pr) !important;
  }
}

/* Stack on mobile for core/group flex layouts */
@media (max-width: 979px) {
  .is-stack-on-mobile.is-layout-flex {
    flex-direction: column !important;
    align-items: center !important;
  }

  .is-stack-on-mobile.is-layout-flex > .wp-block-group {
    width: 120px;
  }
}

/* ==========================================================================
   Scroll Animations
   ========================================================================== */

@keyframes animFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes animSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes animSlideDown {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes animSlideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes animSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes animScaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Hidden state — elements wait for intersection */
[data-animate] {
  opacity: 0;
}

/* Visible state — play the chosen animation */
[data-animate].is-visible {
  animation-duration: var(--anim-duration, 600ms);
  animation-delay: var(--anim-delay, 0ms);
  animation-fill-mode: both;
  animation-timing-function: ease;
}

[data-animate="fadeIn"].is-visible { animation-name: animFadeIn; }
[data-animate="slideUp"].is-visible { animation-name: animSlideUp; }
[data-animate="slideDown"].is-visible { animation-name: animSlideDown; }
[data-animate="slideLeft"].is-visible { animation-name: animSlideLeft; }
[data-animate="slideRight"].is-visible { animation-name: animSlideRight; }
[data-animate="scaleIn"].is-visible { animation-name: animScaleIn; }

/* Star rating summary — smooth fill color transition (uses inline style.fill set by JS) */
[class*="ratingSummary"] [aria-label*="out of 5 stars"] svg path {
  transition: fill 0.4s ease;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    animation: none !important;
  }

  [class*="ratingSummary"] [aria-label*="out of 5 stars"] svg path {
    transition: none;
  }
}