/*
Theme Name: NewsTwenty
Theme URI: https://themeansar.com/free-themes/newstwenty-free-blog-magazine-elementor-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: NewsTwenty 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. NewsTwenty suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. NewsTwenty is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://newsup.themeansar.com/newstwenty/ and documentation at https://docs.themeansar.com/docs/newsup/
Version: 0.3
Requires at least: 6.7
Requires PHP: 7.4
Tested up to: 6.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: newsup
Text Domain: newstwenty
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

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

/* ============================================================
   DESIGN TOKENS — edit these to change the whole theme
   ============================================================ */
:root {
    /* --- Colors --- */
    --color-black:       #0a0a0a;   /* primary text / backgrounds */
    --color-white:       #ffffff;   /* inverse backgrounds */
    --color-gray-100:    #f5f5f5;   /* very light surface */
    --color-gray-200:    #e8e8e8;   /* borders, dividers */
    --color-gray-400:    #999999;   /* muted text, meta */
    --color-gray-700:    #333333;   /* secondary text */
    --color-accent:      #0a0a0a;   /* change this one value for an accent color */

    /* --- Typography --- */
    --font-display:      'Bricolage Grotesque', sans-serif;
    --font-body:         'DM Sans', sans-serif;

    --text-xs:    0.72rem;   /* 11.5px */
    --text-sm:    0.825rem;  /* 13px  */
    --text-base:  1rem;      /* 16px  */
    --text-lg:    1.125rem;  /* 18px  */
    --text-xl:    1.375rem;  /* 22px  */
    --text-2xl:   1.75rem;   /* 28px  */
    --text-3xl:   2.25rem;   /* 36px  */
    --text-4xl:   3rem;      /* 48px  */

    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-black:   900;

    --leading-tight:  1.1;
    --leading-snug:   1.3;
    --leading-normal: 1.6;

    /* --- Spacing --- */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   24px;
    --space-6:   32px;
    --space-7:   48px;
    --space-8:   64px;

    /* --- Shape --- */
    --radius-sm: 2px;   /* almost sharp */
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius:    var(--radius-sm);   /* default radius — very minimal for tech feel */

    /* --- Motion --- */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* --- Borders --- */
    --border-thin:   1px solid var(--color-gray-200);
    --border-mid:    2px solid var(--color-gray-200);
    --border-heavy:  3px solid var(--color-black);

    /* --- Shadows --- */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.14);

    /* Keep legacy var for parent theme compat */
    --bo-radius: var(--radius);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-black);
    background: var(--color-white);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); }
p a { text-decoration: underline; text-underline-offset: 3px; }
a:focus { outline: 2px solid var(--color-black); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--color-black);
    margin: 0;
}

/* ============================================================
   SCREEN READER
   ============================================================ */
.screen-reader-text:focus {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    clip: auto !important;
    clip-path: none;
    color: var(--color-black);
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    height: auto;
    left: var(--space-2);
    line-height: normal;
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    top: var(--space-2);
    width: auto;
    z-index: 100000;
}

/* ============================================================
   TICKER / FLASH NEWS BAR
   ============================================================ */
.mg-headwidget .mg-head-detail {
    border-bottom: var(--border-thin);
    padding: 0;
}
.mg-headwidget .mg-latest-news-sec .container-fluid {
    padding-right: 0;
    padding-left: 0;
}
.mg-latest-news .bn_title span { display: none; }
.mg-latest-news .mg-latest-news-slider { left: 130px; }
.mg-latest-news .bn_title {
    border-radius: var(--radius);
    height: 36px;
}
.mg-latest-news .bn_title .title {
    padding: 6px 14px;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    height: 36px;
    line-height: 1.5;
    font-family: var(--font-display);
}
.mg-latest-news,
.mg-latest-news .mg-latest-news-slider { height: 36px; }

/* Date / time */
.mg-headwidget .info-right li {
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: var(--weight-medium);
}
.mg-headwidget .info-right .time {
    padding: 2px var(--space-3);
    font-weight: var(--weight-bold);
    border-radius: var(--radius);
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
}

/* ============================================================
   HEADER SHELL  
   ============================================================ */
.mg-nav-widget-area-back .inner {
    border-width: 0 0 var(--border-thin);
    border-style: solid;
    padding: var(--space-4) 0;
}

/* CENTERED LOGO LAYOUT */
.mg-headwidget .mg-nav-widget-area .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mg-headwidget .mg-nav-widget-area .row > div:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: var(--space-4);
}
.mg-headwidget .mg-nav-widget-area .row > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* Branding */
.site-logo img { max-height: 56px; width: auto; margin: 0 auto; }
.site-branding-text { text-align: center; }
.site-title {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--space-1);
}
.site-title a { color: var(--color-black); }
.site-title a:hover { color: var(--color-black); opacity: 0.7; }
.site-description {
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    font-weight: var(--weight-medium);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.mg-headwidget .navbar-wp {
    border-top: var(--border-thin);
    padding: 0;
    justify-content: center;
}
.mg-headwidget .navbar-wp .navbar-nav.nav {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    justify-content: center;
}
.mg-headwidget .navbar-wp .navbar-nav > li > a {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-4) var(--space-4);
    color: var(--color-black);
    border-radius: 0;
    border-bottom: 3px solid transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mg-headwidget .navbar-wp .navbar-nav > li > a:hover,
.mg-headwidget .navbar-wp .navbar-nav > li > a:focus,
.mg-headwidget .navbar-wp .navbar-nav > .active > a,
.mg-headwidget .navbar-wp .navbar-nav > .active > a:hover {
    background: transparent;
    color: var(--color-black);
    border-bottom-color: var(--color-black);
}

/* Dropdown */
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu {
    border: var(--border-thin);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) 0;
    background: var(--color-white) !important;
    min-width: 200px;
}
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li a {
    padding: var(--space-3) var(--space-5);
    border: none !important;
    border-radius: 0 !important;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    transition: background var(--transition-fast);
}
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li a:hover {
    background: var(--color-gray-100) !important;
}
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li:last-child a,
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li:first-child a,
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li:only-child a {
    border-radius: 0 !important;
}
.mg-headwidget .navbar-wp .navbar-nav > li > .dropdown-menu li:not(:last-child) a {
    border-bottom: var(--border-thin) !important;
}

/* Search / Bell buttons */
.mg-search-box a, .btn-bell {
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-thin);
    border-radius: var(--radius);
    transition: all var(--transition-fast);
    margin-inline: 0 !important;
    padding: 0;
}
.desk-header {
    width: auto;
    justify-content: end;
    gap: var(--space-2);
}

/* Mobile nav */
.mobilehomebtn {
    border-radius: var(--radius);
    border: var(--border-thin);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    transition: all var(--transition-fast);
}
.navbar-toggler {
    border: var(--border-thin) !important;
    border-radius: var(--radius) !important;
    padding: var(--space-2) var(--space-3) !important;
}
.burger-line {
    height: 2px;
    width: 20px;
    display: block;
    transition: background var(--transition-fast);
}

/* ============================================================
   SECTION TITLES  
   ============================================================ */
.mg-sec-title { border: none; margin: 0 0 var(--space-5); }
.mg-sec-title h4 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 0 var(--space-3);
    margin: 0 0 var(--space-3);
    background: transparent;
    color: var(--color-black);
    border-bottom: var(--border-heavy);
    display: inline-block;
}
.mg-sec-title h4::before { display: none; }

/* ============================================================
   CATEGORY PILL
   ============================================================ */
.mg-fea-area .mg-blog-category a,
.mg-posts-modul-6 .mg-blog-category a,
.mg-posts-modul-1 .bottom .mg-blog-category a,
.mg-blog-post-3 .mg-blog-category a,
.small-post .mg-blog-category a,
.mg-header .mg-blog-category a {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: var(--weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 2px solid var(--color-black);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-black);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-fast);
}
.mg-fea-area .mg-blog-category a:hover,
.mg-posts-modul-6 .mg-blog-category a:hover,
.small-post .mg-blog-category a:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.mg-fea-area .mg-blog-category a::before,
.mg-posts-modul-6 .mg-blog-category a::before,
.mg-posts-modul-1 .bottom .mg-blog-category a::before,
.small-post .mg-blog-category a::before,
.mg-header .mg-blog-category a::before,
.mg-blog-post-3 .mg-blog-category a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ============================================================
   FEATURED AREA (HERO)
   ============================================================ */
.mg-fea-area .mg-posts-sec-post {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    gap: var(--space-6);
    align-items: start !important;
}
.mg-fea-area .mg-posts-sec-post .mg-sec-top-post {
    padding: 0 !important;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mg-fea-area .mg-posts-sec-post .mg-sec-top-post .title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    letter-spacing: -0.03em;
    line-height: var(--leading-tight);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mg-fea-area .mg-posts-sec-post .mg-sec-top-post .mg-blog-category { margin-bottom: 0; }
.mg-fea-area .mg-posts-sec-post .mg-sec-top-post .mg-blog-meta {
    order: 1;
    border-top: var(--border-thin);
    padding-top: var(--space-3);
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mg-fea-area .mg-posts-sec-post .mg-post-thumb {
    border-radius: var(--radius);
    height: 420px;
    overflow: hidden;
}
.mg-fea-area .mg-posts-sec-post .mg-post-thumb img {
    transition: transform var(--transition-slow);
}
.mg-fea-area .mg-posts-sec-post:hover .mg-post-thumb img {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .mg-fea-area .mg-posts-sec-post > .col-12.col-md-6 {
        flex: 0 0 63%;
        max-width: 63%;
        padding: 0;
    }
}

/* Trending side posts */
.mg-fea-area .trending-posts .mg-blog-post-box {
    border: none;
    box-shadow: none;
    background: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: 0;
    padding-bottom: var(--space-5);
    border-bottom: var(--border-thin);
}
.mg-fea-area .trending-posts .mg-blog-post-box:last-child { border-bottom: none; }
.mg-fea-area .trending-posts .mg-blog-post-box .small {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mg-fea-area .trending-posts .mg-blog-post-box .small .mg-blog-meta {
    order: 1;
    border-top: var(--border-thin);
    padding-top: var(--space-2);
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mg-fea-area .trending-posts .mg-post-thumb {
    height: 180px;
    border-radius: var(--radius);
    overflow: hidden;
}
.mg-fea-area .trending-posts .mg-blog-post-box .small > p { margin-bottom: var(--space-2); }

/* ============================================================
   MAIN BLOG POST LIST (modul-6)
   ============================================================ */
.homemain { margin-bottom: var(--space-6); }
.homemain .owl-item { padding: 0 var(--space-2); }

.mg-posts-sec-inner .mg-posts-sec-post {
    padding: 0;
    margin-bottom: var(--space-5);
    border-radius: var(--radius);
    border: var(--border-thin);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.mg-posts-sec-inner .mg-posts-sec-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.mg-posts-sec-inner .mg-posts-sec-post .col-md-6:has(.mg-post-thumb) {
    padding: 0;
    height: -webkit-fill-available;
    height: -moz-available;
}
.mg-posts-modul-6 .mg-post-thumb {
    margin-right: 0;
    min-height: 280px;
    height: -webkit-fill-available;
    height: -moz-available;
    overflow: hidden;
}
.mg-posts-modul-6 .mg-post-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    transform-origin: center;
    transition: transform var(--transition-slow);
    z-index: 0;
}
.mg-posts-modul-6 .mg-posts-sec-post:hover .mg-post-thumb::after { transform: scale(1.05); }
.mg-posts-modul-6 .mg-sec-top-post {
    padding: var(--space-5) !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mg-posts-modul-6 .mg-sec-top-post .mg-blog-meta {
    order: 1;
    border-top: var(--border-thin);
    padding-top: var(--space-3);
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mg-posts-modul-6 .mg-sec-top-post .mg-blog-meta .auth {
    flex: 1;
    order: -1;
}
/* Post title size in list */
.mg-posts-modul-6 .mg-sec-top-post .title {
    font-size: var(--text-xl);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    line-height: var(--leading-snug);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.mg-wid-title { margin: 0; border: none; }
.mg-wid-title .wtitle,
.mg-sidebar .mg-widget .wtitle {
    padding: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: var(--border-heavy);
    display: block;
    margin-bottom: var(--space-4);
    background: transparent;
    color: var(--color-black);
}
.mg-wid-title .wtitle::before { display: none; }

.mg-sidebar .mg-widget {
    padding: 0;
    border-radius: 0;
    border: none;
    background: none;
    border-bottom: var(--border-thin);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
}
.mg-sidebar .mg-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.mg-sidebar .mg-sec-title,
.mg-sec-title,
.mg-sidebar .widget_featured_post .mg-sec-title { border: none; margin: 0; }

.wp-block-search .wp-block-search__label,
.mg-widget .wp-block-group h2 {
    border: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-black);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    color: var(--color-black);
}
.wp-block-search .wp-block-search__label::before,
.mg-widget .wp-block-group h2::before,
.mg-sidebar .mg-widget .wtitle::before,
.mg-sec-title h4::before,
footer .mg-widget h6::before,
.wp-block-search .wp-block-search__label::after,
.mg-widget .wp-block-group h2::after { display: none; }

.wp-block-search .wp-block-search__input {
    border-radius: var(--radius);
    margin-bottom: 0;
    border: var(--border-thin);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
    outline: none;
}
.wp-block-search .wp-block-search__input:focus { border-color: var(--color-black); }

.mg-sidebar .mg-widget ul,
.mg-sidebar .mg-widget ol { margin: 0; }

/* Sidebar small posts */
.mg-sidebar .mg-posts-sec .small-post {
    box-shadow: none;
    padding: 0;
    background: transparent;
}
.mg-sidebar .mg-posts-modul-2 .small-post {
    flex-direction: row-reverse;
    border-bottom: var(--border-thin);
    padding-bottom: var(--space-4);
}
.mg-sidebar .mg-posts-sec .small-post .img-small-post { border-radius: var(--radius); }
.mg-sidebar .mg-posts-modul-2 .mg-posts-sec-inner { gap: var(--space-4); }

/* ============================================================
   YOU MISSED SECTION
   ============================================================ */
.missed-section .missed-inner {
    padding: 0;
    background: transparent;
}
.missed-section .missed-inner .mg-blog-post-3 { border-radius: var(--radius); }
.widget_featured_post .mg-blog-post.lg { border-radius: var(--radius); }

/* ============================================================
   FOOTER
   ============================================================ */
footer .overlay { background: transparent; }
footer .mg-widget h6 {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-black);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 var(--space-4);
}
footer .mg-widget h6::after,
footer .mg-widget h6::before { display: none; }

footer .mg-posts-sec { padding-right: 15px; padding-left: 15px; }
footer .mg-posts-sec .mg-posts-sec { padding: 0; }
footer .small-post { padding: 0; box-shadow: none; }

.wp-block-tag-cloud a,
.mg-widget .wp-block-tag-cloud a {
    border-radius: var(--radius);
    background: transparent;
    text-decoration: none;
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-3);
    border: var(--border-thin);
    transition: all var(--transition-fast);
}
.wp-block-tag-cloud a:hover,
.mg-widget .wp-block-tag-cloud a:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .mobilehomebtn { border-radius: var(--radius); }
    .mg-headwidget .navbar-wp .navbar-nav > li > a {
        padding: var(--space-3) var(--space-4);
        border-bottom: var(--border-thin);
    }
}
@media (max-width: 767px) {
    .mg-latest-news .mg-latest-news-slider { left: 0; }
    .mg-posts-modul-6 .mg-sec-top-post { padding: var(--space-4) !important; }
    .mg-fea-area .mg-posts-sec-post {
        display: flex;
        flex-direction: column;
    }
    .mg-fea-area .mg-posts-sec-post .mg-sec-top-post { order: 1; }
    .mg-fea-area .mg-posts-sec-post > .col-12.col-md-6 { padding: 0; }
    .mg-fea-area .mg-posts-sec-post .mg-post-thumb { height: 260px; }
    .mg-fea-area .mg-posts-sec-post .mg-sec-top-post .title { font-size: var(--text-2xl); }
    #homemain { margin-bottom: var(--space-7); }
    footer .mg-footer-copyright .nav-link { padding: 0; }
}