/*
Theme Name: YWCA
Theme URI: https://ywca-canberra.org.au/
Author: New Best Friend
Author URI: https://newbestfriend.com.au
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
Text Domain: ywca-canberra-block
*/

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

@media (max-width: 781px) {
  * {
    writing-mode: initial !important;
  }
}

:where(.wp-site-blocks) > * {
  margin-top: 0;
}

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

.is-position-sticky {
  position: sticky;
/*  top: var(--wp--preset--spacing--50);*/
}

.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;
  }
}

.d-flex {
  display: flex !important;
}
.align-items-center {
  align-items: center !important;
}
.is-content-justification-stretch {
  justify-content: space-between;
}

.w-100 {
  width: 100%;
}

.sr-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;  
}


.scroll-arrow {
  display: block;
  z-index: 1;
  position: relative;
  max-width: fit-content !important;
  border-radius: 100%;  
  background: linear-gradient(45deg, #C9357F, #C175D5);
}
.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);
  }
}

/* GF form alts */
.gfield {
  --gf-ctrl-shadow: 0 !important;
  --gf-ctrl-choice-check-color: var(--wp--preset--color--fuscia) !important;
}
.gfield--type-submit {
  display: flex;
  align-items: center;
}
#gform_wrapper_2.gform-theme {
  --gf-color-in-ctrl: transparent !important;
}
@media (min-width: 640px) {
  #gform_wrapper_2.gform-theme  #field_2_1 {
    grid-column: span 6;
  }
  #gform_wrapper_2.gform-theme #field_submit {
    grid-column: span 2;
  }
}
.gform-theme--framework input[type]:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.gform-text-input-reset):not([type=hidden])):where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
  --gf-local-border-block-start: 0 !important;
  --gf-local-border-inline-end: 0 !important;
  --gf-local-border-inline-start: 0 !important;  
  border-radius: 0 !important;
}
#gform_wrapper_2.gform-theme .gform-field-label>.gfield_required {
  color: rgba(255,255,255,0.6) !important;
}

.wp-block-column > :is(.wp-block-group, .is-style-card) {
  > :is( .wp-block-image, .wp-block-cover) {
    max-width: 100% !important;
    & img {
      width: 100%;
    }
  }
}

/* Service cards */
.is-style-card {
  background-color: #fff9 !important;
  backdrop-filter: blur(15px);
  position: relative;
  border: 1px solid var(--wp--preset--color--lilac);
  transition: 0.3s ease-out;
  z-index: 1;
  &:after {
    width: 100%;
    height: 100%;
    transition: 0.3s ease-out;
    position: absolute;
    content: "";
    display: block;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 12px;
    box-shadow: 
      inset 2px 2px 1px #fff9,
      inset -2px -2px 1px #ffffff4d;
  } 
  .wp-block-button > .wp-block-button__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0 !important;
    color: transparent !important;
    background: transparent !important;
    font-size: 1px;
    z-index: 1;
  }
  &:has(.wp-block-button__link):hover {
    background-color: white !important;
    transition: 0.1s ease;
  }

  &:has(.wp-block-columns:not(.wp-block-column:first-child:last-child)) {
    container-type: inline-size; 
    container-name: nested-columns-in-card;   
    @container nested-columns-in-card (max-width: 230px) {
      & .wp-block-columns {
      flex-wrap: wrap !important;        
      }
      & .wp-block-column {
        flex-basis: 100% !important;
      }
    }
  }
}

.wp-block-columns .wp-block-column {
  box-sizing: border-box;
  &:has(.wp-block-columns) {
    container-type: inline-size;
    container-name: nested-columns;
    @container nested-columns (width < 475px) {
      > .wp-block-columns {
      flex-wrap: wrap !important;        
      > .wp-block-column {
        flex-basis: 100% !important;
      }
      }
    }
  }
}

@media (min-width: 784px) {
  .wp-block-group:has(> .wp-block-columns .wp-block-column:nth-child(3) .is-style-card) {
    container-type: inline-size;
    container-name: three-cols-cards;
    @container three-cols-cards (max-width: 1000px) {
      & > .wp-block-columns {
        flex-wrap: wrap !important;
        & > .wp-block-column:last-child {
          flex-basis: 100% !important;
        }
        & > .wp-block-column:is(:first-child, :nth-child(2)) {
          flex-basis: calc(50% - 0.6rem) !important;
        }
        /* has 3 children */
        & > .wp-block-column:has( > *:nth-child(3):last-child) {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1.2rem;
          & > .is-style-card {
            min-height: 100%;            
          }
          & > * {
            margin-block: 0 !important;
          }
          & > .is-layout-flex {
            flex-direction: column;
            align-items: flex-start;
            & > * {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.offset-md {
  top: var(--wp--preset--spacing--60) !important;
}

.is-position-sticky:has(> .is-style-horizontal-overscroll) {
  z-index: 15;
}
body *.is-style-horizontal-overscroll {
  overflow-x: auto;
  mask-image: linear-gradient(90deg, black, black calc(100% - var(--wp--style--root--padding-left)), transparent);  
  -webkit-mask-image: linear-gradient(90deg, black, black calc(100% - var(--wp--style--root--padding-left)), transparent);
  padding-inline: var(--wp--style--root--padding-left) !important;
  left: calc(var(--wp--style--root--padding-left) * -1) !important;
  right: calc(var(--wp--style--root--padding-left) * -1) !important;
  position: relative;
  max-width: 100vw !important;
  width: 100vw;
  z-index: 1;
  > .scroller {
    width: fit-content !important;
    max-width: unset !important;
    justify-content: flex-start !important;
    white-space: nowrap;
    flex-shrink: 0;     
    > * {
      white-space: nowrap;
      flex-shrink: 0;      
    }
  }
}

.is-style-chip {
  position: relative;
  transition: 0.3s ease-out;
  z-index: 1;
  white-space: nowrap;
  flex-shrink: 0;  
  &:after {
    width: 100%;
    height: 100%;
    transition: 0.3s ease-out;
    position: absolute;
    content: "";
    display: block;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 100px;
    box-shadow: 
      inset 2px 2px 1px #fff9,
      inset -2px -2px 1px #ffffff4d;
  }
  & .wp-block-group:has(.wp-block-image) {
    flex-shrink: 0;
  }
  & a {
    text-decoration: none;
    &:after {
      position: absolute;
      content: "";
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0 !important;
      color: transparent !important;
      background: transparent !important;
      z-index: 1;
    }
  }
  &:has(a[href]):hover {
    background-color: white !important;
    transition: 0.1s ease;
    cursor: pointer;
  }   
}

.is-style-card.row {
  display: flex;
  .wp-block-columns {
    flex: 1;
  }
}

.entry-content > :is(.wp-block-cover, .wp-block-group):first-of-type + .wp-block-group:has(.is-style-card) {
  position: relative;
  z-index: 1;
  & .wp-block-columns:first-child:has(> * > .is-style-card) {
    margin-top: calc(-1 * (var(--wp--preset--spacing--30)*2));
    position: relative;
    z-index: 1;
  }
}


.is-style-strikethrough {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  &:before {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% + 9.5vw);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: 45deg;
    background: linear-gradient(0deg, transparent, var(--wp--preset--color--hot-pink) 25%, var(--wp--preset--color--hot-pink) 75%, transparent);
    z-index: -1;
  }  
}

ul.is-style-default {
  & li + li {
    margin-top: 0.5em;
  }
}

figure {
  margin: 0;
  display: block;
}

/* change footer ctas bg based on last blocks bg */
.entry-content:has(>:last-child.has-lilac-background-color) + footer > .wp-block-group:first-child:not(:last-child) {
  background: linear-gradient(180deg,var(--wp--preset--color--lilac) 48%, var(--wp--preset--color--black) 48%);
}
.entry-content:has(>:last-child.has-white-background-color) + footer > .wp-block-group:first-child:not(:last-child),
.entry-content:has(>:last-child:not([class*="has-background"])) + footer > .wp-block-group:first-child:not(:last-child) {
  background: linear-gradient(180deg, white 48%, var(--wp--preset--color--black) 48%);
}

@media (max-width: 785px) {
  footer > .wp-block-group:first-child:not(:last-child) {
    background: var(--wp--preset--color--black) !important;
  }

  *.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]) {
    rotate: 0deg !important;
    text-align: left !important;
  }
}

.position-download {
  display: block;
  padding-block: calc(0.6rem - 1px);
  padding-inline: calc(1rem - 1px);
  border: 1px dotted var(--wp--preset--color--grey-1);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  font-weight: 500;
  gap: 5px;
  border-radius: 4px;
  &:after {
    display: block;
    content: "";
    background: no-repeat center/contain url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38"><g id="icons8-download" transform="translate(-1 -1)"><path id="Path_238" data-name="Path 238" d="M10.241,20.5H17.5V1.5h5v19h7.259L20,30.292Z" fill="%23d271db"/><path id="Path_239" data-name="Path 239" d="M22,2V21h6.554L20,29.583,11.446,21H18V2h4m1-1H17V20H9.037L20,31,30.963,20H23Z" fill="%239a367b"/><g id="Group_261" data-name="Group 261"><path id="Path_240" data-name="Path 240" d="M1.5,34.5h37v4H1.5Z" fill="%23d271db"/><path id="Path_241" data-name="Path 241" d="M38,35v3H2V35H38m1-1H1v5H39Z" fill="%239a367b"/></g></g></svg>');
    width: 12px;
    height: 12px;
    object-fit: contain;
  }
}

#exit {
  cursor: pointer;
  transition: 0.4s ease-in-out;
  &:hover {
    opacity: 0.8;
    transition: 0.1s ease-out;
  }
}

/* wordpress bug fixes */
.wp-block-cover__inner-container > .alignfull {
  width: 100vw;
}