/**
Theme Name: Blog Vibes
Theme URI: https://ascendoor.com/themes/blog-vibes/
Author: Ascendoor
Author URI: https://ascendoor.com/
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.7
Requires at least: 5.0
Template: ascendoor-blog
Text Domain: blog-vibes
Description: Blog Vibes ( child of Ascendoor Blog ) is designed specifically for professional bloggers, offering a sleek and minimalistic design that is responsive and SEO-friendly. The theme aims to simplify the technical aspects of blogging, providing a clean and user-friendly interface. With its high-quality and responsive blog layout, along with attractive typography, writers can concentrate solely on creating content. Enjoy a hassle-free blogging experience with the perfect combination of aesthetics and functionality. Explore the theme documentation here: https://docs.ascendoor.com/docs/blog-vibes/ and take a preview at: https://demos.ascendoor.com/blog-vibes/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: custom-background, custom-logo, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, news, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Blog Vibes is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root{
	--primary-color: #00abe4;
}

/* Header CSS
========================================================================== */
header.header-style-3 {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
	background-color: var(--clr-background);
}

.single.post-title-inside-image header.header-style-3 {
	margin-bottom: 0;
}

header.header-style-3.header-reversed {
	flex-direction: column-reverse;
}

header.header-style-3 .middle-header-part .middle-header-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding-block: 25px;
	gap: 20px;
}

@media (max-width: 768px) {
	header.header-style-3 .middle-header-part .middle-header-wrapper {
		flex-wrap: wrap;
	}
}

header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding {
	text-align: center;
}

@media (max-width: 768px) {
	header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding {
		order: 1;
	}
}

header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-logo img {
	width: auto;
	height: 100%;
	max-height: 80px;
}

header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-title {
	font-size: var(--font-size-xxxl);
	font-weight: bold;
	line-height: 1.2;
	margin: 0;
}

@media (max-width: 600px) {
	header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-title {
		font-size: var(--font-size-xxl);
	}
}

header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-title a {
	line-height: inherit;
	display: inline-block;
	text-decoration: none;
	color: var(--header-text-color);
}

header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-description {
	margin: 0;
	margin-block-start: 5px;
	color: var(--clr-foreground);
}

@media (max-width: 480px) {
	header.header-style-3 .middle-header-part .middle-header-wrapper .site-branding .site-description {
		font-size: 0.8rem;
		margin-top: 0;
	}
}

header.header-style-3 .middle-header-part .middle-header-wrapper .social-icons ul.social-links {
	gap: 15px;
}

header.header-style-3 .middle-header-part .middle-header-wrapper .social-icons ul.social-links a {
	width: auto;
	height: auto;
	font-size: var(--font-size-base);
	transition: .3s all ease;
}

header.header-style-3 .middle-header-part.ascendoor-header-image {
	position: relative;
	isolation: isolate;
}

header.header-style-3 .middle-header-part.ascendoor-header-image .header-background-image {
	position: absolute;
	inset: 0;
	z-index: -1;
}

header.header-style-3 .middle-header-part.ascendoor-header-image .header-background-image::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.4;
}

header.header-style-3 .middle-header-part.ascendoor-header-image .header-background-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

header.header-style-3 .middle-header-part.ascendoor-header-image .middle-header-wrapper .site-branding .site-description {
	color: var(--white);
}

header.header-style-3 .bottom-header-part {
	background-color: var(--clr-background);
	border-block: 1px solid rgba(var(--clr-foreground-rgb), 0.15);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (max-width: 480px) {
	header.header-style-3 .bottom-header-part .bottom-header-wrapper {
		position: relative;
	}
}

@media (max-width: 991px) {
	header.header-style-3 .bottom-header-part .bottom-header-wrapper .social-icons {
		display: none;
	}
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .navigation-part {
	display: flex;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .offcanvas-search {
	display: flex;
	gap: 10px;
	align-items: center;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas {
	line-height: 0;
	font-size: 0;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu {
	padding: 0px;
	cursor: pointer;
	border: 0;
	background: transparent;
	position: relative;
	z-index: 1;
	width: 25px;
	height: 20px;
	box-sizing: content-box !important;
	transition: .3s;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	overflow: hidden;
	position: relative;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span::before, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--clr-foreground);
	transform: translateX(-200%);
	transition: ease .3s;
	border-radius: 100vmax;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span::before {
	background-color: var(--primary-color);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span::after {
	transform: translateX(0);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span:nth-child(2)::before, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span:nth-child(2)::after {
	transition-delay: 75ms;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span:last-child::before, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu .hamburger span:last-child::after {
	transition-delay: .15s;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:focus, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:hover {
	opacity: 1;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:focus span::before, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:hover span::before {
	transform: translateX(0);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:focus span::after, header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:hover span::after {
	transform: translateX(200%);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .ascendoor-offcanvas .ascendoor-offcanvas-menu:focus {
	outline: thin dotted var(--clr-foreground);
	outline-offset: 2px;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search {
	width: 30px;
	position: relative;
	display: inline-block;
	text-align: center;
}

@media (max-width: 480px) {
	header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search {
		position: unset;
	}
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-icon {
	font-size: 14px;
	color: var(--clr-foreground);
	font-weight: 700;
	text-align: center;
	outline: 0;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 50%;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-icon:focus-within {
	outline: 1px dashed var(--clr-foreground);
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form {
	position: absolute;
	inset-inline-end: 0;
	opacity: 0;
	visibility: hidden;
	top: 100%;
	width: 325px;
	padding: 14px;
	z-index: 99;
	box-shadow: var(--shadow);
	background: var(--clr-sub-background);
	border-top: 2px solid var(--primary-color);
}

@media (max-width: 480px) {
	header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form {
		width: 100%;
	}
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form .search-form {
	display: flex;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form .search-form label {
	width: 75%;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form .search-form label input {
	width: 100%;
	border-radius: 0;
	border-start-start-radius: 5px;
	border-end-start-radius: 5px;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form .search-form label input:focus-visible {
	outline: none;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap .header-search-form .search-form input.search-submit {
	border: 1px solid var(--theme-color);
	border-radius: 0px;
	padding: 0px;
	font-size: 13px;
	width: 25%;
	margin: 0;
	border-radius: 0;
	border-start-end-radius: 5px;
	border-end-end-radius: 5px;
}

header.header-style-3 .bottom-header-part .bottom-header-wrapper .header-search .header-search-wrap.show .header-search-form {
	margin: 0;
	opacity: 1;
	visibility: visible;
}

header.header-style-3 .bottom-header-part.fix-header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 15;
}
body.admin-bar header.header-style-3 .bottom-header-part.fix-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar header.header-style-3 .bottom-header-part.fix-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar header.header-style-3 .bottom-header-part.fix-header {
		top: 0;
	}
}

/* banner section
========================================================================== */
.banner-section.banner-style-1 .banner-section-wrapper {
	grid-template-columns: repeat(4, 1fr);
}

.banner-section.banner-style-1 .banner-section-wrapper .slider-part:nth-child(1) {
	grid-row: span 2;
}
.banner-section.banner-style-1 .banner-section-wrapper .slider-part:nth-child(1) .banner-slider .blog-post-single {
	min-height: 540px;
}
.banner-section.banner-style-1 .banner-section-wrapper .blog-post-single:nth-child(2){
	grid-column: span 2;
}
@media (max-width: 1023px) {
	.banner-section.banner-style-1 .banner-section-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.banner-section.banner-style-1 .banner-section-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.banner-section.banner-style-1 .banner-section-wrapper .slider-part:nth-child(1) .banner-slider .blog-post-single {
		min-height: 350px;
	}
}

/* Blog Grid Common
========================================================================== */
.blog-post-single {
    &.grid-design {
        --post-padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: var(--posts-inside-gap);
        padding: var(--post-padding);
        padding-bottom: 1.3rem;
        background-color: var(--clr-background);
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);

        &:not(.has-post-thumbnail) {
            justify-content: flex-end;
        }

		.ascendoor-spacer{
			flex-grow: 1;
		}

        &.grid-style-1 {
            &.has-post-thumbnail {
                .post-thumbnail {
                    margin: calc(-1 * var(--post-padding));
                    margin-bottom: 15px;
                }
            }
        }
    }
}
/* Category Section
========================================================================== */
@media (max-width: 768px) {
	.ascendoor-blog-categories-section.column-4 .categories-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}
.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single .category-img {
	line-height: 0;
	display: block;
	height: 100%;
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single .category-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single > a {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--clr-foreground);
	background-color: rgba(0, 0, 0, 0.2);
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single > a span.title {
	position: absolute;
	bottom: 10px;
	inset-inline-start: 10px;
	z-index: 6;
	display: flex;
	gap: 10px;
	align-items: center;
	line-height: 1;
	padding: 4px 10px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: var(--font-size-sm);
	background-color: var(--light-bg-color);
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single > a span.title .number::before {
	content: "(";
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single > a span.title .number::after {
	content: ")";
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single > a::before {
	position: absolute;
	content: '';
	left: 10px;
	top: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	transition: opacity 0.3s;
	z-index: 5;
	opacity: 0;
	background-repeat: no-repeat;
	background-image: repeating-linear-gradient(0deg, #fff, #fff 10px, transparent 10px, transparent 20px), repeating-linear-gradient(90deg, #fff, #fff 10px, transparent 10px, transparent 20px), repeating-linear-gradient(180deg, #fff, #fff 10px, transparent 10px, transparent 20px), repeating-linear-gradient(270deg, #fff, #fff 10px, transparent 10px, transparent 20px);
	background-size: 4px calc(100% + 20px), calc(100% + 20px) 4px, 4px calc(100% + 20px), calc(100% + 20px) 4px;
	animation: boxBorderAnimation 1s infinite linear;
}

@keyframes boxBorderAnimation {
	from {
		background-position: 0 0, -20px 0, 100% -20px, 0 100%;
	}
	to {
		background-position: 0 -20px, 0 0, 100% 0, -20px 100%;
	}
}

.ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single:focus-within a::before, .ascendoor-blog-categories-section.categories-style-2 .categories-wrapper .category-single:hover a::before {
	opacity: 1;
}

/* Category widget
========================================================================== */
.category-section .category-wrapper .category-single a {
	padding: 20px;
}

/* Archive CSS
========================================================================== */
.widgettitle::before,
.widget-title::before {
	border-radius: 3px;
}

.widgettitle::after,
.widget-title::after {
	border-radius: 3px;
	border: 3px solid var(--body-background);
}

/* Archive CSS
========================================================================== */
.ascendoor-blog-archive-layout {
	margin-bottom: 30px;
}

.ascendoor-blog-archive-layout.grid-layout {
	display: grid;
	grid-gap: 20px;
}

.ascendoor-blog-archive-layout.grid-layout article {
	margin-bottom: 0;
}

.ascendoor-blog-archive-layout.grid-layout.column-2 {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 480px) {
	.ascendoor-blog-archive-layout.grid-layout.column-2 {
		grid-template-columns: repeat(1, 1fr);
	}
}

.ascendoor-blog-archive-layout.grid-layout.column-3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
	.ascendoor-blog-archive-layout.grid-layout.column-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.ascendoor-blog-archive-layout.grid-layout.column-3 {
		grid-template-columns: repeat(1, 1fr);
	}
}