/*
Theme Name: Blockable
Theme URI: https://github.com/james-s-k/blockable
Author: James Koussertari
Author URI: https://gutenbergmarket.com
Description: Blockable is a simple and minimal block theme.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: blockable
Tags: blog, education, news, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, full-site-editing, full-width-template, rtl-language-support, sticky-post, style-variations, template-editing, translation-ready
*/

/* CSS Reset
================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-moz-osx-font-smoothing: grayscale;
}
html, body {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	overflow-x: hidden; /* This is not respected on iOs */
}

b,
strong {
	font-weight: var(--wp--custom--font-weight--bold);
}

blockquote {
	margin: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

ol:where(:not([class*="wp-block"])),
ol:where(.wp-block-list),
ul:where(:not([class*="wp-block"])),
ul:where(.wp-block-list) {
	padding-inline-start: var(--wp--preset--spacing--medium);
}

div[class*="wp-block-"] figcaption {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0;
	margin-top: 20px;
	text-align: center;
}

[hidden] {
	display: none;
}

a {
	transition: ease 0.3s;
}

a:hover{
	transition: ease 0.3s;
}

p a:where(:not(.wp-element-button)) {
	border-bottom: none !important;
}


/* Admin bar to bottom
================================================================== */
body.admin-bar {
	padding-bottom: 28px;
}
#wpadminbar {
	top: auto !important;
	bottom: 0;
}
#wpadminbar .quicklinks>ul>li {
	position:relative;
}
#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper {
	bottom:28px;
}



/* Standardize Form Styling
================================================================== */

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
}

input:not([type="submit"]),
select,
textarea,
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	color: var(--wp--preset--color--contrast);
	border-radius: 5px;
	border: solid 1px var(--wp--preset--color--grey-light);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	width: 100%;
}

input:focus-visible,
textarea:focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

label {
	width: 100%;
	display: block;
}

::placeholder {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}

:focus {
	outline-color: #CCCCCD;
}


/* Styles that can't be done via theme.json
================================================================== */

/* Search block */
.wp-block-search__input {
	padding: 0.7rem;
}
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--primary-light);
	font-size: var(--wp--preset--font-size--normal);
}
.wp-block-search__inside-wrapper {
	padding: 0;
	border: none !important;
}
.wp-block-search__input {
	background: var(--wp--preset--color--neutral-tint);
	height: 40px;
}
.wp-block-search__button {
	height: 40px;
	padding: 8px 10px 10px 10px !important;
}
.has-neutral-tint-background-color .wp-block-search__input {
	background: var(--wp--preset--color--base);
}

/* Media Text block */
@media (max-width: 600px) {
	.wp-block-media-text__content {
		padding: 0 !important;
	}
}
@media (min-width: 600px) {
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
		padding: 0 8% 0 0;
	}
	.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
		padding: 0 0 0 8%;
	}
}

/* Float the navigation burger icon right */
.wp-block-navigation.items-justified-right .components-button {
	float: right;
}



/* Utility classes
================================================================== */

.rounded,
.rounded > img,
.rounded > .wp-block-cover__background {
	border-radius: 8px;
}
.rounded-lg,
.rounded-lg > img,
.rounded-lg > .wp-block-cover__background {
	border-radius: 16px;
}
.overflow-hidden {
	overflow: hidden;
}

.shadow-bottom {
	box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3);
}

@media (max-width: 859px) {

	/* Change text alignment on mobile (compatible with text direction) */
	.text-align-left-mobile,
	.text-align-left-mobile .wp-block-heading,
	.text-align-left-mobile p {
		text-align: left; /* support for old browsers */
		text-align: start;
	}
	.text-align-right-mobile {
		text-align: right; /* support for old browsers */
		text-align: end;
	}

	/* When used with a mega custom font size */
	.fit-mega-font-size-on-mobile {
		font-size: 20vw !important;
	}

	/* Reverse flex direction on mobile */
	.column-reverse-mobile {
		flex-direction: column-reverse;
	}
	.row-reverse-mobile {
		flex-direction: row-reverse;
	}

}

@media (min-width: 860px) {

	.margin-top-56 {
		margin-top: 56px !important;
	}

	.margin-top-n100 {
		margin-top: -100px;
	}

	.margin-right-n100 {
		margin-right: -100px;
	}

	.margin-bottom-n100 {
		margin-bottom: -100px;
	}

	.margin-left-n100 {
		margin-left: -100px;
	}

}


/* Block Style Variations
================================================================== */

/* Zig Zag Query Block */
.wp-block-query.is-style-query-zig-zag .wp-block-post:nth-child(2n) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Normal Gutter Columns Block */
/* .wp-block-columns.is-layout-flex { */
/* 	gap: 3rem 3%; */
/* } */
/* Small Gutter Columns Block */
.wp-block-columns.is-style-columns-small-gutter {
	gap: 2em 2% !important;
}
/* Big Gutter Columns Block */
.wp-block-columns.is-style-columns-big-gutter {
	gap: 6em 6% !important;
}
/* No Gutter Columns Block */
.wp-block-columns.is-style-columns-no-gutter {
	gap: 0 0 !important;
}
@media (max-width:859px) {
	/* Normal Gutter Columns Block */
	/* .wp-block-columns.is-layout-flex { */
	/* 	gap: 1.25rem 2% !important; */
	/* } */
	/* Small Gutter Columns Block */
	.wp-block-columns.is-style-columns-small-gutter {
		gap: 1.25rem 2% !important;
	}
	/* Big Gutter Columns Block */
	.wp-block-columns.is-style-columns-big-gutter {
		gap: 1.25rem 2% !important;
	}
	/* No Gutter Columns Block */
	.wp-block-columns.is-style-columns-no-gutter {
		gap: 0 0 !important;
	}
}


/* Add Responsive Styling for the Query Block Grid
================================================================== */
.wp-block-post-template.is-flex-container {
	flex-wrap: unset;
	gap: 2em;
}
@media (max-width:600px) {

	.wp-block-post-template.is-flex-container {
		flex-wrap: wrap;
	}
	.wp-block-post-template.is-flex-container li {
		width: 100% !important;
	}

}
@media (min-width:601px) and (max-width:1000px) {

	.wp-block-post-template.is-flex-container.columns-4 {
		flex-wrap: wrap;
	}
	.wp-block-post-template.is-flex-container.columns-4 li {
		width: calc(49.99% - 1em) !important;
	}

	.wp-block-post-template.is-flex-container.columns-6 {
		flex-wrap: wrap;
	}
	.wp-block-post-template.is-flex-container.columns-6 li {
		width: calc(49.99% - 1em) !important;
	}

}
@media (min-width:1001px) and (max-width:1300px) {

	.wp-block-post-template.is-flex-container.columns-6 {
		flex-wrap: wrap;
	}
	.wp-block-post-template.is-flex-container.columns-6 li {
		width: calc(33.32% - 1.33em) !important;
	}

}


/* Overriding the Columns Block Breakpoints
================================================================== */

/* neutralize the wp default for 782px */
@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
}
/* change the default column breakpoint to 860px */
@media (max-width: 859px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}
@media (min-width: 860px) {
	.wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 0;
		flex-grow: 1;
	}
}





/*  Managing the fixed header menu  */
.home.front-end .fixed-header > .wp-block-group.is-position-sticky {
	box-shadow: unset;
}

/*
.home.front-end:not(.scrolled) header .wp-block-navigation a:not(.wp-block-navigation__submenu-container a) {
	color: white;
}
.home.front-end:not(.scrolled) header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	stroke: white;
}

.top-bar, .main-bar {
	transition: top 300ms linear, background-color 300ms linear, max-height 300ms linear, opacity 200ms linear;
	position: absolute;
	width: 100%;
}
*/

.front-end header.wp-block-template-part {
	position: relative;
}


/*
.home.front-end:not(.scrolled) header .dark-logo,
body.front-end.scrolled header .white-logo,
body.front-end.scrolled .top-bar {
	display: none;
}

body:not(.home).front-end header .white-logo {
	display: none;
}
*/

.home.front-end .fixed-header .wp-block-group.has-background {
	background-color: transparent !important;
}

body.front-end.scrolled .fixed-header .wp-block-group.main-bar {
	background-color: rgba(255, 255, 255, 0.93) !important;
}


body.front-end {
	margin-top: 0;
}



.entry-content .wp-social-link a:hover {
	color: var(--wp--preset--color--primary) !important;
}



.front-end .close-burger-overlay {
	top: 40px !important;
	color: var(--wp--preset--color--secondary) !important;
}

.front-end .close-burger-overlay:hover {
	color: var(--wp--preset--color--primary) !important;
}

.wp-site-blocks > .entry-content {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
	overflow: hidden; /* important to prevent mobile overflow issues */
}

.wp-block-list li {
	margin-left: 15px;
}

.wp-block-image {
	margin: 0;
}

.mt0 {
	margin-top: 0 !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.wpcf7-submit {
	padding: 0.6rem 1.6rem !important;
	background-color: var(--wp--preset--color--primary);
}

.border-text {
	border-bottom: 2px solid var(--wp--preset--color--primary);
}
.display-inline {
	display: inline;
}
.display-inline-block {
	display: inline-block;
}

.text-decoration-none, .text-decoration-none a {
	text-decoration: none !important;
}


/*
.home.front-end .kt-svg-item-693881_7457be-b0 .kb-svg-icon-wrap {
	color: #ffffff;
}
.home.front-end.scrolled .kt-svg-item-693881_7457be-b0 .kb-svg-icon-wrap {
	color: #000000;
}
*/

.animate-text-dark {
	background: linear-gradient(
			to right,
			rgb(255, 255, 255) 50%,
			rgb(50, 50, 50) 50%
	);
	background-size: 200% 100%;
	background-position-x: 100%;
	color: transparent !important;
	background-clip: text;
	-webkit-background-clip: text;
	display: inline-block;
}

.animate-text-light {
	background: linear-gradient(
			to right,
			rgb(0, 0, 0) 50%,
			rgb(150, 150, 150) 50%
	);
	background-size: 200% 100%;
	background-position-x: 100%;
	color: transparent !important;
	background-clip: text;
	-webkit-background-clip: text;
	display: inline-block;
}
.front-end .max-content {
	margin-left: 100% !important;
	width: max-content;
}
.front-end .fade-slide-up,
.front-end .fade-slide-down,
.front-end .fade-slide-left,
.front-end .fade-slide-right {
	opacity: 0;
}

.special-gradient {
	background: linear-gradient(90deg, #BC67FF 0%, rgba(205, 104, 222, 0.56) 18.23%, rgba(181, 64, 222, 0.83) 39.58%, rgba(154, 53, 234, 0.79) 55.21%, rgba(161, 32, 172, 0.34) 70.83%, rgba(173, 93, 240, 0.51) 85.94%, rgba(188, 103, 255, 0.87) 100%);
}


.wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	max-width: 1350px;
}

.wrapper-s {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	max-width: 550px;
}

.text-c {
	text-align: center;
}





@media (max-width: 800px) {
	.special-gradient {
		background: linear-gradient(90deg, rgba(205, 104, 222, 0.56) 0%, rgba(188, 103, 255, 0.87) 100%);
	}
}

footer a {
	border: none;
	text-decoration: none;
}


@media ( min-width: 1312px ) {
	.wp-block-site-logo {
		margin-top: -40px !important;
	}
}