/* 

Stylings should be put into theme.json or block style files.
If we run into a situation that can't cover then uncomment the loading of this in functions.php 

@todo parse this out better, currently just a port from pronghorn
*/


/* Main content and PhotoSwipe lightbox */
main,
.pswp,                      /* Making sure links in the PhotoSwipe lightbox used in gallery blocks are styled correctly. */
.wp-block-post-content {    /* Making sure content displayed properly in the block editory */

  a:where(:not(.wp-element-button)) {
    /* color: var(--wp--preset--color--base-contrast); */
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--primary);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.5px;

    transition:
      color 200ms,
      text-underline-offset 200ms,
      text-decoration-color 200ms,
      text-decoration-thickness 200ms;

    &:visited {
      /* color: var(--wp--preset--color--base-contrast); */
      color: var(--wp--preset--color--secondary);
      /* text-decoration-color: var(--wp--preset--color--secondary); */
    }

    &:hover,
    &:focus {
      /* text-decoration: underline; */
      text-underline-offset: 0.3em;
      color: var(--wp--preset--color--primary);
      text-decoration-color: var(--wp--preset--color--primary);
      text-decoration-thickness: 1px;
    }
  }

  /* above stling overriding what we have in theme.json so adding this here to fix for now */
  /* Messing up being able to use normal link colors in Spookt so commented out for now */
  /* .wp-block-heading a,
  .wp-block-post-title a {
    color: var(--wp--preset--color--heading);
  } */

  .wp-block-post {

    /* fix so all boxes same height */
    height: auto;
    /* background-color: red; */

    .pronghorn-post-card,
    .pronghorn-recipe-card,
    .pronghorn-attraction-card {

      height: 100%;
      display: flex;
      flex-direction: column;

      .pronghorn-hover-scale-img {
        border-radius: 8px 8px 0 0;
      }

      .wp-block-post-terms,
      .wp-block-post-title,
      .wp-block-post-excerpt {
        padding-right: var(--wp--preset--spacing--40);
        padding-left: var(--wp--preset--spacing--40);
      }

      .wp-block-post-title {
        
        a {
          transition: 
            color 200ms, 
            text-underline-offset 200ms,
            text-decoration-color 200ms,
            text-decoration-thickness 200ms;
    
          &:visited {
            text-decoration-color: var(--wp--preset--color--secondary);
          }
    
          &:hover {
            color: var(--wp--preset--color--primary);
            text-decoration-color: var(--wp--preset--color--primary);        
          }
        }
      }

      .wp-block-post-excerpt {
        margin-bottom: 10px;
      }
    
      .wp-block-post-excerpt__more-text {
        display: none;  
        /* can't believe no way to turn this off in the block controls */
      }

      .wp-block-read-more {
        
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: var(--wp--preset--spacing--40);

        --pronghorn-arrow-icon: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='15px' height='15px' x='0px' y='0px' viewBox='0 0 17 17' style='enable-background:new 0 0 17 17;color:%23686868;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:currentColor;stroke-width:2;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M15,1.9'/%3E%3Cline class='st0' x1='1.7' y1='15.3' x2='15' y2='1.9'/%3E%3Cline class='st0' x1='16' y1='1.9' x2='15' y2='1.9'/%3E%3Cline class='st0' x1='15' y1='1.9' x2='1' y2='1.9'/%3E%3Cpath class='st0' d='M15,1.9'/%3E%3Cline class='st0' x1='15' y1='16' x2='15' y2='1.9'/%3E%3C/g%3E%3C/svg%3E%0A");

        color: var(--wp--preset--color--base-contrast);
        text-decoration: none;

        border: 1px solid;
        border-radius: 8px;
        padding: 3px 6px;

        &::after {
          content: var(--pronghorn-arrow-icon);
          margin-left: 4px;
          margin-top: 3px;
          display: inline-block;
          width: 14px;
          height: 14px;

          transition: .3s;
        }

        &:hover::after {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 8px;
        }
      }
    }
  }

  /* tried putting this in theme.json at styles.elements.caption.css: "text-align: center;" 
      but doesn't work despite docs and schema saying it should */
  .wp-element-caption {
    text-align: center;
  }

  /* had this in the button block css but want to use it in other places like the excerpt read more link */
  .wp-block-button.pronghorn-button-readmore,
  .wp-block-post-excerpt__more-text {
    --pronghorn-arrow-icon: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='15px' height='15px' x='0px' y='0px' viewBox='0 0 17 17' style='enable-background:new 0 0 17 17;color:%23686868;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:currentColor;stroke-width:2;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M15,1.9'/%3E%3Cline class='st0' x1='1.7' y1='15.3' x2='15' y2='1.9'/%3E%3Cline class='st0' x1='16' y1='1.9' x2='15' y2='1.9'/%3E%3Cline class='st0' x1='15' y1='1.9' x2='1' y2='1.9'/%3E%3Cpath class='st0' d='M15,1.9'/%3E%3Cline class='st0' x1='15' y1='16' x2='15' y2='1.9'/%3E%3C/g%3E%3C/svg%3E%0A");
    
    text-align: center;
    a {
      background: none;
      color: var(--wp--preset--color--base-contrast);
      text-decoration: none;
  
      border: 1px solid;
      border-radius: 8px;
      padding: 3px 6px;
  
      &::after {
        content: var(--pronghorn-arrow-icon);
        margin-left: 4px;
        margin-top: 3px;
        display: inline-block;
        width: 14px;
        height: 14px;
  
        transition: .3s;
      }

      &:hover {
        outline-color: var(--wp--preset--color--primary); 
        color: var(--wp--preset--color--primary); 
      }
  
      &:hover::after {
        transform: rotate(45deg);
        margin-left: 8px;
      }
    }
  }

  /* Tweaks to the comment form */
  .wp-block-post-comments-form {
    .comment-form-cookies-consent {
      align-items: start;
    }
  }
  
}

:root {
  --pronghorn-transition: cubic-bezier(0.165, 0.84, 0.44, 1);

  .pronghorn-hover-scale-img {

    border-radius: 8px 8px 0 0;
    overflow: hidden;

    img {
      transition: transform .6s var(--pronghorn-transition);
    }

    &:hover {
      img {
        transform: scale(1.05);
      }
      
    }
  }
}