/*
Theme Name:   Developub Child Block Theme
Template:     developub-block-theme
*/




body {
	--borderRadius: 10px;
	--borderWidth: 2px;
	
	--h3Weight: 600;
	--h3Transform: uppercase;
	--h3Spacing: 1.5px;
	
	--fontawesome-family: "Font Awesome 7 Free";
}




button,
a.btn:not(.wp-block-button),
.wp-block-button .wp-element-button,
.is-root-container input[type=submit],
.gform_wrapper.gravity-theme input[type=submit] {
	padding: 20px var(--elementMargin);
	border-radius: var(--borderRadius);
	
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--h3Weight);
	text-transform: var(--h3Transform);
	letter-spacing: var(--h3Spacing);
	
	transition: .3s all ease-in-out;
	
	position: relative;
	top: 0;
	left: 0;
}
button:after,
a.btn:not(.wp-block-button):after,
.wp-block-button .wp-element-button:after,
.is-root-container input[type=submit]:after,
.gform_wrapper.gravity-theme input[type=submit]:after {
	content: "";
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	width: 100%;
	height: 100%;
	border: var(--borderWidth) solid var(--btnBackground);
	border-radius: var(--borderRadius);
	box-sizing: border-box;
	
	transition: .3s all ease-in-out;
}
button:hover:after,
a.btn:not(.wp-block-button):hover:after,
.wp-block-button .wp-element-button:hover:after,
.is-root-container input[type=submit]:hover:after,
.gform_wrapper.gravity-theme input[type=submit]:hover:after {
	--borderOffset: calc(3 * var(--borderWidth));
	--widthOffset: calc(2 * var(--borderOffset));
	
	top: calc(-1 * var(--borderOffset));
	left: calc(-1 * var(--borderOffset));
	
	width: calc(100% + var(--widthOffset));
	height: calc(100% + var(--widthOffset));
}




.wp-block-button.resume_btn a:before {
	content: "\f15b";
	font-family: var(--fontawesome-family);
	
	margin-right: .5em;
}
.wp-block-button.contact_btn a:before {
	content: "\f0e0";
	font-family: var(--fontawesome-family);
	
	margin-right: .5em;
}




.highlighter {
	color: var(--wp--preset--color--base);
	
	background-color: var(--wp--preset--color--contrast);
	display: inline;
	box-shadow: .5rem 0 0 var(--wp--preset--color--contrast), -.5rem 0 0 var(--wp--preset--color--contrast);
	padding: 0 .5rem .25rem .5rem;
	white-space: pre-wrap;
	box-decoration-break: clone;
	
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--patua-one);
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0px;
}




h2.banner {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--contrast);
	padding: var(--elementMarginSmall);
	
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--h3Weight);
	text-transform: var(--h3Transform);
	letter-spacing: var(--h3Spacing);
}









/*
 * UL
 * */
.portfolio-grid .wp-block-query ul.wp-block-post-template {
     --gridNum: 4;
    display: grid;
	grid-template-columns: repeat(var(--gridNum), minmax(0, 1fr));
	gap: var(--elementMargin);
}
/*
 * LI
 * */
.portfolio-grid .wp-block-query ul.wp-block-post-template li.wp-block-post {
	--shiftAmount: 15px;
	
	margin: 0;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
}
/*
 * Developub Section / Anchor
 * */
.portfolio-grid .wp-block-post .developub-section {
	position: relative;
	top: 0;
	left: 0;
	
	min-height: 200px;
	padding: var(--elementMargin);
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	text-align: center;
	text-decoration: none;
}
.portfolio-grid .wp-block-post .developub-section:after {
	content: "";
	
	background-color: var(--wp--preset--color--contrast);
	
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	
	width: 100%;
	height: 100%;
}
/*
 * ALL CHILDREN
 * */
.portfolio-grid .wp-block-post .developub-section > * {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	
	transition: .3s all ease-in-out;
}
.portfolio-grid .wp-block-post .developub-section:hover > * {
	transform: translate3d(var(--shiftAmount), calc(var(--shiftAmount) * -1), 0);
}
/*
 * IMG
 * */
.portfolio-grid .wp-block-query .wp-block-post-template .wp-block-post .wp-block-post-featured-image img {
	width: 100%;
	border: 3px solid var(--wp--preset--color--contrast);
	aspect-ratio: 1.666;
	
	object-fit: cover;
	object-position: center top;
	
	transition: .3s all ease-in-out;
}
.portfolio-grid .wp-block-query .wp-block-post-template .wp-block-post .developub-section:hover .wp-block-post-featured-image img {
	transform: translate3d(var(--shiftAmount), calc(var(--shiftAmount) * -1), 0);
}
.portfolio-grid .wp-block-query .wp-block-post-template .wp-block-post .developub-section .wp-block-post-featured-image:before {
	transition: .3s all ease-in-out;
}
.portfolio-grid .wp-block-query .wp-block-post-template .wp-block-post .developub-section:hover .wp-block-post-featured-image:before {
	transform: translate3d(var(--shiftAmount), calc(var(--shiftAmount) * -1), 0);
}

@media(max-width: 1400px) {
    .portfolio-grid .wp-block-query ul.wp-block-post-template {
     --gridNum: 3;
    }
}
@media(max-width: 767px) {
    .portfolio-grid .wp-block-query ul.wp-block-post-template {
     --gridNum: 1;
    }
}