/*
 * ===== コメントカスタマイザー CSS =====
 * SWELLテーマ用のコメント表示をカスタマイズするスタイルシート
 * 主な機能：
 * - コメントのボーダーと背景色設定
 * - いいね！ボタンのスタイリング
 * - 返信ボタンのデザイン
 * - ランダム背景色（JavaScript連携）
 * - モバイル対応
 */

/* ===== 親コメント（トップレベル）の基本スタイリング ===== */
/*
 * 全ての親コメント（返信されていないコメント）に適用されるスタイル
 * WordPressのデフォルトスタイルを!importantで上書き
 * 青いボーダーでコメントを囲み、視覚的に区切ります
 */
.comment-body,
article.comment-body {
    border: none !important;              /* 外側ボーダーを無効 */
    border-radius: 0 !important;          /* 角を直角に */
    padding: 8px 16px 8px 16px !important; /* 広い余白で内容をゆったり配置 */
    margin-bottom: 6px !important;        /* 子コメントと同じ間隔 */
    background: #f8fbff !important;       /* より薄い青系の背景色 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) !important; /* 立体的な影 */
}


/* 最後のコメントの下部マージンを削除 */
/* ページ下部に余分なスペースができないように調整 */
.comment-body:last-child {
    margin-bottom: 0;
}

/* ===== 子コメント（返信）のスタイリング ===== */
/*
 * 親コメントに対する返信（子コメント）に適用
 * .childrenクラスはWordPressが自動生成する子コメントコンテナのクラス名
 * ol.children, ul.childrenはリスト形式の子コメントに対応
 * 親より薄いボーダーと左インデントで階層構造を表現
 */
.children .comment-body,
ol.children .comment-body,
ul.children .comment-body {
    border: none !important;              /* 外側ボーダーを無効 */
    border-radius: 0 !important;          /* 角を直角に */
    padding: 12px 16px 12px 20px !important; /* 広い余白で内容をゆったり配置 */
    margin-bottom: 6px !important;        /* 子コメント間の間隔（親より狭め） */
    margin-left: 16px !important;         /* 左側に16pxのインデント（階層表現） */
    background: #f8fbff !important;       /* より薄い背景色（親と同じ） */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) !important; /* 立体的な影 */
}


/* ===== 子コメントの階層線（縦線） ===== */
/*
 * 子コメントの左側に縦線を描画して、親子関係を視覚的に表現
 * ::before擬似要素を使用して、追加のHTML要素なしで線を追加
 * position: absoluteでインデント部分に配置
 */
.comment-body .comment-body::before {
    content: '';              /* 空のコンテンツ（擬似要素用） */
    position: absolute;       /* 絶対位置指定 */
    left: 8px;                /* 左端から8pxの位置 */
    top: 0;                   /* 上端から0px */
    bottom: 0;                /* 下端まで全長 */
    width: 3px;               /* 線の太さ3px */
    background: #007cba;      /* 青い線（階層表現用） */
    border-radius: 2px;       /* 線の角を少し丸く */
}

/* ===== 子コメントヘッダーの調整 ===== */
/* 子コメントの著者情報部分のボーダーを削除してスッキリさせる */
.comment-body .comment-body .comment-meta .comment-author {
    border-bottom: none;      /* 下部ボーダーを削除 */
    padding-bottom: 4px;      /* 下部余白を4pxに */
    margin-bottom: 4px;       /* マージンを4pxに */
}

/* ===== いいね！ボタンの基本スタイル ===== */
/*
 * コメント下部のいいね！ボタンのデフォルト状態
 * グレー系の控えめなデザインで、クリックしやすく
 * flexboxを使用してアイコンと数字を横並び
 */
.comment-like-btn {
    background: #f8f9fa;      /* 薄いグレー背景 */
    border: 2px solid #e9ecef; /* グレー境界線 */
    border-radius: 8px;       /* 角丸8px */
    padding: 8px 16px;        /* 内部余白（上下8px、左右16px） */
    cursor: pointer;          /* マウスカーソルをポインターに */
    display: inline-flex;     /* インラインフレックスボックス */
    align-items: center;      /* 垂直方向中央揃え */
    gap: 6px;                 /* アイコンと数字の間隔 */
    transition: all 0.3s ease; /* ホバー時の滑らかなアニメーション（0.3秒） */
    font-size: 14px;          /* フォントサイズ */
    line-height: 1;           /* 行の高さを1に（コンパクトに） */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影 */
    min-width: 80px;          /* 最小幅80px（数字が長くなっても崩れない） */
    justify-content: center;  /* 水平方向中央揃え */
}

/* ===== いいね！ボタンのホバー効果 ===== */
/* マウスオーバー時の視覚的フィードバック */
.comment-like-btn:hover {
    background: #e9ecef;      /* 少し濃いめのグレー背景 */
    border-color: #dee2e6;    /* 境界線を少し濃く */
    transform: translateY(-1px); /* 1px上に浮かび上がる効果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 影を強めて立体感を強調 */
}

/* ===== いいね！ボタンの無効状態 ===== */
/* AJAX処理中やエラー時の見た目 */
.comment-like-btn:disabled {
    opacity: 0.6;             /* 透明度を下げて無効感を表現 */
    cursor: not-allowed;      /* 禁止マークのカーソル */
    transform: none;          /* ホバー効果を無効化 */
}

/* ===== いいね！済み状態のスタイル ===== */
/* ユーザーが既にいいね！したコメントのボタン */
.comment-like-btn.liked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 紫がかったグラデーション */
    border-color: #667eea;    /* 境界線を紫系に */
    color: white;             /* 文字色を白に */
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); /* 紫系の影 */
}

/* ===== いいね！済み状態のホバー効果 ===== */
.comment-like-btn.liked:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); /* 少し濃いめのグラデーション */
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5); /* 影をさらに強調 */
}

/* ===== いいね！アイコンのスタイル ===== */
/* FontAwesomeのサムズアップアイコン */
.comment-like-btn .like-icon {
    font-size: 18px;          /* アイコンのサイズ */
    display: inline-block;    /* インラインブロック表示 */
}

/* ===== アイコンの詳細設定 ===== */
.comment-like-btn .like-icon i {
    font-size: 16px;          /* 実際のアイコンサイズ（親要素より少し小さく） */
    transition: all 0.3s ease; /* サイズ変化のアニメーション */
}

/* ===== いいね！済み時のアイコン効果 ===== */
/* 少し大きくなって強調 */
.comment-like-btn.liked .like-icon i {
    color: white;             /* 白いアイコン */
    transform: scale(1.1);    /* 1.1倍に拡大 */
}

/* ===== いいね！数の表示 ===== */
/* 数字部分のスタイル */
.comment-like-btn .like-count {
    font-weight: bold;        /* 太字で強調 */
    min-width: 16px;          /* 最小幅を確保（数字の変動に対応） */
    text-align: center;       /* 中央揃え */
    font-size: 14px;          /* ボタンと同じサイズ */
}

/* ===== いいね！済み時の数字色 ===== */
.comment-like-btn.liked .like-count {
    color: white;             /* 白い数字 */
}

/* ===== コメント日時表示のスタイリング ===== */
/* コメント下部の「YYYY-MM-DD HH:MM」部分 */
.comment-date-info {
    font-size: 12px;          /* 小さめのフォント */
    color: #666;              /* グレー色で控えめに */
    margin-top: 8px;          /* 上部余白 */
    margin-bottom: 2px;       /* 下部余白 */
    padding-bottom: 2px;      /* 下部パディング */
    border-bottom: none;      /* 下線を削除 */
    text-align: left;         /* 左寄せ */
}

/* ===== コメントメタ情報（著者名など）の調整 ===== */
.comment-meta {
    margin: 8px 0 8px 0;      /* 上8px、下8pxで投稿者名の上側余白を確保 */
}

/* ===== 著者名のスタイル ===== */
.comment-meta .comment-author {
    font-weight: 600 !important;         /* セミボールドで強調 */
    color: #333 !important;              /* 濃いめのグレー */
    text-align: right !important;        /* 投稿者名を右寄せ */
    margin-left: auto !important;        /* 右寄せのための自動マージン */
}

/* ===== 日時表示の追加調整 ===== */
/* 他のスタイルと重複しないよう上書き */
.comment-date-info {
    margin: 8px 0;            /* 上下8pxのマージン */
    text-align: left !important;        /* 左寄せ（強制） */
}

/* ===== コメントアクションエリアのレイアウト ===== */
/* いいね！ボタンと返信ボタンを横並びにする */
.comment-actions {
    display: flex;            /* フレックスボックスレイアウト */
    align-items: center;      /* 垂直中央揃え */
    gap: 10px;                /* ボタン間の間隔 */
    margin-top: 10px;         /* 上部余白 */
    flex-wrap: wrap;          /* 画面幅が狭い場合に折り返し */
}

/* ===== 著者名下の区切り線 ===== */
/* 著者名とコメント本文を視覚的に分離 */
.comment-meta .comment-author {
    padding-bottom: 8px !important;      /* 下部パディング */
    margin-bottom: 8px !important;       /* 下部マージン */
    border-bottom: none !important;      /* 投稿者名下の線を削除 */
    text-align: right !important;        /* 投稿者名を右寄せ */
    margin-left: auto !important;        /* 右寄せのための自動マージン */
}

/* ===== 著者名の具体的な名前部分 ===== */
/* WordPressが生成するb.fnクラス（ファーストネーム） */
.comment-meta .comment-author b.fn {
    font-weight: 600;         /* 太字 */
    color: #333;              /* 濃いグレー */
}

/* ===== いいね！ラッパーの調整 ===== */
/* いいね！ボタンを包むdivの余計な余白を削除 */
.comment-like-wrapper {
    margin: 0;                /* マージンなし */
    padding: 0;               /* パディングなし */
}

/* ===== アクションエリアの強制上書き ===== */
/* テーマのスタイルを!importantで確実に上書き */
.comment-actions {
    display: flex !important;         /* フレックスレイアウト強制 */
    align-items: center !important;   /* 中央揃え強制 */
    gap: 10px !important;             /* 間隔10px強制 */
    margin-top: 10px !important;      /* 上マージン強制 */
    margin-bottom: 6px !important;    /* 下マージン追加 */
    flex-wrap: wrap !important;       /* 折り返し対応 */
}

/* ===== モバイル対応（レスポンシブデザイン） ===== */
/* 画面幅480px以下のデバイス（スマホ）向け調整 */
/* ボタンを小さくしてタッチしやすく、間隔を狭く */
@media (max-width: 480px) {
    .comment-actions {
        gap: 8px !important;      /* 間隔を8pxに縮小 */
        margin-top: 8px !important; /* 上マージンを縮小 */
    }

    .comment-like-btn {
        padding: 6px 8px !important; /* パディングを小さく（タッチ領域確保） */
        font-size: 13px !important;  /* フォントサイズ縮小 */
    }

    .reply a {
        padding: 6px 8px !important; /* 返信ボタンも同様に縮小 */
        font-size: 11px !important;  /* フォントサイズをさらに小さく */
    }
}

/* ===== 返信ボタンのレイアウト調整 ===== */
/* 返信リンクを含むdivのマージン設定 */
.reply {
    margin-top: 10px !important;  /* 上部余白 */
    margin-bottom: 6px !important; /* 下部余白 */
}

/* ===== 返信ボタンの詳細スタイル ===== */
/* WordPressのデフォルト返信リンクをボタン風にカスタマイズ */
/* 緑系のグラデーションで目立つデザイン */
.reply a {
    display: inline-flex !important;      /* インラインフレックス */
    align-items: center !important;       /* 垂直中央揃え */
    gap: 6px !important;                  /* アイコンとテキストの間隔 */
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important; /* 緑グラデーション */
    color: white !important;              /* 白文字 */
    padding: 8px 16px !important;         /* パディング */
    border-radius: 8px !important;        /* 角丸 */
    text-decoration: none !important;     /* 下線なし */
    font-size: 14px !important;           /* フォントサイズ */
    font-weight: 500 !important;          /* ミディアムウェイト */
    transition: all 0.3s ease !important; /* アニメーション */
    border: none !important;              /* 境界線なし */
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3) !important; /* 緑の影 */
    min-width: 80px !important;           /* 最小幅 */
    justify-content: center !important;   /* 水平中央揃え */
}

/* ===== 返信ボタンのホバー効果 ===== */
.reply a:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #155724 100%) !important; /* 濃い緑グラデーション */
    transform: translateY(-1px) !important; /* 浮き上がり効果 */
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4) !important; /* 影強調 */
    color: white !important;      /* 文字色維持 */
}

/* ===== 返信ボタンのアイコン追加 ===== */
/* FontAwesomeの返信アイコン（コードポイント \f3e5） */
.reply a::before {
    content: "\f3e5" !important;          /* 返信アイコンのUnicode */
    font-family: "Font Awesome 6 Free" !important; /* FontAwesomeフォント */
    font-weight: 900 !important;          /* ソリッドスタイル（太字） */
    font-size: 14px !important;           /* アイコンサイズ */
}

/* ===== ランダム背景色：青系 ===== */
/*
 * JavaScriptでbg-blueクラスが追加されたコメントに適用
 * SWELLテーマの様々なHTML構造に対応するため複数セレクタ
 * 薄い青のグラデーション背景と青いボーダー
 */
.comment-body.bg-blue,
article.comment-body.bg-blue,
.c-comment__body.bg-blue,
.comment__body.bg-blue {
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 100%) !important; /* より薄い青グラデーション */
}

/* ===== ランダム背景色：緑系 ===== */
.comment-body.bg-green,
article.comment-body.bg-green,
.c-comment__body.bg-green,
.comment__body.bg-green {
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%) !important; /* より薄い緑グラデーション */
}

/* ===== ランダム背景色：黄系 ===== */
.comment-body.bg-yellow,
article.comment-body.bg-yellow,
.c-comment__body.bg-yellow,
.comment__body.bg-yellow {
    background: linear-gradient(135deg, #fffde7 0%, #fff8c1 100%) !important; /* より薄い黄グラデーション */
}

/* ===== ランダム背景色：ピンク系 ===== */
.comment-body.bg-pink,
article.comment-body.bg-pink,
.c-comment__body.bg-pink,
.comment__body.bg-pink {
    background: linear-gradient(135deg, #fce4ec 0%, #fce9f1 100%) !important; /* より薄いピンクグラデーション */
}

/* ===== ランダム背景色：紫系 ===== */
.comment-body.bg-purple,
article.comment-body.bg-purple,
.c-comment__body.bg-purple,
.comment__body.bg-purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e5f5 100%) !important; /* より薄い紫グラデーション */
}

/* ===== 補足コメント ===== */
/*
 * SWELLテーマ対応の背景色設定はJavaScriptで処理されます
 * 親子コメントに同じ色を適用する動的処理
 * CSSでは静的な色定義のみ、動的適用はJSのapplyRandomBackgroundColors()関数で実施
 */