/*
Theme Name: OwlEnglishTheme
Theme URI: https://owlenglishschool.com/
Description: Child theme for the Twenty Twenty-Five theme
Author: Mike
Author URI: https://owlenglishschool.com/
Template: twentytwentyfive
Version: 1.0
Tags: block-theme, full-site-editing

License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/


/* --- Wavy Divider for Block Theme Header --- */
.header-wavy-divider-block {
    /* Basic Setup */
    border: none;
    height: 30px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 0; /* Helps prevent extra space */
    display: block; /* Ensures it behaves correctly */

    /* The SVG for the wave shape */
    background-size: 100% 100%;

    /* Rotates the element 180 degrees for the inverted effect */
    transform: rotate(180deg);

    /* URL-ENCODED SVG CODE with your color #F0AB12 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3e%3cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V85C1132.19,105,1055.71,95,985.66,92.83Z' fill='%23F0AB12'%3e%3c/path%3e%3c/svg%3e");
}
/* --- End Wavy Divider for Block Theme Header --- */


/* --- Base Wavy Divider Styles --- */
.up-wavy-divider-block, .down-wavy-divider-block {
    height: 30px !important;
    width: 100% !important;
    display: block !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Up Wavy Divider Block (Flipped Vertically) --- */
.up-wavy-divider-block {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3e%3cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V85C1132.19,105,1055.71,95,985.66,92.83Z' fill='%23FFFFFF'%3e%3c/path%3e%3c/svg%3e") !important;
    transform: scaleX(-1) !important;
}

/* --- Down Wavy Divider Block (Flipped Horizontally) --- */
.down-wavy-divider-block {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3e%3cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V85C1132.19,105,1055.71,95,985.66,92.83Z' fill='%23FFFFFF'%3e%3c/path%3e%3c/svg%3e") !important;
    transform: rotate(180deg) !important;
}

/* --- Color Variations --- */
.wave-custom-purple-transparent {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3e%3cpath d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V85C1132.19,105,1055.71,95,985.66,92.83Z' fill='%23B8A6F41A'%3e%3c/path%3e%3c/svg%3e") !important;
}


/* Modal terms and privacy padding */
  .wp-block-cloudcatch-light-modal-block {
    width: 60% !important;
    max-width: 600px !important;
    padding: 20px !important;
  }
@media (max-width: 767px) {
  .wp-block-cloudcatch-light-modal-block {
    width: 95% !important;
    max-width: none !important;
    padding: 12px !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .wp-block-cloudcatch-light-modal-block {
    width: 80% !important;
    max-width: 600px !important;
    padding: 20px !important;
  }
  }


/* --- Fluent Form Contact Modal Styles --- */

/* This rule HIDES the modal by default. The !important is necessary. */
.fluent-contact-modal-overlay {
  display: none !important;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

/* This rule shows the modal when it has the 'is-visible' class. */
/* It also uses !important so it can override the default 'hide' rule. */
.fluent-contact-modal-overlay.is-visible {
  display: block !important;
}

/* The rest of the styling for the content box */
.fluent-contact-modal-overlay {
  display: none !important;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

.fluent-contact-modal-overlay.is-visible {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.fluent-contact-modal-content {
  background-color: #ffffff;
  padding: 40px;
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
}

.fluent-contact-modal-close {
  color: #888;
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.fluent-contact-modal-close:hover {
  color: #000;
}

/* --- Button Hover Style --- */

/* This targets the clickable link inside your button */
.open-contact-modal .wp-block-button__link {
  /* This makes the color change smooth instead of instant */
  transition: background-color 0.3s ease;
}

/* This sets the new color ONLY when you hover over the button */
.open-contact-modal .wp-block-button__link:hover {
  background-color: #d8960e !important; /* Change this hex code to your desired hover color */
}


/*Header for four owls modal */
.gradient-header.owl-modal-header {
    font-size: 30px;
}

/*Paragraph for four owls modal (desktop only)*/

@media (min-width: 769px) {
    .four-owls-paragraph {
        font-size: 18px !important; /* or whatever size you want */
    }
}


@media screen and (max-width: 768px) {
  .fluent-contact-modal-content {
    padding: 25px;
  }
  .fluent-contact-modal-content .ff-t-container .ff-t-cell {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 15px;
  }
  .fluent-contact-modal-content .ff-t-container .ff-t-cell:last-child {
    margin-bottom: 0;
  }
}
/* END Modal background */

/* removes white border before heading */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Add overall top padding to the header */
.main-site-header {
  padding-top: 8px !important; /* Adjust value as needed */
}

/* Add left padding to the icons container */
.header-logo {
  padding-left: 8px; /* Adjust value as needed */
}


/* Shared icon container styles */
.icon-contact,
.icon-account,
.icon-buy,
svg.icon-contact,
svg.icon-buy {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
/* Ensure SVG fills and transitions properly */
.icon-contact svg,
.icon-account svg,
.icon-buy svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: white;
  transition: transform 0.2s ease-in-out;
}
/* Apply scale on hover - for container elements */
.icon-account:hover svg {
  transform: scale(1.15);
}
/* Apply scale on hover - for direct SVG elements */
svg.icon-contact:hover,
svg.icon-buy:hover {
  transform: scale(1.15);
}
/* Remove any unwanted artifacts */
.icon-contact:hover,
.icon-account:hover,
.icon-buy:hover,
.icon-contact:focus,
.icon-account:focus,
.icon-buy:focus,
.icon-contact svg:focus,
.icon-account svg:focus,
.icon-buy svg:focus,
svg.icon-contact:hover,
svg.icon-buy:hover,
svg.icon-contact:focus,
svg.icon-buy:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
  opacity: 1;
}


@media (max-width: 768px) {
  svg.icon-buy,
  svg.icon-account {
    width: 38px;
    height: 38px;
      vertical-align: middle;
  }
}


/* Hide contact SVG on mobile */
@media (max-width: 768px) and (orientation: portrait) {
  svg.icon-contact {
    display: none;
  }
}



/* Reduce Offset of intial block on tablets */
@media (max-width: 768px) {
    .reduce-first-row-block {
        margin-top: -30px !important; /* Adjust for iPad portrait / larger mobile */
    }
}

/* Reduce Offset of intial block on phones */
@media (max-width: 480px) {

    .reduce-first-row-block {
        margin-top: -50px !important; /* Adjust for typical mobile phone screens */
    }
}