/*
Theme Name: Grace Theme
Theme URI: 
Author: Hannah Ogunyinka
Author URI: https://bayagardenstudio.com
Description: Grace is an clean, functional WordPress block theme tailored specifically to meet the most common and essential needs of a busy church.
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.07
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grace
Tags: blog, portfolio, block-patterns, block-styles, custom-colors, full-site-editing, full-width-template, education, custom-logo

/*Utilities
-----------------------------------------*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
  transition: all 0.2s ease-in-out;
}

/*Utilities
-----------------------------------------*/
/* -- Hidden -- */
.is-style-hidden {
  display: none !important;
}

@media only screen and (min-width: 961px) {
  .is-style-hidden-desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 601px) and (max-width: 960px) {
  .is-style-hidden-tablet {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .is-style-hidden-mobile {
    display: none !important;
  }
}

.flex {
  display: flex;
}

.position-absolute {
  position: absolute;
}

.width-100 {
  width: 100%;
}

.position-relative {
  position: relative;
}

.position-top {
  top: 0;
}

.position-bottom {
  bottom: 0;
}

.position-left {
  left: 0;
}

.z-index-1 {
  z-index: 1;
}

.overflow-clip {
  overflow: clip;
}
.pre-wrap-text {
  white-space: pre-wrap;
}

@media only screen and (max-width: 600px) {
  .mobile-line-height-1-5 {
    line-height: 1.5 !important;
  }

  .mobile-max-width-100 {
    max-width: 100% !important;
  }
}

/* Hide post meta div if no tags assigned */
.single .wp-block-group:has(> .post-meta:empty) {
  display: none;
}

.text-decoration-style {
  text-decoration-thickness: 0.075rem !important;
  text-underline-offset: 7px;
}

strong {
  font-family: var(--wp--preset--font-family--poppins-semibold);
}

.wp-block-post-excerpt__more-text {
  text-transform: uppercase;
}

/* 1. Define the fade-in animation (unchanged) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Initially hide all images that will be animated */
.fade-in-image-1,
.fade-in-image-2,
.fade-in-image-3 {
  opacity: 0;
}

/* 3. Apply the animation with the 'forwards' keyword included */
.fade-in-image-1 {
  /* THE FIX: Added 'forwards' to the end of the line */
  animation: fadeIn 0.6s ease-out 0.6s forwards;
}

.fade-in-image-2 {
  /* THE FIX: Added 'forwards' to the end of the line */
  animation: fadeIn 0.6s ease-out 1.2s forwards;
}

.fade-in-image-3 {
  /* THE FIX: Added 'forwards' to the end of the line */
  animation: fadeIn 0.6s ease-out 2s forwards;
}

/* Fade In on Scroll Animation
-----------------------------------------*/

.fade-in-on-scroll {
  transition: opacity 0.8s ease-out;
}

/* The initial, hidden state that the JavaScript will apply. */
.fade-in-on-scroll.is-hidden {
  opacity: 0;
}

.stagger-child-1 {
  transition-delay: 0.4s;
}

.stagger-child-2 {
  transition-delay: 0.8s;
}