/* =====================================================================
 * おみそと晩酌 ── お知らせの受付札
 * ---------------------------------------------------------------------
 * [omiso_oshirase] で置いた札の見た目。
 * きまり: このファイルに「#」から始まる色の値は書かない。
 *         色は assets/css/omiso-tokens.css の var(--omiso-*) が唯一の出どころ。
 * ===================================================================*/

.omiso-push {
	position: relative;
	max-width: 520px;
	margin: 40px auto;
	padding: 26px 26px 22px;
	background: var(--omiso-card, var(--omiso-paper, rgb(var(--omiso-paper-rgb))));
	border: 1px solid rgba(var(--omiso-laiton-rgb), .45);
	border-radius: 2px;
	color: var(--omiso-ink, rgb(var(--omiso-ink-rgb)));
	text-align: center;
}

/* 上辺の細い真鍮の線（インストールの札と同じ文法） */
.omiso-push::before {
	content: '';
	position: absolute;
	inset: 4px 4px auto 4px;
	height: 1px;
	background: rgba(var(--omiso-laiton-rgb), .45);
}

.omiso-push__eyebrow {
	margin: 0 0 10px;
	font-family: 'Cormorant Garamond', 'Zen Old Mincho', serif;
	font-size: .78rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--omiso-laiton, rgb(var(--omiso-laiton-rgb)));
}

.omiso-push__title {
	margin: 0 0 12px;
	font-family: 'Zen Old Mincho', serif;
	font-size: 1.12rem;
	line-height: 1.6;
	letter-spacing: .04em;
	word-break: auto-phrase;
}

.omiso-push__text {
	margin: 0 auto;
	max-width: 26em;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: .85rem;
	line-height: 1.95;
	color: rgba(var(--omiso-ink-rgb), .72);
	word-break: auto-phrase;
	min-height: 1.95em;
}

.omiso-push__btn {
	margin-top: 18px;
	padding: 11px 28px;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: .86rem;
	letter-spacing: .08em;
	color: var(--omiso-paper, rgb(var(--omiso-paper-rgb)));
	background: var(--omiso-vert, rgb(var(--omiso-vert-rgb)));
	border: 1px solid var(--omiso-vert, rgb(var(--omiso-vert-rgb)));
	border-radius: 2px;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.omiso-push__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -8px rgba(var(--omiso-ink-rgb), .35);
}

.omiso-push__btn:disabled {
	opacity: .55;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* 受け取り中は、押しの弱い見た目にする */
.omiso-push[data-state="on"] .omiso-push__btn {
	color: var(--omiso-ink, rgb(var(--omiso-ink-rgb)));
	background: transparent;
	border-color: rgba(var(--omiso-laiton-rgb), .55);
}

.omiso-push__note {
	margin: 16px 0 0;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-size: .72rem;
	line-height: 1.85;
	color: rgba(var(--omiso-ink-rgb), .56);
	word-break: auto-phrase;
}

/* 調べているあいだは静かに */
.omiso-push[data-state="loading"] .omiso-push__text {
	opacity: .5;
}

/* 使えない環境では札ごと引っこめる */
.omiso-push[data-state="no"] {
	display: none;
}

@media (max-width: 480px) {

	.omiso-push {
		margin: 30px auto;
		padding: 22px 18px 18px;
	}

	.omiso-push__title {
		font-size: 1.04rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.omiso-push__btn {
		transition: none;
	}

	.omiso-push__btn:hover {
		transform: none;
	}
}