/**
* Theme Name: Hitboox Child
* Description: This is a child theme of Hitboox, generated by Merlin WP.
* Author: <a href="https://wpopal.com/">Opalthemes</a>
* Template: hitboox
* Version: 1.0.5
*/

/* Animation popup dynamique pour project-header-logo */
.project-header-logo {
  opacity: 0;
  transform: translateY(+125px) scale(0.8);
  animation: popupDynamic 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 0.2s; /* délai avant apparition */
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.blog-single{
  margin: 0 auto;
  float: none !important;
  padding-top: 200px;
}

.text-center{
  text-align: center;
}

.justify-center{
  justify-items: center;
}



/* SINGLE POST - Used for blog page */
.single-post #page .site-content {
  margin: 0;
}

.single-post .single-blog-header {
  position: relative;
  min-height: 35vh;
  display: flex;
  padding-top: 80px;
  padding-bottom: 30px;
  margin: 10px;
  border-radius: 20px 20px 0 20px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}


.single-post .single-blog-header:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px 20px 0 20px;
}

.single-post .content-area{
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.single-post .entry-header{
  margin-top: 50px;
}

.single-post .post-thumbnail{
  padding-top: 40%;
  margin-bottom: 50px !important;
}


/* PAGE TEMPLATE - Used for contact page */
.page-template #page .site-content {
  margin: 0;
}

.page-template .single-blog-header {
  position: relative;
  min-height: 35vh;
  display: flex;
  padding-top: 80px;
  padding-bottom: 30px;
  margin: 10px;
  border-radius: 20px 20px 0 20px;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}


.page-template .single-blog-header:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px 20px 0 20px;
}

.page-template .content-area{
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.page-template .entry-header{
  margin-top: 50px;
}

.page-template .post-thumbnail{
  padding-top: 40%;
  margin-bottom: 50px !important;
}

.page-template .single-blog-header .entry-title {
  color: #fff;
  text-transform: uppercase;
  max-width: 850px;
  font-size: clamp(72px, 10.5vmax, 150px);
  line-height: 0.8;
  letter-spacing: -2px;
  z-index: 1;
  margin: auto;
}








/* Keyframes animation popup */
@keyframes popupDynamic {
  0% {
    opacity: 0;
    transform: translateY(+125px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(+125px) scale(1.1);
  }
  80% {
    transform: translateY(+125px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(+125px) scale(1);
  }
}

/* --- Responsive --- */

/* Desktop moyen */
@media (max-width: 1200px) {
  .project-header-logo {
    max-width: 90%;
  }
}

/* Tablette */
@media (max-width: 992px) {
  .project-header-logo {
    max-width: 80%;
  }
}

/* Mobile grand écran */
@media (max-width: 768px) {
  .project-header-logo {
    max-width: 100%;
    transform: translateY(-20px) scale(0.8);
  }
}

/* Mobile petit écran */
@media (max-width: 480px) {
  .project-header-logo {
    max-width: 100%;
    transform: translateY(-15px) scale(0.7);
  }
}