/*
Theme Name: 宵待ち恋
Theme URI: https://yoimachikoi.jp/
Description: 宵待ち恋｜不倫・複雑恋愛専門 の公式サイト用テーマ。Twenty Twenty-Five の子テーマ。夜に一人で開いても落ち着いて読めることを基本方針とする。
Author: 合同会社GearBox
Template: twentytwentyfive
Version: 0.9.4
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoimachikoi
*/

/*
 * 色・書体・余白の基本は theme.json 側で管理する。
 * このファイルには、theme.json では表現できない部分だけを書く。
 * スマートフォンを基準に書き、広い画面はメディアクエリで足す。
 */

/* ---------------------------------------------------------------
   1. 土台
   --------------------------------------------------------------- */

body {
	-webkit-text-size-adjust: 100%;
	text-spacing-trim: trim-start;
	overflow-wrap: break-word;
}

/* 画面上部のごく淡い月明かり。派手にしない。 */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto 0;
	height: 60vh;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		120% 70% at 50% -10%,
		rgba(199, 167, 106, 0.10) 0%,
		rgba(199, 167, 106, 0.03) 40%,
		transparent 72%
	);
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* 日本語の見出しの折り返しを整える。
   auto-phrase は文節の切れ目で折り返す指定。対応していないブラウザでは無視される。
   「悩んでいませ／んか」のような不自然な切れ方を減らすため。 */
h1, h2, h3, h4,
.yoi-lead {
	line-break: strict;
	word-break: auto-phrase;
	overflow-wrap: break-word;
}

/* 操作できる要素の輪郭。キーボード操作の人が迷わないように。 */
:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   2. ヘッダー
   --------------------------------------------------------------- */

.yoi-header {
	position: relative;
	z-index: 3;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

/*
 * すりガラスの効果は疑似要素に持たせる。
 * backdrop-filter を .yoi-header 自身に付けると、その要素が
 * position:fixed の基準になってしまい、スマートフォンのメニューを開いたときに
 * 画面全体ではなくヘッダーの内側に閉じ込められる（実際にそうなっていた）。
 */
.yoi-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: blur(8px);
}

.yoi-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

/* スマートフォンのハンバーガーメニューは押しやすさを優先する */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* メニューを開いた状態。ヘッダーでは右寄せだが、全画面では左揃えのほうが読みやすい。 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--accent-5);
	padding: 4.5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	width: 100%;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

/*
 * .yoi-header を頭に付けて優先度を上げている。
 * WordPress本体が同じ強さで padding:0 を後から当てるため、
 * 前置きなしでは指の当たる大きさを確保できない。
 */
.yoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.05rem 0;
	font-size: 1.0625rem;
	text-align: left;
}

/* メニューを開いているあいだは、画面下部の固定CTAを重ねない */
.has-modal-open .yoi-sticky-cta {
	display: none;
}

.yoi-header .wp-block-navigation-item__content {
	text-decoration: none;
}

.yoi-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------
   3. ボタン・CTA
   --------------------------------------------------------------- */

.yoi-btn,
.wp-block-button__link {
	display: inline-block;
	min-height: 48px;
	line-height: 1.5;
}

.yoi-btn {
	/* 幅100%で使うため、padding込みの寸法にしないと画面からはみ出す */
	box-sizing: border-box;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-5);
	padding: 1rem 1.5rem;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-align: center;
}

.yoi-btn:hover,
.yoi-btn:focus {
	background-color: #d8bc85;
	color: var(--wp--preset--color--accent-5);
	text-decoration: none;
}

.yoi-btn--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--accent-4);
}

.yoi-btn--secondary:hover,
.yoi-btn--secondary:focus {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--accent-1);
}

.yoi-cta {
	text-align: center;
	margin-block: 2rem;
}

.yoi-cta .yoi-btn {
	width: 100%;
	max-width: 26rem;
}

.yoi-cta-note {
	text-align: center;
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-3);
	margin-top: -1.25rem;
}

/* スマートフォンでいつでも無料鑑定へ戻れるようにする。
   無料鑑定ページ自身とお問い合わせページでは出さない。 */
.yoi-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-5) 92%, transparent);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--wp--preset--color--accent-4);
}

.yoi-sticky-cta a {
	display: block;
	text-align: center;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-5);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.9rem 1rem;
	border-radius: 4px;
}

.yoi-page-free .yoi-sticky-cta,
.yoi-page-contact .yoi-sticky-cta,
.yoi-reading-paused .yoi-sticky-cta {
	display: none;
}

/* 受付休止中の案内 */
.yoi-paused-notice {
	text-align: center;
	margin-block: 2rem;
}

/* ファーストビューに大きなCTAが出ているあいだは隠す（assets/js/ui.js が付け外しする） */
.yoi-sticky-cta.is-hidden {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

.yoi-sticky-cta {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 固定CTAが本文の末尾に重ならないようにする */
body:has(.yoi-sticky-cta) .wp-site-blocks {
	padding-bottom: 5.5rem;
}

@media (min-width: 782px) {
	.yoi-sticky-cta {
		display: none;
	}

	body:has(.yoi-sticky-cta) .wp-site-blocks {
		padding-bottom: 0;
	}
}

/* ---------------------------------------------------------------
   3.5 ファーストビュー・画像
   --------------------------------------------------------------- */

/* トップの夜景。スマートフォンでは高さを抑え、CTAが画面内に入るようにする。 */
.yoi-hero {
	margin-top: 0;
}

/* 写真の下側（窓枠や街明かり）が明るく、文字が読みにくくなるため、
   下から暗い膜をかける。上側の夜空はそのまま見せる。 */
.yoi-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 70%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(14, 15, 20, 0.95) 0%,
		rgba(14, 15, 20, 0.75) 35%,
		rgba(14, 15, 20, 0) 100%
	);
}

.yoi-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	padding-block: 2rem;
}

.yoi-hero .yoi-cta-note {
	color: rgba(236, 231, 222, 0.95);
	font-size: 0.9375rem;
}

.yoi-hero h1 {
	margin-bottom: 1.25rem;
}

@media (max-width: 781px) {
	.yoi-hero {
		min-height: 68vh !important;
	}
}

/* 画像は角を少し落として、夜の画面になじませる */
.wp-block-image img,
.yoi-figure img {
	border-radius: 6px;
}

.yoi-figure {
	margin-block: 2rem;
}

/* ---------------------------------------------------------------
   4. 読み物としての本文
   --------------------------------------------------------------- */

.entry-content p,
.wp-block-post-content p {
	margin-block: 1.4em;
}

.entry-content h2,
.wp-block-post-content h2 {
	margin-top: 3rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
}

.entry-content h3,
.wp-block-post-content h3 {
	margin-top: 2.25rem;
}

.wp-block-list {
	padding-left: 1.25em;
}

.wp-block-list li {
	margin-block: 0.6em;
}

/* 引用は「相談者の言葉」を置く用途を想定する */
.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--accent-1);
	padding-left: 1.25rem;
	margin-left: 0;
	font-style: normal;
}

/* ---------------------------------------------------------------
   5. 部品
   --------------------------------------------------------------- */

/* 悩みの列挙、鑑定内容などに使う枠 */
.yoi-card {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 6px;
	padding: 1.5rem 1.25rem;
}

.yoi-card h3:first-child,
.yoi-card h2:first-child {
	margin-top: 0;
}

.yoi-lead {
	font-size: 1.125rem;
	line-height: 2;
}

.yoi-notice {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px dashed var(--wp--preset--color--accent-4);
	border-radius: 6px;
	padding: 1.1rem 1.25rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--accent-3);
}

/* 商品比較表。狭い画面では横スクロールさせ、文字を潰さない。 */
.yoi-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: 1.75rem;
}

.yoi-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.yoi-table th,
.yoi-table td {
	border: 1px solid var(--wp--preset--color--accent-4);
	padding: 0.85rem 0.9rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
}

.yoi-table thead th {
	background-color: var(--wp--preset--color--accent-2);
	font-weight: 600;
	white-space: nowrap;
}

.yoi-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* 表の中の商品名リンクも、指で押せる大きさにする */
.yoi-table tbody th a {
	display: inline-block;
	padding-block: 0.25rem;
	min-height: 24px;
}

.yoi-table .yoi-price {
	white-space: nowrap;
	color: var(--wp--preset--color--accent-1);
}

/* 狭い画面では、表のままだと内容の列が数文字ずつ折り返して読めなくなる。
   1件ずつのカードに組み替える。 */
@media (max-width: 700px) {
	.yoi-table-wrap {
		overflow-x: visible;
	}

	.yoi-table {
		min-width: 0;
	}

	.yoi-table thead {
		display: none;
	}

	.yoi-table,
	.yoi-table tbody,
	.yoi-table tr,
	.yoi-table th,
	.yoi-table td {
		display: block;
		width: 100%;
	}

	.yoi-table tr {
		border: 1px solid var(--wp--preset--color--accent-4);
		border-radius: 6px;
		background-color: var(--wp--preset--color--accent-2);
		padding: 1rem 1.1rem;
		margin-bottom: 1rem;
	}

	.yoi-table th,
	.yoi-table td {
		border: none;
		padding: 0;
		white-space: normal;
	}

	.yoi-table tbody th {
		font-size: 1.0625rem;
		margin-bottom: 0.35rem;
	}

	.yoi-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-top: 0.7rem;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		color: var(--wp--preset--color--accent-3);
	}

	.yoi-table .yoi-price {
		font-size: 1.125rem;
	}
}

/* プロフィール等の表。狭い画面では見出し列を上に折り返す。 */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--accent-4);
	padding: 0.85rem 0.9rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.85;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--accent-2);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.yoi-profile-table th,
	.yoi-profile-table td {
		display: block;
		width: 100%;
		white-space: normal;
	}

	.yoi-profile-table th {
		border-bottom: none;
	}

	.yoi-profile-table td {
		border-top: none;
	}
}

/* よくある質問（詳細ブロック） */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
	padding-block: 0.5rem;
}

.wp-block-details summary {
	cursor: pointer;
	padding: 0.9rem 0;
	font-weight: 600;
	list-style-position: outside;
	min-height: 44px;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent-1);
}

.wp-block-details[open] summary {
	color: var(--wp--preset--color--accent-1);
}

.wp-block-details > *:not(summary) {
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
}

/* メールが開かない方向けの、記入項目の控え */
.yoi-apply-manual {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 6px;
	padding: 1.25rem 1.1rem;
	margin-block: 1.5rem;
	font-size: 0.9375rem;
}

.yoi-apply-manual pre {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-5);
	border-radius: 4px;
	padding: 1rem;
	margin: 0;
	overflow-x: auto;
}

/* 鑑定サンプルの本文。実際のお返事の見た目に近づけて囲む。 */
.yoi-sample {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-left: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 6px;
	padding: 1.5rem 1.25rem;
	margin-block: 1.75rem;
}

.yoi-sample h3:first-child {
	margin-top: 0;
}

.yoi-sample h3 {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--accent-1);
	margin-top: 2rem;
}

/* お客様の声。件数が0のときは、そもそも出力されない。 */
.yoi-voices {
	margin-block: 2rem;
}

.yoi-voice {
	background-color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 6px;
	padding: 1.35rem 1.25rem;
	margin: 0 0 1rem;
}

.yoi-voice blockquote {
	margin: 0;
	border: none;
	padding: 0;
}

.yoi-voice blockquote p {
	margin: 0;
}

.yoi-voice figcaption {
	margin-top: 0.85rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-3);
}

.yoi-voices-note {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-3);
}

/* パンくず */
.yoi-breadcrumb {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-3);
	margin-bottom: 1.5rem;
}

.yoi-breadcrumb a {
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
	/* 指で押せる大きさを確保する（24px以上） */
	display: inline-block;
	padding-block: 0.3rem;
	min-height: 24px;
}

.yoi-breadcrumb a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   6. 一覧
   --------------------------------------------------------------- */

.wp-block-post-template li {
	border-bottom: 1px solid var(--wp--preset--color--accent-4);
	padding-bottom: 1.75rem;
}

.wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

.wp-block-post-date {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-3);
}

.wp-block-post-terms {
	font-size: 0.8125rem;
}

/* 記事のカテゴリリンクも、指で押せる大きさにする（24px以上） */
.wp-block-post-terms a,
.wp-block-post-date a {
	display: inline-block;
	padding-block: 0.3rem;
	min-height: 24px;
}

/* ---------------------------------------------------------------
   7. フッター
   --------------------------------------------------------------- */

.yoi-footer {
	border-top: 1px solid var(--wp--preset--color--accent-4);
	background-color: var(--wp--preset--color--accent-5);
	margin-top: 4rem;
}

.yoi-footer .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.yoi-footer .wp-block-navigation-item__content {
	text-decoration: none;
	color: var(--wp--preset--color--accent-3);
}

.yoi-footer .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
}

/* SNSアイコンの色。
   WordPress標準は各サービスのブランド色（X=黒 / Threads=黒 / Instagram=#f00075）を当てるため、
   暗い背景では黒が沈み、ピンクだけが浮いてしまう。3つとも同じ色に揃える。
   色は li 側に指定すること。アイコンの svg は fill:currentColor で親から受け取っており、
   a に指定すると WordPress 側の同名ルールのほうが詳細度が高く負ける。 */
.yoi-footer .wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--accent-3);
}

.yoi-footer .wp-block-social-links .wp-social-link:hover,
.yoi-footer .wp-block-social-links .wp-social-link:focus-within {
	color: var(--wp--preset--color--accent-1);
}

/* アイコンが隣り合うと押し間違えるので間隔を空ける。あわせてタップ領域も確保する。 */
.yoi-footer .wp-block-social-links {
	gap: 1.25rem;
}

.yoi-footer .wp-block-social-links .wp-social-link a {
	padding: 0.375rem;
}

.yoi-footer-note {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent-3);
	text-align: center;
	line-height: 1.9;
}

/* ---------------------------------------------------------------
   8. 動きを減らす設定を尊重する
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}