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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 腹ペコ親父の情シス日記 — Cocoon 子テーマ用 追加 CSS（デザイン案 v2）
 * 反映先: 外観 → テーマファイルエディター → 「Cocoon Child」の style.css を全選択して、このファイルの全文で置き換える
 *         （先頭の「Theme Name」「Template」の宣言は消さないこと。消えると子テーマが壊れる）
 * 配色（落ち着いた色）: テラコッタ #B85A3A（強調）/ マスタード #E6C873 / 濃い茶 #3B2A20 / クリーム #FBF6EC / セージ寄りの緑 #3F7F73
 * 前提: ロゴの画像は設定しない（サイト名を文字ロゴのまま使う）。バッジは下の CSS で左に付ける
 */

:root {
  --gz-orange: #B85A3A;
  --gz-yellow: #E6C873;
  --gz-ink: #3B2A20;
  --gz-cream: #FBF6EC;
  --gz-teal: #3F7F73;
  --gz-sub: #6B5444;
  --gz-badge: url("https://gadgetzine.blog/wp-content/uploads/2026/10/logo-header-badge.png");
}

/* ===== 全体 ===== */
body { background: var(--gz-cream); color: var(--gz-ink); }
a { color: #A64B2A; }
a:hover { color: var(--gz-orange); }

/* ===== ヘッダー: バッジ ＋ 読める文字のサイト名 ===== */
.header-container {
  background: #fff;
  border-bottom: 4px solid var(--gz-orange);
  box-shadow: 0 2px 10px rgba(184, 90, 58, .14);
}
/* サブタイトルは、サイト名（ロゴ）の下に出す。.header-in は縦並びの flex なので order で入れ替える */
.header-in .logo-header { order: 1; padding: 12px 0 0; } /* Cocoon 既定の下余白 30px をなくす */
/* サイト名の文字をバッジの下端にそろえ、すぐ下にサブタイトルを置く（文字どうしの間隔は約 6px） */
.header-container .logo-text a { align-items: flex-end; }
.header-container .site-name-text { padding-bottom: 6px; }
.header-in .tagline { order: 2; margin: 0 13px; padding-bottom: 12px; font-size: 13px; color: var(--gz-sub); }
.header-container .logo-text a,
.footer .logo-text a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gz-ink);
  text-decoration: none;
}
.logo-text a::before {
  content: "";
  flex: none;
  width: 92px;
  height: 92px;
  background: var(--gz-badge) center / contain no-repeat;
}
.site-name-text { font-size: 30px; font-weight: 800; letter-spacing: .02em; }
/* フッターは小さく控えめに */
.footer .logo-text a::before { width: 44px; height: 44px; }
.footer .site-name-text { font-size: 16px; }

/* ===== グローバルナビ（外観 → メニュー で作ったメニュー） ===== */
.navi { background: var(--gz-ink) !important; }
.navi-in > ul > li > a { color: #fff !important; font-weight: 700; }
.navi-in > ul > li > a:hover { background: var(--gz-orange) !important; color: #fff !important; }

/* ===== 本文とサイドバーのカード ===== */
.main, .sidebar {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(59, 42, 32, .08);
}
/* Cocoon 側の指定が強いので !important で上書きする（確認済み） */
.sidebar .widget-sidebar-title,
.widget-sidebar-title.widget-title {
  background: var(--gz-orange) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 14px;
}

/* ===== トップページ: ヒーローと「食う・組む・買う」カード（固定ページのブロックで使う） ===== */
.gz-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 8px 0 16px;
  padding: 22px 28px;
  background: linear-gradient(135deg, #F6E7C6, #FBF1DE);
  border-radius: 18px;
}
.gz-hero h1 { margin: 0; font-size: 34px; line-height: 1.25; color: var(--gz-ink); }
.gz-hero h1 em { font-style: normal; color: var(--gz-orange); }
.gz-hero p { margin: 8px 0 0; color: var(--gz-sub); }
.gz-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; }
.gz-card {
  display: block;
  padding: 18px;
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(59, 42, 32, .15);
}
.gz-card:hover { color: #fff; transform: translateY(-2px); }
.gz-card b { display: block; font-size: 26px; letter-spacing: .06em; }
.gz-card small { display: block; margin-top: 2px; }
.gz-card.is-eat { background: var(--gz-orange); }
.gz-card.is-build { background: var(--gz-teal); }
.gz-card.is-buy { background: var(--gz-yellow); color: var(--gz-ink); }
.gz-card.is-buy:hover { color: var(--gz-ink); }

/* トップページ以外（カテゴリー・タグ・2ページ目以降）では、ヒーローと3カードを出さない */
body:not(.home) .gz-hero,
body:not(.home) .gz-cards,
body.paged .gz-hero,
body.paged .gz-cards { display: none; }

/* ===== IT 記事: コードとコマンド表（コピーボタンは別途 JS で付ける） ===== */
.entry-content pre, .entry-content .wp-block-code {
  background: #1e1e2e;
  color: #f1f1f1;
  border-radius: 8px;
  padding: 14px 16px;
  overflow: auto;
}
.entry-content td code, .entry-content th code {
  background: #F6EAD2;
  color: var(--gz-ink);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.gz-copy {
  margin-left: 8px;
  padding: 2px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--gz-ink);
  background: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  cursor: pointer;
}
.gz-copy.is-copied { color: #fff; background: #2b9348; border-color: #2b9348; }
pre.gz-has-copy { position: relative; }
pre.gz-has-copy .gz-copy { position: absolute; top: 8px; right: 8px; }

/* ===== 記事内の写真: 縦長写真が画面いっぱいに伸びないよう、高さに上限を付けて中央に置く ===== */
.entry-content .wp-block-image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

/* ===== IT 記事は、1 画面の情報量を優先する（文字を少し小さく・行間を詰める） =====
 * 対象: 記事のカテゴリーが IT 配下のとき（:has() が使えるブラウザ。使えない古いブラウザでは従来の大きさのまま）
 * 本文 15px / コード 13px / 表 13px。グルメ記事の本文（読みやすさ優先）は変えない
 */
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content {
  font-size: 15px;
  line-height: 1.75;
}
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content h2 { font-size: 19px; }
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content h3 { font-size: 16.5px; }
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content li { font-size: 15px; }
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content pre,
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content .wp-block-code {
  font-family: Consolas, "Cascadia Mono", "BIZ UDGothic", "MS Gothic", monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
}
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Cocoon は表の文字を 0.8em に縮めるので、table ではなく th / td に直接サイズを指定する */
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content table {
  line-height: 1.5;
}
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content th,
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content td {
  font-size: 13px;
  padding: 5px 8px;
}
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content td code,
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content th code {
  font-family: Consolas, "Cascadia Mono", "BIZ UDGothic", "MS Gothic", monospace;
  font-size: 12.5px;
  padding: 1px 5px;
}
.single .article:has(.entry-categories a[href*="/category/tech/"]) .entry-content figure img {
  max-width: 100%;
  height: auto;
}

/* ===== サイドバー: カテゴリー一覧を小さく詰める（pu-3.com のようなコンパクトな一覧） ===== */
.sidebar .widget_categories li,
.sidebar .widget_categories .cat-item {
  font-size: 13px;
  line-height: 1.5;
  border: none;
  padding: 2px 0;
}
.sidebar .widget_categories a {
  font-size: 13px;
  padding: 4px 6px;
  display: block;
}
.sidebar .widget_categories ul.children,
.sidebar .widget_categories .children {
  margin: 0 0 0 .9em;
  padding: 0;
}
.sidebar .widget_categories .children li,
.sidebar .widget_categories .children a { font-size: 12px; }
.sidebar .widget_categories .post-count,
.sidebar .widget_categories .cat-item .post-count {
  font-size: 11px;
  color: #8a7a6a;
}

/* ===== サイドバー: 今週の人気記事はアイキャッチ画像なし（WordPress Popular Posts。タイトルと閲覧数のみ） ===== */
.sidebar .wpp-list a:has(> img.wpp-thumbnail),
.sidebar .wpp-list img.wpp-thumbnail { display: none !important; }
.sidebar .wpp-list li { padding: 6px 0; }
.sidebar .wpp-list .wpp-post-title { font-size: 14px; font-weight: 700; display: block; }
.sidebar .wpp-list .wpp-meta, .sidebar .wpp-list .post-stats { font-size: 11px; color: #8a7a6a; }

/* ===== タグ一覧（[category_tags] ショートコード）: 小さめのタグ ===== */
.gz-cat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gz-cat-tags a {
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid #e3d5c3;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
}
.gz-cat-tags a:hover { background: var(--gz-orange); color: #fff; }

/* ===== スマホ ===== */
@media (max-width: 700px) {
  .logo-text a::before { width: 64px; height: 64px; }
  .site-name-text { font-size: 22px; }
  .gz-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
  .gz-hero h1 { font-size: 26px; }
  .gz-cards { grid-template-columns: 1fr; }
}