/*
Theme Name: Al-Diwan News BY MAROC4WEB
Theme URI: https://Maroc4web.com/
Author: MAROC4WEB TEAM
Author URI: https://maroc4web.com/
Description: A modern and responsive news theme designed based on specific requests, with an advanced control panel to customize the homepage.
Version: 6.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aldiwan
Tags: news, magazine, responsive-layout, custom-header, custom-menu, theme-options
*/

/* === GLOBAL VARIABLES & HEADER === */
/* Variables are defined in functions.php and output in the head */
.top-header-bar, .main-footer { background-color: var(--header-bg-color); }
.top-header-bar .custom-logo { filter: brightness(0) invert(1) grayscale(1); max-height: 2.5rem; width: auto; }
.main-nav-menu .menu-item a::after { background-color: var(--primary-blue); }
.main-nav-menu .menu-item.current-menu-item a { color: var(--primary-blue); }
.header-social-icons a:hover, .header-social-icons button:hover { color: var(--primary-blue); }
.hamburger-menu { font-size: 1.5rem; }

/* === GENERAL BODY STYLES === */
body { font-family: 'Tajawal', sans-serif; background-color: var(--site-bg-color); }
img { transition: transform 0.3s ease, filter 0.3s ease; }
.post-item:hover h3, .grid-post-item:hover .post-overlay h3, article.group:hover h3, .left-sidebar-post.group:hover h3 { color: var(--primary-blue); }
.post-item:hover img, .grid-post-item:hover img, article.group:hover img, .mobile-post-item:hover img { transform: scale(1.05); }

/* === UNIFIED SECTION TITLE STYLE === */
.section-header { position: relative; border-bottom: 2px solid #e9e9e9; margin-bottom: 1.5rem; }
.section-header .title-link { display: inline-block; position: relative; font-size: var(--sidebar-title-fs); font-weight: 800; color: var(--primary-blue); text-decoration: none; padding-bottom: 10px; margin-bottom: -2px; }
.section-header .title-link::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 4px; background-color: var(--primary-blue); }

/* === 24-Hour Timeline Widget Styles === */
.timeline-header { position: relative; padding-bottom: 8px; margin-bottom: 1rem; }
.timeline-header .timeline-main-title { font-size: 1.5rem; font-weight: 800; color: var(--timeline-accent-color); position: relative; display: inline-block; padding-bottom: 8px; }
.timeline-header .timeline-main-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 4px; background-color: var(--timeline-accent-color); }
.timeline-post a { transition: all 0.2s ease; border-right: 2px solid transparent; }
.timeline-post a:hover { border-right-color: var(--timeline-accent-color); background-color: #f0f5ff; }
.timeline-time { color: var(--timeline-accent-color); font-size: 0.9rem; flex-shrink: 0; }
.timeline-post h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-post a:hover h3 { color: var(--timeline-accent-color); }

/* Sidebar Post List (Standard) */
.sidebar-posts .post-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.left-sidebar-post h3 { font-size: var(--sidebar-title-fs); }

/* === Slider Styles === */
#slider-container { position: relative; }
.slider-item { position: absolute; top: 0; right: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.6s ease-in-out; }
.slider-item.active { opacity: 1; visibility: visible; position: relative; }
.slider-item img { aspect-ratio: 623 / 414; }
.slider-item h2 a { font-size: var(--slider-title-fs); }
.dot { cursor: pointer; height: 12px; width: 12px; margin: 0 4px; background-color: #d1d5db; border-radius: 50%; display: inline-block; transition: background-color 0.3s ease; }
.dot:hover, .dot.active { background-color: var(--primary-blue); }

/* === Video Section Styles === */
.video-item.group a { aspect-ratio: 16 / 10; }
.video-item .play-icon-new { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; padding-left: 2px; background-color: rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; }
.video-item.group:hover .play-icon-new { background-color: rgba(255, 255, 255, 0.2); }
.video-item.group:hover h3 { color: white; }

/* === Grid Section (sec01.jpg style) === */
.new-grid-section-header { position: relative; padding-bottom: 8px; margin-bottom: 1.5rem; text-align: right; border-bottom: 1px solid #e2e8f0; }
.new-grid-section-header .title-link { display: inline-block; position: relative; font-size: var(--sidebar-title-fs); font-weight: 800; text-decoration: none; padding-bottom: 8px; margin-bottom: -1px; }
.new-grid-section-header .title-link::after { content: ''; position: absolute; bottom: 0; right: 0; width: 60px; height: 4px; background-color: var(--underline-color); }

/* Grid Post Item (1 big, 4 small) */
.grid-post-item { position: relative; display: block; overflow: hidden; border-radius: 0.5rem; }
.grid-post-item .post-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); color: white; }
.grid-post-item:hover img { filter: brightness(1.1); }
.grid-post-item h3 { font-size: 1.1rem; line-height: 1.4; }
.grid-post-item span { font-size: 0.75rem; opacity: 0.8; display: block; margin-top: 0.25rem; }

/* === Three Column Section === */
.three-col-item .section-header { border-bottom: none; }
.three-col-item .title-link { font-size: var(--sidebar-title-fs); }

/* === Grid Video Section (pg.jpg style) === */
.grid-video-section-bg { background-color: var(--grid-video-bg); }
.grid-video-item .aspect-w-16 { position: relative; padding-bottom: 56.25%; }
.grid-video-item .aspect-w-16 > img, .grid-video-item .aspect-w-16 > div { position: absolute; height: 100%; width: 100%; top: 0; right: 0; bottom: 0; left: 0; }
.grid-video-play-icon { width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; background-color: rgba(0, 0, 0, 0.3); transition: background-color 0.3s ease; }
.grid-video-item.group:hover .grid-video-play-icon { background-color: rgba(255, 255, 255, 0.3); }

/* === Single Post Page Styles === */
.post-meta-category a { background-color: #f0f5ff; padding: 6px 12px; border-radius: 9999px; font-size: 0.875rem; }
.floating-social-share { position: absolute; top: 10px; right: -80px; display: flex; flex-direction: column; gap: 0.75rem; }
.floating-social-share a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; transition: all 0.2s ease; }
.floating-social-share a:hover { transform: scale(1.1); filter: brightness(1.1); }
.floating-social-share a[href*="facebook.com"] { background-color: #1877F2; }
.floating-social-share a[href*="twitter.com"] { background-color: #000000; }
.floating-social-share a[href*="linkedin.com"] { background-color: #0A66C2; }
.floating-social-share a[href*="whatsapp.com"] { background-color: #25D366; }
.floating-social-share a[href*="mailto:"] { background-color: #767676; }
@media (max-width: 1200px) { .floating-social-share { display: none; } }
.entry-content p { line-height: 1.8; margin-bottom: 1.5rem; }

/* === Comments Section Styles === */
.comment-reply-title { font-size: 1.5rem; font-weight: 800; border-bottom: 2px solid #e9e9e9; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.comment-form p { margin-bottom: 1rem; clear: both; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; background-color: #f3f4f6; border: none; border-radius: 0.375rem; padding: 0.75rem 1rem; color: #111827; }
.comment-form input::placeholder, .comment-form textarea::placeholder { color: #374151; opacity: 1; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-blue); }
.comment-char-counter { text-align: left; font-size: 0.875rem; color: #6b7280; margin-top: -0.5rem; margin-bottom: 1rem; }
.submit-comment-button { background-color: #111827; color: white; font-weight: bold; padding: 0.75rem 2rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s ease; }
.submit-comment-button:hover { background-color: #374151; }
.comment-publishing-rules { font-size: 0.875rem; color: #4b5563; margin-top: 1.5rem; }
.comments-header { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 800; color: var(--primary-blue); border-bottom: 2px solid #e9e9e9; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.comments-disclaimer { background-color: #ffe4e6; color: #c53030; border: 1px solid #f8b4b7; padding: 1rem; border-radius: 0.375rem; margin-bottom: 1.5rem; font-size: 0.875rem; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { background-color: #f3f4f6; padding: 1rem; border-radius: 0.375rem; margin-bottom: 1.5rem; }
.comment-author-wrapper { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.comment-number { background-color: var(--primary-blue); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.comment-author-name { font-weight: bold; color: #111827; }
.comment-meta { font-size: 0.875rem; color: #6b7280; }
.comment-content { color: #374151; }
.comment-actions { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: #6b7280; }
.comment-actions a { color: inherit; text-decoration: none; }
.comment-actions a:hover { color: var(--primary-blue); }
.comment-actions .fas { margin-left: 4px; }

/* === FOOTER STYLES === */
.footer-logo { filter: brightness(0) invert(1) grayscale(1); }
.footer-nav-menu .menu-item-has-children > a { font-weight: 800; font-size: 1.125rem; margin-bottom: 0.5rem; pointer-events: none; }
.footer-nav-menu .sub-menu { list-style: none; padding: 0; margin-right: 0; space-y: 0.5rem; }
.footer-nav-menu .sub-menu a { color: rgba(255, 255, 255, 0.8); transition: color 0.2s ease; }
.footer-nav-menu .sub-menu a:hover { color: white; text-decoration: underline; }
.sub-footer .designer-credit { display: flex; align-items: center; text-decoration: none; color: inherit; }

/* === MOBILE MENU & HOMEPAGE STYLES === */
.mobile-menu-panel { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background-color: white; z-index: 100; transition: right 0.3s ease-in-out; box-shadow: -2px 0 15px rgba(0,0,0,0.1); overflow-y: auto; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out; }
body.mobile-menu-active .mobile-menu-panel { right: 0; }
body.mobile-menu-active .mobile-menu-overlay { opacity: 1; visibility: visible; }
.mobile-nav-menu a { display: block; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; font-weight: 600; }
@media (max-width: 1023px) { /* lg breakpoint */ .main-grid-desktop, .other-sections-wrapper { display: none; } }
@media (min-width: 1024px) { .mobile-feed-container { display: none; } }
.mobile-feed-container { margin-right: -1rem; margin-left: -1rem; }
.mobile-post-item:not(:last-child) { margin-bottom: 0.5rem; }