/*
Theme Name: yoko-yoko-uranai
Template: yoko-yoko
Description: マナベル式生年月日占い（uranai.today）用の子テーマ。親テーマ yoko-yoko に、占いの計算（uranau/kekka6.csv）と自動出力（トップのフォーム・生年月日ページ・生まれ年／月／日のカテゴリー）を足します。
Author: Manabu Yokoyama
Version: 1.0.5
*/

/* =========================================================
 * 占いの自動出力パーツ
 *   色はカスタマイザー「COLOR設定」の変数（--color-a〜g）を使います。
 *   ルールは :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body)
 *   で書き、フロント・エディタで同じ見た目にしています。
 *
 *   1. 生年月日フォーム（.uranai-form）
 *   2. 結果の表（table.uranai-table）
 *   3. タイプ画像・ラッキーカラー・本文の説明
 *   4. 生年月日ページの一覧（.uranai-list）
 * ========================================================= */

/* ---- 1. 生年月日フォーム ---- */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form{
  background:var(--color-g);
  border:2px solid var(--color-a);
  border-radius:14px;
  padding:1.2em;
  margin:1em 0 2.5em;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form__fields{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:.6em;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form label{
  display:flex;
  align-items:center;
  gap:.3em;
  margin:0;
  font-weight:700;
  white-space:nowrap;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form select{
  flex:1 1 auto;
  min-width:0;
  font:inherit;
  font-size:16px; /* iPhone で拡大されないように */
  padding:.6em .4em;
  border:1px solid #bbb;
  border-radius:8px;
  background:#fff;
  color:#333;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form__btn{
  display:block;
  width:100%;
  max-width:420px;
  margin:1em auto 0;
  padding:.9em 1.5em;
  border:0;
  border-radius:999px;
  background:var(--color-e);
  color:#fff;
  font:inherit;
  font-size:1.1em;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .15s, opacity .15s;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form__btn:hover{transform:translateY(-2px);opacity:.92;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-err{
  margin:0 0 .8em !important;
  padding:.6em .9em;
  border-radius:8px;
  background:#fff;
  border:1px solid #d33;
  color:#c00;
  font-weight:700;
}
@media (max-width: 540px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form{padding:1em .8em;}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form__fields{grid-template-columns:1fr 1fr;}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-form__y{grid-column:1 / -1;}
}

/* ---- 2. 結果の表 ---- */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table th{
  width:24%;
  background:var(--color-g);
  color:var(--color-d);
  font-weight:700;
  line-height:1.5;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table td{line-height:1.8;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table td p{margin-bottom:.8em;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table td > :last-child{margin-bottom:0;}
@media (max-width: 834px){
  /* スマホ・タブレットは見出しを上、内容を下に */
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table tbody,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table tr,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table th,
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table td{display:block;width:auto;}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table th{border-bottom:0;}
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) table.uranai-table tr + tr th{border-top:0;}
}

/* ---- 3. タイプ画像・ラッキーカラー・本文の説明 ---- */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-type{font-size:1.1em;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-type strong{color:var(--color-b);font-size:1.2em;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.uranai-type-img{
  float:right;
  width:40%;
  max-width:240px;
  height:auto;
  margin:0 0 1em 1em;
}
@media (max-width: 540px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) img.uranai-type-img{float:none;display:block;width:60%;margin:0 auto 1em;}
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-widget{clear:both;margin-top:1.5em;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-widget img{max-width:100%;height:auto;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-color{color:var(--color-b);}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-intro{
  background:#fff;
  border-left:5px solid var(--color-a);
  border-radius:0 10px 10px 0;
  padding:1em 1.2em;
  margin:1em 0 1.5em;
  color:var(--color-d);
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-intro > :last-child{margin-bottom:0;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-result .ms-center{margin:2em 0;}
/* 目次（親テーマの .ms-toc）：中央寄せ・中身の幅に合わせる */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .ms-toc{margin:1.5em auto;width:fit-content;}

/* ---- 見出しの上の余白 ----
 * 旧テーマ由来の h2.noh.m1（トップの本文・一覧の見出し）は親テーマで上余白 0 になるため、
 * 通常の h2 と同じくらい空けます。カテゴリーの占い結果の最初の見出しも同様。 */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) h2.m1{margin-top:3.5em;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .uranai-result > h2:first-child{margin-top:2.5em !important;}

/* ---- 旧テーマの本文パーツ（既存の記事・固定ページ用） ----
 * .btna … 「今日の運勢を生年月日で占う」などのボタン（ms-btn primary と同じ見た目）
 * .mokujibox … 目次（label「目次 開閉」＋ checkbox.on-off ＋ ul.mokumoku）
 *   最初は開いた状態。「目次 開閉」を押すと閉じます。ボタンは中央。 */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) a.btna{
  display:inline-block;
  min-width:240px;
  max-width:100%;
  margin:.5em auto 1em;
  padding:.9em 2em;
  border-radius:999px;
  background:var(--color-e);
  color:#fff !important;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  text-decoration:none !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .15s, opacity .15s;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) a.btna:hover{transform:translateY(-2px);opacity:.92;}

:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox{
  clear:both;
  max-width:640px;
  margin:2em auto;
  padding:1.5em 2.5em 1.8em;
  border-radius:12px;
  background:var(--color-g);
}
@media (max-width: 540px){
  :where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox{padding:1.2em 1.4em 1.4em;}
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox > label{
  display:block;
  width:fit-content;
  margin:0 auto;
  padding:.3em 1.2em;
  border-radius:999px;
  background:var(--color-a);
  color:#fff;
  font-size:.9em;
  font-weight:700;
  cursor:pointer;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox > label:hover{opacity:.85;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox > p:empty,
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox input.on-off{display:none;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox .mokumoku{margin:1em 0 0;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox input.on-off:checked ~ .mokumoku{display:none;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox .mokumoku li{margin:.4em 0 .4em 1.3rem;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) .mokujibox .mokumoku a{font-weight:700;}

/* ---- 背景・固定ボタン（親テーマの調整） ----
 * フッターの .fix-bg：カスタマイザー「背景画像」が未設定なら COLOR設定の色G
 * PC のサイドメニュー両脇：画像（side-left.jpg / side-right.jpg）の代わりに色G
 * 画面下の固定ボタン：親テーマのもの（お問い合わせ）を隠し、子テーマの「無料で占う」だけ表示 */
#fix-bg.fix-bg:not([style*="background-image"]){background-color:var(--color-g);}
@media print, screen and (min-width:1000px){
  #sidebar.yoko-nav{background:var(--color-g);}
}
.fixedf:not(.uranai-fixedf){display:none !important;}

/* ---- 4. 生年月日ページの一覧（カテゴリー・サイトマップ） ---- */
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul.uranai-list{
  list-style:none;
  padding:0;
  margin:1em 0 2em;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:.4em .8em;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul.uranai-list li{margin:0;padding:0;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul.uranai-list li::before{content:none;}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul.uranai-list a{
  display:block;
  padding:.55em .8em;
  border:1px solid var(--ms-line, #e4ddd0);
  border-radius:8px;
  background:#fff;
  font-size:.92em;
  text-decoration:none;
}
:where(.editor-styles-wrapper, .wp-site-blocks, .entry-content, #wrap, .mce-content-body) ul.uranai-list a:hover{border-color:var(--color-a);}