/*
Theme Name: Cocoon Child
Theme URI: https://wp-cocoon.com/
Description: 資格スキルアップ（shikaku-skillup.com）ポップ・カラフル子テーマ
Author: shikaku-skillup
Template: cocoon-master
Version: 1.0.0
*/

/*
実サイト（shikaku-skillup.com）のDOMを検証ツールで確認して書いたセレクタ。
- ヘッダー: #header-container > #header-container-in > #header
- サイトタイトル: h1.logo .site-name-text-link .site-name-text
- グローバルナビ: #navi > #navi-in > ul.menu-top.menu-header.menu-pc
- 記事カード（メインループ）: article.entry-card.e-card
- 記事カード（人気記事ウィジェット）: a.popular-entry-card-link > div.popular-entry-card.e-card
  ※ .entry-card は付かないため別クラスとして扱う。共通クラスは .e-card / .card-thumb
- サムネイル角丸: .card-thumb img（メインループ・ウィジェット共通）
- 人気記事の順位バッジ: .popular-entry-card-thumb::before（content: counter(p-rank)）
- カテゴリラベル: .cat-label（現状は半透明黒 rgba(51,51,51,.7)）
- 記事タイトル: .entry-card-title
- ウィジェットタイトル: h3.widget-title（クラシックウィジェット）/ h2.wp-block-heading（ブロックウィジェット、例:カテゴリー）
- カテゴリーウィジェット: 独自メニューではなくコアの「カテゴリー一覧」ブロック
  .wp-block-categories-list > li.cat-item > a > span.list-item-caption
*/

:root {
  --color-primary: #FF6B6B;
  --color-secondary: #2FB8AE;
  --color-accent: #FFD93D;
  --color-bg: #FFFCF5;
  --color-surface: #FFFFFF;
  --color-text: #2D2A32;
  --color-text-sub: #767676;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
}

h1, h2, h3, h4,
.entry-card-title,
.article h1.entry-title,
.article h2, .article h3 {
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* ヘッダー */
#header-container {
  background: linear-gradient(135deg, var(--color-primary), #ff9472);
}
.site-name-text,
.site-name-text-link,
.site-name-text-link:hover,
.tagline {
  color: #fff;
}
.site-name-text {
  text-shadow: 0 1px 4px rgba(45, 42, 50, 0.25);
}
/* タイトルとタグラインの順序を入れ替え（タイトル→タグライン）。
   アイコン分の幅があるとタイトル行とタグライン行の開始位置がずれるため、
   左寄せではなく中央揃えにして1行目・2行目の軸を合わせる */
h1.logo,
.tagline {
  text-align: center !important;
}
h1.logo {
  order: 1;
  padding: 10px 0 4px !important;
}
.tagline {
  order: 2;
  font-size: 12.5px;
  margin: 0 0 14px !important;
}
/* タイトル横にCSSだけで描くロゴアイコン（画像不要） */
.site-name-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-name-text-link::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: conic-gradient(from 200deg, var(--color-accent), var(--color-secondary), var(--color-primary), var(--color-accent));
  flex: none;
}

/* グローバルナビ（#navi / .navi 自体が白背景を持つため、ここで打ち消してヘッダーのグラデーションを
   ナビの帯まで連続させる。Cocoon側の背景色定義より後に読み込まれる想定だが、念のため !important） */
#navi,
.navi,
.navi-in {
  background-color: transparent !important;
}
/* ナビも#header-inとは別要素なので同じ左余白を付け、項目は投稿〜サイドバー右端まで
   均等配置(space-between)にして幅いっぱいに広げる */
#navi-in {
  padding-left: 29px !important;
}
.menu-top.menu-pc {
  justify-content: space-between !important;
}
#navi .menu-top > li > a {
  color: #fff;
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  border-radius: var(--radius-pill);
  margin: 4px 6px;
  transition: background-color 0.2s ease;
}
#navi .menu-top > li > a:hover {
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* Cocoon既定で長いカテゴリ名が "…" 省略されるため解除し、全文表示にする */
#navi .menu-top > li {
  width: auto !important;
}
#navi .menu-top .item-label {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: auto !important;
}

/* 記事一覧: Cocoon既定は縦1列の「リスト」表示（.list.ect-entry-card { flex-direction:column }）
   のため、モックアップと同じ2カラムの「カード」表示に変更する */
.list.ect-entry-card {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
.list.ect-entry-card > .entry-card-wrap {
  width: calc(50% - 12px);
}

/* 記事カード（トップ/アーカイブ一覧） */
.entry-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(45, 42, 50, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* リスト表示用に付いているサムネイル左floatを解除し、上下スタック(カード型)にする */
.entry-card .entry-card-thumb {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
.entry-card .entry-card-content {
  margin-left: 0 !important;
  width: 100% !important;
  padding: 16px;
}
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(45, 42, 50, 0.12);
}

/* サムネイル角丸（メインループ） */
.entry-card .card-thumb img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* 人気記事ウィジェット: 画像は非表示にし、順位バッジ＋タイトルのシンプルな行にする */
.popular-entry-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #F1E9D8;
}
.popular-entry-card-link:last-child .popular-entry-card {
  border-bottom: none;
}
.popular-entry-card-thumb {
  width: 26px;
  height: 26px;
  flex: none;
}
.popular-entry-card-thumb img {
  display: none;
}
/* Cocoon既定で画像分の余白(margin-left:126px)が固定で入っているため打ち消す */
.popular-entry-card-content {
  margin-left: 0 !important;
}
.popular-entry-card-thumb::before {
  position: static !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  background-color: var(--color-primary) !important;
  color: #fff;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popular-entry-card-title {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
}
.popular-entry-card-link:hover .popular-entry-card-title {
  color: var(--color-secondary);
}

/* サイドバーの「新着記事」ウィジェットは本文と重複するため非表示
   （恒久的に不要であれば 外観 > ウィジェット から削除する方が望ましい） */
#sidebar .widget_new_entries,
.sidebar .widget_new_entries {
  display: none;
}

/* カテゴリラベル */
.cat-label {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
}

/* タグ（記事下部のタグリスト。実クラス未確認のため反映後に要調整） */
.article-tag-list a,
.tag-link {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
}

/* ボタン全般 */
.sns-share-buttons a,
.wp-block-button__link,
.btn {
  border-radius: var(--radius-pill);
}

/* リンク */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-secondary);
}

/* サイドバーウィジェット見出し（クラシックウィジェットの h3.widget-title は元々対応済み。
   ブロックウィジェット内の見出し(h2.wp-block-heading 等)には付かないため個別に追加） */
.widget-title,
.widget_title,
.widget_block .wp-block-heading {
  border-left: 6px solid var(--color-accent);
  padding-left: 10px;
}

/* カテゴリー一覧ブロック（コアの「カテゴリー」ブロックウィジェット） */
.wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-categories-list li {
  margin: 0;
}
.wp-block-categories-list a {
  display: inline-block;
  background-color: var(--color-bg);
  border: 1.5px solid #F1E9D8;
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-categories-list a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* フッター（実クラス未確認のため反映後に要調整） */
#footer {
  background-color: var(--color-text);
  color: #fff;
}
#footer a {
  color: var(--color-accent);
}

/* ページネーション（「次のページ」ボタン & ページ番号） */
.pagination-next-link {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff !important;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.pagination-next-link:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  border: 1.5px solid #F1E9D8;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pagination .page-numbers.dots {
  background-color: transparent;
  border-color: transparent;
}
.pagination a.page-numbers:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.pagination .page-numbers.current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pagination a.next.page-numbers {
  background-color: var(--color-surface);
}
.pagination a.next.page-numbers:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}