/*
Theme Name: WDF Child
Theme URI: https://webdirectorsforum.com
Template: wdf
Description: Web Directors' Forum リニューアル子テーマ
Author: C4Media, Inc.
Author URI: https://c4media.jp
Version: 1.0.0
*/

/* Tailwind CDN で大半を処理するため、ここには子テーマ固有のスタイルのみ記載 */

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: #fff;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* カテゴリアクセント */
.cat-accent { display: inline-block; width: 36px; height: 3px; margin-bottom: 1rem; }
.cat-accent.blue   { background: #3b82f6; }
.cat-accent.purple { background: #7c3aed; }
.cat-accent.green  { background: #10b981; }
.cat-accent.orange { background: #f97316; }
.cat-text.blue   { color: #3b82f6; }
.cat-text.purple { color: #7c3aed; }
.cat-text.green  { color: #10b981; }
.cat-text.orange { color: #f97316; }

/* ヒーローカード */
.hero-card {
    padding: 72px 64px;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #0c1a2e 0%, #1e3a5f 100%);
    position: relative;
    overflow: hidden;
    transition: 0.4s;
}
.hero-card:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
    .hero-card { padding: 48px 32px; }
}

/* 記事カード */
.post-card { padding: 2rem; border: 1px solid #f0f0f0; transition: 0.3s; background: #fff; display: flex; flex-direction: column; height: 100%; }
.post-card:hover { border-color: #1a1a1a; transform: translateY(-2px); }

/* フィード */
.feed-item { padding: 1.5rem 2rem; transition: 0.3s; border-left: none; }
.feed-item:hover { background: #fff; }

/* ランキング */
.rank-card { position: relative; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); overflow: hidden; border-right: 1px solid #f0f0f0; }
.rank-card:last-child { border-right: none; }
.rank-card:hover { background: #f5f5f5 !important; transform: translateY(-4px); }
.rank-num { font-size: 5rem; font-weight: 900; line-height: 1; color: #000; opacity: 0.04; position: absolute; right: 1rem; bottom: -0.5rem; transition: 0.4s; }
.rank-card:hover .rank-num { opacity: 0.08; transform: scale(1.1); }
.rank-card:hover .rank-cat { color: #999; }

.section-label { font-size: 10px; font-weight: 900; letter-spacing: 0.3em; text-transform: uppercase; color: #ccc; border-bottom: 1px solid #f0f0f0; padding-bottom: 1rem; margin-bottom: 2.5rem; display: block; }

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.animate-pulse-red { animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* 記事ヘッダー */
.wdf-header {
    padding: 64px 72px;
    border-radius: 16px;
    color: #ffffff;
    margin: 0 0 48px 0;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.wdf-header .wdf-category { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; margin-bottom: 28px; }
.wdf-header .wdf-title { font-size: 34px; font-weight: 700; line-height: 1.4; margin: 0 0 56px 0; color: #ffffff; letter-spacing: -0.01em; }
.wdf-header .wdf-footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #9ca3af; }
.wdf-header.variant-blue   { background: linear-gradient(180deg, #0c1a2e 0%, #1e3a5f 100%); }
.wdf-header.variant-blue   .wdf-category { color: #3b82f6; }
.wdf-header.variant-purple { background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%); }
.wdf-header.variant-purple .wdf-category { color: #7c3aed; }
.wdf-header.variant-green  { background: linear-gradient(180deg, #0a1f1a 0%, #14532d 100%); }
.wdf-header.variant-green  .wdf-category { color: #10b981; }
.wdf-header.variant-orange { background: linear-gradient(180deg, #1f0f0a 0%, #7c2d12 100%); }
.wdf-header.variant-orange .wdf-category { color: #f97316; }
@media (max-width: 640px) {
    .wdf-header { padding: 40px 32px; }
    .wdf-header .wdf-title { font-size: 26px; margin-bottom: 36px; }
}

/* 記事本文 */
.entry-content { font-size: 1.05rem; line-height: 1.85; color: #1f2937; }
.entry-content > p:first-of-type { font-size: 1.2rem; font-weight: 700; color: #111827; line-height: 1.8; margin-bottom: 2.5rem; }
.entry-content p { margin: 1.25rem 0; }
.entry-content h2 { font-size: 1.75rem; font-weight: 900; margin-top: 4rem; margin-bottom: 1.25rem; border-left: 4px solid #000; padding-left: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.entry-content h3 { font-size: 1.2rem; font-weight: 900; margin-top: 2.75rem; margin-bottom: 0.75rem; line-height: 1.4; }
.entry-content ul, .entry-content ol { margin: 1.25rem 0; padding-left: 1.75rem; }
.entry-content li { margin: 0.4rem 0; }
.entry-content a { color: #2563eb; text-decoration: none; border-bottom: 1px solid #93c5fd; transition: 0.2s; }
.entry-content a:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.entry-content strong { font-weight: 700; color: #111827; }
.entry-content code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.92em; font-family: ui-monospace, SFMono-Regular, monospace; }
.entry-content blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; color: #6b7280; margin: 1.5rem 0; }

/* 図解 */
.wdf-figure { margin: 2.5rem 0; }
.wdf-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.wdf-figure figcaption { font-size: 13px; color: #6b7280; margin-top: 12px; text-align: center; }

/* Mermaid */
.entry-content .mermaid { margin: 2.5rem 0; display: flex; justify-content: center; background: #fafafa; padding: 24px; border-radius: 12px; }

/* 前後記事ナビ */
.nav-link-box { border: 1px solid #f0f0f0; transition: 0.3s; }
.nav-link-box:hover { background-color: #fcfcfc; border-color: #1a1a1a; }

/* 関連記事カード */
.related-card { padding: 1.75rem; border: 1px solid #f0f0f0; transition: 0.3s; background: #fff; }
.related-card:hover { border-color: #1a1a1a; transform: translateY(-2px); }

/* フィルター */
.filter-btn { transition: 0.2s; }
.filter-btn.active { background: #000; color: #fff; }
.filter-btn:not(.active):hover { background: #f3f4f6; }
.tag-btn { transition: 0.2s; }
.tag-btn.active { background: #1a1a1a; color: #fff; }
.tag-btn:not(.active):hover { background: #f3f4f6; }

/* ページング */
.page-btn { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; }
.page-btn.active { background: #000; color: #fff; }
.page-btn:not(.active):not(:disabled):hover { background: #f3f4f6; }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ローディング */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ソートセレクト */
.sort-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }

/* 親テーマのスタイルを上書きしてリセット */
.wrapper, .container, .main, #content, #sidebar, #header, #footer,
#menu-wrapper, .branding, .sp_head_cat, .pc_head_cat, .site-title {
    all: unset;
    display: block;
}