/**
 * 記事詳細ページのレイアウト調整（目次対応）
 */

/* 目次がある場合の記事コンテンツ幅調整 */
@media (min-width: 1400px) {
    .single-post .entry-content-wrapper {
        position: relative;
    }

    .single-post .content-area {
        max-width: calc(100% - 320px);
        margin-right: 320px;
    }

    .single-post .container {
        max-width: 1200px;
    }

    /* CTAセクション等の幅調整 */
    .single-post .blog-cta-section .container-narrow,
    .single-post .share-section .container-narrow,
    .single-post .author-section .container-narrow,
    .single-post .comments-section .container-narrow {
        max-width: calc(100% - 320px);
        margin-left: 0;
        margin-right: 320px;
    }
}

/* 記事内の要素の最大幅 */
@media (min-width: 1400px) {
    .single-post .entry-content > * {
        max-width: 100%;
    }

    .single-post .entry-content img {
        height: auto;
    }

    /* コードブロックやテーブルのオーバーフロー対策 */
    .single-post .entry-content pre,
    .single-post .entry-content .wp-block-table {
        overflow-x: auto;
    }
}

/* アニメーション用のクラス */
.toc-visible {
    opacity: 1;
    transform: translateX(0);
}

/* スクロールインジケーター */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 134, 123, 0.1);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-indicator.visible {
    opacity: 1;
}

.scroll-indicator-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    width: 0;
    transition: width 0.1s linear;
}