/*
Theme Name: TondTon Theme
Theme URI: https://tondton.com/
Author: Saleh Sharifi
Author URI: https://webshayan.com/
Description: قالب وردپرس اختصاصی برای وبلاگ سایت تند تون، بر اساس طراحی اصلی لاراول. طراحی شده توسط وب شایان.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tondton
*/
 /* ==========================================================================
   TondTon Single Post & Sidebar Styles
   ========================================================================== */

 /* --- متغیرهای رنگی برای هماهنگی --- */
 :root {
     --tnd-dark-teal: #0D4A52;
     --tnd-light-mint: #F5FAF9;
     --tnd-orange-cta: #F29979;
     --tnd-white: #FFFFFF;
     --tnd-text-dark: #333333;
     --tnd-text-light: #f1f1f1;
     --tnd-border-light: #e0e0e0;
     --tnd-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
 }

 /* --- ساختار کلی صفحه نوشته --- */
 .content-area {
     display: flex;
     flex-direction: row-reverse;
     /* سایدبار در چپ برای زبان فارسی */
     gap: 30px;
     max-width: 1200px;
     margin: 40px auto;
     padding: 0 15px;
 }

 .site-main {
     flex: 1;
     min-width: 0;
     /* جلوگیری از بزرگ شدن بیش از حد محتوا */
 }

 /* --- هدر نوشته (Hero Section) --- */
 .tnd-post-hero {
     background-color: var(--tnd-dark-teal);
     color: var(--tnd-white);
     padding: 50px 30px;
     text-align: center;
     margin-bottom: 30px;
     border-radius: 16px;
     /* گردی مشابه کارت‌های صفحه اصلی */
 }

 .tnd-post-hero #breadcrumbs,
 .tnd-post-hero #breadcrumbs a {
     font-size: 14px;
     color: rgba(255, 255, 255, 0.7);
     margin-bottom: 15px;
 }

 .tnd-post-hero #breadcrumbs a:hover {
     color: var(--tnd-white);
 }

 .tnd-post-hero .entry-title {
     font-size: 38px;
     font-weight: 700;
     margin-bottom: 20px;
     line-height: 1.3;
 }

 .tnd-post-hero .post-meta {
     display: flex;
     justify-content: center;
     gap: 20px;
     font-size: 14px;
     opacity: 0.8;
 }

 .tnd-post-hero .post-meta span a {
     color: inherit;
 }

 /* --- بدنه اصلی نوشته --- */
 .tnd-post-body {
     background-color: var(--tnd-white);
     padding: 30px;
     border-radius: 16px;
     box-shadow: var(--tnd-card-shadow);
 }

 .post-thumbnail img {
     width: 100%;
     height: auto;
     border-radius: 12px;
     margin-bottom: 30px;
 }

 .entry-content {
     color: var(--tnd-text-dark);
     line-height: 1.8;
 }

 .entry-content p {
     font-size: 16px;
     margin-bottom: 1.5em;
 }

 .entry-content h2,
 .entry-content h3 {
     color: var(--tnd-dark-teal);
     font-weight: 700;
     margin-top: 2em;
     margin-bottom: 1em;
 }

 .entry-content a {
     color: var(--tnd-orange-cta);
     text-decoration: none;
     border-bottom: 1px dotted var(--tnd-orange-cta);
 }

 .entry-content a:hover {
     color: var(--tnd-dark-teal);
     border-bottom-style: solid;
 }

 .entry-footer .post-tags a {
     background-color: var(--tnd-light-mint);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 13px;
     text-decoration: none;
     color: var(--tnd-dark-teal);
     transition: background-color 0.3s;
 }

 .entry-footer .post-tags a:hover {
     background-color: #e1efed;
 }


 /* --- سایدبار و ابزارک‌ها --- */
 .widget-area {
     width: 320px;
     flex-shrink: 0;
 }

 .widget {
     background-color: var(--tnd-white);
     padding: 25px;
     margin-bottom: 30px;
     border-radius: 16px;
     box-shadow: var(--tnd-card-shadow);
 }

 .widget-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--tnd-dark-teal);
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--tnd-border-light);
 }

 /* --- استایل ویجت CTA اختصاصی --- */
 .tnd-cta-widget {
     background-color: var(--tnd-dark-teal);
     color: var(--tnd-text-light);
 }

 .tnd-cta-widget .widget-title {
     color: var(--tnd-white);
     border-bottom-color: rgba(255, 255, 255, 0.2);
 }

 .tnd-cta-widget p {
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 20px;
 }

 .tnd-button {
     display: block;
     width: 100%;
     background-color: var(--tnd-orange-cta);
     color: var(--tnd-white);
     text-align: center;
     padding: 12px;
     border-radius: 8px;
     font-weight: bold;
     text-decoration: none;
     transition: transform 0.2s, background-color 0.2s;
 }

 .tnd-button:hover {
     background-color: #e88a6a;
     transform: translateY(-2px);
 }

 /* --- استایل ویجت محصولات --- */
 .tnd-product-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .tnd-product-list li a {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 12px;
     border-radius: 8px;
     text-decoration: none;
     color: var(--tnd-text-dark);
     transition: background-color 0.2s, transform 0.2s;
     border: 1px solid var(--tnd-border-light);
 }

 .tnd-product-list li a:hover {
     background-color: var(--tnd-light-mint);
     transform: translateX(-5px);
     border-color: #cce0dd;
 }

 .tnd-product-list img {
     width: 32px;
     height: 32px;
    border-radius: 7px;
 }

 .tnd-product-list span {
     font-weight: 500;
 }

 /* --- طراحی واکنش‌گرا (Responsive) --- */
 @media (max-width: 992px) {
     .content-area {
         flex-direction: column;
         /* چیدمان ستون‌ها زیر هم */
     }

     .widget-area {
         width: 100%;
         margin-top: 40px;
     }
 }

 @media (max-width: 768px) {
     .tnd-post-hero .entry-title {
         font-size: 28px;
     }

     .tnd-post-hero .post-meta {
         flex-direction: column;
         gap: 10px;
     }
 }
 /* ==========================================================================
   TondTon Comments Section Styles
   ========================================================================== */

 .comments-area {
     background-color: var(--tnd-white);
     padding: 30px;
     margin-top: 40px;
     border-radius: 16px;
     box-shadow: var(--tnd-card-shadow);
 }

 .comments-title,
 .comment-reply-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--tnd-dark-teal);
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 1px solid var(--tnd-border-light);
 }

 /* --- لیست نظرات --- */
 .comment-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .comment-list .comment {
     padding: 20px 0;
     border-bottom: 1px solid var(--tnd-border-light);
 }

 .comment-list .children {
     list-style: none;
     padding-right: 30px;
     /* ایجاد تورفتگی برای پاسخ‌ها */
     margin-top: 20px;
     border-right: 2px solid #eaf2f1;
     /* خط عمودی برای نمایش سلسله مراتب */
 }

 .comment-list li:last-child>.comment {
     border-bottom: none;
 }

 .comment-body {
     display: flex;
     gap: 20px;
 }

 .comment-author .avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     /* آواتار گرد */
     flex-shrink: 0;
 }

 .comment-content {
     flex-grow: 1;
 }

 .comment-meta {
     margin-bottom: 10px;
     font-size: 14px;
 }

 .comment-author .fn {
     /* نام نویسنده کامنت */
     font-weight: bold;
     color: var(--tnd-text-dark);
     font-style: normal;
 }

 .comment-metadata a {
     /* تاریخ کامنت */
     color: #888;
     text-decoration: none;
 }

 .reply .comment-reply-link {
     background-color: var(--tnd-light-mint);
     color: var(--tnd-dark-teal);
     padding: 4px 12px;
     border-radius: 5px;
     font-size: 13px;
     text-decoration: none;
     font-weight: bold;
     transition: background-color 0.3s;
 }

 .reply .comment-reply-link:hover {
     background-color: #d8e8e6;
 }

 .comment-content p {
     font-size: 15px;
     line-height: 1.7;
     margin: 0;
 }

 /* --- فرم ارسال نظر --- */
 #respond {
     margin-top: 30px;
 }

 .comment-form p {
     margin-bottom: 15px;
 }

 .comment-form input[type="text"],
 .comment-form input[type="email"],
 .comment-form input[type="url"],
 .comment-form textarea {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid var(--tnd-border-light);
     border-radius: 8px;
     background-color: #fdfdfd;
     font-family: inherit;
     /* ارث‌بری فونت از پوسته */
     font-size: 15px;
     transition: border-color 0.3s, box-shadow 0.3s;
 }

 .comment-form input[type="text"]:focus,
 .comment-form input[type="email"]:focus,
 .comment-form input[type="url"]:focus,
 .comment-form textarea:focus {
     outline: none;
     border-color: var(--tnd-orange-cta);
     box-shadow: 0 0 0 2px rgba(242, 153, 121, 0.3);
 }

 .comment-form textarea {
     resize: vertical;
     min-height: 120px;
 }

 .comment-form .form-submit .submit {
     /* استفاده از استایل دکمه اصلی سایت */
     background-color: var(--tnd-orange-cta);
     color: var(--tnd-white);
     padding: 12px 30px;
     border: none;
     border-radius: 8px;
     font-weight: bold;
     font-size: 16px;
     cursor: pointer;
     transition: transform 0.2s, background-color 0.2s;
 }

 .comment-form .form-submit .submit:hover {
     background-color: #e88a6a;
     transform: translateY(-2px);
 }

 /* استایل پیام‌های راهنما */
 .comment-notes,
 .logged-in-as {
     font-size: 14px;
     color: #777;
 }

 .logged-in-as a,
 .comment-notes a {
     color: var(--tnd-orange-cta);
     text-decoration: none;
 }

 /* مخفی کردن فیلد "وبسایت" (اختیاری) */
 /*
.comment-form-url {
    display: none;
}
*/
/* ==========================================================================
   TondTon Blog Index/Archive Styles
   ========================================================================== */

/* --- هدر صفحه آرشیو --- */
.page-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--tnd-border-light);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--tnd-dark-teal);
}

/* --- استایل کارت هر مطلب در لیست --- */
.tnd-blog-post-item {
    display: flex;
    flex-direction: row-reverse;
    /* عکس در راست، محتوا در چپ */
    gap: 30px;
    background-color: var(--tnd-white);
    border-radius: 16px;
    box-shadow: var(--tnd-card-shadow);
    margin-bottom: 30px;
    overflow: hidden;
    /* جلوگیری از بیرون‌زدگی محتوا */
    transition: transform 0.3s, box-shadow 0.3s;
}

.tnd-blog-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- ستون تصویر شاخص (راست) --- */
.post-item-thumbnail {
    flex-basis: 35%;
    /* عرض ستون تصویر */
    flex-shrink: 0;
}

.post-item-thumbnail a {
    display: block;
    height: 100%;
}

.post-item-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* تصویر کاملا کادر را پر می‌کند بدون تغییر نسبت */
    transition: transform 0.4s ease;
}

.tnd-blog-post-item:hover .post-item-thumbnail img {
    transform: scale(1.05);
    /* افکت زوم روی هاور */
}

/* --- ستون محتوا (چپ) --- */
.post-item-content {
    flex-grow: 1;
    /* این ستون باقی‌مانده فضا را پر می‌کند */
    padding: 30px;
    display: flex;
    flex-direction: column;
    /* چیدمان عمودی برای محتوای داخلی */
}

.post-item-content .entry-title {
    margin: 0 0 10px;
    font-size: 22px;
}

.post-item-content .entry-title a {
    text-decoration: none;
    color: var(--tnd-dark-teal);
    transition: color 0.3s;
}

.post-item-content .entry-title a:hover {
    color: var(--tnd-orange-cta);
}

.post-item-content .entry-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
}

.post-item-content .entry-meta span:not(:last-child):after {
    content: "•";
    margin: 0 8px;
}

.post-item-content .entry-summary {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    flex-grow: 1;
    /* باعث می‌شود خلاصه مطلب فضا را پر کرده و دکمه به پایین هل داده شود */
}

.post-item-content .read-more-button {
    margin-top: 20px;
    /* فاصله از خلاصه مطلب */
}

.read-more-button .tnd-button {
    /* استایل دکمه از قبل تعریف شده، اما می‌توانیم کمی تغییر دهیم */
    padding: 10px 25px;
    font-size: 14px;
    align-self: flex-start;
    /* دکمه تمام عرض نباشد */
}


/* --- استایل صفحه‌بندی (Pagination) --- */
.navigation.pagination {
    margin-top: 40px;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.nav-links .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--tnd-border-light);
    border-radius: 8px;
    color: var(--tnd-dark-teal);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.nav-links .page-numbers:hover {
    background-color: var(--tnd-light-mint);
    border-color: #cce0dd;
}

.nav-links .page-numbers.current {
    background-color: var(--tnd-orange-cta);
    color: var(--tnd-white);
    border-color: var(--tnd-orange-cta);
    font-weight: bold;
}

/* ==========================================================================
   Responsive Styles for Blog Index (FIXED)
   ========================================================================== */

@media (max-width: 820px) {
    .tnd-blog-post-item {
        /* چیدمان ستون‌ها را زیر هم قرار می‌دهد */
        flex-direction: column;
    }

    /* --- اصلاح کانتینر تصویر برای موبایل --- */
    .post-item-thumbnail {
        flex-basis: auto;
        /* ریست کردن flex-basis دسکتاپ */
        width: 100%;
        /* عرض کامل را بگیرد */
        height: 220px;
        /* یک ارتفاع ثابت برای تصویر در نظر می‌گیریم */
    }

    /* 
     * نیازی به تغییر استایل img نیست، چون از قبل height: 100% 
     * و object-fit: cover دارد و خودش را با ارتفاع 220px جدید هماهنگ می‌کند.
     */

    /* --- اصلاح پدینگ محتوا برای موبایل --- */
    .post-item-content {
        padding: 25px 20px;
        /* کمی پدینگ‌ها را تنظیم می‌کنیم */
    }
}
/* ==========================================================================
   TondTon 404 Error Page Styles
   ========================================================================== */

.tnd-404-page-container {
    background-color: var(--tnd-light-mint);
    /* پس‌زمینه اصلی سایت */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 150px);
    /* ارتفاع صفحه را پر می‌کند (منهای هدر و فوتر) */
    padding: 40px 15px;
    width: 100%;
}

.error-404 .error-card {
    max-width: 600px;
    width: 100%;
    background-color: var(--tnd-white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--tnd-card-shadow);
    text-align: center;
    margin: auto;
}

.error-404 .error-code {
    font-size: 120px;
    font-weight: 900;
    color: var(--tnd-dark-teal);
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.8;
}

.error-404 .page-title {
    font-size: 28px;
    color: var(--tnd-dark-teal);
    margin-bottom: 20px;
}

.error-404 .page-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- استایل فرم جستجو در صفحه 404 --- */
.tnd-404-search {
    margin-bottom: 25px;
}

.tnd-404-search .search-form {
    display: flex;
    border: 1px solid var(--tnd-border-light);
    border-radius: 8px;
    overflow: hidden;
}

.tnd-404-search input[type="search"] {
    flex-grow: 1;
    border: none;
    padding: 12px 15px;
    font-size: 15px;
}

.tnd-404-search input[type="search"]:focus {
    outline: none;
}

.tnd-404-search .search-submit {
    background-color: var(--tnd-dark-teal);
    color: var(--tnd-white);
    border: none;
    padding: 0 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.tnd-404-search .search-submit:hover {
    background-color: #08383e;
}


/* --- دکمه بازگشت به خانه --- */
.return-home-btn {
    display: inline-block;
    width: auto;
    background-color: var(--tnd-orange-cta);
    /* استفاده از رنگ اصلی CTA */
}

/* --- لینک‌های مفید --- */
.tnd-helpful-links {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--tnd-border-light);
}

.tnd-helpful-links h3 {
    font-size: 16px;
    color: #777;
    font-weight: 500;
    margin-bottom: 15px;
}

.tnd-helpful-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    /* برای نمایش بهتر در موبایل */
}

.tnd-helpful-links a {
    text-decoration: none;
    color: var(--tnd-dark-teal);
    font-weight: 500;
    transition: color 0.3s;
}

.tnd-helpful-links a:hover {
    color: var(--tnd-orange-cta);
}

@media (max-width: 768px) {
    .error-404 .error-card {
        padding: 25px;
    }

    .error-404 .error-code {
        font-size: 80px;
    }

    .error-404 .page-title {
        font-size: 22px;
    }
}
/* ==========================================================================
   TondTon Sidebar Random Posts Widget Styles
   ========================================================================== */

/* 
   این ویجت از استایل ویجت محصولات الهام می‌گیرد.
   نام کلاس را به tnd-post-list-sidebar تغییر دادیم تا قابل تفکیک باشد،
   اما استایل‌ها مشابه هستند.
*/

.tnd-post-list-sidebar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tnd-post-list-sidebar li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    text-decoration: none;
    color: var(--tnd-text-dark);
    transition: background-color 0.2s, transform 0.2s;
    border-bottom: 1px solid var(--tnd-border-light);
    min-height: 58px;  
}

.tnd-post-list-sidebar li a:hover {
    background-color: var(--tnd-light-mint);
    transform: translateX(-5px);
    border-color: #cce0dd;
}

.tnd-post-list-sidebar img {
    width: 42px;    /* کمی بزرگتر برای تصویر شاخص */
    height: 42px;
    border-radius: 6px; /* کمی گردی برای هماهنگی با کارت‌ها */
    object-fit: cover;  /* تصویر کادر را پر می‌کند */
    flex-shrink: 0;
}

.tnd-post-list-sidebar span {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
}