@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
*/

/*
========================================================================
 garden（家庭菜園）子テーマ カスタマイズ
 方針: 緑・アースカラーで自然な雰囲気、写真映え重視、
       カテゴリナビ強調・写真サムネイル大きめ。
 ※ Theme Name / Template ヘッダーは Cocoon が子テーマを認識するため変更しない。
 ※ 配色は :root のカスタムプロパティに集約し、各セレクタはそれを参照する。
========================================================================
*/

:root {
  --garden-green:      #4C8C3F; /* 主色（緑） */
  --garden-green-dark: #3A6E30; /* ホバー等の濃い緑 */
  --garden-link:       #6BA85A; /* リンク・補助色 */
  --garden-earth:      #8C6E4A; /* アクセント（土） */
  --garden-bg:         #FFFFFF; /* 基本背景 */
  --garden-bg-sub:     #F7F5F0; /* 補助背景（温かみのあるオフホワイト） */
  --garden-text:       #2E2A24; /* 本文 */
  --garden-border:     #E2DCCF; /* 区切り線（アース系） */
}

/************************************
** タイポグラフィ
************************************/
body {
  color: var(--garden-text);
  background-color: var(--garden-bg-sub);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", "Yu Gothic Medium", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
}
#main, .main, .content { background-color: var(--garden-bg); }

/************************************
** 配色（リンク・見出し）
************************************/
a { color: var(--garden-green); }
a:hover { color: var(--garden-green-dark); }

#header, .header-container-in { background-color: var(--garden-bg); }

/* 記事見出し：緑の下線＋土色のサブアクセント。
   Cocoon 本体が高 specificity（#wrapper .article h2 等）で見出しを装飾するため、
   確実に上書きできるよう要点に !important を付与する。 */
.article h2 {
  border: none !important;
  border-bottom: 3px solid var(--garden-green) !important;
  background: transparent !important;
  padding: 0.3em 0.2em;
  color: var(--garden-green-dark);
}
.article h3 {
  border: none !important;
  border-left: 5px solid var(--garden-earth) !important;
  padding-left: 0.6em;
  color: var(--garden-green-dark);
}

/* ボタン・強調要素 */
.wp-block-button__link, .btn, .more-link {
  background-color: var(--garden-green);
  color: #fff;
  border-color: var(--garden-green);
}
.wp-block-button__link:hover, .btn:hover, .more-link:hover {
  background-color: var(--garden-green-dark);
}

/* フッター */
#footer { background-color: var(--garden-green-dark); color: #fff; }
#footer a { color: #d8ecd0; }

/************************************
** カテゴリナビ強調（グローバルナビを緑帯で目立たせる）
************************************/
#navi { background-color: var(--garden-green); }
#navi .navi-in > ul li a {
  color: #fff;
  font-weight: 600;
}
#navi .navi-in > ul li a:hover { background-color: var(--garden-green-dark); }
/* カテゴリラベル（記事カード上の category タグ等） */
.cat-label, .category-label, .entry-card .cat-label {
  background-color: var(--garden-earth);
  color: #fff;
}

/************************************
** 写真サムネイル大きめ（記事一覧カード）
** Cocoon の実 DOM では画像は .card-thumb img / .entry-card-thumb-image。
** height:auto は aspect-ratio を打ち消すため指定しない。
************************************/
.card-thumb { margin-bottom: 0.8em; }
.card-thumb img, .entry-card-thumb-image {
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
/* 一覧をカード型・サムネを大きく見せる */
.list .entry-card-wrap { box-shadow: 0 1px 6px rgba(0,0,0,.08); }

/************************************
** アフィリエイト広告：PR/広告表記と広告枠の余白（景表法ステマ規制対応）
************************************/
.pr-notice {
  display: inline-block;
  background: var(--garden-bg-sub);
  border: 1px solid var(--garden-border);
  color: #6b5f4a;
  font-size: 0.8em;
  padding: 0.15em 0.6em;
  border-radius: 3px;
  margin-bottom: 0.8em;
}
.ad-label { color: #8a8170; font-size: 0.75em; }
.ad, .article .ad { margin: 1.8em 0; }

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

/*834px以下*/
@media screen and (max-width: 834px){
  /* タブレット以下はサムネをやや縦長にして写真を大きく見せる */
  .card-thumb img, .entry-card-thumb-image { aspect-ratio: 4 / 3; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  body { font-size: 15px; }
}