/*
Theme Name: Lifestyle Project
Theme URI: LifestyleProject.au
Author: Steve Floyd
Author URI: LifestyleProject.au
Description: I created this theme for use on my blog "The Lifestyle Project" (LifestyleProject.blog).
Requires at least: 6.0
Tested up to: 6.4.2
Requires PHP: 5.7
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lifestyleproject
Tags: blog, education, entertainment, one-column, right-sidebar, wide-blocks, block-patterns, block-styles, featured-image-header, featured-images, full-site-editing, 
*/

/* Defaults
---------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Align Captions */
.wp-block-image figcaption {
  text-align: center;
}


/* CSS Classes 
---------------------------------------- */

/* Transparent Header */
.transparent-header {
  position: absolute;
  width: 100%;
  z-index: 999;
}

/* Force Img Left so image always aligns left even on mobiles - see below*/
.image-align-left {
  text-align: left !important;
}

/* Make Columns Same Height */
.full-height {
  height: 100% !important;
}

/* Make an Element sticky */
.make-sticky {
  position: sticky;
  top: 40px;
}

/* Force removal of margin at block-start */
.remove-margin {
  margin-block-start: 0;
}

/* Add spacing to lists */
.listspacer li {
  padding-bottom: 16px;
}

/* Specific padding for Short Posts Layout */

.post-padding-narrow {
  padding-left: clamp(1.5rem, 100vw * 0.287 - 7.1rem, 11.25rem) !important;
  padding-right: clamp(1.5rem, 100vw * 0.287 - 7.1rem, 11.25rem) !important;
}

.post-padding-wide {
  padding-left: clamp(0rem, 2vw - 0.625rem, 2rem) !important;
  padding-right: clamp(0rem, 2vw - 0.625rem, 2rem) !important;
}

/* Media Queries
---------------------------------------- */

/* Non-Mobile */

@media (min-width: 769px) {
  .align-column-height {
    display: flex;
    width: 100%;
  }

  .align-column {
    width: 100%;
  }
	
  /* Force Image width to adjust with container width */
  .wp-block-image .alignleft,
  .wp-block-image .alignright,
  .alignleft,
  .alignright {
    max-width: 45%;
  }
}

/* Mobile */

@media (max-width: 768px) {
  /* Reverse Mobile Column Direction */
  .reverse-columns {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Hide on Mobile */
  .hide-mobile {
    display: none;
  }

  /* Center-Align images */
  .wp-block-image {
    display: block;
    float: none;
    margin: 2rem 0 !important;
    width: 100% !important;
    text-align: center;
  }
}