/*
Theme Name: MaekoTheme
Theme URI: 
Author: Hannah Ogunyinka at Baya Garden Studio
Author URI: 
Description: Timely, minimal design
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maekotheme
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;
  }
}

.editor-styles-wrapper.position-absolute,
.position-absolute {
  position: absolute;
  width: 100%;
}

.width-100 {
  width: 100%;
}

.position-relative {
  position: relative;
}

.position-top {
  top: 0;
}

.position-bottom {
  bottom: 4.5em;
}

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

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

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

.position-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overflow-clip {
  overflow: clip;
}

.max-height-90 {
  max-height: 90vh;
}

.max-height-100 {
  max-height: 100vh;
}

.height-100 {
  height: 100%;
}

.max-height-560px {
  max-height: 560px;
}

.cover-height-92vh-width-100 {
  height: 92vh;
  width: 100%;
}

.custom-shadow {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 1920px) {
  .height-limit-above-1920px img,
  .height-limit-above-1920px figure,
  .height-limit-above-1920px {
    max-height: 972px;
    min-height: unset !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-weight: var(--wp--custom--font-weight--extra-bold);
}

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

/*
 * Image Zoom on Hover Effect for Featured Images
 */

/* This is the container that will clip the zoomed image. */
.featured-image-zoom-container {
  overflow: clip;
  position: relative;
}

.featured-image-zoom-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.45s ease-in-out; /* Smooth fade transition */
  pointer-events: none; /* Allows clicks to go through to the link */
}

.featured-image-zoom-container .wp-block-post-featured-image img {
  transition: transform 0.45s ease-in-out;
}

.featured-image-zoom-container:hover .wp-block-post-featured-image img {
  /* Zoom the image to 107% of its size */
  transform: scale(1.06);
}

.featured-image-zoom-container:hover::after {
  opacity: 1; /* Fade in the dark overlay */
}

/* Animation for Featured Image on Load on Single Project template*/
/* Define the animation keyframes */
@keyframes scaleInOnLoad {
  from {
    transform: scale(1.3);
  }
  to {
    transform: scale(1);
  }
}

@keyframes scaleInOnLoadCoverBlock {
  from {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
  }
}

/* Apply the animation to the image within the specific container */
.animate-on-load .wp-block-post-featured-image img {
  animation-name: scaleInOnLoad;
  animation-duration: 1.5s; /* Adjust duration as needed */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* Keeps the final state (scale: 1) */
}

.animate-block-cover-on-load img {
  animation-name: scaleInOnLoadCoverBlock;
  animation-duration: 1.5s; /* Adjust duration as needed */
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; /* Keeps the final state (scale: 1) */
}