/*
Theme Name: 	   ThemeOne
Text Domain: 	   themeone
Version:            1.0.70
Tested up to:       6.8
Requires at least:  4.7
Requires PHP:       7.0
Author:             M. Diouane
Author URI:         
Description:        NewsMunch is a fast, clean, Best Responsive News Magazine WordPress theme. NewsMunch 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. With its modern and clean design, NewsMunch offers a visually appealing layout that is easy to navigate, making it ideal for delivering content to your readers. This theme comes equipped with a range of customizable options, custom widgets, and color schemes, allowing you to tailor your website to your specific needs and branding. It also supports various post formats, making it easy to present a variety of content types, from articles and videos to images and galleries. NewsMunch is optimized for speed and SEO, ensuring that your website loads quickly and ranks well in search engine results. Its responsive design ensures that your content looks great on all devices, whether it's a desktop computer, tablet, or smartphone. NewsMunch demos https://preview.desertthemes.com/newsmunch/
Tags:               blog, e-commerce, entertainment, grid-layout, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-logo, custom-menu, featured-images, featured-image-header, flexible-header, post-formats, rtl-language-support, translation-ready, theme-options, threaded-comments, footer-widgets
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html

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

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* Base Styles */
html, body {
    width: 100%;
    overflow-x: hidden;
}
body {
    font-family: "Almarai", sans-serif;
    font-weight: 700;
    font-size: 18px;
       margin: 0;
    padding: 0;
}


/* Header Styles */
.header-top {
    background-color: #216153;
    padding: 5px 0;
    border-bottom: 1px solid #e1e1e1;
    height: 30px;
    overflow: hidden;
}

.header-top .container {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    position: relative;
}

.posts-slider {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.slide {
    width: 100%;
    transition: transform 0.3s ease;
    line-height: 20px;
    font-size: 13px;
    padding: 0;
    margin-bottom: 0;
    color:#fff;
    display: flex;
    align-items: right;
    justify-content: right;
}

.slider-controls {
    display: flex;
    gap: 5px;
    margin-left: 10px;
}

.slider-control {
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    transition: color 0.3s ease;
}

.slider-control:hover {
    color: #a3e635;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: center;
    height:110px;
}

.header-main .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
 
    .container {
        width: 100%;
        margin:0 auto;
    }
 
/* Section 1 layout */
.sec{
    margin:15px 0
}

/* Featured post fixes */
#sec_1 .featured-post {
    position: relative;
    z-index: 1;
}

#sec_1 .featured-post .post-wrapper {
    display: block;
    position: relative;
    border-radius:8px;
}

#sec_1 .featured-post .thumbnail-container {
    position: relative;
    display: block;
    overflow: visible;
}

#sec_1 .featured-post .entry-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

#sec_1 .featured-post img {
    display: block;
    width: 100%;
    height: auto;
}
.sec .container .innr {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: nowrap;
}

.sec .blocks-content .recent-posts {
    display: flex;
    gap: 10px;
    flex-direction:column;
    min-width: 0; /* Prevents flex item from overflowing */
}

.sec .sidebar-1 {
    flex: 1;
    min-width: 250px; /* Ensures sidebar has a minimum width */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .sec .container .innr {
        flex-direction: column;
    }

    .sec .blocks-content,
    .sec .sidebar-1 {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.header-social {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .header-main .header-social {
        display: none !important;
        visibility: hidden !important;
    }
}

.site-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.theme-toggle {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

#dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 5px;
    position: relative;
    width: 40px;
    height: 40px;
}

#dark-mode-toggle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 24px;
}

#dark-mode-toggle .light-icon {
    display: block;
}

#dark-mode-toggle .dark-icon {
    display: none;
}

.dark-mode #dark-mode-toggle .light-icon {
    display: none;
}

.dark-mode #dark-mode-toggle .dark-icon {
    display: block;
}

#dark-mode-toggle:hover {
    transform: scale(1.2);
}

#dark-mode-toggle:hover i {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Dark mode styles */
html body.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

html body.dark-mode,
html body.dark-mode .site-main,
html body.dark-mode .site-main *:not(a) {
    color: inherit !important;
}

html body.dark-mode .header-bottom {
    background-color: #0a2e1a !important;
}

html body.dark-mode .main-navigation a {
    color: #e0e0e0 !important;
}

/* Force dark mode on all elements */
html body.dark-mode * {
    background-color: inherit !important;
    color: inherit !important;
    border-color: currentColor !important;
}

/* Ensure all text elements inherit dark mode colors */
body.dark-mode,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode a:not(.social-links-menu a) {
    color: #ffffff !important;
}

/* Dark mode transitions */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header-social {
    position: absolute;
    left: 20px;
}

.custom-logo {
    width: 210px;
    height: auto;
}

.header-social {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.social-links-menu {
    display: flex;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-links-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #09411e;
    font-size: 24px;
    transition: all 0.3s ease;
}

.social-links-menu a:hover {
    color: #a3e635;
    transform: translateY(-3px);
}

/* Social platform specific icons */
.social-links-menu a[href*="facebook.com"]::before {
    content: "\ecba"; /* ri-facebook-circle-fill */
    font-family: remixicon;
}

.social-links-menu a[href*="twitter.com"]::before,
.social-links-menu a[href*="x.com"]::before {
    content: "\eeb6"; /* ri-twitter-x-fill */
    font-family: remixicon;
}

.social-links-menu a[href*="instagram.com"]::before {
    content: "\ee66"; /* ri-instagram-line */
    font-family: remixicon;
}

.social-links-menu a[href*="youtube.com"]::before {
    content: "\ef96"; /* ri-youtube-fill */
    font-family: remixicon;
}

.social-links-menu a[href*="linkedin.com"]::before {
    content: "\eea9"; /* ri-linkedin-fill */
    font-family: remixicon;
}

.social-links-menu .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Main Navigation Styles */
.header-bottom {
    background-color: #26673d; 
}

.main-navigation {
    width: 100%;
    padding: 0;
}

.main-navigation ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.main-navigation li {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.main-navigation a {
    padding: 10px 15px;
    margin: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 8px ;
    transition: all 0.3s ease;
    display: block;
    font-size: 14px;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: #a3e635;
}

.main-navigation .current-menu-item > a {
    color: #fff;
    background: #08411e
}

/* Dropdown menu styles */

/* Post content styling */

/* Positioning header over thumbnail */
.thumbnail-container {
    position: relative;
    overflow: hidden;
}

.thumbnail-container .post-thumbnail {
    margin-bottom: 0;
}

.entry-header {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    padding: 15px 10px 10px;
    color: #fff;
    z-index: 2;
}

.entry-header .entry-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.entry-header .entry-title a {
    color: #fff;
    text-decoration: none;
}

.entry-header .entry-meta {
    font-size: 0.7rem;
    margin: 0 0 5px;
    opacity: 0.8;
}

.posted-on time {
    color: #f0f0f0;
}

/* Featured post */
.featured-post .entry-header .entry-title {
    font-size: 1.4rem;
}

.post-thumbnail {
    margin-bottom: 0.8em;
}

.entry-title {
    font-size: 1.2rem;
    margin: 0.3em 0;
    line-height: 1.4;
}

.entry-title a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-title a:hover {
    color: #1a472a;
}

.entry-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.8em;
}

.posted-on time {
    font-style: italic;
}

/* Featured post specific styles */
.featured-post .entry-title {
    font-size: 1.8rem;
    margin-bottom: 0.5em;
}


/* Posts grid styling */
.posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.grid-post {
    flex: 0 0 calc(33.333% - 3.333px); /* Account for the gap to make exactly 3 columns */
    margin-bottom: 0; /* Override previous margin */
    position: relative;
}

/* Category Archive Specific Styles */
.archive-content{
    display:flex
}
.category-archive .posts-grid {
    flex:3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}
.category-archive .archive-sidebar {
    padding:15px;
     flex:1
}
.category-archive .post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.category-archive .post-card:hover {
    transform: translateY(-5px);
}

.category-archive .post-thumbnail {
    height: 200px;
    overflow: hidden;
}

.category-archive .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.category-archive .post-card:hover .post-thumbnail img {
    transform: scale(1.05);
}

.category-archive .post-meta {
    padding: 10px 15px 0;
    color: #666;
    font-size: 0.9em;
}

.category-archive .post-title {
    padding: 0 15px 15px;
    margin: 0;
    font-size: 1.1em;
}

.category-archive .post-title a {
    color: #333;
    text-decoration: none;
}

.category-archive .post-title a:hover {
    color: #216153;
}

.category-archive .page-header {
 margin: 15px 0;
    padding-right: 50px; /* Space for category name */
}

.category-archive .category-name {
    background: #216153;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .category-archive .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .category-archive .page-header {
        padding-right: 0;
    }
    
    .category-archive .category-name {
        position: static;
        display: inline-block;
        margin-top: 10px;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .posts-grid {
        flex-direction: column;
    }

    .grid-post {
        flex: 1 0 100%;
        margin-bottom: 10px;
    }
}



/* Thumbnail styling */
 .post-thumbnail {
    margin: 0 !important;
    display: block;
    overflow: hidden;
    border-radius: 8px; /* Added border radius */
}

.post-thumbnail img,
.wp-post-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Hover effects for post items */
.post-wrapper {
    position: relative;
    overflow: hidden;
}

/* Hover effect on thumbnail images */
.thumbnail-container:hover .post-thumbnail img {
    transform: scale(1.2);
}

/* Hover effect on entry title */
.entry-title a:hover {
    color: #a3e635;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
/* Add this to your style.css file */

.thumbnail-container {
    position: relative;
    overflow: hidden;
}

.thumbnail-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Adjust this value to control how far up the gradient goes */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none; /* Allows clicks to pass through to elements below */
}

/* Ensure the entry header stays above the gradient */
.entry-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding: 15px 10px 10px;
    color: #fff;
    z-index: 2; /* Higher than the gradient */
}
.grid-post .entry-header a, .grid-post .posted-on time{ color:#000}
.grid-post .entry-header {
    position: relative;
  background: #fff;
    padding: 15px 10px 10px;
    color: #000;
    border: 1px solid #e1e1e1;
    z-index: 2; /* Higher than the gradient */
}
.grid-post .post-thumbnail {
    border-radius:8px 8px 0 0 ; /* Added border radius */
}
 
.post-category {
    position: absolute;
    top: 10px;
    right: 4px;
    background: #2d2d2d;
    color: #fff;
    z-index: 9;
    border-radius: 5px;
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1rem;
}

.featured-post:hover .post-thumbnail img {
    transform: scale(1.2);
}

.header-container {
    position: relative;
    height: 100%;
}

.featured-post .entry-title {
    transition: transform 0.3s ease;
}

.featured-post:hover .entry-title,
.featured-post a:hover ~ .entry-title {
    transform: translateY(-10px);
    will-change: transform;
}

.featured-post:hover .entry-meta {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-post .entry-header {
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}

.featured-post .entry-meta {
    transition: opacity 0.3s ease;
}

.grid-post .post-thumbnail {
    margin-bottom: 0.8em;
}


.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    flex-direction: column;
    gap: 0;
    z-index: 999;
}

.main-navigation ul ul a {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.main-navigation li:hover > ul {
    display: flex;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 5px;
    color: #333;
}

.mobile-menu-container {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #1a472a;
    z-index: 9999;
    transition: right 0.3s ease;
    overflow: hidden;
    box-shadow: none;
}

.mobile-menu-container[data-mobile-menu="open"] {
    right: 0;
}

.mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 80px 0 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.mobile-navigation li {
    margin-bottom: 15px;
}

.mobile-navigation a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: block;
    padding: 10px ;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-navigation a:hover {
    color: #a3e635;
}

.close-menu {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    cursor: pointer;
    z-index: 10000;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
        right: 20px;
    }

    .theme-toggle.mobile-only {
        position: absolute;
        left: 20px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    .theme-toggle:not(.mobile-only) {
        display: none;
    }
    
    .header-bottom {
        display: none;
    }

    /* Adjust social menu positioning for mobile */
    .header-social {
        left: 60px; /* Give space for theme toggle */
        right: auto;
    }
}

@media (min-width: 769px) {
    .mobile-menu-container {
        display: none;
    }
}
#sec_4 .container{
    display:flex
}
#sec_5{
    background:#151a2d;
    padding:5px 0
}

/* Footer Styles */
.site-footer {
    height: 250px;
    background-color: #027265; /* Dark green color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Single Post Layout */
.content-sidebar-container {
    display: flex;
    flex-direction: row-reverse; /* Reverse for RTL */
    gap: 30px;
    margin-top: 30px;
}

.entry-content {
    flex: 2;
    min-width: 0; /* Prevent flex item overflow */
}

.entry-sidebar {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

.single .entry-header{
    position: relative;
    color: #333;
    background: #fff;
    text-align: center;
}
 
.single .entry-title{
       margin: 13px 0;
}
.single .entry-meta{
    position: relative;
    padding: 0 0 20px 0;
    color: #333;
    background: #fff;
    text-align: center;
}
.thumbnail-container {
    margin-bottom: 20px;
}
.sec-editorial-featured{
    display: flex;
    gap:3px
}
.sec-editorial-featured-thumbnail{
    flex:1;
}
.sec-editorial-featured-thumbnail img{
    border-radius: 5px;
}
.sec-editorial-header{
    flex:2
}
@media (max-width: 768px) {
    .content-sidebar-container {
        flex-direction: column;
    }
    
    .entry-content,
    .entry-sidebar {
        flex: 1 1 100%;
        order: initial;
    }
}
.content-container{display:flex}
.single-sidebar{flex:1}
.single-sidebar2{
    margin: 15px 0;
}
.single-sidebar2-post-flex{display: flex;}
.single-sidebar2-post-flex{
    display:flex
}
.single-sidebar2-posts{
        display: flex;
    gap: 3px;
    flex-direction: column;
}
.single-sidebar2-thumbnail{
    flex:1;
    position:relative
}
.single-sidebar2-thumbnail img{
    border-radius:6px
}
.single-sidebar2-post-header{
    flex:1;
    padding: 11px 5px;
}
.single-sidebar2 .ri-play-circle-line{
  position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    color: #fff;
    font-size: 2rem;
}
.single-sidebar2-post-meta{
    font-size:13px
}
.single-sidebar2-post-title{
    margin:6px 0
}