/*
Theme Name: قالب حسابرسی ضامنی
Theme URI: https://example.com
Author: نام شما
Author URI: https://example.com
Description: قالب اختصاصی خبری و شرکتی، سبک و بدون وابستگی به ابزارک‌ها.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: news, light, custom-settings
Text Domain: zameni
*/

/* =========================================
   1. Fonts & Icons Setup
   ========================================= */
@font-face {
    font-family: 'farsinum';
    src: url("fonts/Sahel-FD-WOL.woff") format("woff");
}

@font-face {
    font-family: 'bamdad';
    src: url('fonts/bamdad.eot?8kcieo');
    src: url('fonts/bamdad.eot?8kcieo#iefix') format('embedded-opentype'), 
         url('fonts/bamdad.ttf?8kcieo') format('truetype'), 
         url('fonts/bamdad.woff?8kcieo') format('woff'), 
         url('fonts/bamdad.svg?8kcieo#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'bamdad' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   2. Variables (:root)
   ========================================= */
:root {
    /* Colors */
    --primary: #d43535;
    --primary-hover: #b81117;
    --primary-light: #f8e8e8;
    --secondary: #2c5aa0;
    --secondary-light: #e8edf5;
    --dark: #212529;
    --dark-light: #495057;
    --gray: #6c757d;
    --gray-light: #adb5bd;
    --border-color: #e9ecef;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --success: #28a745;
    
    /* Fonts & Structure */
    --font-base: 'daythemes', sans-serif;
    --container-width: 1280px;
    
    /* Typography Hierarchy */
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.5rem;
    --h4-size: 1.25rem;
    --h5-size: 1.1rem;
    --h6-size: 1rem;
    --body-size: 0.95rem;
    --small-size: 0.85rem;
    
    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    
    /* Shadows & Radius */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
    --radius-sm: 6px;
}

/* =========================================
   3. Reset & Global Styles
   ========================================= */
* { 
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-base);
    font-size: var(--body-size);
    line-height: 1.7;
    color: var(--dark);
    background-color: var(--bg-white);
}

a { 
    text-decoration: none; 
    color: inherit; 
}

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

img { 
    height: auto; 
    display: block; 
    border-radius: var(--radius-sm);
}

/* Helper Classes */
.container { 
    max-width: var(--container-width); 
    margin: 0 auto; 
    padding: 0 var(--space-md); 
}

.no-scroll { 
    overflow: hidden; 
}

.mb-20 { 
    margin-bottom: 20px; 
}

.text-muted { 
    color: var(--gray); 
    font-size: var(--small-size); 
}

.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.clear, .clr { clear: both; height: 0; }

/* =========================================
   4. Typography
   ========================================= */
h1 { 
    font-size: var(--h1-size); 
    font-weight: 800; 
    line-height: 1.2; 
    color: var(--dark); 
    margin-bottom: var(--space-md);
}

h2 { 
    font-size: var(--h2-size); 
    font-weight: 700; 
    line-height: 1.3; 
    color: var(--dark); 
    margin-bottom: var(--space-md);
}

h3 { 
    font-size: var(--h3-size); 
    font-weight: 600; 
    line-height: 1.4; 
    color: var(--dark); 
    margin-bottom: var(--space-sm);
}

h4 { 
    font-size: var(--h4-size); 
    font-weight: 600; 
    line-height: 1.4; 
    color: var(--dark-light); 
    margin-bottom: var(--space-sm);
}

h5 { 
    font-size: var(--h5-size); 
    font-weight: 500; 
    line-height: 1.5; 
    color: var(--dark-light); 
    margin-bottom: var(--space-xs);
}

h6 { 
    font-size: var(--h6-size); 
    font-weight: 500; 
    line-height: 1.5; 
    color: var(--gray); 
    margin-bottom: var(--space-xs);
}

/* Section Titles */
.section-title {
    font-weight: 700;
    color: var(--dark);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    margin-top: var(--space-sm);
    position: relative;
    border-bottom: 2px solid var(--border-color);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 80px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.section-title.center { text-align: center; }
.section-title.center::after { right: 50%; transform: translateX(50%); }
.section-title.no-border { border-bottom: none; padding-bottom: 0; }
.section-title.no-border::after { display: none; }

/* Complex Header */
.complex-header {
    font-size: var(--h6-size);
    font-weight: 800;
    color: var(--dark);
    text-transform: uppercase;
    border-right: 4px solid var(--primary);
    padding-right: 12px;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

/* =========================================
   5. Components (Badges, Buttons)
   ========================================= */
.badge {
    background: var(--primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
    width: fit-content;
    line-height: 1.4;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.success { background: var(--success); }

.btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 500;
}

/* Icon Button */
.icon-btn { 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px; 
    color: #555; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.icon-btn svg { width: 22px; height: 22px; }

/* Accent Line */
.accent-line { 
    width: 40px; 
    height: 3px; 
    background: var(--primary); 
    margin-bottom: 15px; 
}

/* =========================================
   6. Header & Navigation
   ========================================= */
.site-header {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.header-right-group { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.logo-circle { 
    width: 45px; 
    height: 45px; 
    background: var(--primary); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.logo-circle:hover { background-color: var(--primary-hover); }
.logo-circle img { width: 30px; }

.site-title { 
    font-size: var(--h5-size); 
    font-weight: 700; 
    color: var(--dark); 
    white-space: nowrap; 
}

/* Main Navigation */
.main-nav { 
    display: flex; 
    gap: 20px; 
    margin-right: 20px; 
    padding-right: 20px; 
    border-right: 1px solid var(--border-color); 
}
.main-nav a { 
    font-size: var(--small-size); 
    font-weight: 500; 
    position: relative; 
}
.main-nav a::before { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    right: 0; 
    width: 0; 
    height: 2px; 
    background: var(--primary); 
}

/* Main Menu (Expanded) */
.main-menu {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.main-menu li { position: relative; }
.main-menu a {
    font-size: var(--small-size);
    font-weight: 500;
    color: var(--dark);
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
}
.main-menu a:hover { color: var(--primary); }
.main-menu a::before {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}
.main-menu a:hover::before { width: 100%; }

/* Dropdown Menu */
.main-menu .sub-menu,
.main-menu .children {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-white);
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}
.main-menu li:hover .sub-menu,
.main-menu li:hover .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-menu .sub-menu li, .main-menu .children li { margin: 0; }
.main-menu .sub-menu a, .main-menu .children a {
    display: block;
    padding: 10px 20px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.main-menu .sub-menu a:last-child,
.main-menu .children a:last-child { border-bottom: none; }

/* Mobile Menu */
.menu-toggle-btn { display: flex; }
.mobile-menu { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { margin: 0; }
.mobile-menu a {
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    color: var(--dark);
    font-weight: 500;
    transition: color 0.3s ease;
}
.mobile-menu a:hover { color: var(--primary); }
.mobile-menu .sub-menu,
.mobile-menu .children {
    margin-right: 15px;
    border-right: 2px solid var(--border-color);
}
.mobile-menu .sub-menu a,
.mobile-menu .children a {
    padding: 12px 0;
    font-size: 0.9rem;
    color: var(--gray);
}
.mobile-menu .sub-menu a:last-child,
.mobile-menu .children a:last-child { border-bottom: 1px solid var(--border-color); }

/* =========================================
   7. Hero Section
   ========================================= */
.hero-section { 
    background-color: #1a1a1a; 
    color: #fff; 
    margin-top: 60px; 
    position: relative; 
}
.hero-inner { 
    display: flex; 
    align-items: center; 
    min-height: 450px; 
}
.hero-img { 
    flex: 1.2; 
    height: 450px; 
    position: relative; 
}
.hero-img img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); 
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%); 
}
.hero-text { 
    flex: 0.8; 
    padding: 60px 40px 60px 0; 
    position: relative; 
    z-index: 2; 
}
.hero-badge { 
    background: #28a745; 
    padding: 6px 12px; 
    border-radius: 4px; 
    font-size: 0.8rem; 
    display: inline-block; 
    margin-bottom: 20px; 
    font-weight: bold; 
}
.hero-text h1 { 
    font-size: 2.5rem; 
    line-height: 1.3; 
    margin-bottom: 20px; 
}
.hero-text h1 a { color: #fff; }

/* =========================================
   8. Layout Layouts (Archive, Single, Grid)
   ========================================= */
/* Main Layout Containers */
.main-layout { 
    display: grid; 
    grid-template-columns: 2.2fr 1fr; 
    gap: 40px; 
    margin-top: 40px; 
}
.archive-layout, .single-layout { 
    display: grid; 
    grid-template-columns: 2.5fr 1fr; 
    gap: 40px; 
    margin-top: 40px; 
}

/* Article Card (Archive) */
.article-card {
    display: flex;
    gap: 25px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}
.article-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.article-image {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}
.article-content { flex: 1; }
.article-meta {
    display: flex;
    gap: 15px;
    margin: 10px 0;
    font-size: var(--small-size);
    color: var(--gray);
}
.article-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}
.article-excerpt {
    color: var(--dark-light);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

/* Featured Post */
.featured-post { 
    display: flex; 
    margin-bottom: 30px; 
    overflow: hidden; 
}
.featured-content {
    flex: 1;
    padding: 0 0 0 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-image {
    flex: 1;
    min-height: 300px;
    position: relative;
}
.featured-image a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.badge-on-image {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    background: rgba(212, 53, 53, 0.9);
    color: #fff;
    padding: 6px 2px;
    border-radius: 4px;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 0;
}

/* List Card Thumbnail Badges */
.list-card-thumbnail {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
.list-card-thumbnail a { position: relative; display: block; }
.list-card-thumbnail img {
    width: 286px;
    height: 200px;
    object-fit: cover;
    display: block;
}
.list-card-thumbnail .post-badges-archive {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.list-card-thumbnail .badge {
    position: absolute;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
    line-height: 1.2;
    z-index: 10;
}
.list-card-thumbnail .badge-top-left {
    top: 10px; left: 10px;
    background: rgba(44, 90, 160, 0.9);
}
.list-card-thumbnail .badge-bottom-left {
    bottom: 10px; left: 10px;
    background: rgba(40, 167, 69, 0.9);
}
.list-card-thumbnail .badge-top-right {
    top: 10px; right: 10px;
    background: rgba(255, 107, 53, 0.9);
}
.list-card-thumbnail .badge i { font-size: 10px; margin-left: 3px; }

/* Grid Systems */
.grid-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
}
.grid-2 .article-card { 
    display: flex; 
    gap: 15px; 
    align-items: flex-start; 
}
.grid-2 .article-card img {
    width: 110px;
    height: 85px;
    object-fit: cover;
}
.grid-2 .article-card h3 { 
    font-size: 1rem; 
    margin-bottom: 5px; 
    line-height: 1.4; 
    font-weight: 700; 
}

.grid-3 { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-top: 50px; 
    padding-top: 40px; 
    border-top: 1px solid var(--border-color); 
}
.cat-box img { 
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    margin-bottom: 15px; 
}
.grid-3title h4 {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: right;
    font-weight: 600;
    margin: 0;
    color: #212529;
    flex-grow: 1;
    padding: 0 5px;
}
.cat-list li { 
    padding: 8px 0; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 0.95rem; 
    position: relative;
    padding-right: 15px;
}
.cat-list li::before {
    content: "";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
}

.grid-4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-top: 30px; 
    padding-top: 10px; 
}
.news-card img { 
    width: 100%; 
    height: 160px; 
    object-fit: cover; 
    margin-bottom: 12px; 
}

/* Visual Grid */
.visual-news-container { margin-top: 60px; margin-bottom: 60px; }
.visual-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: start;
}
.visual-card {
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.visual-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 12px;
    display: block;
    box-shadow: var(--shadow-md);
}
.visual-card h4 {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: right;
    font-weight: 600;
    margin: 0;
    color: #212529;
    flex-grow: 1;
    padding: 0 5px;
}

/* Expanded News Section */
.expanded-news-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}
.columns-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.news-column .news-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}
.news-column .news-item a:first-child { flex-shrink: 0; }
.news-column .news-item img {
    width: 80px !important;
    height: 60px !important;
    object-fit: cover;
    display: block;
}

/* Complex News Section */
.complex-news-section {
    margin-top: 60px;
    margin-bottom: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}
.complex-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.big-news-item { margin-bottom: 25px; }
.big-news-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    margin-bottom: 12px;
}
.small-news-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.small-news-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
.small-news-item:first-child { border-top: none; padding-top: 0; }
.small-news-item img {
    width: 100px;
    height: 65px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Events Section */
.events-section { padding: 60px 0; margin-top: 40px; }
.events-list { display: flex; flex-direction: column; gap: 20px; }
.event-item {
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.event-date {
    background: var(--primary);
    color: white;
    padding: 20px;
    text-align: center;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.event-day { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.event-month { font-size: 0.9rem; }
.event-content { padding: 20px; flex: 1; }
.event-meta {
    display: flex;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--gray);
    margin-bottom: 10px;
}


/* =========================================
   PODCAST SECTION
   ========================================= */
.podcast-section {
    background: var(--bg-light);
    padding: 50px 0;
    margin: 40px 0;
    border-top: 1px solid var(--border-color);
}

.podcast-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.podcast-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-color);
}

.podcast-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.podcast-thumb {
    position: relative;
    display: block;
    height: 200px;
    overflow: hidden;
}

.podcast-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.podcast-card:hover .podcast-thumb img {
    transform: scale(1.05);
}

.podcast-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    font-size: 1.2rem;
}

.podcast-info {
    padding: 15px;
    text-align: center;
}

.podcast-info h4 {
    font-size: 0.95rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.podcast-date {
    font-size: 0.8rem;
    color: var(--gray);
}

/* =========================================
   VIDEO SECTION
   ========================================= */
.video-section {
    padding: 40px 0 60px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.video-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.video-thumb {
    display: block;
    position: relative;
    height: 220px;
}

.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-thumb img {
    opacity: 0.7;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(212, 53, 53, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    transition: transform 0.3s ease;
    border: 2px solid #fff;
}
.play-btn i {
    font-size: 32px !important; /* سایز آیکون بزرگتر */
    margin-left: 5px; /* کمی اصلاح مرکزیت آیکون */
}
.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--primary);
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 1;
}

.video-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
}

.video-content h3 {
    font-size: 1rem;
    margin: 0;
}

.video-content h3 a {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Responsive */
@media (max-width: 992px) {
    .podcast-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .podcast-grid, .video-grid { grid-template-columns: 1fr; }
    .video-thumb { height: 200px; }
}



/* =========================================
   9. Single Post Styles
   ========================================= */
.singlepost {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.singlepost .article-excerpt {
    color: var(--dark-light);
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.2rem;
    background: var(--bg-light);
    padding: 10px 20px;
    border-radius: 8px;
}

.rootitr {
    font-size: 0.9rem;
    color: #5c5a5a;
    font-weight: 300;
    margin-bottom: 8px;
}

.post-header {
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
}

.post-header h1 a {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}
.post-header h1 a:hover { color: var(--primary); }
.post-header h1 a i.icon-fire {
    color: var(--primary);
    font-size: 1.2em;
    margin-right: 10px;
    vertical-align: middle;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}
.post-meta span { display: flex; align-items: center; gap: 5px; }
.post-meta img.alignright { float: right; margin: 0 0 1em 1em; }
.post-meta img.alignleft { float: left; margin: 0 1em 1em 0; }
.post-meta img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.post-info-items {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    order: 2;
}
.post-info-items span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--small-size);
    color: var(--gray);
}

.advertorial {
    color: var(--secondary-light);
    font-size: 1.2em;
    margin: 0 0 0 17px;
    vertical-align: middle;
    background: var(--primary);
    padding: 0 12px;
    border-radius: 4px;
}
.advertorial-badge { color: var(--primary); margin-right: 5px; }

/* Post Image & Badges */
.post-image-wrapper { position: relative; margin: 25px 0; }
.post-image { margin: 25px 0; border-radius: 8px; overflow: hidden; }
.post-image img { width: 100%; height: auto; display: block; }
.post-badges {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.post-badges .badge {
    background: rgba(212, 53, 53, 0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Post Content */
.post-content { line-height: 1.8; font-size: 1.05rem; }
.post-content p { margin-bottom: 20px; }
.post-content h2, .post-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--dark);
}
.post-content ul, .post-content ol {
    margin-right: 20px;
    margin-bottom: 20px;
}
.post-content li { margin-bottom: 8px; }

/* Post Source */
.post-source {
    margin: 25px 0;
    padding: 15px;
    background: var(--bg-light);
    border-radius: 6px;
    border-right: 3px solid var(--primary);
}
.post-source h4 { margin-bottom: 8px; font-size: 0.95rem; color: var(--dark); }
.post-source a { color: var(--primary); font-weight: 500; text-decoration: none; font-size: 0.9rem; }

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.post-tags .tag {
    background: var(--bg-light);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--gray);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    display: inline-block;
}
.post-tags .tag:hover {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-sm);
    border-color: var(--primary);
}

/* =========================================
   10. Author & Company Info
   ========================================= */
/* Author Header (Page) */
.author-header {
    margin-bottom: var(--space-xl);
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    border-radius: 12px;
    border-right: 4px solid var(--primary);
    background: linear-gradient(135deg, var(--primary-light), transparent);
}
.author-info { display: flex; align-items: center; gap: 25px; }
.author-avatar-large img {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary);
}
.author-details { flex: 1; }
.author-details .section-title { border-bottom: none; margin-bottom: 15px; }
.author-bio {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--dark-light);
    margin-bottom: 20px;
}
.author-stats {
    display: flex;
    gap: 25px;
    font-size: 0.9rem;
    color: var(--gray);
}
.author-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.author-sidebar-item img {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.author-sidebar-item h4 { margin: 0 0 5px 0; font-size: 0.95rem; }
.author-sidebar-item h4 a { color: var(--dark); text-decoration: none; }
.author-sidebar-item span { font-size: 0.8rem; color: var(--gray); }

/* Author Meta Item (In Post) */
.author-meta-item {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff85;
    padding: 4px 10px;
    border-radius: 6px;
    align-items: center;
    order: 1;
}
.author-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--dark);
    transition: color 0.2s ease;
    padding: 0;
    background: none;
    border: none;
}
.author-link:hover {
    color: var(--primary);
    background: none;
    transform: none;
    box-shadow: none;
}
.author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
.author-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Author Box (Bottom of Post) */
.author-box {
    display: flex;
    gap: 20px;
    background: var(--bg-light);
    padding: 25px;
    border-radius: 8px;
    margin: 40px 0;
}
.author-box .author-avatar { width: 40px; height: 40px; }
.author-box .author-info h4 { margin-bottom: 5px; }
.author-box .author-bio { color: var(--gray); font-size: 0.9rem; margin-top: 10px; }

/* Authors Grid */
.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.author-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
    transition: all 0.3s ease;
}
.author-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.author-card img {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    border: 3px solid var(--primary);
}

/* Company Info Single */

/* استایل بخش ساده‌شده اطلاعات شرکت */
.company-info-simple {
    margin: 25px 0;
    text-align: center;
}

.company-info-simple .company-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.company-info-simple .company-link:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary);
}

.company-info-simple .company-logo {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.company-info-simple .company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--secondary-light);
}

.company-info-simple .company-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--dark);
}
/* =========================================
   11. Sidebar & Widgets
   ========================================= */
.sidebar-col {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}
.sidebar-widget {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}
.sidebar-widget:last-child { margin-bottom: 0; }

.widget-title {
    font-size: var(--h4-size);
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-md);
    position: relative;
}
.widget-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 40px;
    height: 2px;
    background: var(--primary);
}

/* Sidebar Note Item */
.note-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 15px 0; 
    border-bottom: 1px solid #f5f5f5; 
}
.note-item:last-child { border-bottom: none; }
.note-avatar { 
    width: 55px; 
    height: 55px; 
    object-fit: cover; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
}
.note-info h4 { 
    font-size: 0.9rem; 
    margin: 0 0 4px 0; 
    font-weight: 600; 
    color: var(--dark); 
}
.note-author { font-size: 0.75rem; color: var(--gray); margin: 0; }

/* Related Post (Sidebar) */
.related-post {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
}
.related-post:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.related-post img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 6px;
}
.related-post h4 {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 5px 0;
    font-weight: 600;
}
.related-post h4 a {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}
.related-post h4 a:hover { color: var(--primary); }
.related-post .text-muted {
    font-size: 0.8rem;
    color: var(--gray);
    margin: 0;
}

/* Category List */
.category-list { list-style: none; padding: 0; margin: 0; }
.category-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.3s ease;
}
.category-list li:hover {
    background-color: var(--bg-light);
    padding-right: 10px;
    border-radius: 4px;
}
.category-list li:last-child { border-bottom: none; }
.category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}
.category-list a:hover { color: var(--primary); }
.category-count {
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    min-width: 25px;
    text-align: center;
}

/* =========================================
   12. Comments
   ========================================= */
.comments-section { margin-top: 50px; }
.comment-form {
    background: var(--bg-light);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: var(--font-base);
    font-size: 1rem;
}
textarea.form-control { min-height: 150px; resize: vertical; }

.comment-list { display: flex; flex-direction: column; gap: 25px; }
.comment {
    display: flex;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
}
.comment:last-child { border-bottom: none; }
.comment-avatar {
    width: 50px; height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.comment-content { flex: 1; }
.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.comment-author { font-weight: 600; }
.comment-date { color: var(--gray); font-size: 0.85rem; }
.comment-text { line-height: 1.6; }

/* استایل دکمه بازگشت به بالا */
#scrollTopBtn {
    display: none; /* پیش‌فرض مخفی */
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--primary); /* رنگ اصلی سایت */
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

#scrollTopBtn:hover {
    background-color: var(--dark);
    transform: translateY(-5px);
}






/* =========================================
   13. Footer
   ========================================= */
.site-footer { 
    background: #eef0fe; 
    color: #bbb; 
    padding: 60px 0 20px; 
    margin-top: 80px; 
    font-size: 0.9rem; 
    border-top: solid 5px #aca9bb;
}
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 40px; 
    margin-bottom: 40px; 
}
.footer-bottom { 
    text-align: center; 
    border-top: 1px solid #f5f3ff; 
    padding-top: 20px; 
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}
.social-icon:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.social-icon i { font-size: 18px; font-style: normal; }

/* =========================================
   14. UI Elements (Modals, Overlay, Drawers)
   ========================================= */
.overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.5); 
    opacity: 0; 
    visibility: hidden; 
    transition: 0.3s; 
    z-index: 998; 
}
.overlay.active { opacity: 1; visibility: visible; }

.drawer { 
    position: fixed; 
    top: 0; right: -300px; 
    width: 280px; height: 100%; 
    background: #fff; 
    transition: 0.3s; 
    z-index: 999; 
    padding: 25px; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
}
.drawer.open { right: 0; }
.drawer a { 
    display: block; 
    padding: 15px 0; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 1rem; 
    color: #333; 
}

/* استایل‌های اصلاح شده مودال جستجو */
/* =========================================
   MODAL SEARCH STYLES (CORRECTED)
   ========================================= */

.search-modal { 
    position: fixed; 
    inset: 0; 
    background: rgba(30, 30, 30, 0.98); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    visibility: hidden; 
    z-index: 9999; 
    transition: all 0.3s ease; 
    backdrop-filter: blur(8px);
}

.search-modal.active { 
    opacity: 1; 
    visibility: visible; 
}

.search-form-modal {
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
    direction: rtl; /* راست‌چین بودن فرم */
}

.search-wrapper {
    position: relative;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    transition: border-color 0.3s;
    display: flex; /* برای هماهنگی اینپوت و دکمه */
    align-items: center;
}

.search-wrapper:focus-within {
    border-color: var(--primary);
}

/* استایل ورودی متن */
.search-input { 
    background: transparent; 
    border: none; 
    width: 100%; 
    color: #fff; 
    
    /* اعمال فونت متغیر قالب */
    font-family: var(--font-base) !important; 
    
    font-size: 2rem; 
    font-weight: 300;
    
    /* فاصله از چپ برای دکمه (60px) و از راست برای متن (10px) */
    padding: 20px 10px 20px 60px; 
    
    text-align: right; 
    outline: none; 
}

/* استایل متن پیش‌فرض (Placeholder) */
.search-input::placeholder {
    color: rgba(255,255,255,0.5);
    font-family: var(--font-base) !important; /* فونت متغیر */
    font-size: 1.5rem;
    font-weight: normal;
}

/* استایل دکمه جستجو (سمت چپ) */
.search-submit-btn {
    position: absolute;
    left: 0;       /* چسبیدن به چپ */
    right: auto;   /* حذف چسبندگی به راست */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    transition: color 0.3s;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit-btn:hover {
    color: var(--primary);
}

/* دکمه بستن (ضربدر) */
#closeSearch {
    transition: transform 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}

#closeSearch:hover {
    transform: rotate(90deg);
    color: var(--primary) !important;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .search-input {
        font-size: 1.2rem;
        /* در موبایل دکمه و متن کوچک‌تر می‌شوند، پدینگ چپ کمی کمتر */
        padding: 15px 10px 15px 50px; 
    }
    .search-input::placeholder {
        font-size: 1rem;
    }
    .search-submit-btn {
        font-size: 1.5rem;
    }
}

/* =========================================
   15. Search Forms
   ========================================= */
.searchform { width: 100%; }
.searchform div {
    display: flex;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.searchform label { display: none; }
.searchform #s {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-family: var(--font-base);
    font-size: 1rem;
    background: var(--bg-white);
    transition: all 0.3s ease;
}
.searchform #s:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(212, 53, 53, 0.1);
}
.searchform #searchsubmit {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-family: var(--font-base);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.searchform #searchsubmit:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
.searchform #s:focus-visible, 
.searchform #searchsubmit:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.searchform #s::placeholder { color: var(--gray-light); opacity: 1; }
.searchform.loading #searchsubmit { position: relative; color: transparent; }
.searchform.loading #searchsubmit::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: searchSpin 0.8s linear infinite;
}
@keyframes searchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




.search-highlight { background-color: #ffe600; color: #000; padding: 0 2px; }

/* =========================================
   16. Pagination & Error Pages
   ========================================= */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 12px;
    border-radius: 4px;
    background: var(--bg-light);
    color: var(--dark);
    font-weight: 500;
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}
.page-numbers:hover, .page-numbers.current {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.no-posts {
    text-align: center;
    padding: 40px;
    color: var(--gray);
    font-size: 1.1rem;
}

/* 404 Page */
.error-404-page { padding: 60px 0; text-align: center; }
.error-content { max-width: 800px; margin: 0 auto; }
.error-icon { font-size: 6rem; color: var(--primary); margin-bottom: 30px; }
.error-404-page h1 { font-size: 2.5rem; color: var(--dark); margin-bottom: 20px; }
.error-description {
    font-size: 1.2rem;
    color: var(--gray);
    margin-bottom: 40px;
    line-height: 1.6;
}
.error-search {
    background: var(--bg-light);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}
.error-search h3 { color: var(--dark); margin-bottom: 15px; }
.error-search p { color: var(--gray); margin-bottom: 20px; }
.error-search .search-form { display: flex; max-width: 500px; margin: 0 auto; }
.error-search .search-field {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px 0 0 4px;
    font-family: var(--font-base);
    font-size: 1rem;
}
.error-search .search-submit {
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-family: var(--font-base);
    font-weight: 500;
    transition: background 0.3s ease;
}
.error-search .search-submit:hover { background: var(--primary-hover); }

.error-suggestions { margin-bottom: 40px; }
.error-suggestions h3 { color: var(--dark); margin-bottom: 20px; }
.suggested-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.suggestion-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--bg-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.suggestion-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.suggestion-link i { font-size: 1.2rem; width: 20px; }

/* Recent Posts (404) */
.recent-posts { margin-top: 40px; }
.recent-posts h3 { color: var(--dark); margin-bottom: 25px; }
.recent-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.recent-post-card {
    background: var(--bg-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}
.recent-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.recent-post-image { display: block; height: 160px; overflow: hidden; }
.recent-post-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.recent-post-card:hover .recent-post-image img { transform: scale(1.05); }
.recent-post-content { padding: 20px; }
.recent-post-content h4 { margin-bottom: 10px; line-height: 1.4; }
.recent-post-content h4 a { color: var(--dark); text-decoration: none; transition: color 0.3s ease; }
.recent-post-content h4 a:hover { color: var(--primary); }
.recent-post-date {
    color: var(--gray);
    font-size: 0.85rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Page Links */
.page-links {
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.page-links-title { font-weight: 600; color: var(--dark); margin-left: 10px; }
.page-links a, .page-links span {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 2px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-decoration: none;
    color: var(--dark);
    transition: all 0.3s ease;
}
.page-links a:hover { background: var(--primary); color: white; border-color: var(--primary); }
.page-links span { background: var(--primary); color: white; border-color: var(--primary); }

/* =========================================
   17. Icons
   ========================================= */
.icon-copy:before { content: "\e92f"; }
.icon-fire:before { content: "\e92b"; }
.icon-copy2:before { content: "\e930"; }
.icon-x:before { content: "\e91c"; }
.icon-twitter:before { content: "\e91c"; }
.icon-arrow-up-outline:before { content: "\e900"; }
.icon-arrow-up2:before { content: "\e901"; }
.icon-keyboard_arrow_up:before { content: "\e902"; }
.icon-menu:before { content: "\e903"; }
.icon-news_paper:before { content: "\e904"; }
.icon-search:before { content: "\e905"; }
.icon-search1:before { content: "\e906"; }
.icon-arrow-up:before { content: "\e907"; }
.icon-right-quote3:before { content: "\e908"; }
.icon-left-quote3:before { content: "\e909"; }
.icon-quotes-right2:before { content: "\e90a"; }
.icon-quotes-left2:before { content: "\e90b"; }
.icon-soundcloud2:before { content: "\e90c"; }
.icon-soundcloud1:before { content: "\e90d"; }
.icon-volume-lowtw1:before { content: "\e90e"; }
.icon-mictw:before { content: "\e90f"; }
.icon-telegramtw1:before { content: "\e910"; }
.icon-headphonestw1:before { content: "\e911"; }
.icon-stoptw:before { content: "\e912"; }
.icon-playtw2:before { content: "\e913"; }
.icon-filmtw1:before { content: "\e914"; }
.icon-playtw21:before { content: "\e915"; }
.icon-moon:before { content: "\e916"; }
.icon-sun:before { content: "\e917"; }
.icon-file-picture:before { content: "\e918"; }
.icon-camera:before { content: "\e919"; }
.icon-image1:before { content: "\e91a"; }
.icon-imagestw1:before { content: "\e91b"; }
.icon-chevron-up:before { content: "\e91d"; }
.icon-quote-right:before { content: "\e91e"; }
.icon-quote-left:before { content: "\e91f"; }
.icon-feed:before { content: "\e920"; }
.icon-feed1:before { content: "\e921"; }
.icon-link2:before { content: "\e922"; }
.icon-locate:before { content: "\e923"; }
.icon-point1:before { content: "\e924"; }
.icon-printer2:before { content: "\e925"; }
.icon-comment:before { content: "\e926"; }
.icon-printer:before { content: "\e927"; }
.icon-mode_comment:before { content: "\e928"; }
.icon-printer1:before { content: "\e929"; }
.icon-comments2:before { content: "\e92a"; }
.icon-instagramtw2:before { content: "\e92c"; }
.icon-time:before { content: "\e92d"; }
.icon-time1:before { content: "\e92e"; }
.icon-aparat:before { content: "\e935"; }
.icon-cloob:before { content: "\e936"; }
.icon-fz3:before { content: "\e955"; }
.icon-fz1:before { content: "\e956"; }
.icon-share:before { content: "\e957"; }
.icon-close:before { content: "\e95c"; }
.icon-phone1:before { content: "\e962"; }
.icon-home3:before { content: "\e96e"; }
.icon-qrcode:before { content: "\e979"; }
.icon-youtube:before { content: "\e97e"; }
.icon-language:before { content: "\e97f"; }
.icon-iran:before { content: "\e980"; }
.icon-igap:before { content: "\e981"; }
.icon-wispi:before { content: "\e982"; }
.icon-soroush:before { content: "\e983"; }
.icon-gap:before { content: "\e984"; }
.icon-Eitaa:before { content: "\e985"; }
.icon-bale:before { content: "\e986"; }
.icon-rubika:before { content: "\e987"; }
.icon-linkedin:before { content: "\e988"; }
.icon-linkedin1:before { content: "\e989"; }
.icon-pinterest:before { content: "\e98a"; }
.icon-link1:before { content: "\e9cb"; }
.icon-cancel-circle:before { content: "\ea0d"; }
.icon-facebook:before { content: "\ea90"; }
.icon-whatsapp:before { content: "\ea93"; }
.icon-twitter1:before { content: "\ea96"; }
.icon-appleinc:before { content: "\eabe"; }
.icon-android:before { content: "\eac0"; }
.icon-square1:before { content: "\f0c8"; }
.icon-circle:before { content: "\f111"; }
.icon-chevron-circle-left:before { content: "\f137"; }
.icon-chevron-circle-right:before { content: "\f138"; }
.icon-chevron-circle-up:before { content: "\f139"; }
.icon-chevron-circle-down:before { content: "\f13a"; }
.icon-pause_circle_outline:before { content: "\e01a"; }
.icon-play_circle_outline:before { content: "\e01d"; }
.icon-stack-2:before { content: "\e033"; }
.icon-clear:before { content: "\e070"; }
.icon-arrow-left:before { content: "\e094"; }
.icon-arrow-right:before { content: "\e095"; }
.icon-vertical_align_bottom:before { content: "\e0f2"; }
.icon-apps:before { content: "\e1ff"; }
.icon-fullscreen:before { content: "\e20c"; }
.icon-fullscreen_exit:before { content: "\e20d"; }
.icon-zoom_in:before { content: "\e311"; }
.icon-zoom_out:before { content: "\e312"; }

/* =========================================
   18. Media Queries (Responsive)
   ========================================= */

/* Max Width: 1200px */
@media (max-width: 1200px) {
    :root {
        --h1-size: 2.2rem;
        --h2-size: 1.8rem;
        --h3-size: 1.4rem;
        --h4-size: 1.2rem;
    }
}

/* Max Width: 992px */
@media (max-width: 992px) {
    .main-nav { display: none; }
    
    .featured-content { padding: 10px; }
    .list-card-thumbnail img { width: 130px; height: 110px; }
    .article-meta, .article-excerpt { display: none; }
    
    .archive-layout,
    .single-layout,
    .main-layout { grid-template-columns: 1fr; }
    
    .grid-4,
    .columns-grid { grid-template-columns: 1fr 1fr; }
    
    .visual-grid { grid-template-columns: 1fr 1fr; }
    .complex-grid { grid-template-columns: repeat(2, 1fr); }
    
    .hero-inner { flex-direction: column; height: auto; }
    .hero-img { width: 100%; height: 300px; order: 1; }
    .hero-text { width: 100%; padding: 40px 20px; order: 2; }
    .featured-post { flex-direction: column-reverse; }
    
    .sidebar-col { position: static; margin-top: 40px; }
    
    .mobile-menu .sub-menu,
    .mobile-menu .children { margin-right: 10px; }

    :root {
        --h1-size: 2rem;
        --h2-size: 1.7rem;
        --h3-size: 1.35rem;
        --h4-size: 1.15rem;
    }
}

/* Max Width: 768px */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .columns-grid, .visual-grid, .complex-grid { 
        grid-template-columns: 1fr; 
    }
    
    .header-inner { padding: 0 10px; }
    .site-title { font-size: 0.9rem; }
    .archive-filters { flex-direction: column; }
    .container { padding: 0 var(--space-main); }
    
    .post-info-items span { font-size: 0.6rem; }
    .single-layout { margin-top: 5px; }
    .singlepost { padding: 5px; }
    
    .author-box { flex-direction: column; text-align: center; }
    .comment { flex-direction: column; }
    .comment-header { flex-direction: column; gap: 5px; }
    
    .post-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .author-meta-item { order: 1; }
    .post-info-items { order: 2; gap: 10px; }
    .author-avatar { width: 20px; height: 20px; }
    .author-name { font-size: 0.8rem; }
    
    .sidebar-widget { padding: 20px; }
    .related-post img { width: 100%; height: 120px; margin-bottom: 10px; }
    
    .author-header {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
        margin-top: var(--space-lg);
    }
    .author-info { flex-direction: column; text-align: center; gap: 20px; }
    .author-avatar-large img { width: 100px; height: 100px; }
    .author-stats { justify-content: center; gap: 15px; }
    
    .company-content { flex-direction: column; text-align: center; }
    .company-logo-single { margin: 0 auto; }
    .company-name { justify-content: center; }
    .company-meta { justify-content: center; gap: 10px; }
    .company-meta-item { padding: 5px 10px; font-size: 0.8rem; }
    .company-actions { justify-content: center; }
    .company-info-single { padding: 15px; }
    
    .social-icons { gap: 8px; justify-content: center; }
    .social-icon { width: 35px; height: 35px; }
    .social-icon i { font-size: 16px; }
    
    .error-404-page { padding: 40px 0; }
    .error-icon { font-size: 4rem; }
    .error-404-page h1 { font-size: 2rem; }
    .error-description { font-size: 1.1rem; }
    .suggested-links { grid-template-columns: 1fr; }
    .recent-posts-grid { grid-template-columns: 1fr; }
    .error-search .search-form { flex-direction: column; }
    .error-search .search-field { border-radius: 4px; margin-bottom: 10px; }
    .error-search .search-submit { border-radius: 4px; }

    .mobile-menu a { padding: 12px 0; font-size: 0.95rem; }

    :root {
        --h1-size: 1.8rem;
        --h2-size: 1.5rem;
        --h3-size: 1.3rem;
        --h4-size: 1.1rem;
        --space-lg: 24px;
        --space-md: 16px;
        --space-main: 8px;
    }
    .section-title { margin-bottom: var(--space-md); padding-bottom: 10px; }
}

/* Max Width: 576px */
@media (max-width: 576px) {
    :root {
        --h1-size: 1.4rem;
        --h2-size: 1.2rem;
        --h3-size: 1.05rem;
    }
    
    .author-stats { flex-direction: column; gap: 10px; text-align: center; }
    .company-meta { flex-direction: column; align-items: center; gap: 8px; }
    .company-meta-item { width: 100%; justify-content: center; }
    
    .error-content { padding: 0 15px; }
    .error-search { padding: 20px; }
    .recent-post-content { padding: 15px; }
}

/* تنظیمات نمایش دکمه‌ها */

/* حالت پیش‌فرض (دسکتاپ): دکمه موبایل مخفی، دکمه دسکتاپ نمایان */
.mobile-trigger {
    display: none !important;
}

.desktop-trigger {
    display: flex !important;
    margin: 0 15px; /* فاصله از طرفین در دسکتاپ */
    color: var(--dark);
}

/* تنظیم فاصله گروه چپ */
.header-left-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* حالت موبایل (عرض کمتر از 992px) */
@media (max-width: 992px) {
    /* دکمه دسکتاپ مخفی شود */
    .desktop-trigger {
        display: none !important;
    }
    
    /* دکمه موبایل (کنار جستجو) نمایان شود */
    .mobile-trigger {
        display: flex !important;
        color: var(--dark);
    }
    
    /* فاصله در موبایل کمتر شود */
    .header-left-group {
        gap: 10px;
    }
}