/*
Theme Name: Crypto-Navi Theme
Theme URI: https://crypto-navi.info/
Author: Your Name
Author URI: https://crypto-navi.info/
Description: 仮想通貨ニュースサイト「Crypto-Navi」向けのシンプルでモバイルフレンドリーなダークテーマ。Bootstrapベース。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crypto-navi-theme
Tags: dark, responsive, news, blog, custom-header, custom-menu, featured-images, threaded-comments, translation-ready

このファイルには、テーマの基本的な情報とカスタムCSSが含まれます。
WordPressがテーマを認識するために必須のファイルです。
*/

/* Global box-sizing for consistent layout */
* {
    box-sizing: border-box;
}

/* Global responsive image rule to prevent overflow */
img {
    max-width: 100%;
    height: auto;
    display: block; /* インライン要素の下にできる余白をなくす */
}

/* 全体的なダークテーマのスタイル */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a202c; /* ダークな背景色 */
    color: #e2e8f0; /* 明るい文字色 */
    line-height: 1.75; /* 行間を調整して読みやすく */
}

/* ヘッダーのスタイル */
.header {
    background-color: #2d3748; /* ヘッダーの背景色 */
    padding: 1rem 0;
    border-bottom: 1px solid #4a5568;
}

.header .navbar-brand {
    color: #FFFFFF; /* ロゴの文字色を純粋な白に変更 */
    font-weight: 700;
    font-size: 1.8rem; /* 画像に置き換わるため、この設定は主にフォールバック用 */
    border-radius: 0.5rem; /* 角丸 */
}

/* ヘッダー内のロゴ画像に対するスタイルを追加 */
.header .navbar-brand img {
    height: 40px; /* ロゴ画像の高さを固定 */
    width: auto; /* 幅は自動調整 */
    vertical-align: middle; /* 上下中央に配置 */
}

.header .nav-link {
    color: #a0aec0 !important; /* ナビゲーションリンクの色 */
    font-weight: 600;
    transition: color 0.3s ease;
    border-radius: 0.5rem; /* 角丸 */
}

.header .nav-link:hover {
    color: #cbd5e0 !important; /* ホバー時の色 */
}

/* メインコンテンツとサイドバーのコンテナ */
.main-content-container {
    padding: 2rem 0;
}

/* 記事カードのスタイル */
.article-card {
    background-color: #2d3748; /* 記事カードの背景色 */
    border: 1px solid #4a5568;
    border-radius: 0.75rem; /* 角丸 */
    margin-bottom: 2rem;
    overflow: hidden; /* 画像がはみ出さないように */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮き上がる */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); /* ホバーで影 */
}

.article-card img {
    width: 100%;
    height: 200px; /* 画像の高さ固定 */
    object-fit: cover; /* 画像の表示方法 */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* サイドバーのスタイル */
.sidebar {
    background-color: #2d3748; /* サイドバーの背景色 */
    border: 1px solid #3a475a; /* 枠線を少し濃い色に変更 */
    border-radius: 1rem; /* 角丸を大きくする */
    padding: 1.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 影を強調 */
}

.sidebar h5 {
    color: #e2e8f0; /* 明るい文字色 */
    font-weight: 700;
    margin-bottom: 1.5rem; /* マージンを少し増やす */
    border-bottom: 2px solid #4a5568; /* 下線を少し太くする */
    padding-bottom: 0.75rem; /* 下線との距離を調整 */
}

.sidebar .list-group-item {
    background-color: transparent; /* 背景透明 */
    border: none;
    padding: 0; /* Bootstrapのデフォルトパディングをリセット */
}

.sidebar .list-group-item a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease; /* ホバー効果を追加 */
    border-radius: 0.75rem; /* 角丸を大きくする */
    display: block; /* クリック可能な領域を広げる */
    padding: 0.85rem 1rem; /* パディングを調整 */
    margin-bottom: 0.4rem; /* 各項目間のマージン */
}

.sidebar .list-group-item a:hover {
    color: #f0f4f8; /* ホバー時の文字色をより明るく */
    background-color: #3a475a; /* ホバー時の背景色を強調 */
}

/* サイドバーのアクティブな項目に対するスタイル */
.sidebar .list-group-item a.active,
.sidebar .list-group-item a:focus { /* フォーカス時もアクティブとして扱う */
    color: #90cdf4 !important; /* アクティブ時の文字色をテーマのハイライトカラーに */
    background-color: #4a5568 !important; /* アクティブ時の背景色 */
    font-weight: 600; /* アクティブ時は少し太字に */
}

/* フッターのスタイル */
.footer {
    background-color: #2d3748; /* フッターの背景色 */
    color: #a0aec0;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 1px solid #4a5568;
    border-radius: 0.75rem; /* 角丸 */
}

.footer p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Google AdSenseのプレースホルダー */
.adsense-placeholder {
    background-color: #4a5568 !important; /* 強制的に背景色を適用 */
    color: #f0f4f8 !important; /* 強制的に文字色を適用 */
    text-align: center;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem; /* 角丸 */
    font-size: 1.2rem;
    font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .header .navbar-brand {
        font-size: 1.5rem;
    }
    .article-card .card-title {
        font-size: 1.25rem;
    }
    .article-card img {
        height: 150px;
    }
}

/* 記事コンテンツ内の画像に対する汎用的なレスポンシブスタイル */
.article-container img {
    border-radius: 0.5rem; /* 角丸を適用 */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

/* image-placeholder内の画像は、image-placeholderの高さ制限に従う */
.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 読みにくい文字の調整 */
/* 段落の文字色をbodyの明るい文字色に合わせる */
p {
    color: #e2e8f0; /* 明るい文字色 */
    margin-bottom: 1.25rem;
}

/* リスト項目の文字色をbodyの明るい文字色に合わせる */
ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #e2e8f0; /* 明るい文字色 */
}

/* 表の罫線の色を調整して可読性を向上 */
table th,
table td {
    border-color: #718096 !important; /* 強制的に罫線色を適用 */
    padding: 1.25rem 1rem; /* 上下のパディングを増やして文字のゆとりを確保 */
}

/* 固定ページのコンテンツ部分の背景色 */
.article-container {
    background-color: #2d3748 !important; /* 記事背景色 - サイトのカード背景色に統一 (強制適用) */
    border-radius: 0.75rem; /* 角丸 */
    padding: 2.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* 段落の文字色をダークカラーに調整 */
.article-container p {
    color: #f0f4f8 !important; /* ほぼ白に近い明るいグレーに変更 (強制適用) */
    margin-bottom: 1.25rem;
}

/* リスト項目の文字色をダークカラーに調整 */
.article-container ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #f0f4f8 !important; /* ほぼ白に近い明るいグレーに変更 (強制適用) */
}

/* 見出しの文字色をダークカラーに調整 */
.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4,
.article-container h5,
.article-container h6 {
    color: #f0f4f8 !important; /* ほぼ白に近い明るいグレーに変更 (強制適用) */
    font-weight: 700;
    /* margin-bottom: 1rem; */ /* 個別設定のためコメントアウト */
}

/* h1, h2, h3 の margin-top を調整 */
/* h1は変更なし */

/* h2 のスタイル調整 */
.article-container h2 {
    font-size: 2.25rem !important; /* 少し大きく */
    border-bottom: 3px solid #63b3ed !important; /* 太く、アクセントカラーに */
    padding-bottom: 0.75rem !important; /* 下線との距離を増やす */
    margin-top: 3.5rem !important; /* 上の余白を増やす */
    margin-bottom: 1.5rem !important; /* 下の余白を増やす */
}

/* h3 のスタイル調整 */
.article-container h3 {
    font-size: 1.75rem !important; /* 少し大きく */
    margin-top: 2.5rem !important; /* 上の余白を増やす */
    margin-bottom: 1rem !important; /* 下の余白を調整 */
    position: relative; /* 疑似要素のために必要 */
    padding-left: 1.5rem; /* 左側にスペースを確保 */
}

/* h3 の左側にアクセントラインを追加 */
.article-container h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px; /* ラインの幅 */
    height: 80%; /* ラインの高さ */
    background-color: #63b3ed; /* アクセントカラー */
    border-radius: 3px; /* 角丸 */
}


/* 太字の文字色をダークカラーに調整 */
.article-container strong {
    color: #f0f4f8 !important; /* ほぼ白に近い明るいグレーに変更 (強制適用) */
}

/* 表のスタイル調整 */
.article-container table {
    background-color: transparent !important; /* 親要素の背景色を透過 (強制適用) */
}

.article-container table th,
.article-container table td {
    border-color: #3d4b5c !important; /* 罫線色を調整 (強制適用) */
    color: #f0f4f8 !important; /* テーブル内の文字色を調整 (強制適用) */
    padding: 1.25rem 1rem; /* パディングは維持 */
}

.article-container table th {
    background-color: #4a5568 !important; /* テーブルヘッダーの背景色をダークテーマに合わせる (強制適用) */
}

.article-container tbody tr:nth-child(odd) {
    background-color: #2d3748 !important; /* 奇数行の背景色を親要素と同じに (強制適用) */
}

.article-container tbody tr:nth-child(even) {
    background-color: #222b37 !important; /* 偶数行の背景色を少し濃いダークテーマに合わせる (強制適用) */
}

/* 画像プレースホルダーのスタイル調整 */
.image-placeholder {
    background-color: #34495e !important; /* 背景色を調整 (強制適用) */
    color: #f0f4f8 !important; /* 文字色を調整 (強制適用) */
}

/* 画像キャプションの文字色を調整 */
.image-caption {
    color: #cbd5e0 !important; /* 落ち着いたグレーに調整 (強制適用) */
}

/* リンクの色は既存のテーマカラーを維持（#63b3ed） */
.article-container a {
    color: #63b3ed;
}
.article-container a:hover {
    color: #90cdf4;
}

/* 投稿メタ情報の文字色調整 */
.entry-meta {
    color: #cbd5e0 !important; /* 落ち着いたグレーに設定し、可読性を向上 (強制適用) */
}