/*
Theme Name: HxH Blocks
Theme URI: https://homesbyhowe.com.au/
Author: the New Best Friend
Author URI: https://newbestfriend.com.au
Requires at least: 6.4.3
Tested up to: 6.4.3
Requires PHP: 8.0
Version: 1.0
Text Domain: hxh-blocks
*/

footer {
  margin-top: 0 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  --navHeight: 148px;
  --swiper-navigation-color: var(--wp--preset--color--black);
  --swiper-navigation-sides-offset: var(--wp--preset--spacing--30);
  --swiper-navigation-size: 45px;
  @media (max-width: 785px) {
    & {
      --wp--preset--font-size--medium: 1rem;
      --wp--preset--font-size--large: 1.2rem;
    }
  }
}

@media (min-width: 890px) and (max-width: 950px) {
  body {
    --wp--style--root--padding-left: var(--wp--preset--spacing--40);
    --wp--style--root--padding-right: var(--wp--preset--spacing--40);
  }
}

.swiper-button-prev,
.swiper-button-next {
  width: var(--swiper-navigation-size) !important;
  height: var(--swiper-navigation-size) !important;
  z-index: 999;
  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px -1px 1px #d6d1b7;
    z-index: 1;
    content: "";
    display: block;
    border-radius: 100%;
/*    background: var(--wp--preset--color--beige); */
    mix-blend-mode: multiply;
    transition: 0.4s ease-out;
  }
  &:after {
    font-size: 0;
  }
/*  &.swiper-button-disabled {
    opacity: 0 !important;
  }*/
  &:hover {
    &:before {
      background: var(--wp--preset--color--beige); 
      transition: 0.1s ease-out;
    }
  }  
}
.swiper-button-prev {
  &:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45"><g id="Group_215" data-name="Group 215" transform="translate(247 1454) rotate(180)"><circle id="Ellipse_10" data-name="Ellipse 10" cx="22.5" cy="22.5" r="22.5" transform="translate(202 1409)" fill="%23fff"/><path id="Path_75" data-name="Path 75" d="M2697.146,741.345l4.246,4.246-4.246,4.246" transform="translate(-2473.306 685.833)" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>') !important;
  }
}
.swiper-button-next {
  &:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45"><g id="Group_215" data-name="Group 215" transform="translate(-202 -1409)"><circle id="Ellipse_10" data-name="Ellipse 10" cx="22.5" cy="22.5" r="22.5" transform="translate(202 1409)" fill="%23fff"/><path id="Path_75" data-name="Path 75" d="M2697.146,741.345l4.246,4.246-4.246,4.246" transform="translate(-2473.306 685.833)" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>') !important;
  }
}


@media screen and (min-width: 786px) {
  .wp-block-columns.is-style-offset-right .wp-block-column:last-child {
    min-width: 50vw;
    margin-right: calc((100vw - 100%) / 2 * -1);
  }

  .wp-block-columns.is-style-offset-left .wp-block-column:first-child {
    min-width: 50vw;
    margin-left: calc((100vw - 100%) / 2 * -1);
  }  
}

.is-style-circle-bottom-left {
  position: relative;
  &:before {
    width: 750px;
    height: 750px;
    border: 1px solid var(--wp--preset--color--beige);
    border-radius: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    translate: -50% 60%;
    content: "";
    pointer-events: none;
    mix-blend-mode: multiply;

  }
}

.scroll-arrow {
  display: block;
  z-index: 1;
  position: relative;
  max-width: fit-content !important;
  border-radius: 100%;  
/*  background: var(--wp--preset--color--beige);*/
  background: linear-gradient(148deg, #e7e3cb00, #e7e3cb75);
  backdrop-filter: blur(15px);  
}
.scroll-arrow a {
  display: block;
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 100%;
  background: no-repeat center/33%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.526' height='22.239' viewBox='0 0 20.526 22.239'%3E%3Cg transform='translate(1.414 1)'%3E%3Cpath d='M1120,625.384v20.239' transform='translate(-1111.151 -625.384)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3E%3Cpath d='M1114.212,663.814l-8.849,8.849-8.849-8.849' transform='translate(-1096.515 -652.423)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
  animation: bounce 3.5s 0s 5 normal ease-in-out both;
  &:hover {
    animation-play-state: paused;
  }    
}
footer .scroll-arrow a {
  scale: -1;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
  }
  40% {
            transform: translateY(-30px);
  }
  60% {
            transform: translateY(-15px);
  }
}


.up-sells.products {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  * {
    font-family: var(--wp--preset--font-family--body);
  }
}
.woocommerce ul.products li.product {
  background: var(--wp--preset--color--beige);  
  & a img {
    aspect-ratio: 356/428;
    object-fit: cover;
    width: 100%;
  }
  & .woocommerce-loop-product__title,
  & .price {
    padding-inline: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
  }
  & .woocommerce-loop-product__title {
    font-weight: 500;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    overflow: hidden; 
    text-decoration: none !important;     
  }
  & .price {
    font-weight: 300;
  }
  & .button {
    width: 100%;
    background: transparent;
    color: black;
    border-top: 1px solid var(--wp--preset--color--beige);
    min-height: 59px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--wp--preset--spacing--20);
    position: relative;
    border-radius: 0 !important;
    box-sizing: border-box;
      &:after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16.699" height="16.699" viewBox="0 0 16.699 16.699"><g id="Group_191" data-name="Group 191" transform="translate(-456.612 -1853.612)"><path id="Path_79" data-name="Path 79" d="M-1667.5,1193.055h15.2" transform="translate(2124.862 668.906)" fill="none" stroke="%23000" stroke-linecap="round" stroke-width="1.5"/><path id="Path_82" data-name="Path 82" d="M0,0H15.2" transform="translate(464.962 1869.561) rotate(-90)" fill="none" stroke="%23000" stroke-linecap="round" stroke-width="1.5"/></g></svg>');
      }
  }
}

/* Gravity form overrides */
.gform-theme--foundation .gfield input:not(.gfield-choice-input),
.gform-theme--foundation .gfield .ginput_container_select select {
    border: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--black-mid) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.gform-button {
  box-shadow: none !important;
  min-height: 59px !important;
  height: 100% !important;
  width: 100% !important;
}

footer .gform_wrapper {
  max-width: var(--wp--style--global--wide-size) !important;
  width: 100%;
}

.gfield_label {
  font-weight: 300 !important;
  color: #00000094 !important;
}

.gform_required_legend {
  display: none !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input {
  left: 0;
}

input::placeholder {
  font-weight: 300;
  opacity: 0.5;
}


.hide-on-mobile {
  @media (max-width: 781px) {
    & {
      display: none !important;
    }
  }
}
.hide-on-tablet {
  @media (min-width: 782px) and (max-width: 1009px) {
    & {
      display: none !important;
    }
  }
}
.hide-on-desktop {
  @media (min-width: 1010px) {
    & {
      display: none !important;
    }
  }
}
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
  > a > img, 
  > img {
    display: block !important;
  }
}

/*
 * CHANGE CONTENT ORDER
 */
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
@media (max-width: 781px) {
  .order-mobile-1 {
    order: 1;
  }
  .order-mobile-2 {
    order: 2;
  }
  .order-mobile-3 {
    order: 3;
  }
}

.w-100 {
  width: 100%;
}

.single-post {
  @media (max-width: 781px) {
    & h1 {
      text-align: left;
    }
  }

/*  @media (max-width: 1280px) {
    & .article-container .wp-block-column:last-child {
      display: none !important;
    }
  }*/
}

/*strong {
  font-weight: 700;
}*/

iframe {
  width: 100%;
  max-width: unset !important;
  aspect-ratio: 16 / 9;
  height: auto;  
}


/* Fix rotated text for mobile */
@media (max-width: 785px) {
  *.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]) {
    rotate: 0deg !important;
    text-align: left !important;
    writing-mode: initial !important;
  }
}

/* Slider announcement bar in header */
.announcements {
  max-height: 45px;
  overflow: hidden;
}

@media (max-width: 785px) {
  .home .entry-content > .wp-block-cover:first-child .wp-block-cover__background {
    background: #0000006b !important;
  }
}