/**
 * 「ホーム画面に追加」の案内。
 *
 * iOS の Safari には、Android のような「インストールしますか」の問いかけが
 * 無い（beforeinstallprompt が実装されていない）。共有ボタンから手で追加して
 * もらうしかないので、やり方を出す側で示す。
 *
 * マークアップは public/assets/js/pwa-install.js が作る。出る条件もそちら。
 * iPhone の Safari で、まだホーム画面から開いておらず、以前に閉じていない
 * ときだけ出る。
 *
 * 置き場所は下部常駐メニュー（l-quicknav）のすぐ上。チャットの呼び出しボタン
 * （site-chat）が同じ高さに居るので、出ている間だけその分を押し上げる。
 * 押し上げ幅は文字の折り返しで変わるため、実測値を JS が --pwa-hint-h に
 * 入れる。決め打ちにすると、2行に折り返した端末でだけ重なる。
 */

.pwa-hint {
	position: fixed;
	right: 0;
	/* 位置は JS が下部常駐メニューを実測して --pwa-hint-bottom に入れる
	   （pwa-install.js の mount）。この要素は JS が作るものなので、変数が
	   無い状態は存在しない＝この既定値は使われない。 */
	bottom: var(--pwa-hint-bottom, 0px);
	left: 0;
	/* チャット（9000）より下、下部常駐メニューより上。 */
	z-index: 8990;
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	/* 横向きでは左右にセンサーハウジングの帯ができる。右の「閉じる」がその下に
	   潜ると押せなくなるので、左右は safe-area を足す（下端と同じ書き方）。 */
	padding: 1.4rem calc(1.6rem + env(safe-area-inset-right, 0px)) 1.4rem
		calc(1.6rem + env(safe-area-inset-left, 0px));
	border-top: 1px solid rgba(169, 138, 69, 0.55);
	background-color: #f6f4ec;
	box-shadow: 0 -0.4rem 1.8rem rgba(20, 31, 24, 0.16);
	color: #23271f;
}

.pwa-hint__text {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--font-mincho, serif);
	/* root は幅に追従する（320px 幅では 8px）。rem だけで書くと、狭い端末で
	   11.2px まで縮んで読めなくなる。このサイトの他の箇所と同じく px の下限を
	   添える（page-business.css の各所、theme-okunankai.css:1723）。
	   なお 16px 下限は入力欄の話（touch-input-zoom.test.ts）で、ここは
	   入力欄ではないので該当しない。 */
	font-size: max(1.4rem, 14px);
	line-height: 1.65;
	letter-spacing: 0.04em;
}

.pwa-hint__lead {
	display: block;
	color: #1e5b41;
	font-weight: 600;
}

/* 共有ボタンの絵。文章の中に置いて「これを押す」と分かるようにする。 */
.pwa-hint__icon {
	display: inline-block;
	/* 本文と同じ理由で下限を付ける。字だけ大きくして絵が縮むと釣り合わない。 */
	width: max(1.6rem, 16px);
	height: max(1.6rem, 16px);
	margin: 0 0.2rem;
	vertical-align: -0.3rem;
	color: #1e5b41;
}

.pwa-hint__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pwa-hint__close {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 1rem;
	border: 1px solid rgba(35, 39, 31, 0.24);
	border-radius: 0.4rem;
	background-color: transparent;
	color: #676960;
	font-family: var(--okn-sans, sans-serif);
	font-size: max(1.2rem, 12px);
	line-height: 1.4;
	cursor: pointer;
}

/**
 * 案内が出ている間だけ、チャットの呼び出しボタンを案内の上へ逃がす。
 *
 * ▼ メディアクエリで囲まない
 *   はじめ @media (max-width: 1023px) の中に置いていた。iPad の横向き
 *   （1194px など）ではこの規則が当たらず、チャットのランチャー（高さ 93.7px、
 *   z-index 9000）が案内の「閉じる」（z-index 8990）を完全に覆った。実測で
 *   閉じるボタンの矩形 81 点すべてがチャット側に当たり、押すとチャットが開く。
 *   閉じられないので記録も残らず、全ページ・次回訪問でも帯が出続けた。
 *
 * ▼ site-chat.css の足し算を書き写さない
 *   案内の下端は --pwa-hint-bottom（下部常駐メニューの実測高。広い画面では 0）。
 *   その上に案内の高さと隙間を積めば、どの幅でも案内の上に来る。
 *   max(6.2rem, 54px) をここへ書き写すと、写した先だけ古くなる。
 */
body.is-pwa-hint-open .site-chat {
	bottom: calc(var(--pwa-hint-bottom, 0px) + var(--pwa-hint-h, 0px) + 1.2rem);
}

@media (prefers-reduced-motion: no-preference) {
	.pwa-hint {
		animation: pwa-hint-in 0.36s ease both;
	}

	@keyframes pwa-hint-in {
		from {
			transform: translateY(100%);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}