/*
 Theme Name: Cocoon Child
 Template:   cocoon-master
 ===============================================
 RASHI FISHING BLOG — Cocoon Child Theme CSS
 Design: Natural Forest Dark / Editorial
 ===============================================
*/

/* ═══════════════════════════════════════════
   CSS変数
═══════════════════════════════════════════ */
:root {
  --bg-primary:    #0d1a0d;
  --bg-secondary:  #121f10;
  --bg-card:       #182416;
  --bg-elevated:   #1e2d1b;
  --bg-moss:       #243320;
  --text-primary:  #e8ede4;
  --text-secondary:#9aaa90;
  --text-muted:    #6a7a62;
  --accent-gold:   #c9a84c;
  --accent-gold-light: #e2c97a;
  --accent-gold-dim:   rgba(201,168,76,0.12);
  --accent-teal:   #3fb9a7;
  --accent-teal-dim:   rgba(63,185,167,0.1);
  --accent-green:  #5a9e4e;
  --accent-earth:  #a07848;
  --border-color:  rgba(255,255,255,0.06);
  --border-green:  rgba(90,158,78,0.2);
  --font-display:  'Oswald', sans-serif;
  --font-body:     'Zen Kaku Gothic New', sans-serif;
  --font-serif:    'Noto Serif JP', serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

/* ═══════════════════════════════════════════
   Googleフォント読み込み
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Oswald:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');

/* ═══════════════════════════════════════════
   ベース
═══════════════════════════════════════════ */
html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-teal); transition: color .2s; }
a:hover { color: var(--accent-gold); text-decoration: none; }

/* グレインオーバーレイ */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

/* ═══════════════════════════════════════════
   ティッカー（お知らせバー）
═══════════════════════════════════════════ */
.ticker-bar {
  background: var(--bg-moss);
  border-bottom: 1px solid var(--border-green);
  overflow: hidden;
  padding: 7px 0;
}
.ticker-inner {
  display: flex;
  gap: 72px;
  white-space: nowrap;
  animation: rfb-ticker 24s linear infinite;
}
.ticker-inner span { font-size: 11px; color: var(--text-secondary); letter-spacing: .07em; }
.ticker-inner span b { color: var(--accent-gold); }
@keyframes rfb-ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════
   HEADER（Cocoon: #header .header）
═══════════════════════════════════════════ */
#header,
.header {
  background: rgba(13,26,13,0.95) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-green) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* サイトタイトル */
.site-name-text,
#site-name .site-name-text {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--text-primary) !important;
}
.site-name-text span,
.site-name-text em {
  color: var(--accent-gold) !important;
  font-style: normal !important;
}

/* サイトディスクリプション */
.site-description-text {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  letter-spacing: .1em !important;
}

/* ═══════════════════════════════════════════
   NAVIGATION（Cocoon: .navi .navi-in）
═══════════════════════════════════════════ */
.navi,
#navi {
  background: rgba(13,26,13,0.97) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.navi-in > ul > li > a,
.navi ul li a {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  padding: 16px !important;
  transition: color .2s, background .2s !important;
}
.navi-in > ul > li > a:hover,
.navi ul li a:hover {
  color: var(--accent-gold) !important;
  background: var(--accent-gold-dim) !important;
}
/* ドロップダウン */
.navi ul ul {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
}
.navi ul ul a {
  color: var(--text-secondary) !important;
}
.navi ul ul a:hover {
  color: var(--accent-gold) !important;
  background: var(--accent-gold-dim) !important;
}

/* ═══════════════════════════════════════════
   HERO / ビジュアルエリア（固定ページ用）
═══════════════════════════════════════════ */
.visual,
#visual {
  background: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-green);
}

/* ═══════════════════════════════════════════
   メインコンテンツ背景
═══════════════════════════════════════════ */
#container,
.container,
#main,
.main,
#content,
.content {
  background: var(--bg-primary) !important;
}

/* ═══════════════════════════════════════════
   記事カード（Cocoon: .article-card-wrap）
═══════════════════════════════════════════ */
.article-card-wrap,
.article-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  transition: all .25s ease !important;
  overflow: hidden;
  position: relative;
}
.article-card-wrap::before,
.article-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: 1;
}
.article-card-wrap:hover::before,
.article-card:hover::before { transform: scaleX(1); }
.article-card-wrap:hover,
.article-card:hover {
  background: var(--bg-elevated) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  transform: translateY(-4px);
  border-color: var(--border-green) !important;
}

/* カードのタイトル */
.article-card-wrap .card-title,
.article-card .card-title,
.a-title {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
}

/* カテゴリラベル */
.article-card-wrap .cat-label,
.article-card .cat-label,
.cat-label {
  background: var(--accent-teal) !important;
  color: var(--bg-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 8px !important;
}

/* 日付 */
.article-card-wrap .date,
.article-card .date,
.post-date,
.published {
  color: var(--text-muted) !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════
   記事詳細ページ
═══════════════════════════════════════════ */
.article,
.article-body,
#article {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  padding: 36px !important;
  color: var(--text-primary) !important;
}

/* 記事内見出し */
.article h1, .article h2, .article h3,
.article h4, .article h5, .article h6 {
  font-family: var(--font-serif) !important;
  color: var(--text-primary) !important;
}
.article h2 {
  border-left: 3px solid var(--accent-teal) !important;
  padding-left: 14px !important;
  background: none !important;
  font-size: 20px !important;
  margin: 32px 0 16px !important;
}
.article h3 {
  border-left: 3px solid var(--accent-gold) !important;
  padding-left: 12px !important;
  background: none !important;
  font-size: 17px !important;
  margin: 24px 0 12px !important;
}

/* 記事内本文 */
.article p {
  color: var(--text-secondary) !important;
  line-height: 1.85 !important;
}

/* 記事内リンク */
.article a { color: var(--accent-teal) !important; }
.article a:hover { color: var(--accent-gold) !important; }

/* 記事タイトル（h1） */
.entry-title,
.article-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════
   サイドバー（Cocoon: #sidebar .sidebar）
═══════════════════════════════════════════ */
#sidebar,
.sidebar {
  background: transparent !important;
}

/* ウィジェット */
.widget,
.sidebar .widget {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

/* ウィジェットタイトル */
.widget-title,
.sidebar .widget-title,
.widgettitle {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--accent-gold) !important;
  background: var(--bg-elevated) !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.widget-title::after,
.widgettitle::after { display: none !important; }

/* ウィジェット内のリスト */
.widget ul li {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 20px !important;
}
.widget ul li:last-child { border-bottom: none !important; }
.widget ul li a {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}
.widget ul li a:hover { color: var(--accent-gold) !important; }

/* タグクラウド */
.tagcloud a {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  transition: all .2s !important;
}
.tagcloud a:hover {
  color: var(--accent-gold) !important;
  border-color: var(--accent-gold-dim) !important;
  background: var(--accent-gold-dim) !important;
}

/* カレンダー */
.widget_calendar table {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}
.widget_calendar th { background: var(--bg-moss) !important; }
.widget_calendar td a { color: var(--accent-teal) !important; }

/* ═══════════════════════════════════════════
   パンくずリスト
═══════════════════════════════════════════ */
.breadcrumb,
#breadcrumb {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 24px !important;
}
.breadcrumb a,
#breadcrumb a { color: var(--text-muted) !important; font-size: 12px !important; }
.breadcrumb a:hover { color: var(--accent-teal) !important; }
.breadcrumb span { color: var(--text-muted) !important; font-size: 12px !important; }

/* ═══════════════════════════════════════════
   ページネーション
═══════════════════════════════════════════ */
.pagination .page-numbers,
.paging-navigation .page-numbers {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .2s !important;
}
.pagination .page-numbers:hover,
.paging-navigation .page-numbers:hover {
  background: var(--bg-elevated) !important;
  color: var(--accent-gold) !important;
  border-color: var(--accent-gold-dim) !important;
}
.pagination .current,
.paging-navigation .current {
  background: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
  border-color: var(--accent-gold) !important;
}

/* ═══════════════════════════════════════════
   FOOTER（Cocoon: #footer .footer）
═══════════════════════════════════════════ */
#footer,
.footer {
  background: #070f07 !important;
  border-top: 1px solid var(--border-green) !important;
  color: var(--text-muted) !important;
}
.footer-widget-area {
  background: #070f07 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.footer .widget-title,
.footer .widgettitle {
  color: var(--accent-teal) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.footer a { color: var(--text-muted) !important; }
.footer a:hover { color: var(--text-primary) !important; }
.footer-copyright,
.copyright {
  background: #070f07 !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 16px !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════
   コメント欄
═══════════════════════════════════════════ */
#respond,
.comment-area {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
}
.comment-reply-title,
#reply-title {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  letter-spacing: .1em !important;
}
.comment-form input,
.comment-form textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--accent-teal) !important;
  outline: none !important;
}
.submit {
  background: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  letter-spacing: .1em !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.submit:hover { background: var(--accent-gold-light) !important; }

/* 既存コメント */
.comment-list li {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}
.comment-author .fn { color: var(--accent-teal) !important; }
.comment-meta { color: var(--text-muted) !important; font-size: 11px !important; }
.comment-body p { color: var(--text-secondary) !important; }

/* ═══════════════════════════════════════════
   検索フォーム
═══════════════════════════════════════════ */
.search-form input[type="search"],
.search-box input {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
.search-form input[type="search"]:focus { border-color: var(--accent-teal) !important; }
.search-form button,
.search-box button,
.search-submit {
  background: var(--accent-teal) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
}

/* ═══════════════════════════════════════════
   アフィリエイトボックス（Cocoon標準）
═══════════════════════════════════════════ */
.product-box,
.affi-box {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-green) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
}
.product-box .product-name,
.affi-box .affi-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.product-box .product-price,
.affi-box .affi-price {
  color: var(--accent-gold) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
}
.product-box .btn-amazon,
.affi-box .btn-amazon {
  background: var(--accent-green) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
.product-box .btn-rakuten,
.affi-box .btn-rakuten {
  background: #bf0000 !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}

/* ═══════════════════════════════════════════
   スクロールアニメーション
═══════════════════════════════════════════ */
.article-card-wrap,
.article-card,
.widget {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease !important;
}
.article-card-wrap.is-visible,
.article-card.is-visible,
.widget.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════
   モバイル対応
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .article { padding: 20px !important; }
  .navi ul li a { padding: 12px !important; }
}
/* ═══════════════════════════════════════════
   追加修正CSS — 記事カード・テキスト強制上書き
═══════════════════════════════════════════ */

/* 記事カード背景を強制ダーク化 */
.card-wrap,
.article-card-wrap,
.a-wrap,
.a-wrap:hover {
  background: #182416 !important;
  border: 1px solid rgba(90,158,78,0.2) !important;
  border-radius: 12px !important;
}
.a-wrap:hover {
  background: #1e2d1b !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* カードのテキストを白系に */
.a-wrap .a-title,
.a-wrap .card-title,
.article-card-wrap .a-title,
.entry-title,
h1, h2, h3, h4 {
  color: #e8ede4 !important;
}

/* カードの本文・日付 */
.a-wrap .a-content,
.a-wrap .a-date,
.a-wrap time,
.a-wrap .date,
.card-excerpt,
.a-excerpt {
  color: #9aaa90 !important;
}

/* サムネイルエリア */
.a-wrap .a-thumb,
.a-wrap .eye-catch {
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
}

/* カテゴリラベル */
.a-wrap .cat-label,
.cat-label,
.label-cat {
  background: #3fb9a7 !important;
  color: #0d1a0d !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
}

/* ヘッダータイトル文字色 */
.site-name,
.site-name-text,
#site-name a {
  color: #e8ede4 !important;
}

/* ヘッダー背景 */
#header {
  background: rgba(13,26,13,0.97) !important;
}

/* ナビ文字 */
.navi-in a,
#navi a {
  color: #9aaa90 !important;
}
.navi-in a:hover,
#navi a:hover {
  color: #c9a84c !important;
}

/* サイドバーウィジェット文字 */
.sidebar .widget,
.sidebar .widget *,
#sidebar .widget,
#sidebar .widget * {
  color: #9aaa90 !important;
}
.sidebar .widget-title,
#sidebar .widgettitle {
  color: #c9a84c !important;
}

/* フッター */
#footer, #footer * {
  color: #6a7a62 !important;
}

/* 全体の白背景を潰す */
#wrap, #container, #contents,
.wrap, .container, .contents,
#main, .main, #primary {
  background: #0d1a0d !important;
}

/* スクロールアニメ発動（JSなしでも表示） */
.a-wrap,
.widget {
  opacity: 1 !important;
  transform: none !important;
}