/*
Theme Name: NBF
Theme URI: https://newbestfriend.com.au/
Author: the New Best Friend
Author URI: https://newbestfriend.com.au
Requires at least: 6
Tested up to: 6.8.1
Requires PHP: 8.0
Version: 1.0
Text Domain: nbf-blocks
*/

footer {
  margin-top: 0 !important;
}

html {
  scroll-behavior: smooth;
}

main.wp-block-group {
  margin-top: 0 !important;
}

img {
  display: block;
}

input::placeholder {
  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;
}

/*
 * 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;
  }

  .align-mobile-start {
    justify-content: flex-start;
  }
}

.w-100 {
  width: 100%;
}

@media (max-width: 786px) {
  h1 {
    font-size: clamp(2.629rem, 2.629rem + ((1vw - 0.3rem) * 3.952), 5rem) !important;
  }
}

.is-position-sticky {
  &.offset {
    top: var(--wp--preset--spacing--30);
  }
  &.bottom {
    top: unset;
    bottom: 0 !important;
/*    @media (max-width: 750px) {
      position: relative;
    }
*/
    &:not(.is-stuck) a {
      transform: none !important;
      /*padding-bottom: 0.5rem !important;*/
      pointer-events: none !important; 
      transition: 0.1s ease;
/*      background: var(--tab-color) !important;
      border: 1px solid var(--wp--preset--color--tan) !important;      */
    }
/*    &:not(.is-stuck) {
      position: sticky;
      bottom: unset !important;
      top: 0 !important;           
    }*/
  }

  &.collapse {
    z-index: -1;
    /*will-change: transform, opacity;*/
    /*transform-style: preserve-3d; backface-visibility: hidden;*/
  }
}
/**:has(> .collapse ) { perspective: 1000px; }*/

@media (max-width: 1200px) {
  .pick-your-poison {
    margin-bottom: 0 !important;
  }
}

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


/* 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;
  }
}


.post-card {
  position: relative;
  overflow: hidden;
  & a {
    border-bottom: 0 !important;
  }
}

.post-card a:hover {
  text-decoration: none !important;
  &:after {
    opacity: 0.2;
    transition: 0.1s ease-out;
  }
}

.post-card a:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 450px;
  height: 600px;
  display: block;
  content: "";
  opacity: 0;
  background: var(--wp--preset--color--yellow);
  transition: 0.4s ease-in-out;
}

.post-card[data-trigger-modal] {
  cursor: pointer;
  transition: 0.4s ease-in-out;
  &:hover {
    transition: 0.1s ease;
    opacity: 0.8;
  }
}

.is-layout-grid {
  @media (max-width: 900px) {
    & {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }   
  }

  @media (max-width: 500px) {
    & {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }   
  }  
}


/*@media (max-width: 781px) {
  .wp-block-buttons.is-content-justification-center {
    justify-content: flex-start;
  }
  .has-text-align-center {
    text-align: left !important;
  }
}*/

:is(.cb-button-prev.swiper-button-prev, .cb-button-next.swiper-button-next) {
  width: 45px;
  height: 45px;
  border: 1px solid;
  border-radius: 100px;
  top: unset;
  bottom: unset;
  left: 0;
  position: relative;
  margin-block: 50px 0 !important;
  display: inline-block;
  margin-right: 15px;
  background: #ffffff05;
  border-color: #ffffff30;
  &:after {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;    
    color: var(--wp--preset--color--gold);
  }
  &.swiper-button-prev:after {
    margin-left: -3px;
  }
  &.swiper-button-next:after {
    padding-left: 3px;
  }  
}

:root {
  --tab-width: clamp(0px, 33.333vw, 250px);
  --tab-height: calc(var(--tab-width) * (66 / 250));
  --tab-angle: 10px;
  --tab-offset: calc(var(--tab-width) - var(--tab-angle));
  --tab-color: var(--wp--preset--color--cream);
/*  @media (max-width: 750px) {
    --tab-width: 175px;
    --tab-height: 46.2px;    
  }*/
}

.tabs {
  margin-bottom: -1px !important;
  /*perspective: 1000px;*/
  & .wp-block-button__link {
    position: relative;
    aspect-ratio: 261/66;
    width: var(--tab-width);
    height: var(--tab-height);
    pointer-events: auto;
    padding-block: 0 !important;
    border: 0 !important;
    border-radius: 0px !important;
    transition: 0.4s ease-out;    
    background-color: transparent !important;
    background: no-repeat center/contain url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="251.006" height="66.456" viewBox="0 0 251.006 66.456"><path id="Path_3234" data-name="Path 3234" d="M-5235,7294v-61.68a3.618,3.618,0,0,1,3.912-3.963c4.24,0,203.806,0,203.806,0s3.257-.481,5.4,3.209,36.948,62.435,36.948,62.435" transform="translate(5235.512 -7227.799)" fill="%23F0E4D1" stroke="%234D3D27" stroke-width="1"/></svg>');
    color: var(--wp--preset--color--dark-brown);
    translate: calc(var(--tab-offset) * var(--tab-index)) 0;  
/*    @media (min-width: 750px) {
      & {
      }
    }*/
  }

  &:before {
    content: "";
    position: fixed;
    translate: -50% 30px;
    bottom: 0px;
    left: 50%;
    width: 100vw;
    height: 30px;
    border-top: 1px solid var(--wp--preset--color--brown);
    background: var(--tab-color);
    transition: 0.4s ease-out;
  }
/*  @media (max-width: 750px) {
    &:before {
      display: none !important;
    }
  }*/
  &:has(:hover) {
    .wp-block-button__link {
      transform: translateY(-15px);
      transition: 0.1s ease;
    }
    &:before {
      transition: 0.1s ease;
      translate: -50% 15px;
    }
  }
}

.is-position-sticky:has(.tabs) {
  width: calc(var(--tab-offset) * 3);
  max-width: 100vw;
  margin: auto;
  pointer-events: none;
  bottom: 0 !important;
  &.about .tabs {
    --tab-index: 0;
    --tab-color: var(--wp--preset--color--pink);
    & a {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="251.006" height="66.456" viewBox="0 0 251.006 66.456"><path id="Path_3234" data-name="Path 3234" d="M-5235,7294v-61.68a3.618,3.618,0,0,1,3.912-3.963c4.24,0,203.806,0,203.806,0s3.257-.481,5.4,3.209,36.948,62.435,36.948,62.435" transform="translate(5235.512 -7227.799)" fill="%23EB7FB1" stroke="%234D3D27" stroke-width="1"/></svg>');
    }    
  }  
  &.work .tabs {
    --tab-index: 1;
    --tab-color: var(--wp--preset--color--yellow);
    & a {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="251.006" height="66.456" viewBox="0 0 251.006 66.456"><path id="Path_3234" data-name="Path 3234" d="M-5235,7294v-61.68a3.618,3.618,0,0,1,3.912-3.963c4.24,0,203.806,0,203.806,0s3.257-.481,5.4,3.209,36.948,62.435,36.948,62.435" transform="translate(5235.512 -7227.799)" fill="%23FFBF46" stroke="%234D3D27" stroke-width="1"/></svg>');
    }
  }  
  &.contact .tabs {
    --tab-index: 2;
    --tab-color: var(--wp--preset--color--green);
    & a {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="251.006" height="66.456" viewBox="0 0 251.006 66.456"><path id="Path_3234" data-name="Path 3234" d="M-5235,7294v-61.68a3.618,3.618,0,0,1,3.912-3.963c4.24,0,203.806,0,203.806,0s3.257-.481,5.4,3.209,36.948,62.435,36.948,62.435" transform="translate(5235.512 -7227.799)" fill="%232FB060" stroke="%234D3D27" stroke-width="1"/></svg>');      
    }        
  }  
}


:is(s, span[style="text-decoration: underline;"]) {
  text-decoration: none !important;
  position: relative;
  &:after {
    content: "";
    display: block;
    width: calc(100% + 17px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    background: no-repeat center/100%;
  }
}

/* scribble */
s:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="119.663" height="37.594" viewBox="0 0 119.663 37.594"><path id="Path_3030" data-name="Path 3030" d="M2.32,36.233q16.3-8.283,33.526-15.277t35.216-12.6Q81.184,5.205,91.507,2.5L90.3.182l-36.83,21.5L43.054,27.762c-.686.4-1.021,1.1-.563,1.736a1.807,1.807,0,0,0,2.148.455A142.57,142.57,0,0,1,74.46,17.307q4.473-1.325,9.056-2.383L81.742,13.06a42.168,42.168,0,0,1-9.254,9.05c-3.757,2.9-7.748,5.586-11.526,8.464a62.221,62.221,0,0,0-5.739,4.85A1.107,1.107,0,0,0,55.1,37.09a1.815,1.815,0,0,0,2.025.327,128.733,128.733,0,0,1,22.561-9.149c8.268-2.6,16.743-4.755,25.264-6.743,4.522-1.055,9.061-2.059,13.6-3.061,1.947-.43,1.121-2.878-.835-2.447-8.291,1.829-16.578,3.676-24.764,5.8a229.951,229.951,0,0,0-25.1,7.828,106.168,106.168,0,0,0-12.31,5.586l1.9,1.992c6.591-6.422,15.368-11.1,22.138-17.39a33.512,33.512,0,0,0,4.873-5.487c.652-.951-.429-2.175-1.773-1.864a150.936,150.936,0,0,0-31.4,10.973q-4.212,2.03-8.224,4.312l1.585,2.191,36.83-21.5,10.414-6.08c.633-.369.977-.97.642-1.584A1.684,1.684,0,0,0,90.673.054Q72.165,4.907,54.3,11.189,36.511,17.437,19.527,25.057,9.981,29.34.735,34.043C-.971,34.91.6,37.106,2.32,36.233" transform="translate(0 0)" fill="%23ffffff"/></svg>') !important;
}

/* single underline */
span[style="text-decoration: underline;"]:after {
  top: unset;
  bottom: 1px;
  height: 4px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80.235" height="3.696" viewBox="0 0 80.235 3.696"><path id="Path_3031" data-name="Path 3031" d="M51.5,15.521q15.279-.977,30.581-1.205t30.6.3q8.569.295,17.13.827c1.286.08,1.283-2.342,0-2.421q-15.28-.946-30.583-1.145t-30.6.362q-8.568.312-17.129.86c-1.28.082-1.288,2.5,0,2.421" transform="translate(-50.541 -11.827)" fill="%23ffbf46"/></svg>');
}

span[style="text-decoration: underline;"]:nth-of-type(even):after {
  width: calc(100% + 5px);
  height: 10px;
  left: 0;
  translate: 0;
  bottom: -5px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="91.803" height="9.609" viewBox="0 0 91.803 9.609"><g id="Group_1795" data-name="Group 1795" transform="translate(-226.274 -1224.6)"><path id="Path_3022" data-name="Path 3022" d="M1.018,4.419,36,4.01,71.082,3.6l19.7-.23c1.356-.016,1.359-3.385,0-3.369L55.805.409,20.72.82l-19.7.23c-1.356.016-1.359,3.385,0,3.369" transform="translate(226.274 1229.79)" fill="%23ffbf46"/><path id="Path_3024" data-name="Path 3024" d="M51.5,15.521q15.279-.977,30.581-1.205t30.6.3q8.569.295,17.13.827c1.286.08,1.283-2.342,0-2.421q-15.28-.946-30.583-1.145t-30.6.362q-8.568.312-17.129.86c-1.28.082-1.288,2.5,0,2.421" transform="translate(175.733 1212.773)" fill="%23ffbf46"/></g></svg>');
}

.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}


.wp-block-easy-tabs-block-tab-button:not(.etb-active-tab) {
  opacity: 0.5;
}

.p-relative {
  position: relative;
}

.kc-profile {
  transform: rotate(-3.5deg);
}

.lc-profile {
  transform: rotate(1.5deg);
}

.gform_wrapper {
  & .gform-field-label {
    font-weight: 600 !important;
  }
  & .ginput_container {
    box-shadow: none !important;
    :is(input, textarea) {
      box-shadow: none !important;
      border-radius: 1.5vw !important;
      font-size: var(--wp--preset--font-size--small) !important;
      padding: var(--wp--preset--spacing--10) !important;
      height: 100% !important;
    }
  }
  & .gform_button {
    padding: var(--wp--preset--spacing--20) !important;
    border-radius: 1.5vw !important;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: 600 !important;
    border: 1px solid var(--wp--preset--color--brown) !important;
    box-shadow: 3px 3px 0px var(--wp--preset--color--dark-brown) !important;
  }

}