/*
Theme Name: Blockster
Theme URI: https://blockthemespro.com
Author: Block Themes Pro
Description: A simple, clean, easy to manage block theme meant for non-profits, bloggers, freelancers and agencies. No custom code needed.  No clunky page builders.  It's lightweight and easy to setup!
Requires at least: 6.0
Tested up to: 6.1
Requires PHP: 5.7
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: blockster
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, threaded-comments, translation-ready, wide-blocks, block-styles, blog, portfolio, education
*/



// DOCUMENT & GLOBAL

html, body {
	border: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

html {
	scroll-behavior: smooth;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

*:focus:not(:focus-visible) {
	outline: none;
}

.wp-site-blocks {
	min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-footer {
	margin-top: auto !important;
}

a {
	text-underline-offset: .15em;
	transition: .15s ease;
	img {
		transition: opacity 400ms linear;
	}
	&:hover {
		img {
			opacity: .8;
		}
	}
}

label {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
}

input:not([type="radio"]):not([name="checkbox"]):not([name="submit"]),
textarea,
select {
	border-radius: 4px !important;
	appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
	border: 1px solid var(--wp--preset--color--contrast-light);
	padding: calc(0.667rem + 7px) calc(1rem + 2px);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: normal;
	outline: none;
	transition: .2s all;
	&:focus {
		border-color: var(--wp--preset--color--accent);
	}
}

button {
	transition: .2s all;
}


// A FEW GLOBAL STYLES
.hide-on-desktop {
	display: none !important;
}
.mt-0 {
	margin-top: 0;
}
.mb-0 {
	margin-bottom: 0;
}


// BLOCK: SITE LOGO
.is-style-splat.wp-block-site-logo img {
	border-radius: 45% 43% 50% 56%;
}


// BLOCK: SITE TITLE
.wp-block-site-title {
	a {
		text-decoration: none;
	}
}


// BLOCK: POST TERMS
.wp-block-post-terms {
	gap: 5px;
	display: flex;
	flex-flow: row wrap;
}

.wp-block-post-terms__separator {
	display: none;
}

.is-style-buttons .page-numbers, 
.is-style-buttons .wp-block-query-pagination-next, 
.is-style-buttons .wp-block-query-pagination-previous, 
.is-style-buttons.wp-block-post-terms>a {
	background: none;
    padding: 0.5rem 0.65rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: .5px;
    text-decoration: none;
    position: relative;
    line-height: var(--wp--custom--typography--line-height--normal);
    color: var(--wp--preset--color--accent);
    display: inline-block;
    &:after {
		background: var(--wp--preset--color--accent);
		opacity: .1;
	    border-radius: 6px;
	    bottom: 0;
	    content: '';
	    left: 0;
	    position: absolute;
	    z-index: -1;
	    right: 0;
	    top: 0;
	    transition: opacity .1s cubic-bezier(0.7, 0, 0.3, 1);
	}
	&:hover:after {
		opacity: .2;
	}
}

// BLOCK: GALLERY
.gallery-vertically-center-images {
	.wp-block-image {
		display: flex;
		align-items: center;
		margin-top: auto !important;
		margin-bottom: auto !important;
	}
}


// BLOCK: CODE
.wp-block-code {
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--contrast-light);
}


// BLOCK: POST AUTHOR
.wp-block-post-author__content {
	gap: .3rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-light);
	letter-spacing: .5px;
	display: flex;
}

.wp-block-post-author__byline {
	font-size: 1em;
	width: auto;
}


// BLOCK: BUTTON
.wp-element-button {
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	&:hover {
		opacity: .8;
	}
}


// BLOCK: SEARCH
.wp-block-search__inside-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 4px;
	transition: .15s ease;
	&:focus-within {
		border-color: var(--wp--preset--color--accent);
	}
}
.wp-block-search__button-inside {
	input.wp-block-search__input  {
		border: none!important;
		padding: 8px 12px !important;
		font-size: var(--wp--preset--font-size--small);
	}
	button {
		padding: 8px !important;
		margin: 0 !important;
		background: none !important;
		color: var(--wp--preset--color--contrast-light) !important;
		&:hover {
			color: var(--wp--preset--color--contrast) !important;
		}
	}
}


// HELPER CLASSES & REGISTERED BLOCK STYLES

.is-style-shadow-light:not(.wp-block-image) {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-light.wp-block-image img {
	box-shadow: var(--wp--preset--shadow--light);
}

.is-style-shadow-light {
	a {
		img {
			transition: all .15s ease;
		}
		&:hover {
			img {
				box-shadow: none;
				opacity: 1;
			}
		}
	}
}

.subscribe-form-container {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	padding: 4px 30px 4px 15px;
	align-items: center;
	justify-content: center;
}

.subscribe-form {
	display: flex;
	margin: auto;
	input {
		border: none !important;
		outline: none;
		margin: 0 !important;
		text-align: center;
		width: 100%;
		text-align: left;
		padding-left: 0;
		background: none;
	}
	button {
		background: none;
		color: var(--wp--preset--color--accent);
		border: none;
		outline: none;
		box-shadow: none;
		font-size: var(--wp--preset--font-size--medium);
		font-family: inherit;
		font-weight: 500;
		cursor: pointer;
		font-weight: 500;
		&:hover {
			opacity: .8;
		}
	}
}

.blog-sidebar-category-nav {
	ul {
		margin: 0;
		padding: 0;
		li {
			list-style: none;
			display: inline-block;
			vertical-align: top;
			line-height: var(--wp--custom--typography--line-height--medium);
			a {
				text-decoration: none;
				font-size: calc(.8 * var(--wp--preset--font-size--small));
				font-weight: 500;
				display: block;
				&:hover {
					color: var(--wp--preset--color--contrast);
				}
			}
		}
	}
}

.is-style-three-col-per-row-max {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
	grid-gap: 1.5rem;
}

.is-style-four-col-per-row-max {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
	grid-gap: 1.5rem;
}


// COMMENTS
.comment-form-cookies-consent {
	display: none !important;
}

h3#reply-title {
	font-size: var(--wp--preset--font-size-large);
}

.logged-in-as,
.comment-notes {
	color: var(--wp--preset--color--contrast-light);
	font-size: calc(.9 * var(--wp--preset--font-size--small));
}


// THINGS WE CAN HOPEFULLY REMOVE WHEN THERE ARE FIXES IN GUTENBERG
.has-text-align-center.wp-block-post-author {
	.wp-block-post-author__content {
		justify-content: center;
	}
}

.wp-block-navigation__responsive-container-close {
	padding-top: var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
}

.wp-block-button.is-style-outline>.wp-block-button__link, 
.wp-block-button .wp-block-button__link.is-style-outline {
	padding: 6px 14px;
}

.wp-block-post-template.is-flex-container {
	gap: 2.5em 1.25em;	
}

// MOBILE ONLY
@media ( max-width: 767px ) {
	.hide-on-mobile {
		display: none !important;
	}
	.hide-on-desktop {
		display: flex !important;
	}
	.wp-block-post {
		padding-bottom: var(--wp--preset--spacing--50);
		&:last-of-type {
			padding-bottom: 0;
		}
	}
	.mobile-order-1 {
		order: 1;
	}
	.mobile-order-2 {
		order: 2;
	}
	.center-on-mobile {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.mobile-padding-0 {
		padding: 0 !important;
	}
	.mobile-padding-top-0 {
		padding-top: 0 !important;
	}
	.mobile-padding-bottom-0 {
		padding-bottom: 0 !important;
	}
	.mobile-padding-right-0 {
		padding-right: 0 !important;
	}
	.mobile-padding-left-0 {
		padding-left: 0 !important;
	}
	.is-style-three-col-per-row-max,
	.is-style-four-col-per-row-max {
		grid-template-columns: 1fr;
	}
}