/*!
Theme Name: Worldwide News
Theme URI: https://adorethemes.com/downloads/worldwide-news/
Author: Adore Themes
Author URI: https://adorethemes.com/
Description: Worldwide News is an attractive and contemporary WordPress theme designed for news magazines. Its sleek, responsive layout makes it ideal for various creative websites, including news, newspapers, blogs, and gaming magazines. With its user-friendly features, such as pre-built demos, widget customization, and live WordPress customizer, setting up the theme is a breeze. Moreover, the theme's SEO-friendly codes ensure better visibility and increased traffic, while its clean and secure HTML codes guarantee smooth functionality across different platforms. You can preview the theme demo here: https://demo.adorethemes.com/worldwide-news/
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.4
Tested up to: 6.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: express-news
Text Domain: worldwide-news
Tags: custom-background, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, left-sidebar, right-sidebar, blog, one-column, portfolio, photography, theme-options, threaded-comments, translation-ready

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

Worldwide News 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
========================================================================== */
/*:root {
	--primary-color: #dd3333;
}*/

/* Fixed header CSS
========================================================================== */
.adore-header.fix-header {
	background-color: var(--color-background);
}

/* Banner CSS
========================================================================== */
.banner-grid-wrapper{
	display: flex;
	flex-wrap: wrap;
	margin-inline: -10px;
	align-items: flex-start;
}
@media ( min-width: 1025px ){
	.banner-grid-wrapper .post-item {
		position: sticky;
		top: 30px;
		align-self: flex-start;
	}
}
.banner-grid-wrapper .post-item{
	padding-inline: 10px;
}
.banner-grid-wrapper .post-item:nth-child(2){order:1;}
.banner-grid-wrapper .post-item:nth-child(1){order:2;}
.banner-grid-wrapper .post-item:nth-child(3){order:3;}

.banner-grid-wrapper .post-item:nth-child(2),
.banner-grid-wrapper .post-item:nth-child(3){
	width: 25%;
}
.banner-grid-wrapper .post-item:nth-child(1){
	width: 50%;
}
.banner-grid-wrapper .post-item:nth-child(1) .post-item-image{
	height: 380px;
}
.banner-grid-wrapper .post-item .post-item-image a img{
	aspect-ratio: unset;
}
.banner-grid-wrapper .post-item:nth-child(1) .post-item-content .entry-title{
	font-size: var(--font-size-lg);
}
.banner-grid-wrapper .post-item:nth-child(1) .post-item-content .post-exerpt{
	column-count: 2;
}
.banner-grid-wrapper .post-item .post-item-content .post-exerpt::first-letter{
	font-size: var(--font-size-xl);
	text-transform: uppercase;
	font-weight: bold;
}
@media (max-width: 767px) {
	.banner-grid-wrapper .post-item:nth-child(1),
	.banner-grid-wrapper .post-item:nth-child(2),
	.banner-grid-wrapper .post-item:nth-child(3){
		width: 100%;
	}
	.banner-grid-wrapper .post-item:nth-child(2) .post-item-content .post-exerpt{
		column-count: 1;
	}
	.banner-grid-wrapper .post-item:nth-child(1){order:1;}
	.banner-grid-wrapper .post-item:nth-child(2){order:2;}
	.banner-grid-wrapper .post-item:nth-child(3){order:3;}
}

/* Posts Tab CSS
========================================================================== */
.posts-tabs-widget{
	container-type: inline-size;
}
.posts-tabs-widget .post-tab-container {
	border-top: 1px solid rgba(var(--color-text-rgb), 0.15);
	border-inline-start: 1px solid rgba(var(--color-text-rgb), 0.15);
}
.posts-tabs-widget .post-tab-container .post-item{
	padding: 10px;
	border-bottom: 1px solid rgba(var(--color-text-rgb), 0.15);
	border-inline-end: 1px solid rgba(var(--color-text-rgb), 0.15);
}
.posts-tabs-widget .post-tabs-wrapper .post-tabs-head {
	position: relative;
	margin-bottom: 0;
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	position: relative;
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li {
	outline: none;
	flex: 1;
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a {
	font-size: var(--font-size-sm);
	font-weight: bold;
	color: #fff;
	background-color: var(--primary-color);
	padding: 8px 12px;
	text-decoration: none;
	outline: none;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(var(--color-text-rgb), 0.15);
	border-bottom: 0;
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a.inactive {
	color: var(--color-text);
	background-color: transparent;
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a:not(.inactive):focus,
.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a:not(.inactive):hover {
	color: #fff;
	background-color: var(--primary-color);
}

.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a:hover,
.posts-tabs-widget .post-tabs-wrapper .post-tabs-head .post-tabs li a.inactive:hover {
	color: var(--primary-color);
	outline: none;
}

.posts-tabs-widget .post-item .post-item-image a img {
	aspect-ratio: 1/0.7;
}

@container (max-width: 600px) {

	.posts-tabs-widget .post-item .post-item-image {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.posts-tabs-widget .post-item .post-item-image a img {
		aspect-ratio: 1;
	}

	.posts-tabs-widget .post-item .post-item-content {
		padding-block: 0;
		padding-inline-end: 0;
		padding-inline-start: 10px;
	}

	.posts-tabs-widget .post-item .post-item-content .entry-title{
		font-size: var(--font-size-sm);
	}

	.posts-tabs-widget .post-tabs-wrapper .post-tab-content-wrapper .post-tab-container .post-item .post-categories,
	.posts-tabs-widget .post-tabs-wrapper .post-tab-content-wrapper .post-tab-container .post-item .post-exerpt,
	.posts-tabs-widget .post-tabs-wrapper .post-tab-content-wrapper .post-tab-container .post-item .post-btn {
		display: none;
	}
}