/* =========================================================
   blog-theme.css (v2.33 - Vertical Layout Fix)
   - Uses new strategy: parent is horizontal-scroll,
     child <p> tags are vertical-lr.
   - Fixes JS conflict.
   ========================================================= */

/* --- Local Font Definition --- */
@font-face {
  font-family: 'TraMN_Blog_Font';
  src: url('../fonts/noto-sans-mongolian-v23-latin_latin-ext_math_mongolian_symbols-regular.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: "Noto Sans JP", sans-serif;
    color: #1b1a19;
}

body {
    /* background: #6b5847 url(...) repeat; */ 
}

/* === SKIP TO CONTENT LINK === */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: #e07a00;
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
  font-weight: 600;
}
.skip-to-content:focus {
  top: 1rem;
}

/* === HEADER === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 3px solid #e07a00;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.site-title a {
    color: #3b2411;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.8rem); 
    font-family: "Noto Serif JP", serif;
    letter-spacing: 0.02em;
    
    /* === NEW FIX: ADD THIS LINE === */
    flex: 1; /* This makes it fill the space and align left */
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.script-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e07a00;
    border-radius: 20px;
}
.archive .script-selector,
.search .script-selector {
    display: none;
}
.script-selector label {
    font-size: 0.8rem;
    color: #5a4943;
    font-weight: 600;
}
.script-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #5a4943;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Noto Sans JP", sans-serif;
}
.script-btn.active {
    background: #e07a00;
    color: #fff;
    font-weight: 600;
}
.script-btn:hover:not(.active) {
    background: rgba(224, 122, 0, 0.1);
}
.script-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent !important;
    color: #5a4943 !important;
}

/* Override for the active+disabled button */
.script-btn.active:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: #e07a00 !important; /* Keep it orange */
    color: #fff !important;
}
.nav-toggle {
    appearance: none;
    border: 0;
    background: none;
    color: #3b2411;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 8px;
    transition: all 0.3s ease;
}
.nav-toggle:hover {
    color: #e07a00;
    transform: rotate(90deg);
}

/* === OVERLAY NAV === */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 20, 18, 0.97);
    color: #f4f0e8;
    display: none;
    z-index: 999;
    overflow-y: auto;
    padding: 80px 40px 40px;
}
.nav-overlay.open {
    display: block;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.nav-panel {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}
.nav-close {
    position: fixed;
    top: 20px;
    right: 30px;
    appearance: none;
    border: 0;
    background: rgba(224, 122, 0, 0.9);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}
.nav-close:hover {
    background: #e07a00;
    transform: scale(1.1);
}
.nav-section h3 {
    color: #e07a00;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e07a00;
    font-family: "Noto Serif JP", serif;
}
.nav-section ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.nav-section a {
    display: block;
    padding: 10px 0;
    color: #f4f0e8;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    font-size: 1rem;
}
.nav-section a:hover {
    color: #e07a00;
    padding-left: 12px;
    border-color: #e07a00;
}

/* === DESK STAGE === */
.desk-stage {
    height: 100vh;
    padding-top: 60px; /* Header height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* === PARCHMENT (Default) === */
.parchment-container {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 900px);
    height: calc(100vh - 140px);
    
    /* --- DEFAULT SCROLL --- */
    overflow-y: auto;   /* Default: vertical scroll */
    overflow-x: hidden; /* Default: no horizontal scroll */
    
    z-index: 2;
    background: #fdfcf6; 
    border: 1px solid #e8e4d3; 
    padding: 35px 30px; /* Default padding */
    
    box-shadow: inset 0 0 20px rgba(220,215,200,0.8), 0 8px 22px rgba(0, 0, 0, 0.15);
}

.parchment-content {
    padding: 0; /* Content has no padding */
    height: auto; /* Default: auto height */
}

/* Folded corner */
.parchment-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 45%,
    rgba(240,230,200,0.9) 46%,
    rgba(220,210,180,1) 60%,
    rgba(0,0,0,0.05) 100%
  );
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  z-index: 3;
}

.parchment-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.parchment-container::-webkit-scrollbar-track {
    background: rgba(233, 220, 200, 0.3);
}
.parchment-container::-webkit-scrollbar-thumb {
    background: rgba(224, 122, 0, 0.5);
    border-radius: 4px;
}


/* === LATEST POST (Default Horizontal) === */
.latest-post {
    height: auto; 
}
.latest-post h2,
.latest-post .post-title,
.post-list .page-title {
    color: #e07a00;
    font-size: 2rem;
    margin-bottom: 8px;
    font-family: "Noto Serif JP", serif;
    line-height: 1.4;
    margin-top: 0;
}
.latest-post .post-title a { color: inherit; text-decoration: none; }
.latest-post .post-title a:hover { color: #3b2411; }

.latest-post .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: #777;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9dcc8;
}
.latest-post .post-meta .date::before { content: "\1F4C5\20 "; }
.latest-post .post-meta .categories::before { content: "\1F3F7\FE0F\20 "; }
.latest-post .post-meta .categories a { color: #777; text-decoration: none; }
.latest-post .post-meta .categories a:hover { color: #e07a00; }

.latest-post .post-content {
    color: #3b2411;
    line-height: 1.8;
    font-size: 1rem;
}
.latest-post .post-content p { margin-bottom: 16px; }
.latest-post .post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.latest-post .post-content a { color: #e07a00; }
.latest-post .post-content a:hover { color: #3b2411; }


/* === Script variations === */
.lang-content { display: none; margin-bottom: 1rem; }
.lang-content.lang-ja { font-size: 1rem; }
.lang-content.lang-mn-cy { font-size: 1rem; }

/* --- BLOCK 3: VERTICAL MONGOLIAN (NEW STRATEGY) --- */

/* The Parent Container (Horizontal Scroll)
   This is set to display: block by the JS.
   It scrolls horizontally to show the vertical <p> columns.
*/
.lang-content.lang-mn-trad {
    font-family: "TraMN_Blog_Font", sans-serif;
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: justify;

    width: 100%; 
    height: 100%; /* FIX: Fill the parent block */
    overflow-x: auto; /* FIX: Enable horizontal scroll */
    overflow-y: hidden;
    padding-bottom: 10px; /* Space for scrollbar */
    white-space: nowrap; /* Keep <p> tags in one line */
}

/* The Child Paragraphs (Vertical Text)
   These are the vertical columns.
*/
.lang-content.lang-mn-trad p {
    display: inline-block; 
    vertical-align: top;
    
    /* === FIX: Set physical dimensions === */
    width: auto;   /* This is the horizontal width of the column */
    height: 100%;   /* This is the vertical height of the column */

    /* === FIX: Add margin for spacing === */
    margin-right: 1.5rem; /* This creates the "gap" */

    flex-shrink: 0; /* (Safety rule, no effect) */
    
    /* This allows a single long paragraph to scroll */
    overflow-y: auto; 
    padding-right: 10px; /* Space for internal scrollbar */

    /* Move writing-mode properties here */
    writing-mode: vertical-lr;
    direction: ltr;
    text-orientation: sideways;
    white-space: normal; /* Allow text inside to wrap */
}
.lang-content.lang-mn-trad::-webkit-scrollbar { height: 12px; width: 0; }
.lang-content.lang-mn-trad::-webkit-scrollbar-track { background: rgba(233, 220, 200, 0.5); border-radius: 6px; }
.lang-content.lang-mn-trad::-webkit-scrollbar-thumb { background: rgba(224, 122, 0, 0.7); border-radius: 6px; }
        
        
/* === 4-COLUMN FLEXBOX LAYOUT (for .mode-mn) === */

/* --- :has() selector scopes all scroll logic --- */
.parchment-container:has(.mode-mn) {
    overflow-y: hidden; /* Turn OFF vertical scroll */
    overflow-x: auto;   /* Turn ON horizontal scroll */
    padding: 0; /* Remove padding, content will handle it */
}
.parchment-container:has(.mode-mn) .parchment-content {
    height: 100%;
    padding: 35px 30px;
}

.latest-post.mode-mn {
    display: flex; 
    flex-direction: row;
    align-items: flex-start; 
    gap: 20px;
    height: 100%;
    width: auto; /* Allow it to grow horizontally */
}

/* Block 1: Vertical Title */
.latest-post.mode-mn .post-title,
.latest-post.mode-mn h2 {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-family: "TraMN_Blog_Font", sans-serif;
    border-bottom: none;
    border-right: 2px solid #e9dcc8;
    padding-right: 12px; margin: 0;
    flex-shrink: 0; 
    height: 100%; 
}

/* Wrapper for Blocks 2, 3, 4 */
.latest-post.mode-mn .post-main-content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 100%;
}
        
/* Block 2: Vertical Metadata */
.latest-post.mode-mn .post-meta {
    flex-shrink: 0; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    border-bottom: none;
    border-right: 2px solid #e9dcc8;
    padding-right: 12px; margin: 0;
    gap: 16px;
    height: 100%;
}
.latest-post.mode-mn .post-meta span {
    display: block; 
    writing-mode: vertical-lr;
    text-orientation: mixed;
    margin-bottom: 16px; 
}
.latest-post.mode-mn .post-meta span:last-child {
    margin-bottom: 0;
}

/* Block 3: Passage (Vertical) */
.latest-post.mode-mn .post-content {
    flex: 1; 
    min-width: 0;
    height: 100%;
    overflow-y: hidden; 
}

/* === BLOCK 4: COMMENTS (Default & Vertical) === */

/* Default Comment Styles (for JP/CYR) */
.comments-area {
    color: #3b2411;
    margin-top: 3rem; 
    border-top: 2px solid #e9dcc8; 
    padding-top: 2rem;
    font-size: 1rem;
}
.comments-title,
.comment-reply-title {
    color: #e07a00;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: "Noto Serif JP", serif;
    line-height: 1.4;
    border-bottom: 2px solid #e9dcc8;
    padding-bottom: 1rem;
}
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}
.comment {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed #e9dcc8;
}
.comment-body {
    line-height: 1.9;
}
.comment-content p {
    /* Default: horizontal */
    writing-mode: horizontal-tb;
}

/* --- .mode-mn Specific Comment Styles --- */
.latest-post.mode-mn .comments-area {
    flex: 0 0 320px; /* Fixed width for the column */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    border-left: 2px solid #e9dcc8;
    padding-left: 16px;
    margin: 0; /* Override default */
    border-top: none; /* Override default */
    padding-top: 0; /* Override default */
    height: 100%;
    overflow-y: auto; /* Internal vertical scroll */
    overflow-x: hidden;
    position: relative;
    writing-mode: horizontal-tb; /* RESET writing mode */
}

/* Left Rail: Vertical Title */
.latest-post.mode-mn .comments-title {
    margin: 0;
    padding-right: 12px;
    border-right: 2px solid #e9dcc8;
    border-bottom: none; /* Override default */
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "Noto Serif JP", serif;
}

/* Right Rail: Panel for list and form */
.latest-post.mode-mn .comment-panel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto; /* Internal horizontal scroll */
    overflow-y: hidden; /* Handled by parent */
    white-space: nowrap; /* For the ribbon */
    padding-left: 12px;
    height: 100%;
}

.latest-post.mode-mn .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Horizontal ribbon */
    gap: 20px;
    white-space: nowrap;
}
.latest-post.mode-mn .comment {
    display: inline-block;
    white-space: normal;
    height: 100%;
    max-height: 90%; /* Prevent overflow */
    margin: 0; /* Reset */
    padding: 0; /* Reset */
    border: none; /* Reset */
}
.latest-post.mode-mn .comment-body {
    min-width: 2em;
    line-height: 1.9;
    padding: 8px;
    border-radius: 6px;
    background: rgba(240, 235, 220, 0.45);
    height: 100%;
    overflow-y: auto; /* Allow individual comments to scroll */
}

/* Make comment content vertical */
.latest-post.mode-mn .comment-content p {
    writing-mode: vertical-rl;
    text-orientation: sideways; /* Default */
    font-family: "TraMN_Blog_Font", sans-serif; /* Use Mongolian font */
}
/* Specific overrides for JP/CYR */
.latest-post.mode-mn .cm-jp .comment-content p {
    text-orientation: upright;
    font-family: "Noto Sans JP", sans-serif;
}
.latest-post.mode-mn .cm-mn .comment-content p {
    font-family: "Noto Sans", sans-serif;
}


/* Comment Form */
#respond {
    display: block; /* Default */
}
.latest-post.mode-mn #respond {
    display: inline-block; /* Add to ribbon */
    vertical-align: top;
    height: 100%;
    white-space: normal;
}

.latest-post.mode-mn .comment-reply-title {
    display: none; /* Hide in vertical mode */
}
#commentform {
    /* Default styles */
    background: rgba(240, 235, 220, 0.4);
    border: 1px solid #e9dcc8;
    padding: 1.5rem;
    border-radius: 4px;
}
.latest-post.mode-mn #commentform {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
#commentform p { margin-bottom: 1rem; }
.latest-post.mode-mn #commentform p { margin-bottom: 0; }

#commentform .comment-form-comment {
     /* Default */
}
.latest-post.mode-mn #commentform .comment-form-comment {
    flex-grow: 1;
    display: flex;
}

#commentform .comment-form-comment textarea {
    /* Default */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1c8b6;
    background: #fff;
    border-radius: 4px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
}
.latest-post.mode-mn #commentform .comment-form-comment textarea {
    width: 12rem;
    height: 100%;
    min-height: 20rem;
    resize: both;
    padding: 8px;
    border: 1px solid #e9dcc8;
    border-radius: 4px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.8;
}

#commentform .form-submit {
     /* Default */
}
.latest-post.mode-mn #commentform .form-submit {
    flex-shrink: 0;
    margin-top: 8px;
}
#commentform .form-submit input[type="submit"] {
    background: #e07a00;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Noto Sans JP", sans-serif;
    border-radius: 4px;
    cursor: pointer;
}
#commentform .form-submit input[type="submit"]:hover {
    background: #3b2411;
}


/* === POST LIST (Archive pages) === */
.post-list {
    margin-top: 0; 
}
.post-list h3 {
    color: #e07a00;
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e07a00;
    font-family: "Noto Serif JP", serif;
}
.post-preview {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e9dcc8;
}
.post-preview:last-child { border-bottom: none; }
.post-preview h4 { font-size: 1.1rem; margin-bottom: 6px; }
.post-preview h4 a { color: #3b2411; text-decoration: none; }
.post-preview h4 a:hover { color: #e07a00; }
.post-preview .meta { font-size: 0.8rem; color: #999; margin-bottom: 8px; }
.post-preview .meta a { color: #999; text-decoration: none; }
.post-preview .meta a:hover { color: #e07a0im; }
.post-preview .excerpt { color: #5a4943; font-size: 0.9rem; line-height: 1.6; }


/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
    .parchment-container {
        width: 100%; top: 60px; height: calc(100vh - 60px);
        padding: 20px 15px;
        overflow-y: auto; 
        overflow-x: hidden;
    }
    .parchment-content { height: auto; padding: 0; }
    .script-selector { display: none; }

    /* --- MN Mode Mobile Reset --- */
    .parchment-container:has(.mode-mn) {
        padding: 20px 15px;
    }
    .parchment-container:has(.mode-mn) .parchment-content {
        height: auto;
        padding: 0;
    }
    
    .latest-post,
    .latest-post.mode-mn {
        flex-direction: column;
        height: auto; 
        min-width: 0;
    }
    .latest-post.mode-mn .post-title,
    .latest-post.mode-mn h2 {
        writing-mode: horizontal-tb;
        border-right: none;
        border-bottom: 2px solid #e9dcc8;
        padding-right: 0; padding-bottom: 12px;
        margin-bottom: 20px; max-height: none;
        height: auto; 
    }
    
    .latest-post.mode-mn .post-main-content-wrapper {
        display: block; 
        height: auto;
    }
    .latest-post.mode-mn .post-meta {
        writing-mode: horizontal-tb;
        border-right: none;
        border-bottom: 2px solid #e9dcc8;
        padding-right: 0; padding-bottom: 12px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        height: auto;
    }
    .latest-post.mode-mn .post-meta span {
        writing-mode: horizontal-tb;
        margin-bottom: 0;
    }
    .latest-post.mode-mn .post-content {
         height: auto; 
         overflow-y: visible;
    }
    .lang-content.lang-mn-trad {
        height: 70vh; /* Re-set a fixed height for mobile */
    }
    
    /* Mobile Comments Reset */
    .latest-post.mode-mn .comments-area {
        flex-basis: auto;
        display: block; /* Reset */
        border-left: none;
        border-top: 2px solid #e9dcc8;
        padding-left: 0;
        padding-top: 2rem;
        margin-top: 3rem;
        height: auto; 
        overflow-y: visible;
        writing-mode: horizontal-tb; /* Reset */
    }
    .latest-post.mode-mn .comments-title {
        writing-mode: horizontal-tb; /* Reset */
        border-right: none;
        border-bottom: 2px solid #e9dcc8;
        padding-right: 0;
    }
    .latest-post.mode-mn .comment-panel {
        display: block; /* Reset */
        overflow: visible;
        white-space: normal;
        padding-left: 0;
    }
    .latest-post.mode-mn .comment-list {
        display: block; /* Reset */
    }
    .latest-post.mode-mn .comment {
        display: block;
        height: auto;
        max-height: none;
        margin-bottom: 1.5rem;
    }
    .latest-post.mode-mn .comment-body {
        height: auto;
        overflow-y: visible;
    }
    /* Reset all comment text to horizontal */
    .latest-post.mode-mn .comment-content p,
    .latest-post.mode-mn .cm-jp .comment-content p,
    .latest-post.mode-mn .cm-mn .comment-content p {
        writing-mode: horizontal-tb;
    }
    .latest-post.mode-mn #respond {
        display: block;
        height: auto;
    }
    .latest-post.mode-mn .comment-reply-title {
        display: block; /* Show on mobile */
    }
    .latest-post.mode-mn #commentform .comment-form-comment textarea {
        writing-mode: horizontal-tb;
        width: 100%;
        height: 10rem;
        min-height: 0;
    }
}