/* ===== CSS variable for blog pages ===== */
:root {
    --blog-main: #E90E02;
}

/* ===================================================================
   Header override: blog pages have no hero banner, so the header must
   always show dark text/logo regardless of scroll state.
   index.css sets .w_nav > li > a { color: #fff } for the transparent
   homepage header – we reset that here.
   =================================================================== */
.w_nav > li > a {
    color: #333;
}
.w_nav > li > a:hover {
    color: var(--blog-main);
}
/* logo and search icon: force dark filter (same as header.active in index.css) */
header .logo img {
    filter: brightness(0%) contrast(100%);
}
header .search_icon img {
    filter: brightness(0%) contrast(100%);
}
/* language switcher text */
header .language_cont span,
header .language_cont i {
    color: #333;
}

/* ===== Breadcrumb bar ===== */
.mbx_section {
    padding-top: 44px; /* offset absolute-positioned header */
    width: 100%;
    z-index: 99999;
    border-bottom: 1px solid #ececec;
    background: #f2f2f2;
}
.mbx_section .container { overflow: hidden; }
.mbx_section .mbx {
    display: inline-block;
    padding: 10px 0;
}
.mbx_section a,
.mbx_section p {
    font-size: 12px;
    color: #666;
    font-weight: normal;
    display: inline-block;
    text-transform: uppercase;
}
.mbx_section a:hover { color: var(--blog-main); }
.mbx_section .icon { color: var(--blog-main); margin-right: 5px; vertical-align: -1px; }
.mbx_section i.icon-angle-right { color: var(--blog-main); margin: 0 8px; }

/* ===== Blog page outer wrapper ===== */
.n_main { padding: 50px 0 60px; }
.page_bg { background: linear-gradient(#fff, #f5f5f5); }

/* ===== Two-column layout (sidebar + content) ===== */
.blog_page > .container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}
.blog_page .n_left {
    flex: 0 0 270px;
    max-width: 270px;
}
.blog_page .n_right {
    flex: 1;
    min-width: 0;
}

/* ===== Sidebar: Categories (left_nav / nav_h4) ===== */
.left_nav {
    overflow: hidden;
    border-radius: 10px;
    background: #f0f2f4;
}
.nav_h4 {
    background: var(--blog-main);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 15px;
    line-height: 28px;
}
.nav_h4::before {
    content: "\f03a";
    font-family: FontAwesome;
    float: right;
    color: #fff;
    line-height: 28px;
}
.nav_h4::after { content: none; }

/* mtree list – no mtree.js so force visible */
.blog_page .modules ul.mtree {
    opacity: 1;
    list-style: none;
    margin: 0;
    background: #f0f2f4;
}
.blog_page .modules ul.mtree li {
    list-style: none;
    background: #fff;
    margin-bottom: 4px;
}
.blog_page .modules ul.mtree > li > a {
    display: flex;
    align-items: center;
    height: 44px;
    padding-left: 10px;
    color: #333;
    font-size: 15px;
    transition: 0.2s;
}
.blog_page .modules ul.mtree > li:hover > a,
.blog_page .modules ul.mtree > li.mtree-open > a {
    background: var(--blog-main);
    color: #fff;
}

/* ===== Sidebar: section heading (left_h4) ===== */
.left_h4 {
    color: #222;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid #dedede;
    padding: 13px 18px;
}

/* ===== Sidebar: Latest Blog (blog_nav) ===== */
.blog_nav {
    margin-top: 20px;
    border: 1px solid #eee;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
}
.blog_nav .toggle_content { padding: 0 16px; }
.blog_latest_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog_latest_list li {
    background: #fff;
    border-bottom: 1px solid #efefef;
}
.blog_latest_list li:last-child { border-bottom: none; }
.blog_latest_list li a {
    font-size: 14px;
    color: #333;
    line-height: 22px;
    padding: 11px 0;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: 0.2s;
}
.blog_latest_list li a:hover {
    color: var(--blog-main);
    padding-left: 6px;
}
.blog_li_caret {
    color: #ccc;
    margin-right: 6px;
    font-size: 12px;
    font-style: normal;
    transition: 0.2s;
}
.blog_latest_list li a:hover .blog_li_caret { color: var(--blog-main); }

/* ===== Blog list: title ===== */
.blog .n_title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eee;
    color: #222;
}

/* ===== Pagination ===== */
.page_num {
    margin-top: 8px;
    padding: 18px 0 8px;
    text-align: center;
    border-top: 1px solid #eee;
}
.page_num .blog_pager a,
.page_num .blog_pager span {
    display: inline-block;
    min-width: 36px;
    padding: 7px 10px;
    margin: 0 2px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 3px;
    vertical-align: middle;
}
.page_num .blog_pager a {
    color: #333;
    border: 1px solid #ddd;
    background: #fff;
    transition: 0.2s;
}
.page_num .blog_pager a:hover {
    border-color: var(--blog-main);
    color: var(--blog-main);
}
.page_num .blog_pager span.redcss,
.page_num .blog_pager span[style*="color"] {
    font-weight: 600;
    color: #fff;
    background: var(--blog-main);
    border: 1px solid var(--blog-main);
}

/* ===== Article tags (detail page inline) ===== */
.tags_ul {
    padding: 12px 14px 12px 18px;
    margin: 20px 0;
    overflow: hidden;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 6px;
}
.tags_ul span {
    text-transform: capitalize;
    color: var(--blog-main);
    margin-right: 6px;
    font-size: 14px;
    font-weight: 600;
}
.tags_ul i {
    margin-right: 8px;
    color: var(--blog-main);
}
.tags_ul a {
    display: inline-block;
    padding: 4px 10px;
    text-transform: capitalize;
    background: #e8e8e8;
    font-size: 13px;
    margin: 2px 3px 2px 0;
    color: #555;
    border-radius: 4px;
    transition: 0.2s;
}
.tags_ul a:hover { background: var(--blog-main); color: #fff; }

/* ===== Prev / Next navigation ===== */
.blog_turn {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.blog_turn p { margin: 6px 0; }
.blog_turn p a {
    font-size: 14px;
    color: #555;
    transition: 0.2s;
}
.blog_turn p a:hover { color: var(--blog-main); }