/*
Skin Name: Yuzu Natural
Description: 柔らかいグレーベージュ×淡い黄色のナチュラルトーン。犬ブログ向けに肉球ボタンも対応。
Author: Makiko
Author URI: https://livingwithmydog.com/
*/

/* ===== カラートークン（カスタムプロパティ） ===== */
:root{
  /* ベース（柔らかいグレーベージュ帯） */
  --bg-base:    #F3F1EC;  /* 画面の地の色：ほんのり温かいグレー */
  --bg-paper:   #F8F5EF;  /* 記事・カード面：少しだけ明るい紙色 */
  --neutral:    #EAE4DA;  /* セクション帯やサイドの面色（グレーベージュ） */

  /* アクセント（ピンク相当→淡い黄色へ） */
  --accent:      #F5EBC8;  /* 見出し背景やハイライト用の薄い黄色 */
  --brand:       #C9A444;  /* ボタン/リンクの主色（黄土系） */
  --brand-strong:#B38F2E;  /* ホバー/強調 */

  /* 文字色（黒より柔らかいこげ茶） */
  --text:        #4A3F35;
  --text-strong: #5A4A3E;

  /* 罫線/影/角丸 */
  --line:   #E5DED2;
  --shadow: rgba(60,45,35,.06);
  --radius-lg: 14px;
}

/* ===== ページ全体 ===== */
body{
  background: var(--bg-base);
  color: var(--text);
  font-family: "Zen Kaku Gothic New","Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.8;
}
.wrapper, .main{
  background: var(--bg-paper);
  box-shadow: 0 8px 24px var(--shadow);
  border-radius: 18px;
}

/* ===== リンク ===== */
a{
  color: var(--brand);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover{ color: var(--brand-strong); }

/* ===== 見出し ===== */
.entry-content h1,
.entry-content h2,
.entry-content h3{
  color: var(--text-strong);
  font-weight: 700;
}
.entry-content h2{
  border-left: 6px solid var(--brand);
  padding: .45em .65em;
  background: var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.entry-content h3{
  border-bottom: 2px solid var(--line);
  padding-bottom: .25em;
}

/* ===== カードやボックス ===== */
.widget, .card, .entry-card{
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 16px var(--shadow);
  border: 1px solid #efe8db;
}

/* ===== サイド/目次などの面色 ===== */
.toc, .sidebar, .index-tab, .widget-area{
  background: var(--neutral);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ===== 引用・テーブル ===== */
.entry-content blockquote{
  background: #FFFDF3;
  border-left: 4px solid var(--brand);
  color: var(--text);
}
.entry-content table{
  border: 1px solid var(--line);
}
.entry-content th{ background: #FAF4E1; }

/* ===== ボタン（Gutenberg & Cocoon共通） ===== */
.wp-block-button .wp-block-button__link,
.btn, .button, .cocoon-btn{
  background: var(--brand);
  color:#fff !important;
  border-radius: 999px;
  padding: .75em 1.25em;
  border: none;
  box-shadow: 0 4px 12px var(--shadow);
  transition: transform .05s ease, filter .2s ease;
}
.wp-block-button .wp-block-button__link:hover,
.btn:hover, .button:hover, .cocoon-btn:hover{
  filter: brightness(0.95);
  transform: translateY(-1px);
}

/* ===== 肉球型ボタン（SVGマスク） =====
   使い方：リンクやボタンに .paw-btn を付与
   例：<a class="wp-block-button__link paw-btn">テキスト</a>
*/
.paw-btn{
  --paw-svg: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>\
 <path d='M66 86c10 0 18-8 18-18s-8-18-18-18-18 8-18 18 8 18 18 18zM134 86c10 0 18-8 18-18s-8-18-18-18-18 8-18 18 8 18 18 18zM96 78c12 0 22-9 22-20s-10-20-22-20-22 9-22 20 10 20 22 20zM160 128c0-24-26-40-64-40s-56 16-56 40 18 40 56 40 64-16 64-40z'/>\
</svg>");
  -webkit-mask-image: var(--paw-svg);
  mask-image: var(--paw-svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  border-radius: 0;
  width: 220px;
  height: 64px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  font-weight: 700;
}
.paw-btn:hover{
  background: var(--brand-strong);
}

/* ===== ボタン内の肉球アイコン（通常ボタン用） ===== */
.btn-paw-icon::before{
  content:"";
  display:inline-block;
  width:1.1em; height:1.1em;
  margin-right:.4em;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23ffffff'>\
 <path d='M66 86c10 0 18-8 18-18s-8-18-18-18-18 8-18 18 8 18 18 18zM134 86c10 0 18-8 18-18s-8-18-18-18-18 8-18 18 8 18 18 18zM96 78c12 0 22-9 22-20s-10-20-22-20-22 9-22 20 10 20 22 20zM160 128c0-24-26-40-64-40s-56 16-56 40 18 40 56 40 64-16 64-40z'/>\
</svg>");
  background-size: contain;
  background-repeat:no-repeat;
  vertical-align: -0.12em;
}