/* ==============================================
   RayPhoneAI — 記事ナビ・追加コンポーネント CSS
   ============================================== */

/* ── 前後記事ナビ ── */
.post-navigation { margin-top: 40px; }

.post-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.post-nav-item:hover {
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.post-nav-next { text-align: right; align-items: flex-end; }

.post-nav-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
}
.post-nav-next .post-nav-label { flex-direction: row-reverse; }

.post-nav-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-heading);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    .post-nav-grid { grid-template-columns: 1fr; }
    .post-nav-next { text-align: left; align-items: flex-start; }
    .post-nav-next .post-nav-label { flex-direction: row; }
}

/* ── TOC モバイル表示 ── */
@media (max-width: 1100px) {
    .toc-mobile-wrap { display: block !important; }
    /* サイドバー内TOCは非表示 */
    .single-sidebar .toc-widget { display: none; }
}
@media (min-width: 1101px) {
    .toc-mobile-wrap { display: none !important; }
}

/* ── author box ── */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    margin-top: 40px;
}
.author-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
}
.author-info { flex: 1; min-width: 0; }
.author-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 6px;
}
.author-bio {
    font-size: 0.84rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}
.author-links {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.author-links a {
    font-size: 0.78rem;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 3px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: all var(--transition);
}
.author-links a:hover {
    border-color: var(--color-primary);
    background: rgba(0,212,255,0.06);
}

/* ── ピックアップバナー ── */
.pickup-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(124,92,252,0.08));
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 0.85rem;
    color: var(--color-text);
}
.pickup-banner .pickup-icon {
    font-size: 1.2rem;
}
.pickup-banner strong { color: var(--color-primary); }

/* ── notice-box (記事内) ── */
.entry-content .notice-box {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 8px;
    margin: 1.8em 0;
    font-size: 0.9rem;
    line-height: 1.7;
}
.notice-box-icon { font-size: 1.3rem; flex-shrink: 0; }
.notice-box.info    { background: rgba(0,212,255,0.07);  border-left: 3px solid var(--color-primary); }
.notice-box.success { background: rgba(16,185,129,0.07); border-left: 3px solid #10b981; }
.notice-box.warning { background: rgba(245,158,11,0.07); border-left: 3px solid #f59e0b; }
.notice-box.danger  { background: rgba(255,107,107,0.07);border-left: 3px solid #ff6b6b; }

/* ── サイドバー sticky ── */
@supports (position: sticky) {
    .sidebar-sticky {
        position: sticky;
        top: 80px;
    }
}

/* ── ウィジェットエリア（after widget-body閉じ） ── */
.widget .widget-body > *:last-child { margin-bottom: 0; }

/* ── 検索フォーム（ウィジェット内） ── */
.widget .search-form { gap: 0; }
.widget .search-form .search-field {
    font-size: 0.85rem;
    padding: 9px 14px;
}
.widget .search-form .search-submit {
    padding: 9px 14px;
}

/* ── TOC ウィジェット スクロールバー ── */
.toc-widget {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* ── 記事一覧ページのタグクラウド ── */
.tag-cloud-wrap .article-tag {
    font-size: 0.75rem;
    padding: 4px 12px;
}

/* ── front-page hero no-image fallback ── */
.hero-no-image {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    font-size: 5rem;
}

/* ── 記事なし（改善版） ── */
.no-results-page {
    padding: 60px 20px;
    text-align: center;
}
.no-results-page .search-form {
    max-width: 480px;
    margin: 0 auto;
}

/* ── wp-block 互換 patches ── */
.wp-block-buttons { margin: 1.5em 0; }
.wp-block-button__link {
    border-radius: 24px !important;
    font-weight: 700;
}
.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ── フッタービジブル後の余白補正 ── */
.site::after {
    content: '';
    display: block;
}

/* ── 大画面対応 ── */
@media (min-width: 1400px) {
    .hero-featured-content h2 { font-size: 1.9rem; }
    .article-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── タブレット微調整 ── */
@media (max-width: 900px) {
    .hero-featured-post { grid-template-columns: 1fr; }
    .hero-featured-image { min-height: 260px; max-height: 360px; }
    .hero-featured-image::after {
        background: linear-gradient(to bottom, transparent 50%, var(--color-bg-secondary));
    }
}