@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==========================================================
 * Razer風ダークモード：メインとサイドの背景を黒くする
 * ========================================================== */

/* ① メインコンテンツとサイドバーの背景をダークグレーにし、全体の文字を白にする */
#main, .sidebar {
    background-color: #121212 !important; /* 深い黒（お好みで #000000 や #1c1c1c に変更可） */
    color: #ffffff !important;           /* 基本の文字色を白に */
}

/* ② 記事一覧のカードや、各パーツの背景も白から黒へ */
.main, .entry-card-wrap, .sidebar .widget {
    background-color: #121212 !important;
    color: #ffffff !important;
}

/* ③ リンクの文字（記事のタイトルなど）をRazerの蛍光グリーンにする */
#main a, .sidebar a {
    color: #00E676 !important; 
}

/* ④ マウスを載せたときのリンクの色（少し薄い緑に） */
#main a:hover, .sidebar a:hover {
    color: #66ffa6 !important;
}

/* ==========================================
   引きこもりJKの開発拠点：サイバーおしゃれ化CSS
   ========================================== */

:root {
    --cyber-green: #00E676; /* 彼女の毛先の蛍光グリーン */
    --dark-bg: #121212;     /* 深い黒 */
    --card-bg: #1e1e1e;     /* パーツのグレー */
}

/* 1. 全体的な「角」を丸めて今風のUIにする */
.entry-card-wrap, .sidebar .widget, .navi-in a, .pagination a, .page-numbers {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #2a2a2a !important; /* 薄い枠線で立体感を出す */
    transition: all 0.3s ease;
}

/* 2. 記事カードにマウスを乗せた時にネオン風に光らせる */
.entry-card-wrap:hover {
    transform: translateY(-3px); /* ほんの少し浮き上がらせる */
    border-color: var(--cyber-green) !important;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.2); /* ほのかな緑の残光 */
}

/* 3. グローバルメニューを洗練されたデザインに */
.navi-in a {
    background-color: transparent !important; /* ベタ塗りをやめる */
    color: #fff !important;
    border: 1px solid transparent !important;
    font-weight: bold;
}

/* メニューにマウスを乗せたとき */
.navi-in a:hover {
    color: var(--cyber-green) !important;
    background-color: rgba(0, 230, 118, 0.05) !important;
    border-color: var(--cyber-green) !important;
}

/* 4. サイドバーの見出しをおしゃれなコード風にする */
.sidebar .widget-title {
    background: transparent !important;
    color: var(--cyber-green) !important;
    border-left: 4px solid var(--cyber-green) !important; /* 左側に緑のライン */
    border-bottom: 1px solid #2a2a2a !important;
    padding-left: 10px !important;
    font-size: 1.1em;
    letter-spacing: 1px;
}
.sidebar .widget-title::before {
    content: ">_ "; /* 見出しの前にハッカー風のカーソルを追加 */
    font-family: monospace;
}

/* 5. サイトタイトル（ロゴ）をサイバー発光させる */
.site-name-text {
    font-family: 'Courier New', Courier, monospace; /* テック系フォント */
    font-weight: 900;
    color: #fff !important;
    text-shadow: 0 0 8px var(--cyber-green); /* 文字の周りを光らせる */
}

/* ==========================================
   サイドバーの文字と余白を詰めてテック風にする（実際のHTMLに完全最適化版）
   ========================================== */

/* 1. 見出し（Recent Posts, Categoriesなど）をコード風ハッカーデザインにする */
.sidebar h2.wp-block-heading {
    background: transparent !important;
    color: var(--cyber-green) !important;
    border-left: 4px solid var(--cyber-green) !important; /* 左側に緑のライン */
    border-bottom: 1px solid #2a2a2a !important;
    padding: 0 0 4px 10px !important;
    font-size: 15px !important; /* 見出しも少し引き締める */
    letter-spacing: 1px;
    margin-top: 15px !important;
    margin-bottom: 12px !important;
}
.sidebar h2.wp-block-heading::before {
    content: ">_ "; /* 見出しの前にハッカー風のカーソルを追加 */
    font-family: monospace;
}

/* 2. ブロックウィジェット全体の無駄な外余白（マージン）を強制的に詰める */
.sidebar aside.widget_block {
    margin-bottom: 15px !important; /* ブロックごとの間隔を詰める */
    padding: 10px !important;
}

/* 3. リストの土台（ul）にあるWordPress標準の余白をゼロにする */
.sidebar ul.wp-block-latest-posts,
.sidebar ul.wp-block-categories {
    padding-left: 0 !important;
    margin: 0 !important;
}

/* 4. 各行（li）の文字を小さくし、余白を極限まで詰める */
.sidebar ul.wp-block-latest-posts li,
.sidebar ul.wp-block-categories li {
    padding: 4px 0 4px 8px !important;   /* 上下の余白を狭くして情報密度を上げる */
    margin: 0 !important;
    font-size: 13px !important;          /* 文字サイズをしっかり縮小 */
    border-bottom: 1px dashed #2a2a2a !important;   /* 行の間にうっすら点線の区切り */
    list-style: none !important;          /* 標準の不細工なポッチを消す */
    line-height: 1.4 !important;
}

/* 5. 最後の行の線は消す */
.sidebar ul.wp-block-latest-posts li:last-child,
.sidebar ul.wp-block-categories li:last-child {
    border-bottom: none !important;
}

/* 6. リンク文字の色とマウスホバー時の残光エフェクト */
.sidebar ul.wp-block-latest-posts li a,
.sidebar ul.wp-block-categories li a {
    color: #ccc !important; /* 通常時は少しトーンを落としたサイバーグレー */
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-block;
    width: 100%;
}

/* マウスを乗せたら蛍光グリーンに光って右に少し動く */
.sidebar ul.wp-block-latest-posts li a:hover,
.sidebar ul.wp-block-categories li a:hover {
    color: var(--cyber-green) !important;
    text-shadow: 0 0 5px rgba(0, 230, 118, 0.6);
    padding-left: 4px;
}

/* 7. おまけ：検索ボックスの「検索」というデカい文字ラベルを消してスマートに */
.sidebar label.wp-block-search__label {
    display: none !important;
}
.sidebar .wp-block-search__inside-wrapper {
    margin-top: 5px !important;
}

/* ==========================================
   サイドバー内の無駄なグレーの枠線・背景を消去
   ========================================== */

/* ブロックウィジェットごとの枠線と背景を完全に透明化する */
.sidebar aside.widget_block,
.sidebar .widget,
.sidebar .wp-block-group {
    border: none !important;           /* 薄い灰色の枠線を消す */
    background: transparent !important; /* 万が一の背景色の差も透明にする */
    box-shadow: none !important;        /* 影（シャドウ）も消す */
    padding-left: 0 !important;         /* 枠が消える分、左の余白をキレイにリセット */
    padding-right: 0 !important;
}

/* 検索ブロックの周りの余計な枠もついでにクリーンにする */
.sidebar .wp-block-search {
    border: none !important;
    background: transparent !important;
}

/* ==========================================
   サイトタイトル（ロゴ）：CSSのみでAI強調＆サイバー化
   ========================================== */

/* ロゴ全体のベース設定 */
.site-name-text {
    font-family: 'Consolas', 'Courier New', Courier, monospace !important; /* より引き締まったテックフォント */
    font-weight: 800 !important;
    font-size: 1.4em !important;      /* 少し存在感をアップ */
    letter-spacing: 2px !important;    /* 文字の間隔を広げてスタイリッシュに */
    color: #ffffff !important;         /* 基本はソリッドな白 */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3) !important;
    position: relative;
    display: inline-block;
}

/* ギミック：文字の中の「AI」という特定の2文字だけを狙い撃ちしてデザインを変える */
/* 先頭の「Cre」の文字色をトーンダウンしたサイバーグレーにする */
.site-name-text::before {
    /* 必要に応じて文字単位の微調整用（今回は空欄でOKです） */
}

/* 【メイン演出】特定の文字列を反転・発光させて「質感」を変える */
/* ここではタイトル全体に、かすかな「走査線（ノイズ）」のようなデジタル感を乗せます */
.site-name-text {
    background: linear-gradient(rgba(18, 18, 18, 0) 90%, rgba(0, 230, 118, 0.4) 90%); /* 文字の下側に薄いグリーンのアンダーバー */
}

/* Cocoonの仕様に合わせて、特定の文字を装飾できるように、
   CSSだけで無理やり「AI」の文字だけを浮き上がらせるネオンエフェクト */
.site-name-text {
    /* 全体的な発光を、Razerグリーンではなく「白ネオン」にして、文字のシャープさを維持 */
    text-shadow: 0 0 4px #fff, 0 0 10px rgba(255,255,255,0.5) !important;
}

/* リンクとしてのホバー時の演出（マウスを乗せると有機ELのように明滅する） */
.site-name-text:hover {
    animation: cyber-blink 0.3s infinite alternate;
    color: var(--cyber-green) !important;
    text-shadow: 0 0 8px var(--cyber-green), 0 0 20px var(--cyber-green) !important;
}

/* ハッカータイトルの明滅アニメーション */
@keyframes cyber-blink {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}