/**
Theme Name: Spark Blog
Theme URI: https://ascendoor.com/themes/spark-blog/
Author: Ascendoor
Author URI: https://ascendoor.com/
Version: 1.0.0
Requires PHP: 7.4
Tested up to: 6.8
Requires at least: 5.0
Template: cosmic-blog
Text Domain: spark-blog
Description: Spark Blog ( child theme of Cosmic Blog ) is a clean, modern WordPress theme designed for both personal and professional bloggers. With a fully responsive layout, it looks great on all devices. The theme is SEO-friendly and translation-ready, helping you reach a global audience with ease. Regular updates ensure your site stays secure, and our dedicated support team is always ready to assist. With its elegant design and user-friendly features, Spark Blog lets you focus on sharing your stories and growing your blog effortlessly. Check out the theme documentation at: https://docs.ascendoor.com/docs/spark-blog/ and see the demo at: https://demos.ascendoor.com/spark-blog/
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.

Spark Blog 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 {
	--radius: 0.5rem;
	--primary-color: #ff004d;
}

/* Top Header Day
--------------------------------------------- */
.site-header .cosmic-blog-top-header .cosmic-blog-top-header-wrapper .top-header-left-part .time-wrap .day {
	border-end-end-radius: 0;
	border-start-end-radius: 0;
}

.navigation-outer-wrapper .cosmic-blog-navigation .cosmic-blog-navigation-container .nav-wrapper .main-navigation .current_page_item > a, .navigation-outer-wrapper .cosmic-blog-navigation .cosmic-blog-navigation-container .nav-wrapper .main-navigation .current-menu-item > a, .navigation-outer-wrapper .cosmic-blog-navigation .cosmic-blog-navigation-container .nav-wrapper .main-navigation .current_page_ancestor > a, .navigation-outer-wrapper .cosmic-blog-navigation .cosmic-blog-navigation-container .nav-wrapper .main-navigation .current-menu-ancestor > a {
	border-radius: 8pz;
}

/* Header Image Bottom Padding
--------------------------------------------- */
.site-header .cosmic-blog-middle-header.header-image {
	padding-block-end: 10px;
}

/* Sticky Header CSS
--------------------------------------------- */
.navigation-outer-wrapper .cosmic-blog-navigation.sticky-header {
	position: fixed;
	width: 100%;
	top: 0;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding-block: 0;
	z-index: 15;
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 20px;
}

.navigation-outer-wrapper .cosmic-blog-navigation.sticky-header .cosmic-blog-navigation-container {
	border-bottom: transparent;
	border-end-start-radius: var(--radius);
	border-end-end-radius: var(--radius);
	border-start-end-radius: 0;
	border-start-start-radius: 0;
}

@media (min-width: 782px) {
	body.admin-bar .navigation-outer-wrapper .cosmic-blog-navigation.sticky-header {
		top: 30px;
	}
}

@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .navigation-outer-wrapper .cosmic-blog-navigation.sticky-header {
		top: 46px;
	}
}

/* Banner CSS
--------------------------------------------- */
.banner-style-3 .slick-button .slick-arrow.fa-angle-left {
	cursor: pointer;
	top: 50%;
	inset-inline-start: 0;
	transition: all 0.3s ease;
}

.banner-style-3 .slick-button .slick-arrow.fa-angle-right {
	cursor: pointer;
	top: 50%;
	inset-inline-end: 0;
	transition: all 0.3s ease;
}

.banner-section.banner-style-3 .section-wrapper .banner-post-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

@media (max-width: 600px) {
	.banner-section.banner-style-3 .section-wrapper .banner-post-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (min-width: 768px) {
	.banner-section.banner-style-3 .section-wrapper .banner-post-wrapper .blog-post-container:nth-child(1) {
		grid-row: span 2;
	}
}

.banner-section.banner-style-3 .section-wrapper .banner-post-wrapper .blog-post-container:nth-child(1) .blog-post-inner .blog-post-detail .post-main-title {
	font-size: var(--font-large);
}

.banner-section.banner-style-3 .section-wrapper .banner-post-wrapper .blog-post-container .blog-post-inner {
	min-height: 330px;
}

/* Categories CSS
--------------------------------------------- */
.categories-section .categories-container-wrapper {
	margin: 0 -15px;
	display: flex;
	flex-wrap: wrap;
}

.categories-section .categories-container-wrapper .categories-inner {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
	margin-inline: 15px;
	border-radius: var(--radius);
	box-shadow: 7px 10px 16px -2px var(--bg-shadow);
}

.categories-section .categories-container-wrapper.column-4 .categories-container {
	flex-basis: 25%;
}

@media (max-width: 1100px) {
	.categories-section .categories-container-wrapper.column-4 .categories-container {
		flex-basis: 33.33%;
	}
}

@media (max-width: 900px) {
	.categories-section .categories-container-wrapper.column-4 .categories-container {
		flex-basis: 50%;
	}
}

@media (max-width: 600px) {
	.categories-section .categories-container-wrapper.column-4 .categories-container {
		flex-basis: 100%;
	}
}

.categories-section.categories-style-2 .categories-inner .categories-image {
	border-radius: var(--radius);
	position: relative;
	line-height: 0;
	overflow: hidden;
}

.categories-section.categories-style-2 .categories-inner .categories-image::after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, black 150%);
	opacity: 0.9;
	bottom: 0;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	transition: opacity 0.3s;
	transition: 0.3s ease;
}

.categories-section.categories-style-2 .categories-inner .categories-image img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	transition: all 0.3s ease;
}

@media (max-width: 425px) {
	.categories-section.categories-style-2 .categories-inner .categories-image img {
		height: 320px;
	}
}

.categories-section.categories-style-2 .categories-inner .categories-details {
	position: absolute;
	width: 100%;
	bottom: 2%;
	padding: 10px 25px 20px;
}

.categories-section.categories-style-2 .categories-inner .categories-details .categories-title {
	font-size: calc(var(--font-normal) - 3px);
	line-height: 1.2;
	display: flex;
	flex-direction: column;
}

.categories-section.categories-style-2 .categories-inner .categories-details .categories-title a {
	color: #ffff;
	font-family: var(--font-heading);
	text-decoration: none;
	transition: 0.3s ease;
}

.categories-section.categories-style-2 .categories-inner .categories-details span {
	color: #fff;
	font-size: var(--font-xsmall);
}

.categories-section.categories-style-2 .categories-inner.no-image {
	border: 1px solid var(--border-clr);
}

.categories-section.categories-style-2 .categories-inner.no-image .categories-details {
	position: relative;
	transform: translateX(0);
	inset-inline: 0;
	bottom: 0;
}

.categories-section.categories-style-2 .categories-inner.no-image .categories-details .categories-title a {
	color: var(--clr-text);
}

.categories-section.categories-style-2 .categories-inner.no-image .categories-details span {
	color: var(--clr-text);
}

.categories-section.categories-style-2 .categories-inner:focus-within .categories-image img, .categories-section.categories-style-2 .categories-inner:hover .categories-image img {
	transform: scale(1.1);
}

.categories-section.categories-style-2 .categories-inner:focus-within .categories-details .categories-title a, .categories-section.categories-style-2 .categories-inner:hover .categories-details .categories-title a {
	color: #d7d7d7;
}

/* Archive Layout CSS
--------------------------------------------- */
.blog-archieve-layout.archive-style-3 {
	display: grid;
	gap: 30px;
}

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

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

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

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

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

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

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

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

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

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

.blog-archieve-layout.archive-style-3 article {
	margin: 0;
}

.blog-archieve-layout.archive-style-3 article:not(.has-post-thumbnail) .blog-post-container .blog-post-inner .blog-post-detail {
	padding: 20px;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-image {
	position: relative;
	line-height: 0;
	aspect-ratio: 1/0.7;
	overflow: hidden;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: all 0.3s ease;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail {
	padding: 16px 20px 20px 20px;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-categories {
	margin: 0;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-categories .cat-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-categories .cat-links a:first-child::before {
	display: none;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .entry-title {
	font-size: calc(var(--font-normal) - 2px);
	line-height: 1.2;
	padding-block-end: 10px;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .entry-title a {
	color: var(--clr-text);
	font-family: var(--font-heading);
	text-decoration: none;
	transition: all 0.3s ease-in;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .entry-title a:focus-within, .blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .entry-title a:hover {
	color: var(--primary-color);
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-excerpt {
	color: var(--clr-text);
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-excerpt p {
	font-size: var(--font-small);
	margin: 0;
}

.blog-archieve-layout.archive-style-3 article .blog-post-container .blog-post-inner .blog-post-detail .post-excerpt p:empty {
	padding-block-end: 0;
}