/*
Theme Name: Blogmode
Theme URI: https://themeansar.com/free-themes/blogmode-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogmode is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogmode is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogmode is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogarise/blogmode/ and documentation at https://docs.themeansar.com/docs/blogarise/
Version: 0.3
Requires PHP: 7.4
Requires at least: 6.6
Tested up to1: 6.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: blogarise
Text Domain: blogmode
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Blogmode WordPress Theme is child theme of Newsup, Copyright 2023 Themeansar
Blogmode is distributed under the terms of the GNU General Public License v3

Blogmode is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
:root {
    --bo-color: #303030;
    --bxbr: 1px solid var(--bo-color);
    --bxbra: 8px;
    --bxsh: 8px 8px 0px var(--bo-color);
    --bxshover: 8px 8px 0px var(--bo-color);
    --bstras: 0 4px 60px 0 rgba(0, 0, 0, 0.2);
    --headFont: 'poppins', sans-serif;
    --bodyFont: 'Roboto', sans-serif;
}
a:focus {
    outline: 1px solid;
}
::selection{
    background-color: #2E2E2E;
    color: var(--pri-color);
}
.bs-widget .wp-block-search__label, .widget_block h2, .bs-widget-title .title{
    font-weight: 600;
    border-width: 1px;
}
.navbar-wp .navbar-nav>li>a{
    font-family: var(--bodyFont);
}
/* Ticker */
.mg-latest-news .bn_title .title{
    font-size: 16px;
}
.mg-latest-news .mg-latest-news-slider a{
    font-size: 15px;
}
/* Social Icons */
.bs-head-detail .bs-social li a i{
    width: auto;
    height: auto;
    line-height: 1.3;
    border-radius: 0;
}
.bs-head-detail .bs-social li a i{
    font-size: 18px;
    border: none;
}
.bs-head-detail .bs-social{
    gap: 8px;
}
/* Right Nav */
.bs-headtwo .desk-header{
    gap: 20px;
}
.right-nav a, .switch, .switch .slider::before {
    width: auto;
    height: auto;
    border: 0;
    font-size: 18px;
    border-radius: 0;
    overflow: visible;
}
.switch .slider::before{
    left: 0;
    bottom: -8px;
}
.desk-header .msearch {
    padding: 0px;
}
.desk-header.right-nav .switch{
    display: none;
}
/* Featured Slider */
.mainfeatured {
    padding-top: 50px;
}
.homemain .bs-blog-post .title{
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.list-view .list-blog.bs-blog-post{
    grid-template-columns: repeat(5, 1fr);
    height: 400px;
    align-items: center;
}
.list-view .list-blog .bs-blog-thumb{
    grid-column: span 3/3;
}
.list-view .list-blog.bs-blog-post .small{
    grid-column: span 3/6;
}
.list-blog.bs-blog-post{
    padding: 20px;
}
.list-view  .bs-blog-post .title{
    font-size: 36px;
}
.list-blog .bs-blog-thumb{
    border: none;
}
.bs-blog-post .title{
    font-weight: 600;
    font-size: 22px;
}
/* trending */
.mainfeatured .trending-pots {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.mainfeatured .trending-pots .bs-blog-post.three.md {
    width: 100%;
    height: 188px;
}
/* feature story */
.featured-story-slider .swiper-slide, .homemain .swiper-slide{
    padding-right: 8px;
}
.featured-story-slider .bs-blog-post{

}
.featured-story-slider .bs-blog-post .title{
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
}
.featured-story-slider .bs-blog-post .bs-blog-thumb { 
    height: 180px;
}
/* hover effect */
.bs-blog-post {transition: 0.35s;}
.bs-blog-post {
    box-shadow: var(--bxshover);
}
.bs-blog-category a{
    box-shadow: none;
    border-width: 1px;
    text-transform: uppercase;
    font-size: 12px;
}
.bs-blog-category a:hover, .bs-blog-category a:focus{
    box-shadow: 2px 2px 0px var(--bo-color);
    transform: translate(-2px, -2px);
}
.navigation.pagination .nav-links .page-numbers, .navigation.pagination .nav-links a{
    box-shadow: none;
    border-width: 1px;
}
.bs-blog-post .title a {
    color: inherit;
    background-repeat: no-repeat;
    background-position: left 100%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    line-height: 1.4;
}
.bs-blog-post .title a:hover {
    background-size: 100% 2px;
}
.bs-blog-meta, .bs-blog-meta a {
    font-weight: 500;
}
.bs_upscr, .bs .swiper-button-prev, .bs .swiper-button-next, .comments-area .reply a, button, input[type="button"], input[type="submit"], input[type="reset"]{
    border-width: 1px;
}
.bs .swiper-button-prev:hover{
    box-shadow: 3px 0px 0px var(--bo-color);
    transform: translate(-3px, 0px);
}
.bs .swiper-button-next:hover{
    box-shadow: -3px 0px 0px var(--bo-color);
    transform: translate(3px, 0px);
}
/*  */
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: var(--bo-radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
/* media */
@media(max-width: 767px){
    .list-view .list-blog.bs-blog-post{
        display: flex;
        flex-direction: column;
        height: auto;
    }
    .list-view .bs-blog-post .title{
        font-size: 26px;
    }
    .list-view .list-blog.bs-blog-post .bs-blog-meta {
        justify-content: center;
    }
    .mainfeatured .trending-pots{
       margin-bottom: 30px; 
    }
    .featured-story-slider .bs-blog-post .title{
        text-align: start;
    }
}