/* ================================================================= */
/* SINGLE POST PAGE STYLES (หน้าเนื้อหา) */
/* ================================================================= */

/* Container สำหรับเนื้อหา */
.post-content {
    max-width: 100% !important;
    font-size: 1.0625rem !important; /* 17px - อ่านง่าย */
    line-height: 1.8 !important; /* เพิ่ม line-height เพื่อความอ่านง่าย */
    color: #2c3e50 !important;
    letter-spacing: 0.01em;
}

/* Paragraphs - จัดระยะห่างให้สวยงาม */
.post-content p {
    margin-bottom: 1.5em !important;
    margin-top: 0;
    text-align: left !important; /* เปลี่ยนจาก justify เป็น left เพื่อให้การเว้นวรรคเป็นธรรมชาติ */
    word-break: normal !important; /* ไม่ให้ตัดคำกลางคำ */
    overflow-wrap: normal !important;
}

/* หัวข้อบทความหลัก */
h1.post-title {
    text-align: left !important;
    color: #e65100 !important;
    font-weight: 700;
    line-height: 1.4;
    background: linear-gradient(135deg, #fffde7 0%, #fff3e0 100%) !important;
    border: 2px solid #ffcc80 !important;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 20px !important;
    box-shadow: 0 10px 25px rgba(245, 124, 0, 0.12);
}

/* หัวข้อภายในบทความ */
.post-content h1 {
    font-size: 2.25em !important; /* 36px */
    color: var(--primary-orange) !important;
    margin-top: 1.8em !important;
    margin-bottom: 0.8em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    border-bottom: 3px solid var(--primary-orange) !important;
    padding-bottom: 0.5em !important;
}

.post-content h2 {
    font-size: 1.875em !important; /* 30px */
    color: var(--primary-orange) !important;
    margin-top: 1.6em !important;
    margin-bottom: 0.7em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    background-color: #fff9c4 !important; /* พื้นหลังเหลืองอ่อน */
    border: 2px solid var(--primary-orange) !important; /* กรอบสี่เหลี่ยม */
    border-radius: 8px !important; /* มุมโค้งมนเล็กน้อย */
    padding: 12px 18px !important; /* padding ภายใน */
    box-shadow: 0 2px 6px rgba(245, 124, 0, 0.1) !important; /* shadow เบาๆ */
}

.post-content h3 {
    font-size: 1.5em !important; /* 24px */
    color: var(--primary-orange) !important;
    margin-top: 1.4em !important;
    margin-bottom: 0.6em !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    background-color: #fffef5 !important; /* พื้นหลังเหลืองอ่อนกว่า h2 */
    border: 2px solid var(--secondary-orange) !important; /* กรอบสี่เหลี่ยม */
    border-radius: 8px !important; /* มุมโค้งมนเล็กน้อย */
    padding: 10px 16px !important; /* padding ภายใน */
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.1) !important; /* shadow เบาๆ */
}

.post-content h4 {
    font-size: 1.25em !important; /* 20px */
    color: #d84315 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.5em !important;
    font-weight: 600 !important;
}

.post-content h5,
.post-content h6 {
    font-size: 1.125em !important; /* 18px */
    color: #666 !important;
    margin-top: 1em !important;
    margin-bottom: 0.4em !important;
    font-weight: 600 !important;
}

/* ตัวหนา */
.post-content strong,
.post-content b {
    color: #d84315 !important;
    font-weight: 700;
}

/* สารบัญ (TOC) */
.toc {
    background-color: #fffde7 !important;
    border: 1px solid #ffe0b2;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 20px 0;
}

.toc summary {
    color: #ef6c00;
    font-weight: bold;
    cursor: pointer;
}

.toc a {
    text-decoration: none;
    color: #666;
    transition: all 0.2s;
}

.toc a:hover {
    color: var(--primary-orange);
    text-decoration: underline;
}

/* รายการ (Lists) */
.post-content ul,
.post-content ol {
    margin: 1.5em 0 !important;
    padding-left: 2em !important;
}

.post-content ul li {
    margin: 0.3em 0 !important;
    line-height: 1.7 !important;
    list-style-type: disc !important;
}

.post-content ul li::marker {
    color: var(--secondary-orange) !important;
    font-size: 1.3em !important;
}

.post-content ol li {
    margin: 0.3em 0 !important;
    line-height: 1.7 !important;
    padding-left: 0.5em !important;
}

.post-content ol li::marker {
    color: var(--primary-orange) !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
}

/* Nested lists */
.post-content ul ul,
.post-content ol ol,
.post-content ul ol,
.post-content ol ul {
    margin: 0.5em 0 !important;
    padding-left: 1.5em !important;
}

/* Code Inline */
.post-content code {
    background-color: #fff3e0 !important;
    color: #e65100 !important;
    border: 1px solid #ffe0b2;
    border-radius: 4px;
    padding: 3px 8px !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    font-weight: 500;
}

/* Code Blocks */
.post-content pre {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
    border-radius: 8px !important;
    padding: 1.5em !important;
    margin: 2em 0 !important;
    overflow-x: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #444 !important;
}

.post-content pre code {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.9em !important;
    line-height: 1.6 !important;
}

/* ลิงก์ในบทความ */
.post-content a {
    color: var(--primary-orange);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary-orange);
    transition: all 0.2s;
}

.post-content a:hover {
    background-color: #fff3e0 !important;
    border-bottom: 1px solid var(--primary-orange) !important;
    color: #d84315 !important;
}

/* Images */
.post-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 2em auto !important;
    display: block !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eee !important;
}

.post-content figure {
    margin: 2em 0 !important;
    text-align: center !important;
}

.post-content figcaption {
    margin-top: 0.8em !important;
    font-size: 0.9em !important;
    color: #666 !important;
    font-style: italic !important;
}

/* Tables */
.post-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 2em 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.post-content table th {
    background-color: #fff3e0 !important;
    color: #e65100 !important;
    font-weight: 600 !important;
    padding: 0.8em 1em !important;
    text-align: left !important;
    border-bottom: 2px solid var(--primary-orange) !important;
}

.post-content table td {
    padding: 0.8em 1em !important;
    border-bottom: 1px solid #eee !important;
}

.post-content table tr:last-child td {
    border-bottom: none !important;
}

.post-content table tr:hover {
    background-color: #fffef5 !important;
}

/* Blockquote */
.post-content blockquote {
    border-left: 4px solid var(--secondary-orange) !important;
    background-color: #fff8e1 !important;
    padding: 1.2em 1.5em !important;
    margin: 2em 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #555 !important;
    font-style: italic !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.post-content blockquote p {
    margin-bottom: 0.8em !important;
}

.post-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* Horizontal Rules */
.post-content hr {
    border: none !important;
    border-top: 2px solid #eee !important;
    margin: 3em 0 !important;
    background: none !important;
}

/* Post Meta (วันที่/Tags) */
.post-meta {
    text-align: center;
    color: #888;
    margin-bottom: 40px !important;
}

.post-meta-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: 5px;
}

.post-meta-left {
    text-align: left;
}

.post-meta-left .post-meta {
    text-align: left !important;
    margin-bottom: 0 !important;
}

.post-meta-right {
    text-align: right;
}

.post-meta-right a {
    display: inline-block;
    background-color: #fff3e0;
    color: #ef6c00;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 15px;
    border: 1px solid #ffe0b2;
    margin-left: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-meta-right a:hover {
    background-color: var(--secondary-orange);
    color: #fff;
    transform: translateY(-1px);
}

@media screen and (max-width: 600px) {
    .post-meta-right {
        text-align: left;
        margin-top: 10px;
        width: 100%;
    }
    
    .post-meta-right a {
        margin-left: 0;
        margin-right: 8px;
        margin-bottom: 5px;
    }
}

/* Obsidian Callouts/Admonitions */
.post-content .callout,
.post-content [class*="callout"] {
    border-radius: 8px !important;
    padding: 1.2em 1.5em !important;
    margin: 2em 0 !important;
    border-left: 4px solid #666 !important;
    background-color: #f9f9f9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.post-content .callout-title,
.post-content [class*="callout-title"] {
    font-weight: 600 !important;
    margin-bottom: 0.5em !important;
    color: #333 !important;
}

/* Emphasis และ Text Decorations */
.post-content em {
    font-style: italic !important;
    color: #555 !important;
}

.post-content del {
    text-decoration: line-through !important;
    color: #999 !important;
}

.post-content mark {
    background-color: #fff9c4 !important;
    color: #333 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

/* Definition Lists */
.post-content dl {
    margin: 1.5em 0 !important;
}

.post-content dt {
    font-weight: 600 !important;
    color: var(--primary-orange) !important;
    margin-top: 1em !important;
    margin-bottom: 0.3em !important;
}

.post-content dd {
    margin-left: 1.5em !important;
    margin-bottom: 0.8em !important;
    color: #555 !important;
}

/* Responsive สำหรับมือถือ */
@media screen and (max-width: 768px) {
    .post-content {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
    
    .post-content h1 {
        font-size: 1.875em !important;
    }
    
    .post-content h2 {
        font-size: 1.5em !important;
    }
    
    .post-content h3 {
        font-size: 1.25em !important;
    }
    
    .post-content pre {
        padding: 1em !important;
        font-size: 0.85em !important;
    }
    
    .post-content table {
        font-size: 0.9em !important;
    }
    
    .post-content table th,
    .post-content table td {
        padding: 0.6em 0.8em !important;
    }
}

/* ================================================================= */
/* DARK MODE - SINGLE POST */
/* ================================================================= */
body.dark h1.post-title {
    background: var(--card-dark) !important;
    border-color: #444 !important;
    color: #ffcc80 !important;
    box-shadow: none;
}

body.dark .post-content h1,
body.dark .post-content h2,
body.dark .post-content h3 {
    color: #ffe082 !important;
}

body.dark .post-content strong,
body.dark .post-content b {
    color: #ffd54f !important;
}

body.dark .post-content code {
    background-color: rgba(255, 213, 79, 0.1) !important;
    color: #ffe082 !important;
    border: 1px solid rgba(255, 213, 79, 0.2) !important;
}

body.dark .post-content a {
    color: #90caf9 !important;
    border-bottom: 1px dashed rgba(144, 202, 249, 0.5) !important;
}

body.dark .post-content a:hover {
    background-color: rgba(144, 202, 249, 0.1) !important;
    border-bottom: 1px solid #90caf9 !important;
}

body.dark .post-meta-right a {
    background-color: #3e2723;
    border-color: #5d4037;
    color: #ffcc80;
}

body.dark .post-meta-right a:hover {
    background-color: #ffcc80;
    color: #3e2723;
}

/* ข้อความหลักใน dark mode */
body.dark .post-content {
    color: #e0e0e0 !important;
}

body.dark .post-content p {
    color: #e0e0e0 !important;
}

/* หัวข้อ h2 และ h3 ที่มีพื้นหลังสีเหลือง - เปลี่ยนเป็นสีเข้ม */
body.dark .post-content h2 {
    background-color: rgba(255, 204, 128, 0.15) !important;
    border-color: rgba(255, 204, 128, 0.4) !important;
    color: #ffcc80 !important;
}

body.dark .post-content h3 {
    background-color: rgba(255, 224, 130, 0.12) !important;
    border-color: rgba(255, 224, 130, 0.3) !important;
    color: #ffe082 !important;
}

body.dark .post-content h4 {
    color: #ffcc80 !important;
}

body.dark .post-content h5,
body.dark .post-content h6 {
    color: #cccccc !important;
}

/* รายการ (Lists) */
body.dark .post-content ul li::marker {
    color: #ffcc80 !important;
}

body.dark .post-content ol li::marker {
    color: #ffcc80 !important;
}

body.dark .post-content li {
    color: #e0e0e0 !important;
}

/* Blockquote */
body.dark .post-content blockquote {
    background-color: rgba(255, 204, 128, 0.1) !important;
    border-left-color: #ffcc80 !important;
    color: #e0e0e0 !important;
}

/* Figcaption */
body.dark .post-content figcaption {
    color: #b0b0b0 !important;
}

/* Emphasis */
body.dark .post-content em {
    color: #d0d0d0 !important;
}

/* Definition Lists */
body.dark .post-content dd {
    color: #d0d0d0 !important;
}

body.dark .post-content dt {
    color: #ffcc80 !important;
}

/* Mark/Highlight */
body.dark .post-content mark {
    background-color: rgba(255, 204, 128, 0.3) !important;
    color: #fff !important;
}

/* Del/Strikethrough */
body.dark .post-content del {
    color: #b0b0b0 !important;
}

/* Tables */
body.dark .post-content table {
    border-color: #444 !important;
}

body.dark .post-content table th {
    background-color: rgba(255, 204, 128, 0.15) !important;
    color: #ffcc80 !important;
    border-color: #555 !important;
}

body.dark .post-content table td {
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark .post-content table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Horizontal Rules */
body.dark .post-content hr {
    border-top-color: #555 !important;
}

/* Callouts/Admonitions */
body.dark .post-content .callout,
body.dark .post-content [class*="callout"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-left-color: #888 !important;
}

body.dark .post-content .callout-title,
body.dark .post-content [class*="callout-title"] {
    color: #ffcc80 !important;
}

/* TOC */
body.dark .toc {
    background-color: rgba(255, 204, 128, 0.1) !important;
    border-color: rgba(255, 204, 128, 0.3) !important;
}

body.dark .toc summary {
    color: #ffcc80 !important;
}

body.dark .toc a {
    color: #d0d0d0 !important;
}

body.dark .toc a:hover {
    color: #ffcc80 !important;
}

/* ================================================================= */
/* ESSAY ENTRY STYLES (บทความ) - Single Page */
/* ================================================================= */

/* หัวข้อบทความหลัก */
.post-single.essay-entry h1.post-title {
    color: #357abd !important;
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%) !important;
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.15) !important;
}

/* หัวข้อภายในบทความ */
.post-single.essay-entry .post-content h1 {
    color: #357abd !important;
    border-bottom: 3px solid #4a90e2 !important;
}

.post-single.essay-entry .post-content h2 {
    color: #357abd !important;
    background-color: #e8f4fd !important;
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.1) !important;
}

.post-single.essay-entry .post-content h3 {
    color: #357abd !important;
    background-color: #f0f7ff !important;
    border: 2px solid #5a9de2 !important;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.1) !important;
}

.post-single.essay-entry .post-content h4 {
    color: #357abd !important;
}

/* ตัวหนา */
.post-single.essay-entry .post-content strong,
.post-single.essay-entry .post-content b {
    color: #357abd !important;
}

/* สารบัญ (TOC) */
.post-single.essay-entry .toc {
    background-color: #e8f4fd !important;
    border: 1px solid #90caf9 !important;
}

.post-single.essay-entry .toc summary {
    color: #357abd !important;
}

.post-single.essay-entry .toc a:hover {
    color: #4a90e2 !important;
}

/* Code Inline */
.post-single.essay-entry .post-content code {
    background-color: #e3f2fd !important;
    color: #357abd !important;
    border: 1px solid #90caf9 !important;
}

/* ลิงก์ */
.post-single.essay-entry .post-content a {
    color: #357abd !important;
    border-bottom: 1px dotted #4a90e2 !important;
}

.post-single.essay-entry .post-content a:hover {
    background-color: #e3f2fd !important;
    border-bottom: 1px solid #4a90e2 !important;
    color: #2a5a9d !important;
}

/* Tables */
.post-single.essay-entry .post-content table th {
    background-color: #e3f2fd !important;
    color: #357abd !important;
    border-bottom: 2px solid #4a90e2 !important;
}

.post-single.essay-entry .post-content table tr:hover {
    background-color: #f0f7ff !important;
}

/* Blockquote */
.post-single.essay-entry .post-content blockquote {
    border-left: 4px solid #4a90e2 !important;
    background-color: #e8f4fd !important;
}

/* List markers */
.post-single.essay-entry .post-content ul li::marker,
.post-single.essay-entry .post-content ol li::marker {
    color: #357abd !important;
}

/* Post Meta Tags */
.post-single.essay-entry .post-meta-right a {
    background-color: #e3f2fd !important;
    color: #357abd !important;
    border: 1px solid #90caf9 !important;
}

.post-single.essay-entry .post-meta-right a:hover {
    background-color: #4a90e2 !important;
    color: #fff !important;
    border-color: #4a90e2 !important;
}

/* Dark Mode สำหรับบทความ essay */
body.dark .post-single.essay-entry h1.post-title {
    color: #7bb3f0 !important;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.2) 0%, rgba(74, 144, 226, 0.15) 100%) !important;
    border-color: #5a9de2 !important;
    box-shadow: 0 10px 25px rgba(74, 144, 226, 0.2) !important;
}

body.dark .post-single.essay-entry .post-content h1 {
    color: #7bb3f0 !important;
    border-bottom-color: #5a9de2 !important;
}

body.dark .post-single.essay-entry .post-content h2 {
    color: #7bb3f0 !important;
    background-color: rgba(74, 144, 226, 0.15) !important;
    border-color: #5a9de2 !important;
}

body.dark .post-single.essay-entry .post-content h3 {
    color: #7bb3f0 !important;
    background-color: rgba(74, 144, 226, 0.1) !important;
    border-color: #6aa5e5 !important;
}

body.dark .post-single.essay-entry .post-content h4 {
    color: #7bb3f0 !important;
}

body.dark .post-single.essay-entry .post-content strong,
body.dark .post-single.essay-entry .post-content b {
    color: #7bb3f0 !important;
}

body.dark .post-single.essay-entry .toc {
    background-color: rgba(74, 144, 226, 0.1) !important;
    border-color: rgba(90, 157, 226, 0.3) !important;
}

body.dark .post-single.essay-entry .toc summary {
    color: #7bb3f0 !important;
}

body.dark .post-single.essay-entry .toc a:hover {
    color: #9cc5f5 !important;
}

body.dark .post-single.essay-entry .post-content code {
    background-color: rgba(74, 144, 226, 0.15) !important;
    color: #9cc5f5 !important;
    border-color: rgba(90, 157, 226, 0.3) !important;
}

body.dark .post-single.essay-entry .post-content a {
    color: #90caf9 !important;
    border-bottom-color: rgba(144, 202, 249, 0.5) !important;
}

body.dark .post-single.essay-entry .post-content a:hover {
    background-color: rgba(74, 144, 226, 0.15) !important;
    border-bottom-color: #90caf9 !important;
    color: #b3d9ff !important;
}

body.dark .post-single.essay-entry .post-content table th {
    background-color: rgba(74, 144, 226, 0.15) !important;
    color: #9cc5f5 !important;
    border-bottom-color: #5a9de2 !important;
}

body.dark .post-single.essay-entry .post-content table tr:hover {
    background-color: rgba(74, 144, 226, 0.1) !important;
}

body.dark .post-single.essay-entry .post-content blockquote {
    background-color: rgba(74, 144, 226, 0.1) !important;
    border-left-color: #5a9de2 !important;
}

body.dark .post-single.essay-entry .post-content ul li::marker,
body.dark .post-single.essay-entry .post-content ol li::marker {
    color: #7bb3f0 !important;
}

body.dark .post-single.essay-entry .post-meta-right a {
    background-color: rgba(74, 144, 226, 0.15) !important;
    color: #9cc5f5 !important;
    border-color: rgba(90, 157, 226, 0.4) !important;
}

body.dark .post-single.essay-entry .post-meta-right a:hover {
    background-color: #5a9de2 !important;
    color: #fff !important;
    border-color: #5a9de2 !important;
}