/*
Theme Name: I'm Good
Theme URI: https://imgood.au/
Author: the New Best Friend
Author URI: https://newbestfriend.com.au
Requires at least: 6
Tested up to: 6.8.2
Requires PHP: 8.0
Version: 1.0
Text Domain: imgood
*/

/*font-family: "peridot-pe-variable", sans-serif;
font-variation-settings: "ital" 0, "wdth" 100, "wght" 400;*/

footer {
  margin-top: 0 !important;
}

body:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: repeat center/120px url('/wp-content/themes/imgood/assets/images/noise.png');
  pointer-events: none;
  position: fixed;
  image-rendering: pixelated;
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
}


.has-peridot-cd-font-family {
  font-family: 'peridot-pe-variable', sans-serif !important;
  font-variation-settings: "ital" 0, "wdth" 80;
}  

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

img:not(p img) {
  display: block;
}

:is(p, h1, h2, h3):has(img) {
  display: inline-flex;
  gap: 0.5em;
}

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

.z-index {
  z-index: 1;
}
.z-index-sm {
  z-index: 10;
}
.z-index-md {
  z-index: 100;
}
.z-index-lg {
  z-index: 1000;
}

.no-gap {
  gap: 0 !important;
}

.w-100 {
  width: 100%;
}

.is-position-sticky {
  top: var(--wp--preset--spacing--30);
  &.bottom {
    top: unset !important;
    bottom: 0;
  }
}


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

/* remove margin offsets on mobile */
@media (max-width: 781px) {
  .my-0 {
    margin-block: 0 !important;
  }
  .mt-0 {
    margin-top: 0 !important;
  }
  .mt-1 {
    margin-top: var(--wp--preset--spacing--10) !important;
  }
  .mt-2 {
    margin-top: var(--wp--preset--spacing--20) !important;
  }
  .mt-3 {
    margin-top: var(--wp--preset--spacing--30) !important;
  }
  .mt-4 {
    margin-top: var(--wp--preset--spacing--40) !important;
  }
  .mt-5 {
    margin-top: var(--wp--preset--spacing--50) !important;
  }  
  .mb-0 {
    margin-bottom: 0 !important;
  }  
}

body {
  --nbf-base: var(--wp--preset--color--denim);
}

.wp-block-post {
  border-radius: 12px;
  &:nth-child(3n + 3) .post-card{ background: color-mix(in srgb, var(--nbf-base) 50%, white 50%); }
  &:nth-child(3n + 2) .post-card{ background: color-mix(in srgb, var(--nbf-base) 75%, white 25%); }
  &:nth-child(3n + 1) .post-card{ background: var(--nbf-base); }  
  &.module-small-shifts {
    --nbf-base: var(--wp--preset--color--sunburst);
  }
  &.module-what-to-say-when {
    --nbf-base: var(--wp--preset--color--bubblegum);
  }
  &.module-headspace-habits {
    --nbf-base: var(--wp--preset--color--seafoam);
  }
  &.module-try-this-instead {
    --nbf-base: var(--wp--preset--color--lime);
  }
  &.module-youre-not-alone {
    --nbf-base: var(--wp--preset--color--tangerine);
    grid-row: span 2;
  }    
}

.post-card {  
  position: relative;
  overflow: hidden;
  transition: 0.4s background-color ease-out;
  cursor: pointer;
  &:not(.filter) {
    min-height: max(250px, 100%) !important;
  }
  & a {
    border-bottom: 0 !important;
  }
  &.hide-button {
    & a {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: 1;
    }
  }  
  &:hover {
    text-decoration: none !important;
    transition: 0s background-color ease;
    background-color: color-mix(in srgb, var(--nbf-base) 95%, black 5%) !important;
  }
}

@media (max-width: 781px) {
  .post-card:not(.filter) {
    min-height: 100px !important;
  }
}

.is-layout-grid {
  > * { /* grid children */
    min-width: 0;
    box-sizing: border-box;
  }  
  @media (max-width: 900px) {
    & {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      & .span-all {
        grid-column:  span 2;
      }
    }  
  }

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


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


/*@media (max-width: 781px) {
  .has-text-align-center-mobile {
    text-align: center !important;
  }
}*/


.nbf-swiper .swiper-slide {
  border-radius: 12px;
}


.bg-blend-color-burn {
  background-blend-mode: color-burn;
}

.rotate-right {
  rotate: 6deg;
}
.rotate-left {
  rotate: -2deg;
}


#trackDirectory {
  & .directory-toggle {
    aspect-ratio: 1/1;
    cursor: pointer;
    transition: 0.6s cubic-bezier(.2,.7,.2,1) scale;
    scale: 1;
    &:is(:active, :has(:active), :focus, :focus-within) {
      scale: 0.9;
    }
    &:hover {
      scale: 1.1;
    }
  }
  & .wp-block-post-navigation-link {
    width: 50px;
    height: 50px;
    position: relative;
    overflow: clip;
    border-radius: 100px;
    background-color: black;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><g transform="translate(50) rotate(90)"><rect width="50" height="50" rx="25"/><path d="M25,1a24.007,24.007,0,0,0-9.342,46.114A24.006,24.006,0,0,0,34.342,2.886,23.849,23.849,0,0,0,25,1m0-1A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z"/><g transform="translate(20.258 33.338) rotate(-90)"><path d="M8.169,3.749,2.623,9.295A1.539,1.539,0,0,1,.448,7.119L7.141.425A1.455,1.455,0,0,1,9.2.425L15.89,7.119a1.539,1.539,0,0,1-2.176,2.176Zm0,0" fill="%23fff"/></g></g></svg>');
    transition: 0.6s cubic-bezier(.2,.7,.2,1) scale;
    scale: 1;
    &.post-navigation-link-next {
      scale: -1 -1;
    }
    &:is(:active, :has(:active), :focus, :focus-within) {
      scale: 0.9;
      &.post-navigation-link-next {
        scale: -0.9 -0.9;
      }            
    }
    &:hover {
      scale: 1.1;
      &.post-navigation-link-next {
        scale: -1.1 -1.1;
      }      
    }    
    &:not(:has(a)) {
      opacity: 0.5;
    }
    & a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    & .is-arrow-arrow {      
      display: none !important;
    }
  }
}

html.has-modal-open {
  & .wp-block-column:has(> .wp-block-group > #trackDirectory) {
    z-index: 0;
  }
}

@media (max-width: 786px) {
  .wp-block-column:has(> .wp-block-group > #trackDirectory) {
    z-index: 10;
    --nbf-base: var(--wp--preset--color--denim);
    position: sticky;
    bottom: 0px;
    padding-block: var(--wp--preset--spacing--10);
    &:before {
      width: 100vw;
      height: 100%;
      background: linear-gradient(0deg, var(--nbf-base), rgba(255,255,255, 0));
      content: "";
      position: absolute;
      top: 0;
      left: calc(var(--wp--preset--spacing--40) * -1);
      border-bottom: 1px solid black;
    }
  }
  
  .entry-content > .bg-blend-color-burn {
    &.has-sunburst-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--sunburst);
    }    
    &.has-lime-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--lime);
    }
    &.has-strawberry-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--strawberry);
    }
    &.has-tangerine-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--tangerine);
    }
    &.has-bubblegum-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--bubblegum);
    }
    &.has-seafoam-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--seafoam);
    }
    &.has-warm-grey-background-color .wp-block-column:has(> .wp-block-group > #trackDirectory):before {
      --nbf-base: var(--wp--preset--color--warm-grey);
    }        
  }

  .wp-block-group:has(> #trackDirectory) {
    align-items: center;
  }
  #trackDirectory {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;    
  }
  #trackDirectory > * {
    margin: 0 !important;
  }

  .wp-block-post-navigation-link {
    rotate: -90deg;
  }
  
}

@media (max-width: 786px) {
  .wp-block-group.is-content-justification-right:has(.wp-block-social-links) {
    justify-content: flex-start !important;
    > * {
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }
    & h2 {
      text-align: left !important;
    }
  }
  .wp-block-social-links {
    flex-direction: row;
    justify-content: flex-start !important;
  }
}

.wp-block-column:has(.nbf-swiper) {
  overflow: clip;
}


@media (max-width: 786px) {
  .tagline {
      margin-top: -50px !important;
      margin-bottom: 0 !important;
      max-width: 130px !important;
      float: right !important;
  }
}

/* desktop/tablet unchanged */
.nbf-filters-accordion .nbf-filters-toggle { display: none; }

@media (max-width: 786px) {
  .nbf-filters-accordion .nbf-filters-toggle{
    display:flex; align-items:center; gap:.5rem;
    width:100%; background:transparent; border:0; cursor:pointer;
    padding: 0;
    font: inherit;
    width: 100%;
    gap: 10px;
    justify-content: space-between;
    &:after {
      content: "";
      display: block;
      width: 1.5em;
      height: 1.5em;
      background: no-repeat center/contain;
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.5pt" height="37.5pt" viewBox="0 0 37.5 37.5" version="1.1"><g id="surface8662"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(9.019608%,9.019608%,9.411765%);fill-opacity:1;" d="M 12.71875 2.3125 C 12.078125 2.3125 11.5625 2.828125 11.5625 3.46875 L 11.5625 4.625 L 4.625 4.625 L 4.625 6.9375 L 11.5625 6.9375 L 11.5625 8.09375 C 11.5625 8.734375 12.078125 9.25 12.71875 9.25 L 17.34375 9.25 C 17.984375 9.25 18.5 8.734375 18.5 8.09375 L 18.5 6.9375 L 32.375 6.9375 L 32.375 4.625 L 18.5 4.625 L 18.5 3.46875 C 18.5 2.828125 17.984375 2.3125 17.34375 2.3125 Z M 13.875 4.625 L 16.1875 4.625 L 16.1875 6.9375 L 13.875 6.9375 Z M 21.96875 13.875 C 21.328125 13.875 20.8125 14.390625 20.8125 15.03125 L 20.8125 16.1875 L 4.625 16.1875 L 4.625 18.5 L 20.8125 18.5 L 20.8125 19.65625 C 20.8125 20.296875 21.328125 20.8125 21.96875 20.8125 L 26.59375 20.8125 C 27.234375 20.8125 27.75 20.296875 27.75 19.65625 L 27.75 18.5 L 32.375 18.5 L 32.375 16.1875 L 27.75 16.1875 L 27.75 15.03125 C 27.75 14.390625 27.234375 13.875 26.59375 13.875 Z M 23.125 16.1875 L 25.4375 16.1875 L 25.4375 18.5 L 23.125 18.5 Z M 8.09375 25.4375 C 7.453125 25.4375 6.9375 25.953125 6.9375 26.59375 L 6.9375 27.75 L 4.625 27.75 L 4.625 30.0625 L 6.9375 30.0625 L 6.9375 31.21875 C 6.9375 31.859375 7.453125 32.375 8.09375 32.375 L 12.71875 32.375 C 13.359375 32.375 13.875 31.859375 13.875 31.21875 L 13.875 30.0625 L 32.375 30.0625 L 32.375 27.75 L 13.875 27.75 L 13.875 26.59375 C 13.875 25.953125 13.359375 25.4375 12.71875 25.4375 Z M 9.25 27.75 L 11.5625 27.75 L 11.5625 30.0625 L 9.25 30.0625 Z M 9.25 27.75 "/></g></svg>');      
    }
  }

  .nbf-filters-accordion .nbf-acc__panel{
    display:grid;
    grid-template-rows: 0fr;      /* collapse the ONE child */
    transition: grid-template-rows .25s ease;
  }
  .nbf-filters-accordion.is-open .nbf-acc__panel{
    grid-template-rows: 1fr;      /* expand */
  }

  /* the single collapsible child */
  .nbf-filters-accordion .nbf-acc__inner{
    min-height: 0;
    overflow: clip;               /* ensure contents clip while collapsed */
  }
}

.term-small-shifts .small-shift,
.term-what-to-say-when .what-to-say,
.term-youre-not-alone .not-alone,
.term-headspace-habits .headspace,
.term-try-this-instead .try-this,
.page .browse-all
 {
  background: var(--wp--preset--color--warm-grey) !important;
  pointer-events: none !important;
}

header.wp-block-template-part {
  margin-top: 0 !important ;
}