/*
 * 言語の切り替え(JP / EN / 中文)と、英語・中国語のページの見た目
 *
 * 2026-10-23 本人「HPを英語や中国語でも見れるように」。仕組みは inc/i18n.php。
 * ほかの CSS より後に読む(functions.php の wnl_v3_enqueue_lang_assets)。
 */

/* ------------------------------------------------------------------
   切り替え(どの言語のページにも出る)
   ------------------------------------------------------------------ */
.wnl-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	white-space: nowrap;
}

.wnl-lang__link {
	color: #8a8a8a;
	text-decoration: none;
}

.wnl-lang__link:hover,
.wnl-lang__link:focus-visible {
	color: #111;
}

/* 今の言語は黒で、下線 */
.wnl-lang__link.is-current {
	color: #111;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.wnl-lang__sep {
	color: #cfcfcf;
	font-weight: 400;
}

/*
 * ヘッダーの上の細い帯。右端を本文(最大1180px)の右端にそろえる。
 * メニューより目立たせない(灰色・小さい字)。線は引かない(ヘッダーの下の線だけにする)
 */
.wnl-lang-bar {
	background: #fff;
}

.wnl-lang-bar__inner {
	display: flex;
	justify-content: flex-end;
	width: min(calc(100% - 48px), var(--wnl-v3-shell, 1180px));
	margin-inline: auto;
	padding-top: 8px;
}

@media (max-width: 921px) {
	.wnl-lang-bar__inner {
		width: auto;
		padding: 8px 16px 0;
	}
}

/* ------------------------------------------------------------------
   英語・中国語のページだけ
   ------------------------------------------------------------------ */

/* 訳の無いページ(里親MAP・法務)へのリンクには、小さく JP と添える(押すと日本語のページへ) */
:is(.wnl-lang-en, .wnl-lang-zh) .wnl-lang-ja-only::after {
	content: "JP";
	display: inline-block;
	margin-left: 4px;
	padding: 2px 3px 1px;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	vertical-align: 2px;
	opacity: .55;
	text-decoration: none;
}

/*
 * 支援のカードの説明文。日本語はスマホでも1行に収める決まり(折らない)だが、英語・中国語は長さが違うので折り返す。
 * 折らないままだと、幅360pxで英語のカードが18px右にはみ出した
 */
:is(.wnl-lang-en, .wnl-lang-zh) .wnl-h-plan__lead {
	white-space: normal;
	text-wrap: balance;
}

/* 支援の3つのカードの下:「支援のページは日本語だけ」 */
.wnl-h-plans__lang {
	margin: 28px auto 0;
	max-width: 40em;
	color: #6b6b6b;
	font-size: 13px;
	text-align: center;
}

/*
 * 英語:MISSION 01 の見出し。日本語は「全角30字を1行・折らない」にしてあるが、英語は倍以上長い。
 * パソコンでも折り返して、2行の長さをそろえる
 */
@media (min-width: 768px) {
	.wnl-lang-en .wnl-h .wnl-h-mission__title {
		white-space: normal;
		font-size: 2.1rem;
		text-wrap: balance;
	}
}

/* ------------------------------------------------------------------
   中国語:字体
   日本語の字体(Zen Maru Gothic・ヒラギノ)は簡体字の字を持っていないか、形が日本の字になる。
   中国語のページでは Google Fonts も読まない(functions.php)。端末に入っている中国の字体で出す。
   英字の見出し(Anton)は、無ければ Impact で出る
   ------------------------------------------------------------------ */
.wnl-lang-zh {
	--wnl-zh-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
	font-family: var(--wnl-zh-sans);
}

.wnl-lang-zh .wnl-h {
	--h-heading: var(--wnl-zh-sans);
	--h-body: var(--wnl-zh-sans);
}

.wnl-lang-zh .wnl-v3,
.wnl-lang-zh .wnl-v3-inner,
.wnl-lang-zh .wnl-v3-inner-hero h1,
.wnl-lang-zh .wnl-v3-inner h3,
.wnl-lang-zh .wnl-v3-inner .wnl-v3-news-card h3,
.wnl-lang-zh .wnl-v3-inner :where(p, li, td, th, div, span, a, label, dd, dt, time),
.wnl-lang-zh .main-header-menu .menu-link,
.wnl-lang-zh .ff-el-form-control,
.wnl-lang-zh .ff-btn {
	font-family: var(--wnl-zh-sans);
}

/* 中国語は語の切れ目に空白が無い。keep-all のままだと文の途中で折れず、はみ出す */
.wnl-lang-zh :is(h1, h2, h3, p, li, a) {
	word-break: normal;
}