/*
Theme Name: NewsFlux
Theme URI: 
Author: Themeansar
Author URI: https://themeansar.com
Description: NewsFlux 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. NewsFlux 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. NewsFlux is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://newsup.themeansar.com/newsflux/ and documentation at https://docs.themeansar.com/docs/newsup/
Version: 0.1
Requires PHP: 7.4
Requires at least: 6.0
Tested up to: 7.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: newsup
Text Domain: newsflux
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

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

NewsFlux 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{
	--headFont: "Mona Sans", Sans-serif;
	--bodyFont: "Inter Tight", Sans-serif;
    --radius: 10px;
    --catWeight: 500;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    letter-spacing: 0;
}
/*---------------------------------------
	1. Header
-----------------------------------------*/
.mg-nav-widget-area{
    .info-right{    
        float: unset;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 5px;
    }
}
.mg-menu-full{
    .info-left{
        display: block;
        margin: 0;
        padding: 0;
        li{
            display: inline-flex;
            padding: 0;
            align-items: center;
            gap: 10px;
            row-gap: 5px;
            flex-wrap: wrap;
            span.time {
                padding: 2px 4px;
                border-radius: 2px;
                font-size: 14px;
                font-weight: var(--weight2);
                line-height: 1.4;
                margin-inline-end: 12px;
            }
        }
    }
}
/*---------------------------------------
	1. Featured Slider
-----------------------------------------*/
/* 1.1 Right */
.mg-editor-posts{
    display: flex;
    flex-direction: column;
    gap: 20px;
    .mg-editor-featured-post{
        margin-bottom: 5px;
        border-radius: var(--radius);
        overflow: hidden;
        .mg-blog-inner{
            padding: 15px 20px;
        }
        .mg-blog-post-3.minh{
            height: 220px;
        }
    }
    .mg-editor-post.small-post{
        padding: 0;
        box-shadow: none;
        background: none;
        .img-small-post{
            border-radius: calc(var(--radius)/2);
            width: 120px;
            img{
                transition: all 0.3s;
            }
        }        
        &:hover{
            .img-small-post img{
                transform: scale(1.1);
            }
        }
    }
}
/* 1.2 Center */
.homemain{
    .mg-blog-post.lg {
        height: clamp(300px, 116.28vw - 602.33px, 550px);
    }
    .mg-blog-post .bottom{
        text-align: center;
        align-items: center;
        padding: clamp(25px, 6.98vw - 29.14px, 40px);
        .title{
            font-size: clamp(24px, 6.51vw - 26.53px, 38px);
        }
    }
    .mg-blog-category, .mg-blog-meta{
        justify-content: center;
    }
}
/* 1.3 Left */
.mg-latest-post{
    display: flex;
    flex-direction: column;
    gap: 20px;
    .mg-latest-post-item{
        padding: 10px;
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
        gap: 16px;
        .mg-latest-post-image{
            border-radius: var(--radius);
            position: relative;
            overflow: hidden;
            height: 158px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                transition: all 0.3s;
            }
            .mg-blog-category{
                position: absolute;
                top: 10px;
                left: 10px;
            }
        }
        &:hover{
            .mg-latest-post-image img{
                transform: scale(1.05);
            }
        }
        .title{
            margin-bottom: 0.5rem;
            display: block;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
/*---------------------------------------
    1. Common
-----------------------------------------*/
.owl-carousel .owl-controls .owl-buttons div{
    border-radius: 50%;
    font-size: 19px;
}
.mg-blog-post-3.minh, .mg-blog-post.lg, .missed-inner{
    border-radius: var(--radius);
}
.mg-blog-category a{
    font-size: 12px;
    line-height: 22px;
    padding: 1px 10px 0px 10px;
}
.mg-blog-post-3.minh, .homemain .mg-blog-post.lg{
    &::after{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: inherit;
        background-size: cover;
        transform-origin: center;
        transition: transform 0.4s ease-in-out;
        z-index: 0;
    }
    &:hover::after{
        transform: scale(1.05);
    }
    .mg-blog-inner, .bottom{
        z-index: 1;
    }
}
/*---------------------------------------
    Single Posts Page
-----------------------------------------*/
.mg-blog-post-box{
    background: none;
    box-shadow: none;

    &:has(.single-featured-image) .mg-header, .mg-header{
        padding: 20px 0;
    }
    .small.single{
        padding: 20px 0 40px;
    }
    .mg-info-author-block{
        background: none;
    }
    .single-featured-image{
        border-radius: calc(var(--radius)/2);
    }
}
.mg-info-author-block, .mg-featured-slider, .comments-area.mg-card-box{
    border-radius: var(--radius);
    box-shadow: none;
}
/*---------------------------------------
    1. Pages
-----------------------------------------*/
.mg-card-box{
    padding: 0;
    box-shadow: none;
    background: none;
}
/*---------------------------------------
    1. Index Latest Posts
-----------------------------------------*/
.mg-posts-sec-inner{
    .mg-posts-sec-post{
        box-shadow: none;
        margin-bottom: 0;
        background: none;
        border: none;
        gap: 25px;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        &:nth-last-child(2) {
            border-bottom: none;
        }
        .col-12.col-md-6{
            padding: 0 !important;
            overflow: hidden;
            border-radius: var(--radius);
        }
        .mg-post-thumb.md{
            margin-right: 0;
            height: 260px;
            border-radius: var(--radius);
            transition: all 0.3s;
        }
        &:hover{
            .mg-post-thumb.md{
                transform: scale(1.05);
            }
        }
        .title{
            font-size: 26px;
        }
        .mg-sec-top-post{
            padding: 0 !important;
            display: flex;
            flex-direction: column;
            .mg-blog-meta{
                order: 2;
            }
        }
    }
}
/*---------------------------------------
    1. Sidebars
-----------------------------------------*/
.mg-sidebar{
    padding-inline-start: clamp(0px, (100vw - 776px) * 999, 20px);;
    .mg-widget{
        padding-bottom: 20px;
        border-radius: var(--radius);
    }
}
/*---------------------------------------
    1. Responsive
-----------------------------------------*/
@media (max-width:991px) {
    .mg-fea-area{
        .featured-slider{
            max-width: 100%;
            flex: 0 0 100%;
            order: 1;
        }
        .mg-editor-posts, .mg-latest-post{
            max-width: 50%;
            flex: 0 0 50%;
            order: 2;
        }
    }
}
@media (max-width:767px) {
    .mg-fea-area{
        .mg-editor-posts, .mg-latest-post{
            max-width: 100%;
            flex: 0 0 100%;
        }
    }
    .mg-posts-sec-inner{
        .mg-posts-sec-post{
            display: flex;
            flex-direction: column;
        }
    }
    .mg-nav-widget-area{
        .align-items-center.row{
            gap: 16px;
        }
        .info-right{
            justify-content: center;
        }
    }
}