/*
Theme Name: Jujitsu Website
Theme URI: http://example.com
Author: Nick Bakaloumas
Author URI: http://example.com
Description: A Jujitsu Website for a successful Academy.
Version: 1.0
*/

/* ============================= */
/* BODY CORE DEFAULT STYLING */
/* ============================= */
body {
  font-family: var(--ff-body-google);
  font-size: var(--fs-body-large);
  line-height: var(--line-height-body);
  background-color: var(--clr-white);
  color: var(--clr-off-black-dark);
}

/* ===================== */
/* 1. HERO SECTION */
/* ===================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  /* padding-block: 8rem; */
  /* height: 100vh; */
}

.background-video-wrapper {
  position: relative;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* filter: grayscale(100%); */
  /* filter: grayscale(100%) contrast(1.1); */
}
.video-overlay {
  position: absolute;
  inset: 0;
  /* 1. hot pink */
  /* Duo tone Look */
  /* I liked this a lot */
  background: rgba(255, 0, 102, 0.3); 
  mix-blend-mode: overlay;

  /* 2. it darkens the video */
   /* background:
    radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    rgba(0, 0, 0, 0.4);
  background-size: 3px 3px; */



  /* Other options: overlay, screen, darken, lighten */
  /* background: rgba(255, 0, 0, 0.3); 
  mix-blend-mode: multiply;  */
  /* mix-blend-mode: darken;  */
  /* Try a soft red tint or any color */
  /* z-index: 100; */
  /* pointer-events: none; */
}

/* SCOPED Z-index Classes. Range 0-9 (only for Hero Section) */
.hero-scoped-z-index-0 {z-index: 0;}
.hero-scoped-z-index-1 {z-index: 1;}
.hero-scoped-z-index-2 {z-index: 2;}
.hero-scoped-z-index-3 {z-index: 3;}
.hero-scoped-z-index-4 {z-index: 4;}
.hero-scoped-z-index-5 {z-index: 5;}
.hero-scoped-z-index-6 {z-index: 6;}
.hero-scoped-z-index-7 {z-index: 7;}
.hero-scoped-z-index-8 {z-index: 8;}
.hero-scoped-z-index-9 {z-index: 9;}



/* ==================== */
/* 2. INTRO SECTION */
/* ==================== */
/* abt LAYOUT */
.intro__grid-row {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: 
  "row-2"
  "row-1";
  gap: 6rem;
}
/* ROW 1 */
.intro__grid-row-1 {
  grid-area: row-1;
  display: grid;
}
.intro__grid-row-1--single-item {
  justify-self: center;
}
/* ROW 2  */
.intro__grid-row-2 {
  grid-area: row-2;
  display: grid;
  grid-template-columns: 2fr 1fr;
  place-items: center;
  gap: 2rem;
  /* border: 3px solid black; */
}
/* 900px */
@media (max-width: 46.25em) {
  .intro__grid-row-2 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
/* ROW 2 > FIRST ITEM */
.intro__grid-row-2--first-item {
  align-self: center;
  max-width: 50ch;
}
/* 740 px */
@media (max-width: 46.25em) {
  .intro__grid-row-2--first-item {
    justify-self: center;
  }
}
/* ROW 2 > SECOND ITEM */
.intro__grid-row-2--second-item {
  justify-self: center;
  /* align-self: center; */
}

/* abt GENERAL STYLING*/
.intro__text-span-2 {
  font-weight: var(--fw-semi-bold);
  /* color: ar(--clr-red-light); */
}


/* abt IMAGE STYLING */
.intro__img-1-decoration {
  border-radius: 9% 10% 43% 22% / 26% 10% 10% 12% ;
  border-radius: 12px;
  /* yellow */
  /* box-shadow: 1px 10px 50px 23px rgba(239,190,1,0.45);
  -webkit-box-shadow: 1px 10px 50px 23px rgba(239,190,1,0.45); */
}
.intro__img-2-decoration {
  border-radius: 9% 10% 43% 22% / 26% 10% 10% 12% ;
  border-radius: 11% 10% 43% 22% / 11% 10% 10% 12%;
}

/* ============================ */
/* 3. ABOUT SECTION */
/* ============================ */
.abt__grid-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
}
@media (max-width: 68.75em) {
  .abt__grid-col {
    grid-template-columns: 1fr;
  }
}

.read-more-btn {
  border: 2px solid var(--clr-white);
  background: none;
  color: var(--clr-white);
  font-weight: var(--fw-semi-bold);
  cursor: pointer;
  padding: 0.5rem ;
}

.read-more-btn:hover {
  background-color: var(--clr-white);
  color: var(--clr-black);
}
.about-full {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}

.about-full.is-visible {
  /* Just needs to be more than actual content height */
  max-height: 5000px; 
  opacity: 1;
}

/* ============================ */
/* 4. ACADEMY CLASSES SECTION */
/* ============================ */
.acac__grid-col {
  display: grid;  
  grid-template-columns: repeat(3, auto);
  gap: var(--size-600);
}
/* 900px */
@media (max-width: 56.25em) {
  .acac__grid-col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-500);
  }
}

.acac__intro {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.acac__intro a {
  margin-bottom: 2rem;
  font-family: var(--ff-display-google);
  font-size: 1.2rem;
  font-weight: var(--fw-semi-bold);
  line-height: var(--line-height-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 0.7em 1.2em;
  border: 2px solid var(--clr-white);
  border-radius: 10px;
  background-color: var(--clr-off-black-dark);
  color: var(--clr-white);
  margin-bottom: 6rem;
  transition: transform 1000ms;
}
.acac__intro a:hover {
 transform: translateY(-0.45rem);
 transition: transform 250ms;
}
.acac__intro i {
  margin-right: 1rem;
}

.acac__grid-col-1,
.acac__grid-col-2,
.acac__grid-col-3,
.acac__grid-col-4,
.acac__grid-col-5,
.acac__grid-col-6,
.acac__grid-col-7 {
  display: grid;
  justify-items: center;
}
/* acac GENERAL STYLING */
/* .acac-img-decoration {
  filter: grayscale(100%) contrast(1.1);
} */

.academy-classes a {
  text-decoration: none;
}
.acac__figcaption-decoration {
  font-family: var(--ff-display-google);
  text-align: center;
  text-transform: uppercase;
  padding-block: 0.5rem;
  border: 2px solid var(--clr-black);
  color: var(--clr-black);
}
@media (max-width: 500px) {
  .acac__figcaption-decoration {
    font-size: 0.8rem;
  }
}


.acac__grid-col-5 {
  font-weight: var(--fw-bold);
}

.acac__transition {
  transition: transform 0.5s cubic-bezier(0.25, 1.5, 0.5, 1); /* Elastic easing */
}
.acac__transition:hover {
  transform: scale(0.95); /* "Squeeze" effect (slightly smaller) */
  /* For a "squishy" alternative, try: 
     transform: scaleX(0.95) scaleY(1.05); */
}

.acac__grid-col-7 {
  position: relative;
}
.acac__coming-soon-label {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-30%, -30%);
  transform: rotate(-7deg);
  padding: 5px 22px;
  background-color: var(--clr-red-light);
  border-radius: 3px;
  opacity: 0.8;
  color: var(--clr-white);
  font-weight: var(--fw-bold);
  width: max-content;
}
@media (min-width: 600px) {
  .acac__coming-soon-label {
    left: 25%;
    padding: 5px 32px;
  }
}
@media (min-width: 1110px) {
  .acac__coming-soon-label {
    left: 35%;
    padding: 5px 32px;
  }
}



/* ====================== */
/* 5. FREE TRIAIL SECTION */
/* ====================== */
.trial__grid-col {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: var(--size-600);
}
.trial__button-decoration {
  display: inline-block;
  padding: 1em 1.2em;
  background-color: var(--clr-red-dark);
  box-shadow: 3px 8px 60px 2px rgba(235,49,61,0.75);
  -webkit-box-shadow: 3px 8px 60px 2px rgba(235,49,61,0.75);
  color: var(--clr-white);
  text-decoration: none;
  border-radius: 11px;
  text-align: center;
  font-weight: var(--fw-semi-bold);
  transition: transform 1000ms;
}
.trial__button-decoration:hover {
  transform: translateY(-0.45rem);
  transition: transform 250ms;
}

/* ========================== */
/* SUMMER CAMP */
/* ========================== */
.summer-camp-image {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 15px;
  /* box-shadow: 3px 8px 60px 2px rgba(235,49,61,0.75); */
  /* -webkit-box-shadow: 3px 8px 60px 2px rgba(235,49,61,0.75); */
  border-radius: 15px;
}
.summer-camp-text {
  max-width: 800px;
  margin: 0 auto;
}

.summer-camp-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.summer-camp-btn {
  /* display: inline-block; */
  padding: 1em 1.2em;
  background-color: var(--clr-yellow-deep);
  box-shadow: 3px 8px 60px 2px rgb(239, 190, 1);
  -webkit-box-shadow: 3px 8px 60px 2px rgb(255,237,41);
  color: var(--clr-white);
  text-decoration: none;
  border-radius: 11px;
  text-align: center;
  font-weight: var(--fw-semi-bold);
  transition: transform 1000ms;
  margin: 0 auto;
 
}

/* =================== */
/* 6. TESTIMONIALS */
/* =================== */
.testimonial-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 2rem;
}
.testimonial-line {
  flex: 1;
  height: 2px;
  background-color: var(--clr-gray-dark);
}

.media-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 41%;
  gap: 0.8rem;

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--clr-gray-dark);
  padding-bottom: 2rem;
}
/* 640 and below */
@media (max-width: 40em) {
  .media-scroller {
    grid-auto-columns: 81%;
  }
}

.media-scroller__element {
  background-color: var(--clr-gray-dark);
  padding: 0.3rem;
  border-radius: 20px;
}

/* =================== */
/* 7. GALLERY PREVIEW */
/* =================== */
.gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.gallery-preview-grid img {
  border-radius: 10px;
}

.gallery-preview-item:nth-child(3) {
  grid-column: 1 / -1; /* span full width for the 3rd image */
}

.img-hover-zoom {
  overflow: hidden;
}
.img-hover-zoom img {
  transition: transform 0.5s ease;
}
.img-hover-zoom:hover img {
  transform: scale(1.1);
}

.gallery-preview-button {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.gallery-preview-btn {
  padding: 10px 25px;
  background-color: #222;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.gallery-preview-btn:hover {
  background-color: #444;
  /* background-color: red; */
  background-color: var(--clr-blue-light);
}

/* ============================= */
/* 8. FAQs */
/* ============================= */
.faqs-section {
  background: #f8f8f8;
}

.faqs {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 1rem 0;
}

.faq-question {
  font-weight: bold;
  cursor: pointer;
  position: relative;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 1s cubic-bezier(0.25, 1, 0.5, 1), padding 0.5s ease-in-out;
}

.faq-item.open .faq-answer {
  /* height will be set dynamically by JS */
  padding-top: 0.5rem;
}

/* ============================= */
/* 9. CONTACT */
/* ============================= */
.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
/* 960px */
@media (max-width: 60em) {
  .contact-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.map {
  width: 100%;
  /* max-width: 80%; */
  height: 450px;
  border: 2px solid var(--clr-gray-dark);
}

.contact-info__business-details {
  margin-bottom: 2rem;
}
.address-tag,
.phone-tag,
.email-tag {
  font-weight: var(--fw-semi-bold);
}

.contact-info__social a {
 text-decoration: none;
}
.contact-info__social a:hover {
 text-decoration: underline;
}

.contact-info__social div:first-child {
  color: var(--clr-facebook);
  font-weight: var(--fw-bold);
}
.contact-info__social div:nth-child(2) {
  color: var(--clr-instagram);
  font-weight: var(--fw-bold);
}
.contact-info__social div:nth-child(3) {
  color: var(--clr-youtube);
  font-weight: var(--fw-bold);
}
.contact-info__social div:nth-child(4) {
  color: var(--clr-tiktok);
  font-weight: var(--fw-bold);
}


/* ================== */
/* FOOTER */
/* ================== */
.footer-bg {
  background-color: var(--clr-off-black-dark);
  color: #fff;
  font-size: var(--fs-body-normal);
}

.footer-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
}
@media (max-width: 60em) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
}

/* 1st Column */
.footer__legal--academy {
  display: flex;
  flex-direction: column;
  font-weight: var(--fw-bold);
  margin-bottom: 2rem;
}

.footer-logo {
align-self: center;
}

.footer-logo {
  width: 6rem;
  margin-bottom: 0.5rem;
}



/* 2nd Column */
.footer__contact ul li {
  list-style: none;
}
.footer__contact a {
  text-decoration: none;
}
.footer__contact a:hover {
  text-decoration: underline;
}
.footer__contact i {
  margin-right: 1rem;
}

.fa-envelope {
  color: var(--clr-yellow);
}
.fa-location-dot {
  color: var(--clr-red-dark);
}

/* 3rd Column */
.footer__social ul li {
  list-style: none;
}
.footer__social a {
  text-decoration: none;
}
.footer__social a:hover {
  text-decoration: underline;
}
.footer__social i {
  margin-right: 1rem;
}

.fa-facebook {
  color: var(--clr-facebook);
}
.fa-instagram {
  color: var(--clr-instagram);
}
.fa-youtube {
  color: var(--clr-youtube);
}
.fa-tiktok {
  color: var(--clr-tiktok);
}



/* ===================== */
/* OTHER PAGES */
/* ===================== */

/* =========================================== */
/* PAGE: GALLERY (template-gallery.php)  */
/* ============================================ */
.gallery-grid {
  column-count: 3;
  column-gap: 16px;
}

.gallery-grid a {
  display: inline-block;
  /* margin-bottom: 16px; */
}

.gallery-grid img {
  border-radius: 8px;
}

@media (max-width: 50em) {
  .gallery-grid {
    column-count: 2;
  }
}





.subgallery-figcaption-decoration {
  text-align: center;
  text-transform: uppercase;
  border: 2px solid var(--clr-black);
  color: var(--clr-black);  
  padding-block: 0.5rem;
  font-weight: var(--fw-semi-bold);

}


/* ====================================================== */
/* PAGE: ACADEMY CLASSES (template-academy-classes.php) */
/* ======================================================= */
.academy-classes-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
@media (max-width: 60em) {
  .academy-classes-grid {
    grid-template-columns: 1fr 1fr;
  }
  .item5 {
    grid-column-start: 1;
    grid-column-end: -1;
  }
  .item6 {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
@media (max-width: 450px) {
  .academy-classes-grid {
    grid-template-columns: 1fr
  }
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 4;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item1 h2 {
  font-size: 4rem;
}
@media (max-width: 60em) {
  .item1 h2 {
    font-size: 3rem;
  }
}
@media (max-width: 650px) {
  .item1 h2 {
    font-size: 2rem;
  } 
}

.item1 h3 {
  font-size: 3rem;
}
@media (max-width: 60em) {
  .item1 h3 {
    font-size: 2.5rem;
  }
}
@media (max-width: 650px) {
  .item1 h3 {
    font-size: 1.8rem;
  } 
}

.item1 h3 {
  padding-block: 1rem;
}

.item2 {
  border-radius: 10px;
}

.item3 {
  padding: 1rem;
  border-radius: 10px;
  font-weight: var(--fw-semi-bold);
  line-height: var(--line-height-display);
}

.item4 {
  border-radius: 10px;
  padding: 1rem;
}


.item5 {
  border-radius: 10px;
  padding: 1em;
}
.item5 h3 {
  font-weight: var(--fw-semi-bold);
  line-height: var(--line-height-display);
  margin-bottom: 0.8rem;;
}


.item6 {
  display: grid;
  place-items:center;
  border-radius: 10px;
  padding: 1em;
  font-weight: var(--fw-semi-bold);
  text-align: center;
}
.item6 a {
  text-decoration: none;
  transition: transform 1000ms;
}
.item6 a:hover {
  transform: translateY(-0.45rem);
  transition: transform 250ms;
}

.fa-arrow-right-long {
  margin-right: 0.6em;
}

/* This codes applies on 2 pages: */
/* 1. academy classes */
/* 2. MMA page */
.soon-label-wrapper {
  position: relative;
}
.soon-label {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-30%, -30%);
  transform: rotate(-7deg);
  padding: 5px 22px;
  background-color: var(--clr-red-light);
  border-radius: 10px;
  opacity: 0.8;
  color: var(--clr-white);
  font-weight: var(--fw-bold);
  width: max-content;
}
@media (min-width: 600px) {
  .acac__coming-soon-label {
    left: 25%;
    padding: 5px 32px;
  }
}
@media (min-width: 1110px) {
  .acac__coming-soon-label {
    left: 35%;
    padding: 5px 32px;
  }
}




/* ====================================================== */
/* PAGE: Booking Form (template-booking-form.php) */
/* ======================================================= */

.table-container {
  overflow-x: auto;
  margin-bottom: 2rem;
}

table {
  width: 100%;
  border-collapse: separate; /* changed */
  border-spacing: 0;         /* added */
  min-width: 600px;
  border: 1px solid #999;    /* added */
}

th, td {
  border: 1px solid #999;    /* changed */
  padding: 12px 15px;
  text-align: left;
}

th {
  background: #f0f0f0;
  font-weight: bold;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

/* Responsive tweak for smaller screens */
@media (max-width: 768px) {
  th, td {
    padding: 10px;
    font-size: 14px;
  }
}

/* WPFORM */

.wpforms-wrapper {
  max-width: 800px;
  margin: 0 auto 3rem !important;
  background-color: #ddd !important;
  background-color: #f0f0f0 !important;
  padding: 2rem !important;
  border-radius: 20px !important;
}

.wpforms-submit-btn {
  background-color: red !important;
  background-color: #007cba !important;
  place-self: center !important;
}



.form-intro-text {
  /* max-width: 800px; */
  /* margin: 0 auto 3rem; */
  margin: 3rem 0;
  background-color: #ddd;
  padding: 1.5rem;
  border-radius: 10px;
}