/**
 * 沈思 (Chinshi) カスタムスタイル
 *
 * カード型レイアウト・角枠デザイン
 */

/* ========================================
   基本設定
   ======================================== */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--gold-brown);
    outline-offset: 2px;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--wp--preset--color--light-ivory);
    color: var(--wp--preset--color--sumi-black);
}

a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

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

/* ========================================
   角枠カード共通スタイル
   ======================================== */

/* 全カード: 角枠を徹底（丸み一切なし） */
.chinshi-card,
.chinshi-card * {
    border-radius: 0 !important;
}

/* カードのホバー効果 */
.wp-block-post-template .chinshi-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post-template .chinshi-card:hover {
    border-color: var(--wp--preset--color--gold-brown) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ========================================
   カテゴリタグ
   ======================================== */

.chinshi-category-tag a {
    display: inline-block;
    background-color: var(--wp--preset--color--gold-brown);
    color: var(--wp--preset--color--washi-white) !important;
    padding: 0.15em 0.6em;
    font-size: 0.7rem !important;
    font-weight: 500;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    border-radius: 0 !important;
    transition: background-color 0.2s ease;
}

.chinshi-category-tag a:hover {
    background-color: var(--wp--preset--color--deep-gold) !important;
    color: var(--wp--preset--color--washi-white) !important;
}

/* ========================================
   「続きを読む」リンク
   ======================================== */

.chinshi-card .wp-block-post-excerpt__more-link,
.chinshi-card p:last-child a[href="#"] {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--wp--preset--color--gold-brown);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.chinshi-card .wp-block-post-excerpt__more-link:hover,
.chinshi-card p:last-child a[href="#"]:hover {
    color: var(--wp--preset--color--deep-gold);
    border-bottom-color: var(--wp--preset--color--deep-gold);
}

/* ========================================
   サイドバー
   ======================================== */

/* サイドバー全体のsticky */
.wp-block-column aside {
    position: sticky;
    top: 2rem;
}

/* サイドバーの見出し */
aside h3 {
    font-family: var(--wp--preset--font-family--body);
}

/* サイドバー内カードも角枠 */
aside .chinshi-card {
    border-radius: 0 !important;
}

/* サイドバーのリストスタイル */
aside .wp-block-categories-list,
aside .wp-block-latest-posts,
aside .wp-block-archives-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

aside .wp-block-categories-list li,
aside .wp-block-latest-posts li,
aside .wp-block-archives-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--wp--preset--color--light-sumi);
}

aside .wp-block-categories-list li:last-child,
aside .wp-block-latest-posts li:last-child,
aside .wp-block-archives-list li:last-child {
    border-bottom: none;
}

aside .wp-block-categories-list a,
aside .wp-block-latest-posts a,
aside .wp-block-archives-list a {
    text-decoration: none;
    color: var(--wp--preset--color--sumi-black);
    transition: color 0.2s ease;
}

aside .wp-block-categories-list a:hover,
aside .wp-block-latest-posts a:hover,
aside .wp-block-archives-list a:hover {
    color: var(--wp--preset--color--gold-brown);
}

/* 最新記事の日付 */
aside .wp-block-latest-posts__post-date {
    display: block;
    font-size: 0.7rem;
    color: var(--wp--preset--color--gray-sumi);
    margin-top: 0.2rem;
}

/* ========================================
   テーブル
   ======================================== */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 2rem 0;
}

table th,
table td {
    border: 1px solid var(--wp--preset--color--light-sumi);
    padding: 0.75rem;
    text-align: left;
}

table th {
    background-color: var(--wp--preset--color--light-ivory);
    font-weight: 600;
}

/* ========================================
   コードブロック（角枠）
   ======================================== */

code {
    background-color: var(--wp--preset--color--light-ivory);
    color: var(--wp--preset--color--sumi-black);
    padding: 0.2em 0.4em;
    border-radius: 0;
    font-size: 0.9em;
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
}

pre {
    background-color: var(--wp--preset--color--light-ivory);
    border-left: 3px solid var(--wp--preset--color--gold-brown);
    padding: 1.5rem;
    overflow-x: auto;
    border-radius: 0;
}

pre code {
    background-color: transparent;
    padding: 0;
}

/* ========================================
   引用ブロック
   ======================================== */

blockquote {
    quotes: "\300C" "\300D" "\300E" "\300F";
}

blockquote p:first-of-type::before {
    content: open-quote;
}

blockquote p:last-of-type::after {
    content: close-quote;
}

/* ========================================
   ページネーション（角枠）
   ======================================== */

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid var(--wp--preset--color--light-sumi);
    border-radius: 0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers:hover {
    background-color: var(--wp--preset--color--light-ivory);
    border-color: var(--wp--preset--color--gold-brown);
}

.wp-block-query-pagination .current {
    background-color: var(--wp--preset--color--gold-brown);
    color: var(--wp--preset--color--washi-white);
    border-color: var(--wp--preset--color--gold-brown);
}

/* ========================================
   フォーム（角枠）
   ======================================== */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--wp--preset--color--light-sumi);
    border-radius: 0;
    background-color: var(--wp--preset--color--washi-white);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: 2px solid var(--wp--preset--color--gold-brown);
    outline-offset: 0;
    border-color: var(--wp--preset--color--gold-brown);
}

.comment-form input[type="submit"] {
    background-color: var(--wp--preset--color--gold-brown);
    color: var(--wp--preset--color--washi-white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--wp--preset--font-family--body);
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.comment-form input[type="submit"]:hover {
    background-color: var(--wp--preset--color--deep-gold);
}

.wp-block-search__input {
    border: 1px solid var(--wp--preset--color--light-sumi);
    border-radius: 0;
    padding: 0.75rem;
}

.wp-block-search__button {
    background-color: var(--wp--preset--color--gold-brown);
    color: var(--wp--preset--color--washi-white);
    border: none;
    border-radius: 0;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wp-block-search__button:hover {
    background-color: var(--wp--preset--color--deep-gold);
}

/* ========================================
   投稿詳細ページのタグ
   ======================================== */

.chinshi-post-tags a {
    display: inline-block;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--wp--preset--color--gold-brown);
    border: 1px solid var(--wp--preset--color--light-sumi);
    padding: 0.2em 0.5em;
    margin: 0.2em 0.3em 0.2em 0;
    transition: all 0.2s ease;
}

.chinshi-post-tags a:hover {
    border-color: var(--wp--preset--color--gold-brown);
    background-color: var(--wp--preset--color--gold-brown);
    color: var(--wp--preset--color--washi-white);
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* タブレット (1024px以下) */
@media (max-width: 1024px) {
    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    /* サイドバーのstickyを解除 */
    aside {
        position: static !important;
    }

    /* サイドバーウィジェットを横並び */
    aside.wp-block-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* スマートフォン (768px以下) */
@media (max-width: 768px) {
    .wp-site-blocks {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* ヘッダー: 縦並び */
    .wp-block-group:has(.wp-block-site-title) > .wp-block-group {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .wp-block-navigation {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* タイポグラフィ縮小 */
    h1, .wp-block-post-title {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    .wp-site-blocks {
        font-size: 16px;
        line-height: 1.8;
    }

    /* メインエリア余白縮小 */
    main.wp-block-group {
        padding-top: 1.25rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* カード内余白縮小 */
    .chinshi-card {
        padding: 1rem !important;
    }

    /* 記事タイトル: タッチしやすく */
    .wp-block-post-title a {
        display: block;
        padding: 0.25rem 0;
    }

    /* ページネーション: タッチターゲット拡大 */
    .wp-block-query-pagination a,
    .wp-block-query-pagination .page-numbers {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
    }

    /* 前後ナビ: 縦並び */
    .wp-block-post-navigation-link {
        display: block;
        margin-bottom: 0.75rem;
    }

    /* フォーム: iOS zoom防止 */
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea,
    .wp-block-search__input {
        font-size: 16px;
        padding: 0.875rem;
    }

    .comment-form input[type="submit"] {
        width: 100%;
        padding: 1rem;
        font-size: 16px;
    }

    .wp-block-search {
        flex-direction: column;
    }

    .wp-block-search__input {
        width: 100% !important;
    }

    .wp-block-search__button {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* サイドバー: 1列 */
    aside.wp-block-group {
        grid-template-columns: 1fr;
    }

    /* テーブルスクロール */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    pre {
        padding: 1rem;
        font-size: 0.85em;
    }
}

/* 極小画面 (480px以下) */
@media (max-width: 480px) {
    .wp-site-blocks {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1, .wp-block-post-title {
        font-size: 1.2rem !important;
    }

    .wp-block-query-pagination-numbers {
        display: none;
    }
}