/* ホーホービデオ 共通チャンク（自作ヘッダー＋下部ナビ）
 * すべての没入型（キャンバス）ページで共通利用する。
 * 出力は functions.php の hhv_kids_topbar() / hhv_kids_bottom_nav() / hhv_kids_sprite()。
 * 既存ページ固有の .kids-topbar / .kids-bnav とは別クラス（.hh-topbar / .hh-bnav）で衝突回避。
 * 色は howhow-tokens.css（全画面 enqueue 済み）を利用。未定義環境でも崩れないよう既定値も持つ。
 */
:root{
  --hhc-brand:var(--hh-primary,#E8473F);
  --hhc-ink:#3D2A20;--hhc-muted:#9A8678;--hhc-faint:#C3B3A6;--hhc-line:#F0E2D6;
  --hhc-cream:#FFF7F0;--hhc-surface:#fff;
}

/* Astra sticky-header が body に注入する padding-top を没入キャンバスページで無効化 */
body.hoho-kids-canvas{padding-top:0!important}

/* キャンバス本体（ページ側ラッパに付与） */
.hh-canvas{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--hhc-cream);
  color:var(--hhc-ink);font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;overflow:hidden}
body.admin-bar .hh-canvas{top:32px}
@media (max-width:782px){body.admin-bar .hh-canvas{top:46px}}
.hh-canvas .ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:currentColor;flex-shrink:0}
/* .hh-canvas の外（LDコース詳細など）に出る下部ナビ/トップバーのSVGアイコンも縮める。
   これが無いと .ic に寸法が当たらず原寸(巨大)表示になる。 */
.hh-bnav .ic,.hh-topbar .ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:currentColor;flex-shrink:0}
.hh-canvas ruby{ruby-align:center}
/* ルビ色は本文色に追従させる（色付き背景=白文字なら白ルビ）。各ページが
 * セクション単位で muted 等に上書きできるよう、共通側では色を固定しない。 */
.hh-canvas rt{font-size:.46em;font-weight:500;color:inherit;line-height:1}

/* 共通トップバー（自作ヘッダー） */
.hh-topbar{flex-shrink:0;display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--hhc-surface);border-bottom:1px solid var(--hhc-line);z-index:5}
.hh-topbar .hh-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.hh-topbar .hh-brand-mark{width:44px;height:44px;border-radius:14px;background:var(--hh-primary-weak,#FFEDEA);display:flex;align-items:center;justify-content:center}
.hh-topbar .hh-brand-mark img{width:34px;height:34px;object-fit:contain}
.hh-topbar .hh-brand-name{font-size:14px;font-weight:900;color:var(--hhc-brand);display:block;line-height:1.15}
.hh-topbar .hh-brand-sub{font-size:11px;font-weight:700;color:var(--hhc-muted)}
.hh-topbar .hh-spacer{flex:1}
.hh-chip{display:flex;align-items:center;gap:8px;background:var(--hhc-cream);border:2px solid var(--hhc-line);border-radius:999px;padding:5px 13px 5px 5px;text-decoration:none}
.hh-chip .hh-ava{width:32px;height:32px;border-radius:50%;background:var(--hhc-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px}
.hh-chip .hh-name{font-size:13px;font-weight:700;color:var(--hhc-ink)}
.hh-chip .hh-caret{font-size:11px;color:var(--hhc-muted);font-weight:800}

/* メイン領域（スクロール） */
.hh-main{flex:1;overflow-y:auto}

/* フォーム部品（select/input/textarea）の文字が下端で切れないように、
 * 没入ページ共通で十分な行高を確保する（全ページで同現象だったため共通修正）。 */
.hh-canvas select,.hh-canvas input,.hh-canvas textarea{line-height:1.6;font-family:inherit}

/* 共通ナビ（モバイル=下部固定 / PC=上部タブ）。全ページ共通。 */
.hh-bnav{flex-shrink:0;display:flex;background:var(--hhc-surface);border-top:1px solid var(--hhc-line);padding:5px 0 6px;z-index:10;box-shadow:0 -4px 16px rgba(61,42,32,.05)}
.hh-bnav a,.hh-bnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--hhc-faint);text-decoration:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:11px;white-space:nowrap}
.hh-bnav .hh-bn-ic{font-size:21px;line-height:1;display:flex}
.hh-bnav .is-active{color:var(--hhc-brand)}
/* PC: ナビを上部（トップバーの下）にタブとして配置。下部固定はやめる。 */
@media (min-width:900px){
  .hh-topbar{order:0}
  .hh-bnav{order:1;border-top:none;border-bottom:1px solid var(--hhc-line);box-shadow:none;justify-content:flex-start;gap:7px;padding:9px 26px}
  .hh-main{order:2}
  .hh-bnav a,.hh-bnav button{flex:0 0 auto;flex-direction:row;gap:8px;padding:9px 18px;border-radius:999px;font-size:14px}
  .hh-bnav .hh-bn-ic{font-size:18px}
  .hh-bnav .is-active{background:var(--hh-primary-weak,#FFEDEA)}
}