/* サイトカスタムスタイル */

:root {
    --color-primary:        #FF3B9D;
    --color-primary-active: #DE006F;
}

.post-footer { margin-bottom: 5px; }
#wrapper     { padding-top: 4em; }
#nav         { position: fixed; }

/* Hide post cards until TinyMasonry has positioned them, preventing FOUC */
.post-list #push:not(.masonry-ready) > .post {
    opacity: 0 !important;
    animation: none !important;
}

/* ============================================================
   Remark42 コメントウィジェット
   ============================================================ */
.post-comments              { padding: 0; border: none; margin: 0 0 2em; }
.post-comments #remark42    { width: 100%; }
.post-comments #remark42 iframe { display: block; }

/* ============================================================
   タグ一覧
   ============================================================ */
.tags-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.tag-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tag-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.tag-link {
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Neutralize .post-content a border-bottom (specificity 0,1,1) with 0,2,0 */
.post-content .tag-link { border-bottom: none; }

.tag-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #333;
}

.tag-count {
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 400;
    display: block;
    border-bottom: 2px solid #ddd;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.tag-link:hover .tag-count {
    border-color: var(--color-primary);
    color: var(--color-primary-active);
}

/* ============================================================
   メール・SNS ボタン（About ページ）
   ============================================================ */
.email-button-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.email-button {
    display: inline-block;
    background-color: #000 !important;
    color: #fff !important;
    padding: 1px 13px;
    border-radius: 20px;
    border-bottom: none !important;
    font-family: "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.2s;
    cursor: pointer;
}

.email-button:hover {
    background-color: #1a1a1a !important;
    text-decoration: none !important;
    color: #fff !important;
}

.email-button .icon-twitter:before {
    filter: brightness(0) invert(1);
}

/* X フォローボタン（ポスト共有ボタンと同スタイル） */
.x-follow-btn {
    font-size: 0.75em;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    text-decoration: none !important;
    border-bottom: none !important;
    padding: 0.33333em;
    border-radius: 2px;
    color: #fff !important;
    background-color: #000;
    transition: background-color 0.2s ease;
    box-sizing: border-box;
}

.x-follow-btn:hover  { background-color: #333 !important; }
.x-follow-btn:before { filter: brightness(0) invert(1); margin: auto; }
.x-follow-btn span   { display: none; }

/* ============================================================
   ページ共通レイアウト調整
   ============================================================ */
/* Reduce excessive 8vw top padding (designed for cover-image posts, not plain pages) */
.page-template .post .post-header:not(.has-cover),
.page-search .post-header { padding: 3em 0 1em; }

/* Tags & Search: shared compact layout */
.page-tags .wrapper,
.page-search .wrapper  { padding-top: 2rem; padding-bottom: 2rem; min-height: auto; }
.page-tags .wrapper-o,
.page-search .wrapper-o { min-height: auto; }

/* Tags & Search: widen all inners beyond the default 48em article width */
.page-tags .inner,
.page-search .inner { max-width: 70em; }

/* Search: .search-wrapper allows dropdown to overflow without body-class dependency */
.search-wrapper { overflow: visible !important; }

/* ============================================================
   関連記事カード
   ============================================================ */
.related-post-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-post-card:hover {
    border-color: var(--color-primary) !important;
}

/* ============================================================
   ダークモード
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .post-content hr   { background: #666; }
    .avatar            { background: #222; }

    #footer              { color: #888; border-top-color: #666; }
    #footer a            { color: #b0b0b0; }
    #footer a:hover      { color: #e0e0e0; }

    .tag-item            { background: #252525; border-color: #444; }
    .tag-name            { color: #fff; }
    .tag-count           { color: #aaa; border-bottom-color: #555; }
}

/* モバイル wrapper ボーダー（ダークモードのみ） */
@media (prefers-color-scheme: dark) and (max-width: 50em) {
    .post-template .wrapper,
    .page-template .wrapper {
        border-top-color: #666;
        border-bottom-color: #666;
    }
}

/* ============================================================
   モバイル
   ============================================================ */
@media (max-width: 768px) {
    .tags-list {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .tag-link {
        padding: 0.3rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tag-name  { font-size: 1rem; margin: 0; }
    .tag-count { border-bottom: none; font-size: 0.85rem; }
}

/* ============================================================
   タッチデバイス: ホバー効果を無効化（ダブルタップ防止）
   ============================================================ */
@media (hover: none) {
    /* Post cards */
    .post-list .post:hover .inner,
    .post-list .post:focus .inner          { box-shadow: none; }
    .post-list .post:hover .post-image img,
    .post-list .post:focus .post-image img { transform: scale(1); opacity: 1; }
    .post-list .post:hover .post-image:after,
    .post-list .post:focus .post-image:after { border-top-width: 8px; box-shadow: 0 2px rgba(0,0,0,0.4); }

    /* Post navigation (prev/next) */
    .post-nav .post-nav-item:hover,
    .post-nav .post-nav-item:focus                                           { border-radius: 2px; }
    .post-nav .post-nav-item:hover .post-nav-teaser .post-nav-icon,
    .post-nav .post-nav-item:focus .post-nav-teaser .post-nav-icon          { box-shadow: none; }
    .post-nav .post-nav-item:hover .post-nav-teaser .post-nav-info,
    .post-nav .post-nav-item:focus .post-nav-teaser .post-nav-info          { display: none; }

    /* Pagination */
    .pagination .pagination-item:hover,
    .pagination .pagination-item:focus { color: inherit; box-shadow: none; }

    /* Tag cards */
    .tag-item:hover { transform: none; box-shadow: none; border-color: var(--color-border, #e1e5e9); }

    /* Related post cards */
    .related-post-card:hover                  { transform: none; box-shadow: none; border-color: var(--color-border); }
    .related-post-card:hover .related-post-image img { transform: scale(1); }

    /* Nav menu open button */
    #nav .nav-menu .nav-menu-open:hover,
    #nav .nav-menu .nav-menu-open:focus { background: transparent; }
}