/*
Theme Name: News Blog Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: A simple news blog theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, news
Text Domain: news-blog-theme
*/

/* --- 基本設定 --- */

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #00a0d2;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- 全体レイアウト --- */

.site {
    max-width: 1140px;
    margin: 2em auto;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.site-content {
    padding: 1em 2em 2em;
}

/* --- ヘッダー --- */

.site-header {
    padding: 2em;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.site-title {
    margin: 0;
    font-size: 2.2em;
    line-height: 1.2;
}

.site-title a {
    color: #222;
    font-weight: 700;
    text-decoration: none;
}

.site-description {
    margin: 0.5em 0 0;
    color: #777;
    font-size: 1em;
}

/* --- コンテンツエリア --- */

.page-header {
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 2px solid #eee;
}

article.post {
    margin-bottom: 2.5em;
    padding-bottom: 2.5em;
    border-bottom: 1px solid #eee;
}

article.post:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.entry-title {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.entry-meta {
    color: #777;
    font-size: 0.9em;
    margin-bottom: 1.5em;
}

/* --- フッター --- */

.site-footer {
    padding: 2em;
    background-color: #fafafa;
    border-top: 1px solid #eee;
    text-align: center;
    color: #777;
    font-size: 0.9em;
}

/* --- メイン & サイドバーレイアウト --- */

.primary-secondary-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
}

.site-main {
    width: 100%;
}

/* PC表示ではサイドバーを右に配置 */
@media screen and (min-width: 769px) {
    .site-main {
        width: 66%;
    }

    .widget-area {
        width: 30%;
    }
}

/* --- ウィジェット --- */

.widget {
    margin-bottom: 2em;
    padding: 1.5em;
    background-color: #fafafa;
    border-radius: 4px;
}

.widget-title {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.2em;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    padding: 0.6em 0;
    border-bottom: 1px solid #e5e5e5;
}

.widget li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* カテゴリーウィジェットの投稿数を装飾 */
.widget_categories .count {
    float: right;
    background-color: #eee;
    padding: 0.1em 0.6em;
    border-radius: 10px;
    font-size: 0.85em;
}

/* --- ナビゲーション --- */

.main-navigation {
    margin-top: 1.5em;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}

.main-navigation li {
    margin: 0;
}

.main-navigation a {
    display: block;
    padding: 0.5em 1em;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item>a {
    background-color: #0073aa;
    color: #fff;
}

/* --- ページネーション --- */

.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 2em;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.pagination .page-numbers:hover {
    background-color: #f5f5f5;
    text-decoration: none;
}

.pagination .page-numbers.current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* --- 投稿ナビゲーション (個別記事) --- */

.post-navigation {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #eee;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.9em;
    color: #777;
}

/* --- レスポンシブ対応 (スマートフォン) --- */
@media screen and (max-width: 768px) {
    body {
        /* スマートフォンではサイトコンテナとの境界をなくすため背景を白に */
        background-color: #fff;
    }

    .site {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .site-content {
        padding: 1em 1.5em 1.5em;
    }

    .site-header {
        padding: 1.5em;
    }

    .site-title {
        font-size: 1.8em;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }

    .widget-area {
        /* スマホではメインコンテンツの下に表示 */
        margin-top: 2em;
    }
}