/* =========================================================
   gluten-free.css
   ---------------------------------------------------------
   「どこにあるんだ、グルテンフリー」(/gluten-free/) ページのスタイル。
   (URL / slug / クラス接頭辞は gluten-free / .gf-* のまま。)
   page-gluten-free.php からのみ enqueue される
   (functions.php: nbc_enqueue_gluten_free_assets)。

   スコープ:
     すべてのルールは .gf-life 配下、または .gf-* プレフィックスに
     限定する。サイト全体の .nt-* スタイルや他ページには影響しない。

   デザイン方針 (情報整理型 / やさしいが、かわいくしすぎない):
     - 白背景 / 黒に近いテキスト / 薄いグレーのカード
     - 余白広め / 角丸大きめ
     - アクセントは落ち着いたグリーン (主張しすぎない)
     - PC 3 カラム / タブレット 2 カラム / SP 1 カラム
     - タグ: OK 系=薄い緑 / 注意系=薄いオレンジ / 補足系=薄いグレー

   レイアウト前提:
     親テーマ Neutrope Starter の .nt-container の余白・幅トークンを
     そのまま活かし、装飾だけ .gf-* に閉じる。
   ========================================================= */

/* ---- ローカルトークン (このページ内のみ有効) ---- */
.gf-life {
	--gf-bg:          #ffffff;
	--gf-card:        #f5f6f7;
	--gf-card-hover:  #eef0f1;
	--gf-border:      #e4e7ea;
	--gf-text:        #20242a;
	--gf-text-sub:    #5c636c;
	--gf-accent:      #3f8d63;
	--gf-accent-dark: #2f6e4c;
	--gf-radius:      18px;
	--gf-radius-sm:   12px;
	--gf-shadow:      0 6px 20px rgba(20, 36, 28, 0.05);

	/* タグ配色 */
	--gf-ok-bg:    #e9f3ec;
	--gf-ok-text:  #2f6b43;
	--gf-warn-bg:  #fbeede;
	--gf-warn-text:#94581b;
	--gf-note-bg:  #eef0f2;
	--gf-note-text:#565d66;

	color: var(--gf-text);
	background: var(--gf-bg);
}

/* SP でのみ <br> を効かせる小ヘルパ */
.gf-life .gf-br-sp { display: none; }
@media (max-width: 600px) {
	.gf-life .gf-br-sp { display: inline; }
}

/* ---- 1. ヒーロー ---- */
.gf-hero {
	padding: clamp(2.6rem, 7vw, 5rem) 0;
	background: linear-gradient(180deg, #f6faf7 0%, #ffffff 72%);
	border-bottom: 1px solid var(--gf-border);
}
.gf-hero__inner {
	text-align: center;
}
.gf-hero__eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gf-accent-dark);
	margin-bottom: 0.7rem;
}
.gf-hero__title {
	color: var(--gf-text);
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	line-height: 1.4;
	margin: 0 0 1.1rem;
}
.gf-hero__lead {
	color: var(--gf-text);
	font-size: clamp(1rem, 2.6vw, 1.15rem);
	line-height: 1.9;
	margin: 0 auto 0.6rem;
	max-width: 40rem;
}
.gf-hero__text {
	color: var(--gf-text-sub);
	font-size: 0.95rem;
	line-height: 1.9;
	margin: 0 auto 1.8rem;
	max-width: 38rem;
}
.gf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: center;
	align-items: center;
}

/* ---- ボタン ---- */
.gf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 1.6rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	border: 2px solid var(--gf-accent);
	background: var(--gf-accent);
	color: #fff;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gf-button:hover,
.gf-button:focus {
	background: var(--gf-accent-dark);
	border-color: var(--gf-accent-dark);
	color: #fff;
}
.gf-button--sub {
	background: #fff;
	color: var(--gf-accent-dark);
	border-color: var(--gf-accent);
}
.gf-button--sub:hover,
.gf-button--sub:focus {
	background: var(--gf-card);
	color: var(--gf-accent-dark);
	border-color: var(--gf-accent-dark);
}

/* ---- 共通: セクション / 見出し ---- */
.gf-section {
	padding: clamp(2.4rem, 6vw, 4rem) 0;
	/* ヒーローCTAのページ内ジャンプ時に、固定ヘッダーへ隠れないよう余白を確保 */
	scroll-margin-top: 4.5rem;
}
.gf-section--alt {
	background: #fafbfb;
}
.gf-section__head {
	text-align: center;
	margin-bottom: 1.8rem;
}
.gf-section__label {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--gf-accent-dark);
	margin-bottom: 0.4rem;
}
.gf-section__title {
	color: var(--gf-text);
	font-size: clamp(1.3rem, 3.4vw, 1.8rem);
	line-height: 1.4;
	margin: 0;
}
.gf-section__lead {
	color: var(--gf-text-sub);
	font-size: 0.95rem;
	line-height: 1.85;
	margin: 0.8rem auto 0;
	max-width: 40rem;
}

/* ---- カードグリッド (PC 3 / タブレット 2 / SP 1) ---- */
.gf-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}
@media (max-width: 900px) {
	.gf-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.gf-card-grid { grid-template-columns: 1fr; }
}

/* ---- ナビカード (お店 / 種類 / 基礎知識。リンク) ---- */
.gf-nav-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: var(--gf-card);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius);
	padding: 1.3rem 1.3rem;
	text-decoration: none;
	color: var(--gf-text);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* ホバー演出はリンクカード (<a>) のみ。準備中カード (<div>) には付けない */
a.gf-nav-card:hover,
a.gf-nav-card:focus {
	background: var(--gf-card-hover);
	border-color: var(--gf-accent);
	box-shadow: var(--gf-shadow);
}
.gf-nav-card__label {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--gf-accent-dark);
	margin-bottom: 0.45rem;
}
.gf-nav-card__title {
	position: relative;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gf-text);
	margin: 0 0 0.5rem;
	padding-right: 1.2rem;
}
.gf-nav-card__title::after {
	content: "→";
	position: absolute;
	right: 0;
	top: 0.05em;
	color: var(--gf-accent);
	font-weight: 700;
	transition: transform 0.15s ease;
}
a.gf-nav-card:hover .gf-nav-card__title::after,
a.gf-nav-card:focus .gf-nav-card__title::after {
	transform: translateX(0.18rem);
}
.gf-nav-card__text {
	font-size: 0.88rem;
	line-height: 1.75;
	color: var(--gf-text-sub);
	margin: 0;
}

/* 準備中カード (リンク先サブページ未公開): href なしの非リンクカード。
   矢印は出さず、右上に「準備中」バッジを添える。公開されると自動でリンク
   カードに切り替わる (テンプレート側 $gf_link_is_ready 判定)。 */
.gf-nav-card--pending {
	cursor: default;
}
.gf-nav-card--pending .gf-nav-card__title {
	padding-right: 4.5rem;
}
.gf-nav-card--pending .gf-nav-card__title::after {
	content: none;
}
.gf-nav-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	background: var(--gf-note-bg);
	color: var(--gf-note-text);
}

/* ---- 商品カード例 (概念カード) ---- */
.gf-item-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: var(--gf-card);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius);
	padding: 1.3rem;
}
.gf-item-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.gf-item-card__meta {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--gf-text-sub);
	margin-bottom: 0.4rem;
}
.gf-item-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--gf-text);
	margin: 0 0 0.7rem;
}
.gf-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.8rem;
	padding: 0;
}
.gf-tag {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.4rem 0.65rem;
	border-radius: 999px;
}
.gf-tag--ok {
	background: var(--gf-ok-bg);
	color: var(--gf-ok-text);
}
.gf-tag--warn {
	background: var(--gf-warn-bg);
	color: var(--gf-warn-text);
}
.gf-tag--note {
	background: var(--gf-note-bg);
	color: var(--gf-note-text);
}
.gf-item-card__text {
	font-size: 0.88rem;
	line-height: 1.8;
	color: var(--gf-text-sub);
	margin: 0;
}

/* ---- 6. 注意事項ボックス ---- */
.gf-notice {
	background: #fbfaf6;
	border: 1px solid #ece6d6;
	border-left: 4px solid #d8b15f;
	border-radius: var(--gf-radius-sm);
	padding: 1.4rem 1.5rem;
}
.gf-notice__title {
	color: var(--gf-text);
	font-size: 1.05rem;
	margin: 0 0 0.7rem;
}
.gf-notice__text {
	color: var(--gf-text-sub);
	font-size: 0.9rem;
	line-height: 1.95;
	margin: 0 0 0.8rem;
}
.gf-notice__text:last-child {
	margin-bottom: 0;
}
.gf-notice__text--em {
	font-weight: 700;
	color: var(--gf-text);
}

/* =========================================================
   詳細ページ (page-gluten-free-detail.php) 専用
   article hero は .gf-hero を再利用。以下は記事本文・リスト・注意カード。
   ========================================================= */

/* 記事本文ラッパ (ブロック間の縦リズム) */
.gf-article__body {
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}

/* 本文ブロック (セクション見出し + 段落 / リスト) */
.gf-block {
	margin: 0;
}
.gf-block__title {
	font-size: clamp(1.15rem, 2.6vw, 1.35rem);
	line-height: 1.5;
	color: var(--gf-text);
	margin: 0 0 0.7rem;
	padding-left: 0.7rem;
	border-left: 4px solid var(--gf-accent);
}
.gf-block__intro {
	font-size: 0.95rem;
	line-height: 1.85;
	color: var(--gf-text-sub);
	margin: 0 0 0.8rem;
}
.gf-block__note {
	font-size: 0.86rem;
	line-height: 1.8;
	color: var(--gf-text-sub);
	margin: 0.8rem 0 0;
	padding: 0.7rem 0.9rem;
	background: var(--gf-card);
	border-radius: var(--gf-radius-sm);
}

/* 本文段落 */
.gf-prose p {
	font-size: 0.98rem;
	line-height: 1.95;
	color: var(--gf-text);
	margin: 0 0 1rem;
}
.gf-prose p:last-child {
	margin-bottom: 0;
}
.gf-prose strong {
	font-weight: 700;
	color: var(--gf-text);
}

/* リスト (探しやすいもの / 注意したいもの / 確認したい言葉) */
.gf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.gf-list__item {
	position: relative;
	background: var(--gf-card);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius-sm);
	padding: 0.7rem 0.9rem 0.7rem 2.2rem;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--gf-text);
}
.gf-list__item::before {
	position: absolute;
	left: 0.85rem;
	top: 0.7rem;
	font-weight: 700;
	line-height: 1.5;
}
.gf-list--ok .gf-list__item {
	border-left: 4px solid var(--gf-ok-text);
}
.gf-list--ok .gf-list__item::before {
	content: "\2713"; /* check */
	color: var(--gf-ok-text);
}
.gf-list--warn .gf-list__item {
	border-left: 4px solid var(--gf-warn-text);
}
.gf-list--warn .gf-list__item::before {
	content: "!";
	color: var(--gf-warn-text);
}
.gf-list--note .gf-list__item {
	border-left: 4px solid var(--gf-note-text);
}
.gf-list--note .gf-list__item::before {
	content: "\30FB"; /* ・ */
	color: var(--gf-note-text);
}

/* 注意カード (本文中のインライン注意。最下部の .gf-notice とは別) */
.gf-caution {
	background: var(--gf-warn-bg);
	border: 1px solid #efd6ad;
	border-left: 4px solid var(--gf-warn-text);
	border-radius: var(--gf-radius-sm);
	padding: 1.1rem 1.3rem;
}
.gf-caution__title {
	font-size: 1rem;
	color: var(--gf-warn-text);
	margin: 0 0 0.4rem;
}
.gf-caution__text {
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--gf-text);
	margin: 0;
}

/* =========================================================
   実際に見つけたもの: 商品 / お店カード (.gf-product-card)
   grid は .gf-card-grid を再利用 (PC 3 / SP 1 カラム)。
   ========================================================= */
.gf-product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: var(--gf-card);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius);
	padding: 1.3rem;
}
.gf-product-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.gf-product-card__meta {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--gf-accent-dark);
	margin-bottom: 0.4rem;
}
.gf-product-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--gf-text);
	margin: 0 0 0.7rem;
}
.gf-product-card__facts {
	margin: 0 0 0.7rem;
	display: grid;
	gap: 0.35rem;
}
.gf-product-card__fact {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.6;
}
.gf-product-card__fact dt {
	flex: 0 0 auto;
	min-width: 4.5rem;
	font-weight: 700;
	color: var(--gf-text-sub);
}
.gf-product-card__fact dd {
	margin: 0;
	color: var(--gf-text);
}
.gf-product-card__note {
	font-size: 0.8rem;
	line-height: 1.65;
	color: var(--gf-text-sub);
	margin: 0 0 0.5rem;
	padding: 0.5rem 0.7rem;
	background: #fbfaf6;
	border: 1px solid #ece6d6;
	border-radius: var(--gf-radius-sm);
}
.gf-product-card__caution {
	font-size: 0.76rem;
	line-height: 1.6;
	color: var(--gf-warn-text);
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.7rem;
	background: var(--gf-warn-bg);
	border: 1px solid #efd6ad;
	border-radius: var(--gf-radius-sm);
}
/* しょうゆ等のアレルギー直結ジャンル向け追加注意。note(グレー) に左アクセント */
.gf-product-card__note--shoyu {
	border-left: 3px solid var(--gf-warn-text);
}
.gf-product-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.2rem;
}
.gf-shop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 36px;
	padding: 0 0.85rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--gf-border);
	background: #fff;
	color: var(--gf-text);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gf-shop-btn:hover,
.gf-shop-btn:focus {
	border-color: var(--gf-accent);
	color: var(--gf-accent-dark);
	background: var(--gf-card-hover);
}
.gf-shop-btn--official {
	background: var(--gf-accent);
	border-color: var(--gf-accent);
	color: #fff;
}
.gf-shop-btn--official:hover,
.gf-shop-btn--official:focus {
	background: var(--gf-accent-dark);
	border-color: var(--gf-accent-dark);
	color: #fff;
}

/* 広告/アフィリエイト表記。商品カードグリッドの直下に控えめな小ボックスで出す */
.gf-affiliate-note {
	margin: 1rem 0 0;
	padding: 0.55rem 0.8rem;
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--gf-text-sub);
	background: var(--gf-card);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius-sm);
}