/* post-style.css - Simplified for Readability */

:root {
    --main-blue: #1256a9;
    --accent-yellow: #f5b82e;
    --text-dark: #333;
    --text-light: #757575;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --border-color: #e0e0e0;
}

/* --- Base Article Styles --- */

.post-article {
    margin-top: 70px; /* Adjust for fixed header */
    padding: 60px 0;
}

.article-header {
    text-align: left;
    margin-bottom: 40px;
}

.page-breadcrumb {
    font-size: 0.9rem; font-weight: 500; color: var(--text-light);
    margin-bottom: 24px; letter-spacing: 0.5px;
}
.page-breadcrumb a { color: var(--main-blue); text-decoration: none; transition: color 0.3s ease; }
.page-breadcrumb a:hover { color: var(--accent-yellow); }
.page-breadcrumb span { margin: 0 10px; }

.article-title {
    font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 2.8rem;
    line-height: 1.2; color: var(--text-dark); margin-bottom: 16px;
}

.article-meta {
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-date {
    margin-right: 20px;
}

.article-category a {
    color: var(--main-blue);
    text-decoration: none;
}

.article-thumbnail {
    margin-bottom: 40px;
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- Main Content Typography & Elements --- */

.article-content {
    font-size: var(--font-size-md); 
    line-height: var(--line-height-relaxed); 
    color: #444;
    max-width: 800px;
    margin: 0 auto;
}

/* Paragraphs - Using unified system */
.article-content p { 
    margin-bottom: var(--space-lg); 
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Headings H2-H6 - Using unified system */
.article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
    font-family: 'Noto Sans JP', sans-serif; 
    font-weight: var(--font-weight-black);
    color: var(--text-dark); 
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}
.article-content h2 { 
    font-size: var(--font-size-3xl); 
    margin: var(--space-xl) 0 var(--space-md) 0;
    border-bottom: 2px solid var(--light-bg); 
    padding-bottom: var(--space-xs); 
}
.article-content h3 { 
    font-size: var(--font-size-2xl); 
    font-weight: var(--font-weight-bold);
    margin: var(--space-lg) 0 var(--space-sm) 0;
}
.article-content h4 { 
    font-size: var(--font-size-xl); 
    font-weight: var(--font-weight-bold);
    color: var(--main-blue); 
    margin: var(--space-lg) 0 var(--space-sm) 0;
}
.article-content h5 { 
    font-size: var(--font-size-lg); 
    font-weight: var(--font-weight-semibold);
    margin: var(--space-md) 0 var(--space-xs) 0;
}
.article-content h6 { 
    font-size: var(--font-size-md); 
    font-weight: var(--font-weight-semibold);
    color: var(--text-light); 
    margin: var(--space-md) 0 var(--space-xs) 0;
}

/* Links */
.article-content a {
    color: var(--main-blue); text-decoration: none;
    border-bottom: 2px solid var(--accent-yellow); transition: all 0.3s ease;
    padding-bottom: 2px;
}
.article-content a:hover { color: var(--white); background-color: var(--main-blue); border-color: var(--main-blue); }

/* Lists - Using unified system */
.article-content ul, .article-content ol { 
    padding-left: var(--space-md); 
    margin-bottom: var(--space-md); 
    line-height: var(--line-height-relaxed);
}
.article-content li { margin-bottom: var(--space-xs); }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content ul ul, .article-content ol ol, .article-content ul ol, .article-content ol ul {
    margin-top: 0.8em; margin-bottom: 0.8em;
}

/* Inline Elements */
.article-content strong { font-weight: 700; color: var(--main-blue); }
.article-content em { font-style: italic; }
.article-content code { 
    background: #f0f0f0; padding: 0.2em 0.4em; 
    border-radius: 4px; font-size: 0.9em; 
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

/* Blockquotes */
.article-content blockquote {
    border-left: 4px solid var(--accent-yellow); padding: 1em 1.5em;
    margin: 2em 0; background-color: var(--light-bg);
    border-radius: 0 4px 4px 0;
}
.article-content blockquote p { margin-bottom: 0; }

/* Horizontal Rule */
.article-content hr {
    border: 0; height: 2px; background-color: var(--light-bg);
    margin: 3em 0;
}

/* --- Images & Alignment (WordPress Classes) --- */
.article-content .alignleft, .article-content img.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.article-content .alignright, .article-content img.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.article-content .aligncenter, .article-content img.aligncenter { display: block; margin: 1.5em auto; text-align: center; }
.article-content .alignwide { margin-left: -50px; margin-right: -50px; max-width: calc(100% + 100px); }
.article-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/* Clear floats after paragraphs */
.article-content p:after { content: ""; display: table; clear: both; }

.article-content img, .article-content figure {
    max-width: 100%; height: auto; margin: 2em 0;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.article-content figure {
    margin: 2em auto;
    padding: 0;
}

.article-content figcaption, .article-content .wp-caption-text {
    font-size: 0.9rem; color: var(--text-light); text-align: center;
    margin-top: 0.8em; line-height: 1.5;
}

/* --- Tables --- */
.article-content table {
    width: 100%; border-collapse: collapse; margin: 2.5em 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden;
}
.article-content th, .article-content td { border: 1px solid var(--border-color); padding: 0.8em 1em; text-align: left; }
.article-content th { background-color: var(--light-bg); font-weight: 700; color: var(--main-blue); }
.article-content tbody tr:nth-child(even) { background-color: #fdfdfd; }

/* --- Code Blocks --- */
.article-content pre {
    background-color: #2d2d2d; color: #f1f1f1;
    padding: 1.5em; overflow-x: auto; border-radius: 8px;
    margin: 2.5em 0; border: 1px solid #444;
    white-space: pre-wrap;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
.article-content pre code { background: none; padding: 0; }

/* --- WordPress Specific Blocks (Basic) --- */
.article-content .wp-block-button__link {
    display: inline-block; padding: 12px 24px; background-color: var(--main-blue);
    color: var(--white); text-decoration: none; border-radius: 5px;
    font-weight: 700; transition: background-color 0.3s ease; border: none;
}
.article-content .wp-block-button__link:hover { background-color: var(--accent-yellow); color: var(--text-dark); }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .article-title { font-size: var(--font-size-4xl); }
    .article-content { 
        font-size: var(--font-size-sm); 
        line-height: var(--line-height-relaxed); 
    }

    .article-content .alignleft, .article-content .alignright, 
    .article-content img.alignleft, .article-content img.alignright {
        float: none; display: block; margin: 1.5em auto;
    }
    .article-content .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
}