/* استایل‌های محتوای داخل مقاله - مطابق سایت قدیمی */

/* استایل عمومی محتوا */
.postMain {
    padding: 1.333rem 1.666rem;
    direction: rtl;
    text-align: right;
    font-size: 1rem;
    color: #515761;
    line-height: 1.8rem;
}

/* جلوگیری از بیرون‌زدن محتوا از کادر - چه در مقالات، چه در تاپیک‌ها و چه نظرات اولیا
   (سه‌جای مشترک استفاده‌ی این فایل) - حتی اگر کاربر خودش استایل درستی برای متنش نداده
   باشد (مثل کلمه/لینک خیلی طولانی بدون فاصله، یا باکس نقل‌قول پاسخ) */
.postMain,
.postArticle {
    max-width: 100%;
    /* overflow-wrap فقط وقتی کلمه/لینک واقعاً از کادر بلندتر باشد می‌شکند؛ word-break:normal
       (به‌جای break-word غیراستاندارد) از شکستن وسط کلمات معمولی که جا می‌شوند جلوگیری می‌کند */
    overflow-wrap: break-word;
    word-break: normal;
}

.postMain blockquote,
.postArticle blockquote,
.postMain pre,
.postArticle pre {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
}

.postMain pre,
.postArticle pre {
    overflow-x: auto;
}

/* استایل لینک‌ها در محتوا */
.postMain a {
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    color: #1f51ff !important;
    text-decoration: none;
}

.postMain a:hover {
    text-decoration: underline;
}

/* استایل تیترها در محتوا */
.postMain h1,
.postArticle h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #063551;
    margin: 1.5rem 0 1rem 0;
    line-height: 2.2rem;
    direction: rtl;
    text-align: right;
}

.postMain h2,
.postArticle h2 {
    font-size: 1.5rem;
    font-weight: 600;
    /* color: #337ab7; */
    color: #fff;
    margin: 1.3rem 0 0.9rem 0;
    line-height: 2rem;
    direction: rtl;
    text-align: right;
}

.postMain h3,
.postArticle h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #444;
    margin: 1.2rem 0 0.8rem 0;
    line-height: 1.9rem;
    direction: rtl;
    text-align: right;
}

.postMain h4,
.postArticle h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #555;
    margin: 1rem 0 0.7rem 0;
    line-height: 1.8rem;
    direction: rtl;
    text-align: right;
}

.postMain h5,
.postArticle h5 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #666;
    margin: 0.9rem 0 0.6rem 0;
    line-height: 1.7rem;
    direction: rtl;
    text-align: right;
}

.postMain h6,
.postArticle h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #777;
    margin: 0.8rem 0 0.5rem 0;
    line-height: 1.6rem;
    direction: rtl;
    text-align: right;
}

/* استایل پاراگراف‌ها */
.postMain p,
.postArticle p {
    margin: 0.8rem 0;
    line-height: 1.8rem;
    direction: rtl;
    text-align: justify;
    text-justify: inter-word;
}

/* استایل لیست‌های شماره‌دار */
.postMain ol,
.postArticle ol {
    margin: 1rem 0;
    padding-right: 2rem;
    direction: rtl;
    list-style-type: decimal;
}

.postMain ol li,
.postArticle ol li {
    margin: 0.5rem 0;
    line-height: 1.8rem;
    direction: rtl;
    text-align: right;
}

/* استایل لیست‌های نقطه‌دار */
.postMain ul,
.postArticle ul {
    margin: 1rem 0;
    padding-right: 2rem;
    direction: rtl;
    list-style-type: disc;
}

.postMain ul li,
.postArticle ul li {
    margin: 0.5rem 0;
    line-height: 1.8rem;
    direction: rtl;
    text-align: right;
}

/* استایل تصاویر */
.postMain img,
.postArticle img {
    max-width: 100%;
    height: auto;
    display: block;
    /* margin: 1rem auto;
    border-radius: 0.25rem; */
}

.postMain img.img-fluid,
.postArticle img.img-fluid {
    max-width: 100%;
    height: auto;
}

/* استایل جداول */
.postMain table,
.postArticle table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    direction: rtl;
    text-align: right;
}

.postMain table th,
.postArticle table th {
    background-color: #337ab7;
    color: #fff;
    padding: 0.8rem;
    font-weight: 600;
    border: 1px solid #ddd;
    text-align: right;
}

.postMain table td,
.postArticle table td {
    padding: 0.8rem;
    border: 1px solid #ddd;
    text-align: right;
}

.postMain table tr:nth-child(even),
.postArticle table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.postMain table tr:hover,
.postArticle table tr:hover {
    background-color: #f0f0f0;
}

/* استایل بلوک کوت - مثلاً وقتی پاسخ به یک پست/کامنت را quote می‌کند (نقل‌قول کاربر قبلی
   در AddEditExpertPostClient.tsx) یا هر نقل‌قول دیگری داخل محتوا. عمداً پررنگ‌تر از حالت
   قبل (بوردر ضخیم‌تر، بکگراند با رنگ برند) + یک آیکون نقل‌قول در گوشه تا واضح‌تر باشد که
   این بخش نوشته‌ی شخص دیگری/پاسخ به یک پست است، نه ادامه‌ی متن خودِ نویسنده */
.postMain blockquote,
.postArticle blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background-color: rgba(51, 122, 183, 0.07);
    border-right: 0.3rem solid #337ab7;
    border-radius: 0.3rem;
    direction: rtl;
    text-align: right;
    font-style: italic;
    color: #555;
}

/* آیکون نقل‌قول قبل از اولین خط - inline (نه absolute) تا مستقل از اینکه اولین فرزند
   blockquote چه تگی باشد (p یا strong خام - بسته به نرمال‌سازی Quill)، همیشه طبیعی قبل
   از متن جا بگیرد، بدون همپوشانی با متن */
.postMain blockquote::before,
.postArticle blockquote::before {
    content: "\f10e"; /* fa-quote-right */
    font-family: "FontAwesome";
    color: #337ab7;
    opacity: 0.6;
    font-style: normal;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* استایل کد */
.postMain code,
.postArticle code {
    background-color: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #d63384;
}

.postMain pre,
.postArticle pre {
    background-color: #282c34;
    color: #abb2bf;
    padding: 1rem;
    border-radius: 0.3rem;
    overflow-x: auto;
    margin: 1rem 0;
    direction: ltr;
    text-align: left;
}

.postMain pre code,
.postArticle pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* استایل خطوط افقی */
.postMain hr,
.postArticle hr {
    margin: 2rem 0;
    border: 0;
    border-top: 2px solid #ddd;
}

/* استایل متن bold */
.postMain strong,
.postMain b,
.postArticle strong,
.postArticle b {
    font-weight: 700;
    color: #333;
}

/* استایل متن italic */
.postMain em,
.postMain i,
.postArticle em,
.postArticle i {
    font-style: italic;
}

/* استایل متن highlight */
.postMain mark,
.postArticle mark {
    background-color: #fff3cd;
    padding: 0.1rem 0.3rem;
}

/* استایل محتوای مقاله */
.Content {
    line-height: 1.8rem;
    direction: rtl;
    text-align: right;
}

.Content.postArticle {
    font-size: 1rem;
    color: #515761;
    /* رفع بهم‌ریختگی متون انگلیسی/اعداد داخل جملات فارسی */
    unicode-bidi: plaintext;
}

.Content.postArticle p,
.Content.postArticle li,
.Content.postArticle span,
.Content.postArticle div {
    unicode-bidi: plaintext;
}

/* فیکس برای موبایل */
@media only screen and (max-width: 768px) {
    .postMain {
        padding: 0 0.3rem !important;
    }

    .postMain h1,
    .postArticle h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .postMain h2,
    .postArticle h2 {
        font-size: 1.3rem;
        line-height: 1.8rem;
    }

    .postMain h3,
    .postArticle h3 {
        font-size: 1.15rem;
        line-height: 1.6rem;
    }

    .postMain table,
    .postArticle table {
        font-size: 0.9rem;
    }

    .postMain table th,
    .postMain table td,
    .postArticle table th,
    .postArticle table td {
        padding: 0.5rem;
    }
}

/* اسمایل‌ها و آیکون‌های کوچک */
.postMain img[src*="smiles"],
.postMain img[src*="Smiles"],
.postArticle img[src*="smiles"],
.postArticle img[src*="Smiles"] {
    display: inline;
    margin: 0;
    vertical-align: middle;
    max-width: 24px;
    height: auto;
}

/* استایل ویدیو و iframe */
.postMain iframe,
.postArticle iframe {
    max-width: 100%;
    margin: 1rem auto;
    display: block;
}

.postMain video,
.postArticle video {
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    display: block;
}

/* استایل دکمه‌ها در محتوا */
.postMain .btn,
.postArticle .btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0.25rem;
    /* background-color: #337ab7; */
    color: #fff;
    text-decoration: none;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.postMain .btn:hover,
.postArticle .btn:hover {
    /* background-color: #286090; */
    text-decoration: none;
}

/* استایل جداکننده */
.Seprator {
    width: 100%;
    margin: 1.5rem 0;
    border-top: 1px solid #e0e0e0;
}