/* =========================================================
 * EraBest JIN:R Overrides — 依存層
 * ─────────────────────────────────────────────────────────
 * JIN:R 親テーマの出力に対する EraBest 上書き層。
 * 「JIN:R が吐く HTML / クラス」に依存するスタイル群。
 *
 * 設計原則：
 *   - すべて erabest-tokens.css の CSS 変数を参照
 *   - !important は最小限。子テーマ専用 prefix で specificity 確保
 *   - JIN:R の構造変更があれば、ここを修正
 *   - A 方針（自作テーマ）に乗り換える際は破棄して書き直し
 *
 * セレクタ方針：
 *   - `body.wp-child-theme-jin-r-child <jinr-selector>` で子テーマ限定
 *   - JIN:R 主要セレクタ：
 *     #commonHeader, #commonHeaderInner, #headerLogo, #headerLogoLink,
 *     #SiteSubCopy, #globalMenu, #globalMenuList, #commonFooter,
 *     .t--main-width, .t--padding, .o--nav-box
 * ========================================================= */


/* ==========================================================
 * 0. SR-only ユーティリティ（視覚非表示・スクリーンリーダー読み上げあり）
 * front-page.php の SEO 用ブランド H1 で使用。
 * 親テーマ era_seo_strip_hidden_h1_start の `style="left:-9999px"` パターン除去とは
 * 別パターン (class ベース・clip 方式) なので除去対象にならない。
 * ========================================================== */
.era-fp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==========================================================
 * 1. ベース — body / リンク / 見出し
 * !important は JIN:R カスタマイザー出力（!important 付き）に勝つため必要
 * ========================================================== */
body.wp-child-theme-jin-r-child {
  background: var(--era-bg) !important;
  color: var(--era-ink);
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.wp-child-theme-jin-r-child #wrapper {
  background: var(--era-bg) !important;
}

body.wp-child-theme-jin-r-child a {
  color: var(--era-accent);
  transition: color 0.2s;
}
body.wp-child-theme-jin-r-child a:hover {
  color: var(--era-accent-deep);
}

/* 投稿本文の見出し
 * JIN:R 実セレクタ: h2.wp-block-heading.jinr-heading
 * 親ラッパー: .d--article-width-740, .entry-content など
 * !important で JIN:R の灰色グラデ背景 + 灰色文字を上書き */
body.wp-child-theme-jin-r-child h2.wp-block-heading,
body.wp-child-theme-jin-r-child h2.jinr-heading,
body.wp-child-theme-jin-r-child .entry-content h2,
body.wp-child-theme-jin-r-child .d--article-width-740 h2 {
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  margin: 56px 0 20px !important;
  padding: 4px 0 4px 16px !important;
  border-left: 5px solid var(--era-accent) !important;
  background: none !important;
  color: var(--era-ink) !important;
  position: relative;  /* ::before/::after を絶対配置リセットの基準に */
}

/* JIN:R の h2 ::before/::after の青三角装飾を完全消去 */
body.wp-child-theme-jin-r-child h2.wp-block-heading::before,
body.wp-child-theme-jin-r-child h2.jinr-heading::before,
body.wp-child-theme-jin-r-child .entry-content h2::before,
body.wp-child-theme-jin-r-child .d--article-width-740 h2::before,
body.wp-child-theme-jin-r-child h2.wp-block-heading::after,
body.wp-child-theme-jin-r-child h2.jinr-heading::after,
body.wp-child-theme-jin-r-child .entry-content h2::after,
body.wp-child-theme-jin-r-child .d--article-width-740 h2::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

/* h3 ::before/::after も同様に消去（JIN:R 装飾防止） */
body.wp-child-theme-jin-r-child h3.wp-block-heading::before,
body.wp-child-theme-jin-r-child h3.wp-block-heading::after,
body.wp-child-theme-jin-r-child .entry-content h3::before,
body.wp-child-theme-jin-r-child .entry-content h3::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
}

/* 通常本文の h3 (OPTION A: 左頭の角括弧マーク) — H2 の縦棒を削いで軽量化した階層関係。
 * コンポーネント内 h3（.era-summary-heading 等）は除外。 */
body.wp-child-theme-jin-r-child h3.wp-block-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name),
body.wp-child-theme-jin-r-child h3.jinr-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name),
body.wp-child-theme-jin-r-child .entry-content h3:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name),
body.wp-child-theme-jin-r-child .d--article-width-740 h3:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name) {
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h3) !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
  margin: 28px 0 10px !important;
  padding: 0 0 0 18px !important;
  border-left: none !important;
  background: none !important;
  color: var(--era-ink) !important;
  position: relative !important;
}
body.wp-child-theme-jin-r-child h3.wp-block-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before,
body.wp-child-theme-jin-r-child h3.jinr-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before,
body.wp-child-theme-jin-r-child .entry-content h3:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before,
body.wp-child-theme-jin-r-child .d--article-width-740 h3:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.42em !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 1.5px solid var(--era-accent) !important;
  border-left: 1.5px solid var(--era-accent) !important;
  border-right: none !important;
  border-bottom: none !important;
  background: none !important;
}

body.wp-child-theme-jin-r-child h4.wp-block-heading:not(.era-sp-title):not(.era-nb-title),
body.wp-child-theme-jin-r-child h4.jinr-heading:not(.era-sp-title):not(.era-nb-title),
body.wp-child-theme-jin-r-child .entry-content h4:not(.era-sp-title):not(.era-nb-title),
body.wp-child-theme-jin-r-child .d--article-width-740 h4:not(.era-sp-title):not(.era-nb-title) {
  font-family: var(--font-jp) !important;
  font-weight: 700 !important;
  font-size: var(--fs-h4) !important;
  letter-spacing: 0.02em !important;
  margin: 28px 0 8px !important;
  background: none !important;
  color: var(--era-ink-soft) !important;
}

/* 記事タイトル（投稿ページの h1） — ゴシック (HANDOFF 2026-04-25 更新) */
body.wp-child-theme-jin-r-child.single h1.entry-title,
body.wp-child-theme-jin-r-child.single .post-title,
body.wp-child-theme-jin-r-child.single h1 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--era-ink);
}

/* 段落・本文（記事内・JIN:R 独自ラッパー対応） */
body.wp-child-theme-jin-r-child .entry-content p,
body.wp-child-theme-jin-r-child .d--article-width-740 p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--era-ink);
}


/* ==========================================================
 * 2. ヘッダー（#commonHeader）
 * ========================================================== */
body.wp-child-theme-jin-r-child #commonHeader {
  background: var(--era-paper);
  border-bottom: 1px solid var(--era-line);
  box-shadow: none;
}

body.wp-child-theme-jin-r-child #commonHeaderInner {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* ロゴ：テキスト「エラベスト」を SVG ロゴで置換 */
body.wp-child-theme-jin-r-child #headerLogo {
  display: flex;
  align-items: center;
}

body.wp-child-theme-jin-r-child #headerLogoLink {
  /* 文字を視覚的に隠して背景画像で表示 */
  display: inline-block;
  width: 240px;
  height: 48px;
  background-image: url('assets/img/logo-pc-header.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

/* SiteSubCopy（"Select your best"）は SVG に既に含まれるため非表示 */
body.wp-child-theme-jin-r-child #SiteSubCopy {
  display: none;
}

/* ==========================================================
 * 3. グローバルナビ（#globalMenu）
 * ========================================================== */
body.wp-child-theme-jin-r-child #globalMenuList {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
}

body.wp-child-theme-jin-r-child #globalMenuList > li > a {
  color: var(--era-ink);
  padding: 10px 16px;
  border-radius: 0;
  background: transparent;
  transition: color 0.2s, background-color 0.2s;
}
body.wp-child-theme-jin-r-child #globalMenuList > li > a:hover {
  color: var(--era-accent);
  background: var(--era-accent-soft);
}

/* JIN:R がボタン形にしている場合の上書き：丸ピルを弱める */
body.wp-child-theme-jin-r-child #globalMenuList li.d--button > a {
  background: transparent;
  color: var(--era-ink);
  border-radius: 0;
}
body.wp-child-theme-jin-r-child #globalMenuList li.d--button > a:hover {
  background: var(--era-accent-soft);
  color: var(--era-accent);
}
body.wp-child-theme-jin-r-child #globalMenuList li.current-menu-item > a {
  color: var(--era-accent);
  font-weight: 700;
}


/* ==========================================================
 * 4. メインコンテンツ領域
 * ========================================================== */
body.wp-child-theme-jin-r-child .t--main-width {
  max-width: var(--layout-max);
}


/* ==========================================================
 * 5. フッター（#commonFooter）
 * ========================================================== */
body.wp-child-theme-jin-r-child #commonFooter {
  background: var(--era-ink);
  color: var(--era-paper);
  padding-top: 56px;
  padding-bottom: 32px;
  margin-top: 64px;
}

body.wp-child-theme-jin-r-child #commonFooter,
body.wp-child-theme-jin-r-child #commonFooter a,
body.wp-child-theme-jin-r-child #commonFooter p,
body.wp-child-theme-jin-r-child #commonFooter span {
  color: var(--era-paper);
}
body.wp-child-theme-jin-r-child #commonFooter a {
  opacity: 0.85;
  transition: opacity 0.2s;
}
body.wp-child-theme-jin-r-child #commonFooter a:hover {
  opacity: 1;
  color: var(--era-paper);
}

/* フッターメニューの装飾 */
body.wp-child-theme-jin-r-child #footerMenuList {
  font-family: var(--font-jp);
  font-size: var(--fs-body-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
body.wp-child-theme-jin-r-child #footerMenuList li a {
  display: inline-block;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
body.wp-child-theme-jin-r-child #footerMenuList li a:hover {
  border-bottom-color: var(--era-paper);
}

/* フッター冒頭にフル版ロゴを CSS 擬似要素で挿入
 * （JIN:R テンプレ非依存・::before で commonFooter 上部に出す） */
body.wp-child-theme-jin-r-child #commonFooter::before {
  content: '';
  display: block;
  width: 280px;
  height: 60px;
  margin: 0 auto 36px;
  background-image: url('assets/img/logo-footer-full.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) invert(1);  /* 黒→白に反転（フッターは濃茶背景のため） */
}

/* コピーライトを ::after で差し込む */
body.wp-child-theme-jin-r-child #commonFooter::after {
  content: '© 2026 EraBest — The best, chosen for you';
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--era-paper);
  opacity: 0.6;
  margin-top: 28px;
  padding-bottom: 8px;
}


/* ==========================================================
 * 6. ボタン / 丸ピル — JIN:R の青ボタンを EraBest 緑に
 * ========================================================== */
body.wp-child-theme-jin-r-child .wp-block-button__link,
body.wp-child-theme-jin-r-child .button,
body.wp-child-theme-jin-r-child .d--button-primary {
  background: var(--era-accent);
  color: var(--era-accent-ink);
  border-radius: var(--radius-sm);
  padding: 12px 28px;
  font-family: var(--font-jp);
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  transition: background-color 0.2s;
}
body.wp-child-theme-jin-r-child .wp-block-button__link:hover,
body.wp-child-theme-jin-r-child .button:hover,
body.wp-child-theme-jin-r-child .d--button-primary:hover {
  background: var(--era-accent-deep);
  color: var(--era-accent-ink);
}


/* ==========================================================
 * 7. JIN:R デフォルトヒーロー（"o--jinr-mainvisual"）を非表示
 * ─────────────────────────────────────────────────────────
 * theme_mods_jinr に保存された JIN:R デモのヘッダー画像
 * （青グラデ + "すべての人に / 直感的なサイトデザインを"）を完全に隠す。
 * Phase 6 で本物のヒーロー実装時にこのブロックを削除する。
 * ========================================================== */
body.wp-child-theme-jin-r-child section.o--jinr-mainvisual,
body.wp-child-theme-jin-r-child section.o--jinr-stillimage,
body.wp-child-theme-jin-r-child .o--jinr-mainvisual {
  display: none !important;
}

/* ヘッダー透過モード（d--transparent）を解除して常時白背景 */
body.wp-child-theme-jin-r-child #commonHeader.d--transparent {
  background: var(--era-paper) !important;
  position: relative !important;
  box-shadow: none;
}

/* 透過モード時のナビ文字白を EraBest 黒に戻す（!important で JIN:R に勝つ） */
body.wp-child-theme-jin-r-child #commonHeader #globalMenuList > li > a,
body.wp-child-theme-jin-r-child #commonHeader #globalMenuList li > a {
  color: var(--era-ink) !important;
}
body.wp-child-theme-jin-r-child #commonHeader #globalMenuList .a--menu-subtext {
  color: var(--era-ink-muted) !important;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  display: block;
  margin-top: 2px;
}
body.wp-child-theme-jin-r-child #commonHeader #globalMenuList > li.current-menu-item > a {
  color: var(--era-accent) !important;
}


/* ==========================================================
 * 7b. JIN:R ボタン群（.b--jinr-button / .d--button-solid）を EraBest 緑へ
 * ========================================================== */
body.wp-child-theme-jin-r-child .b--jinr-button .o--button-inner,
body.wp-child-theme-jin-r-child .b--jinr-button .o--button-inner > a,
body.wp-child-theme-jin-r-child .d--button-solid,
body.wp-child-theme-jin-r-child .d--button-solid > a {
  background-color: var(--era-accent) !important;
  color: var(--era-accent-ink) !important;
  border-color: var(--era-accent) !important;
}
body.wp-child-theme-jin-r-child .b--jinr-button .o--button-inner > a:hover,
body.wp-child-theme-jin-r-child .d--button-solid:hover,
body.wp-child-theme-jin-r-child .d--button-solid > a:hover {
  background-color: var(--era-accent-deep) !important;
}

/* ボタン内部のホバーアニメーション（a--button-hover）も EraBest 色に */
body.wp-child-theme-jin-r-child .b--jinr-button .a--button-hover {
  background-color: var(--era-accent-deep) !important;
}


/* ==========================================================
 * 8. カードのデフォルトスタイル — 角丸を弱く・縁線を細く
 * ========================================================== */
body.wp-child-theme-jin-r-child .post-card,
body.wp-child-theme-jin-r-child .archive-post,
body.wp-child-theme-jin-r-child .new-post-list .post-card {
  background: var(--era-paper);
  border: 1px solid var(--era-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}
body.wp-child-theme-jin-r-child .post-card:hover,
body.wp-child-theme-jin-r-child .archive-post:hover {
  border-color: var(--era-ink-muted);
}


/* ==========================================================
 * 9. サイドバー（PC: 2 カラム / SP: 縦積み — JIN:R デフォルトに任せる）
 * ========================================================== */
body.wp-child-theme-jin-r-child .l-sidebar,
body.wp-child-theme-jin-r-child #sidebar {
  background: transparent;
}

body.wp-child-theme-jin-r-child .widget-title,
body.wp-child-theme-jin-r-child .widgettitle {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-label-jp);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--era-ink-soft);
  border-bottom: 1px solid var(--era-line);
  padding-bottom: 10px;
  margin-bottom: 16px;
}


/* ==========================================================
 * 10. レスポンシブ（モバイル ≤768px）
 * ========================================================== */
@media (max-width: 768px) {
  body.wp-child-theme-jin-r-child #headerLogoLink {
    width: 200px;
    height: 40px;
  }

  body.wp-child-theme-jin-r-child .post-content h2 {
    font-size: 19px;
    margin: 40px 0 16px;
  }
  body.wp-child-theme-jin-r-child .post-content h3 {
    font-size: 16px;
    margin: 24px 0 8px;
  }
  /* H3 角括弧マークもモバイルでわずかに小さく */
  body.wp-child-theme-jin-r-child h3.wp-block-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before,
  body.wp-child-theme-jin-r-child h3.jinr-heading:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before,
  body.wp-child-theme-jin-r-child .entry-content h3:not(.era-summary-heading):not(.era-no-h3-style):not(.era-faq-title):not(.era-product-detailed-name)::before {
    width: 9px !important;
    height: 9px !important;
  }

  body.wp-child-theme-jin-r-child #footerMenuList {
    gap: 16px;
    font-size: 12px;
  }
}

/* ==========================================================
 * 11. SP モバイルマーク切替（≤480px）
 * ========================================================== */
@media (max-width: 480px) {
  body.wp-child-theme-jin-r-child #headerLogoLink {
    background-image: url('assets/img/logo-sp-mark.svg');
    width: 40px;
    height: 40px;
  }

  body.wp-child-theme-jin-r-child #commonHeaderInner {
    padding: 10px 16px;
  }

  body.wp-child-theme-jin-r-child .post-content h2 {
    font-size: 18px;
    padding-left: 10px;
    border-left-width: 4px;
  }

  body.wp-child-theme-jin-r-child #commonFooter {
    padding-top: 40px;
    padding-bottom: 24px;
  }
  body.wp-child-theme-jin-r-child #commonFooter::before {
    width: 220px;
    height: 48px;
    margin-bottom: 24px;
  }
  body.wp-child-theme-jin-r-child #commonFooter::after {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

/* ==========================================================
 * 12. 吹き出し（JIN:R [jinr_fukidashi1/2]）の改修 (2026-04-27 改訂)
 *
 * 🚨 キャラ⇔ショートコード番号 対応マッピング（実機準拠）:
 *    [jinr_fukidashi1] = alt="ゆっぴ"（夫・データ視点）→ アバター左
 *    [jinr_fukidashi2] = alt="ちゃん"（妻・感性視点）→ アバター右
 *
 *  - JIN:R デフォルトは align-items: flex-start で文字が上揃え
 *    → 短いテキストの時にアバターと本文の縦位置がずれる
 *  - alt="ちゃん"（fukidashi2）はアバターを右配置にして
 *    会話の左右交互配置を表現する（尻尾も右側に反転）
 *  - 本文 <p> の margin を消して吹き出し内テキストを縦中央に
 * ========================================================== */
/* 12-1. 親 flex の縦中央揃え + アバターと本文の中心位置を合わせる
 *  - JIN:R デフォルトは contents の片側に margin-left を持つため、
 *    row-reverse (ちゃん) で反転するとアバターと密着して尻尾が被る。
 *  - margin リセット + flex gap で direction に依らず一律 24px の隙間を確保する。*/
body.wp-child-theme-jin-r-child .o--jinr-fukidashi {
  align-items: center !important;
  gap: 24px !important;
}
body.wp-child-theme-jin-r-child .o--jinr-fukidashi .c--fukidashi-img-box,
body.wp-child-theme-jin-r-child .o--jinr-fukidashi .c--fukidashi-contents {
  margin: 0 !important;
}

/* 12-2. 吹き出し本文ボックスを flex 化して中の <p> を縦中央に */
body.wp-child-theme-jin-r-child .c--fukidashi-contents {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.wp-child-theme-jin-r-child .c--fukidashi-contents p,
body.wp-child-theme-jin-r-child .o--fukidashi-inner p {
  margin: 0 !important;
}

/* 12-3. ちゃん（fukidashi2）はアバター右配置 */
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .o--jinr-fukidashi {
  flex-direction: row-reverse !important;
}

/* 12-4. ちゃんの尻尾も右側に反転（JIN:R 親の .d--fukidashi-right 系をミラー）
 *  ちゃんは d--fukidashi-left のクラス名のままなので、左配置の尻尾 CSS を上書きする */
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat .a--fukidashi-parts-after,
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat .a--fukidashi-parts-before {
  border-right: none !important;
  border-left: 15px solid !important;
  left: auto !important;
}
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat .a--fukidashi-parts-before {
  right: -15px !important;
}
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat.d--fukidashi-border-thin .a--fukidashi-parts-after {
  right: -13px !important;
}
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat.d--fukidashi-border-normal .a--fukidashi-parts-after {
  right: -11px !important;
}
body.wp-child-theme-jin-r-child .b--jinr-fukidashi:has(img[alt="ちゃん"]) .d--fukidashi-chat.d--fukidashi-border-bold .a--fukidashi-parts-after {
  right: -9px !important;
}