/*
Theme Name:  GeneratePress Child
Theme URI:   https://nagaratabi.com/
Description: ながら旅 用の GeneratePress 子テーマ。記事本文の装飾CSSをここに集約する。
Author:      ながら旅
Template:    generatepress
Version:     0.2.0
Text Domain: generatepress-child
*/

/* =========================================================
   ながら旅 記事本文デザイン（nagaratabi-article-design.html を移植）
   すべて .entry-content 配下にスコープ＝テーマ/プラグインへ干渉させない。
   Google Fonts（Urbanist / Noto Serif JP）は functions.php で読み込み。
   ========================================================= */

:root{
  --m-font-sans:"Urbanist",sans-serif;
  --m-font-serif:"Noto Serif JP",serif;
  --ink:#231815;            /* 温かみのある黒（本文） */
  --ink-soft:#4a403b;       /* やや淡い本文 */
  --ink-muted:#8c8079;      /* メタ・キャプション */
  --paper:#ffffff;          /* 地色：白基調 */
  --paper-tint:#f7f2ec;     /* 引用・帯・表のzebra用の淡い温色 */
  --shu:#b5332b;            /* 朱（祭の赤＝赤帯モチーフ） */
  --shu-soft:#f4e0db;       /* 朱の淡色（マーカー帯） */
  --line:#e7e0d8;           /* 温かいヘアライン */
}

/* ============ 本文ベース ============ */
.entry-content{
  font-family:var(--m-font-serif);
  font-weight:400;
  font-size:1.0625rem;
  line-height:2.0;
  color:var(--ink);
}
.entry-content > p{margin:0 0 1.6em}

/* ============ 見出し：朱の「帯」が識別子 ============ */
.entry-content h2{
  font-family:var(--m-font-serif);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.72rem);line-height:1.5;
  letter-spacing:.02em;color:var(--ink);
  margin:3em 0 1em;
}
.entry-content h2::before{
  content:"";display:block;width:46px;height:6px;
  background:var(--shu);margin-bottom:18px;
}
.entry-content h3{
  font-family:var(--m-font-serif);font-weight:700;
  font-size:1.22rem;line-height:1.6;color:var(--ink);
  margin:2.4em 0 .8em;padding-left:14px;border-left:3px solid var(--shu);
}
.entry-content h4{
  font-family:var(--m-font-sans);font-weight:600;font-size:1rem;
  letter-spacing:.04em;color:var(--ink);margin:2em 0 .6em;
}

/* ============ 強調：和文の圏点（傍点）＋朱の太字 ============ */
.entry-content strong{font-weight:700;color:var(--ink)}
.entry-content em{
  font-style:normal;
  -webkit-text-emphasis:filled dot var(--ink);
  text-emphasis:filled dot var(--ink);
  text-emphasis-position:over right;
}

/* マーカー（任意：<span class="marker"> で使用） */
.entry-content .marker{background:linear-gradient(transparent 58%, var(--shu-soft) 58%);padding:0 1px}

/* ============ リンク ============ */
.entry-content a{
  color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--shu);text-decoration-thickness:1.5px;
  text-underline-offset:4px;transition:color .15s;
}
.entry-content a:hover{color:var(--shu)}

/* ============ リスト：朱の小マーカー ============ */
.entry-content ul,.entry-content ol{margin:1.4em 0;padding:0;list-style:none}
.entry-content ul li,.entry-content ol li{position:relative;padding-left:1.7em;margin:.6em 0;line-height:1.9}
.entry-content ul li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;background:var(--shu)}
.entry-content ol{counter-reset:n}
.entry-content ol li{counter-increment:n}
.entry-content ol li::before{
  content:counter(n);position:absolute;left:0;top:.15em;
  font-family:var(--m-font-sans);font-weight:600;font-size:13px;
  color:var(--shu);width:1.2em;
}

/* ============ 引用：朱の帯＋「」＋出典 ============ */
.entry-content blockquote{
  position:relative;margin:2.4em 0;padding:6px 4px 6px 34px;
  border-left:6px solid var(--shu);
}
.entry-content blockquote p{
  font-family:var(--m-font-serif);font-weight:400;
  font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.85;
  color:var(--ink);margin:0 0 .5em;
}
.entry-content blockquote p::before{content:"\300C";color:var(--shu)}
.entry-content blockquote p::after{content:"\300D";color:var(--shu)}
.entry-content blockquote cite{
  display:block;font-style:normal;
  font-family:var(--m-font-sans);font-size:13px;letter-spacing:.05em;
  color:var(--ink-muted);margin-top:14px;
}

/* ============ 比較表（素の<table>／Gutenbergテーブル両対応） ============ */
.entry-content .wp-block-table{overflow-x:auto}
.entry-content table{
  width:100%;border-collapse:collapse;font-family:var(--m-font-serif);
  font-size:.96rem;margin:2.2em 0;border:1px solid var(--line);
}
.entry-content thead th{
  background:var(--ink);color:#fff;
  font-family:var(--m-font-sans);font-weight:600;font-size:13.5px;letter-spacing:.04em;
  text-align:left;padding:13px 16px;
}
.entry-content td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;line-height:1.7}
.entry-content tbody tr:nth-child(even){background:var(--paper-tint)}
.entry-content tbody td:first-child{font-weight:600;color:var(--ink)}
.entry-content .pill{display:inline-block;font-family:var(--m-font-sans);font-size:12px;font-weight:600;letter-spacing:.03em;padding:2px 9px;border:1px solid var(--shu);color:var(--shu)}

/* ============ 区切り（Gutenbergの区切りブロック hr にも適用） ============ */
.entry-content hr{
  border:0;height:auto;background:none;text-align:center;margin:3em 0;
}
.entry-content hr::before{content:"\30FB \30FB \30FB";color:var(--shu);letter-spacing:.4em;font-size:14px}

/* ============ CTA（任意：<div class="cta"> で囲んだリンクを黒ボタン化） ============ */
.entry-content .cta{margin:3em 0 1em}
.entry-content .cta a{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--m-font-sans);font-weight:600;font-size:15px;letter-spacing:.03em;
  padding:16px 30px;transition:background .15s;
}
.entry-content .cta a:hover{background:var(--shu)}
.entry-content .cta a::after{content:"\2192";font-size:15px;line-height:1}      /* 矢印（SVGが無い時用） */
.entry-content .cta a:has(svg)::after{content:none}
.entry-content .cta a svg{width:9px;height:auto;fill:currentColor}

/* リード文（任意：<p class="lead">） */
.entry-content .lead{
  font-size:clamp(1.08rem,1.6vw,1.22rem);
  line-height:1.95;color:var(--ink-soft);font-weight:400;margin:0 0 1.4em;
}

/* ============ レスポンシブ／アクセシビリティ ============ */
@media(max-width:520px){
  .entry-content{font-size:1.02rem}
}
@media(prefers-reduced-motion:reduce){.entry-content *{transition:none!important}}
.entry-content a:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

/* =========================================================
   外側テンプレート（ヘッダー/フッター）
   Next の Header / Footer コンポーネントを移植。全WPページ共通。
   ========================================================= */

/* Next側トークンの補完（子テーマに無いものだけ定義） */
:root{
  --m-fw-regular:400;
  --m-fw-semibold:600;
  --color-black:#000;   /* Next base.css の --color-black は純黒 #000（本文の温黒 #231815 とは別） */
}

/* 共通インナー幅（Next の l-inner と完全一致。値は base.css 実値） */
:root{
  --layout-max-width:1400px;
  --layout-side-padding:clamp(24px,4vw,80px);
}
.l-inner{width:min(100% - (var(--layout-side-padding) * 2), var(--layout-max-width));margin-inline:auto}

/* GeneratePress デフォルトのヘッダー/フッターを隠す（自前に差し替えるため） */
#masthead,.main-navigation,.site-footer,.footer-bar{display:none!important}

/* =========================
   HEADER（黒）
   ※ position は Next の absolute → WP記事用に sticky に変更
   （記事ページはヘッダー背面にヒーローが無く、absoluteだと本文に被るため）
========================= */
.p-header{position:sticky;top:0;left:0;width:100%;z-index:1000;background:#000}
.p-header__inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 40px}
.p-header__logo{font-size:24px;font-weight:700;color:#fff;text-decoration:none;font-family:var(--m-font-serif)}
.p-header__nav{display:flex;align-items:center}
.p-header__menu{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.p-header__menu li a{color:#fff;text-decoration:none;font-size:16px;font-weight:500;font-family:var(--m-font-sans)}

/* HAMBURGER */
.p-header__hamburger{display:none;width:28px;height:22px;padding:0;background:none;border:none;cursor:pointer;position:relative;z-index:1100}
.p-header__hamburger span{display:block;width:100%;height:2px;background:#fff;margin:5px 0;transition:transform .3s ease,opacity .3s ease,margin .3s ease;transform-origin:center}
.p-header__hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.p-header__hamburger.is-active span:nth-child(2){opacity:0}
.p-header__hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* MOBILE MENU */
.p-mobile-menu{position:fixed;top:0;right:-100%;width:100%;height:100vh;background:#000;z-index:900;transition:right .4s ease}
.p-mobile-menu.is-open{right:0}
.p-mobile-menu__header{display:flex;justify-content:space-between;align-items:center;padding:28px 24px}
.p-mobile-menu__logo{color:#fff;font-size:26px;font-weight:700;text-decoration:none;font-family:var(--m-font-serif)}
.p-mobile-menu__close{width:28px;height:28px;background:none;border:none;position:relative;cursor:pointer}
.p-mobile-menu__close span{position:absolute;top:50%;left:0;width:100%;height:2px;background:#fff}
.p-mobile-menu__close span:nth-child(1){transform:rotate(45deg)}
.p-mobile-menu__close span:nth-child(2){transform:rotate(-45deg)}
.p-mobile-menu__body{padding:60px 24px}
.p-mobile-menu__list{list-style:none;margin:0;padding:0}
.p-mobile-menu__list li{border-bottom:1px solid rgba(255,255,255,.15)}
.p-mobile-menu__list a{display:flex;align-items:center;justify-content:space-between;padding:26px 0;color:#fff;text-decoration:none;font-family:var(--m-font-serif)}
.p-mobile-menu__title{font-size:22px;font-weight:600;margin-right:12px;font-family:var(--m-font-sans)}
.p-mobile-menu__desc{font-size:14px;opacity:.7}
.p-mobile-menu__arrow{font-size:22px;opacity:.7}

@media(max-width:900px){
  .p-header__nav{display:none}
  .p-header__hamburger{display:block}
  .p-header__inner{padding:18px 24px}
}

/* =========================
   FOOTER（黒）
========================= */
.p-footer{background:#000;color:#fff}
.p-footer__catch{background:#f2f2f2;text-align:center;padding-block:clamp(.5rem,1vw,.8rem)}
.p-footer__catch-text{font-family:var(--m-font-serif);font-weight:var(--m-fw-regular);color:var(--color-black);font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:.18em;margin:0}
.p-footer__main{padding-block:clamp(4rem,7vw,6rem)}
.p-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,4vw,4rem)}
.p-footer__title{font-size:.95rem;margin-bottom:1rem;font-weight:var(--m-fw-semibold);font-family:var(--m-font-serif)}
.p-footer__list{list-style:none;padding:0;margin:0}
.p-footer__list li{margin-bottom:.6rem}
.p-footer__list a{color:#fff;text-decoration:none;font-size:.9rem;opacity:.9;transition:opacity .2s ease;font-family:var(--m-font-serif)}
.p-footer__list a:hover{opacity:.6}
.p-footer__bottom{border-top:2px solid #333}

@media(max-width:767px){
  .p-footer__grid{grid-template-columns:repeat(2,1fr);gap:2rem}
}

/* =========================================================
   単一記事ヘッダー（eyebrow・タイトル・メタ）
   ========================================================= */

/* GP既定の投稿メタ（日付/作成者）は非表示。自前の .c-meta に置き換え */
.single .entry-meta{display:none}

/* eyebrow：和名｜英名 */
.c-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.c-eyebrow__ja{font-family:var(--m-font-serif);font-weight:600;font-size:15px;color:var(--shu);letter-spacing:.08em}
.c-eyebrow__bar{width:1px;height:14px;background:var(--line)}
.c-eyebrow__en{font-family:var(--m-font-sans);font-weight:600;font-size:12px;color:var(--ink-muted);letter-spacing:.18em;text-transform:lowercase}

/* タイトル：全部 温黒・Noto Serif JP（部分赤なし） */
.single .entry-title{
  font-family:var(--m-font-serif);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1.42;letter-spacing:.01em;
  color:var(--ink);margin:0 0 26px;
}

/* メタ：日付・エリア・読了 */
.c-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  font-family:var(--m-font-sans);font-size:13px;letter-spacing:.04em;
  color:var(--ink-muted);
  padding-bottom:26px;border-bottom:1px solid var(--line);margin:0 0 8px;
}
.c-meta__dot{width:3px;height:3px;border-radius:50%;background:var(--ink-muted);opacity:.6}

/* アイキャッチ枠（16:9）＋キャプション（朱の左線） */
.c-eyecatch{margin:34px 0 6px}
.c-eyecatch img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#ece6df;display:block}
.c-eyecatch figcaption{font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-muted);letter-spacing:.03em;line-height:1.6;margin-top:10px;padding-left:14px;border-left:2px solid var(--shu)}

/* 著者box（byline） */
.c-byline{display:flex;gap:16px;align-items:center;margin:0 0 clamp(60px,10vw,100px);padding:26px 0 0;border-top:1px solid var(--line)}
.c-byline__av{width:54px;height:54px;border-radius:50%;background:var(--paper-tint);flex:0 0 auto}
.c-byline__name{font-family:var(--m-font-serif);font-weight:700;font-size:15px;color:var(--ink);margin:0}
.c-byline__role{font-family:var(--m-font-sans);font-size:12.5px;color:var(--ink-muted);letter-spacing:.04em;margin:3px 0 0}