/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: ベルベット・ノワール（Velvet Noir）スキン。漆黒と深紅、ゴールドを基調とした妖艶で重厚なデザイン。
Author: ABCD
Author URI: 
Template: cocoon-master
Version: 1.0.0
*/

/**************************************************
 * 1. カラーパレット定義
 **************************************************/
:root {
    /* メインカラー */
    --color-main: #800000; /* 深紅 (Maroon) */
    --color-main-dark: #4d0000; /* より暗い深紅 */
    --color-main-light: #ff0000; /* 明るい赤 */
    
    /* アクセントカラー (ゴールド) */
    --color-accent: #C5A059; /* アンティークゴールド */
    --color-accent-hover: #FFD700; /* 明るいゴールド */
    
    /* 背景・テキスト */
    --color-bg: #000000; /* 漆黒 */
    --color-bg-sub: #0a0a0a; /* サブ背景 */
    --color-text: #E8D5C8; /* オフホワイト/クリーム */
    --color-text-sub: #888888; /* サブテキスト */
    
    /* ボーダー */
    --color-border: rgba(197, 160, 89, 0.3); /* ゴールドの透明ボーダー */
}

/**************************************************
 * 2. 全体設定 (Body, p, a)
 **************************************************/
body {
    background: var(--color-bg);
    /* 妖艶な深みを出すためのグラデーション */
    background: radial-gradient(circle at center, #2b0505 0%, var(--color-bg) 100%);
    color: var(--color-text);
    font-family: "Georgia", serif;
}

/* リンク */
a {
    color: var(--color-accent);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--color-accent-hover);
    /* text-shadow: 0 0 5px var(--color-accent-hover); */
}

/* pタグ (本文) */
p {
    color: var(--color-text);
    line-height: 1.8;
}

/**************************************************
 * 3. Cocoon固有クラスのスタイル
 **************************************************/

/* ヘッダー */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* メインナビゲーション */
.navi ul li a {
    color: var(--color-text);
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.navi ul li a:hover {
    color: var(--color-accent-hover);
    border-bottom: 2px solid var(--color-accent-hover);
}

/* メインコンテンツエリア */
.main {
    background: unset;
}

.main-container {
    background: transparent;
}

/* 記事カード (一覧表示) */
.entry-card {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(128, 0, 0, 0.5); /* 深紅の影 */
}

/* 記事タイトル */
.entry-title a {
    color: var(--color-text);
}

.entry-title a:hover {
    color: var(--color-accent-hover);
}

/* サイドバー */
.sidebar {
    background: transparent;
}

/* ウィジェット */
.widget {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
}

.widget-title {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-main);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* 記事本文 */
.article {
    background: transparent;
    padding: 20px;
}

/* 見出し (h2, h3) */
.article h2 {
    color: var(--color-main-light);
    border-left: 5px solid var(--color-main);
    border-bottom: 1px solid var(--color-main-dark);
    padding: 10px 15px;
    margin-top: 30px;
}

.article h3 {
    color: var(--color-accent);
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 5px;
    margin-top: 20px;
}

/* ボタン */
.btn, button, input[type="submit"] {
    background: var(--color-main);
    color: var(--color-text);
    border: 1px solid var(--color-accent);
    transition: background 0.3s ease, color 0.3s ease;
}

.btn:hover, button:hover, input[type="submit"]:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    border-color: var(--color-accent-hover);
}

/* 引用 (blockquote) */
blockquote {
    background: var(--color-bg-sub);
    border-left: 5px solid var(--color-accent);
    color: var(--color-text);
    padding: 15px;
    font-style: italic;
}

/* 目次 (TOC) */
.toc {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-main);
    padding: 15px;
    border-radius: 5px;
}

.toc-title {
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-main);
    padding-bottom: 5px;
}

.toc ul li a {
    color: var(--color-text);
}

.toc ul li a:hover {
    color: var(--color-accent-hover);
}

/* コメントエリア */
.comment-area {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 5px;
}

.comment-reply-link {
    color: var(--color-accent);
}

/* ページネーション */
.pagination .page-numbers {
    background: var(--color-bg-sub);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.pagination .page-numbers:hover, .pagination .current {
    background: var(--color-main);
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* コードブロック */
pre, code {
    background: #1a1a1a;
    color: #00ff00; /* ネオングリーンで視認性を確保 */
    border: 1px solid #333;
    padding: 5px;
    border-radius: 3px;
}

/* フォーム要素 */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
    background: var(--color-bg-sub);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: 8px;
    border-radius: 3px;
}

/* サイトフッター */
.site-footer {
    background: var(--color-bg-sub);
    border-top: 1px solid var(--color-main);
    color: var(--color-text-sub);
}

/* 記事メタ情報 (投稿日、カテゴリなど) */
.post-meta, .post-meta a {
    color: var(--color-text-sub);
}

.post-meta a:hover {
    color: var(--color-accent-hover);
}

/* Cocoonのラベル/バッジ */
.label-tag, .label-category {
    background: var(--color-main-dark);
    color: var(--color-text);
    border: 1px solid var(--color-main);
}

.label-tag:hover, .label-category:hover {
    background: var(--color-main);
    color: var(--color-accent-hover);
}

/* Cocoonの吹き出し */
.balloon-box {
    background: var(--color-bg-sub);
    border: 1px solid var(--color-main);
}

.balloon-box::before {
    border-right-color: var(--color-main);
}

.balloon-box::after {
    border-right-color: var(--color-bg-sub);
}