/*
Theme Name: Yoru（夜の庭）
Theme URI:
Author: きょんぽ
Description: 夜の庭をイメージした、ダークで少し不思議なブロックテーマ。骨の白・月夜のミント・夜のコーラルの3色と、ゆがんだ手描き線・渦巻き・白黒のストライプが特徴。
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.14
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yoru
*/

/* =========================================================
   目次
   1. 全体（夜空と月あかり）
   2. ヘッダー・ストライプ・メニュー
   3. カード（記事一覧・サイドバーの箱）
   4. 記事本文（見出し・マーカー・目次・表）
   5. トップページ用の部品（bu-から始まるクラス）
   6. 旧記事の直書きスタイルを夜色に合わせる
   7. フッター
   8. スマホ
   9. 画面の幅に合わせて広がる
   10. 運営者の紹介
   ※ 色は theme.json のパレット（--wp--preset--color--〇〇）を使う
   ========================================================= */

/* ---------- 1. 全体 ---------- */
body {
	background-color: var(--wp--preset--color--ink);
	background-image:
		radial-gradient(900px 520px at 85% -120px, rgba(234, 226, 205, .10), transparent 70%),
		radial-gradient(700px 500px at 0% 30%, rgba(140, 207, 191, .06), transparent 70%),
		radial-gradient(800px 600px at 100% 90%, rgba(231, 156, 142, .05), transparent 70%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}
::selection { background: rgba(140, 207, 191, .35); color: #fff; }
img { height: auto; }

/* 英字の小見出し（PICK UP など） */
.yoru-label {
	font-family: var(--wp--preset--font-family--fell);
	font-style: italic;
	letter-spacing: .12em;
	color: var(--wp--preset--color--mint);
}

/* ---------- 2. ヘッダー ---------- */
.yoru-header { position: relative; overflow: hidden; }
.yoru-header::before { /* ブログ名の後ろの月あかり */
	content: "";
	position: absolute;
	left: 50%;
	top: -60px;
	width: 420px;
	height: 260px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(237, 230, 216, .14), transparent);
	pointer-events: none;
}
.yoru-header .wp-block-site-tagline { display: flex; align-items: center; justify-content: center; gap: 1em; }
.yoru-header .wp-block-site-tagline::before,
.yoru-header .wp-block-site-tagline::after { content: ""; width: 48px; height: 1px; background: var(--wp--preset--color--dusk); }

/* 白黒のストライプ帯（縞の靴下のような） */
.yoru-stripe {
	height: 9px;
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--bone) 0 10px, transparent 10px 20px);
	opacity: .85;
	margin: 0 !important;
}
/* ロゴ（黒猫）：ブログ名の左に置く、月のような丸。ほんのり光らせる */
.yoru-brand { gap: 1.4rem !important; }
/* ブログ名：長い日本語でも「、」のところで折り返す。幅に合わせて文字も伸び縮み */
.yoru-brand .wp-block-site-title { font-size: clamp(1.4rem, 2.8vw, 2.6rem); word-break: keep-all; line-height: 1.4; letter-spacing: .08em; }
.yoru-logo img { border-radius: 50%; box-shadow: 0 0 0 1px rgba(237, 230, 216, .25), 0 0 40px rgba(237, 230, 216, .18); }
.wp-block-site-title a,
.wp-block-post-title a { text-decoration: none; }
.yoru-nav-bar { background: #1B1922; }
.yoru-nav-bar .wp-block-navigation-item__content { padding: .9em .2em; border-bottom: 2px solid transparent; }
/* 今いるページ（クラスではなく aria-current で判定。クラシックメニューから変換した時の固定クラスに惑わされないため） */
.yoru-nav-bar .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--mint); border-bottom-color: var(--wp--preset--color--mint); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--bone) !important; }

/* ---------- 3. カード ---------- */
.yoru-card,
.yoru-sidebar > .wp-block-group,
.wp-block-latest-posts.is-grid > li {
	background: var(--wp--preset--color--night);
	border: 1px solid var(--wp--preset--color--dusk);
	border-radius: 22px 6px 20px 8px / 8px 20px 6px 22px; /* 手描きのような、少しいびつな角 */
	box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .35);
}
.yoru-main { background: rgba(30, 27, 37, .55); border: 1px solid var(--wp--preset--color--dusk); border-radius: 18px; }
.yoru-post-card { overflow: hidden; height: 100%; transition: border-color .2s, transform .2s; }
.yoru-post-card:hover { border-color: #4C4557; transform: translateY(-2px); }
.yoru-post-card .wp-block-post-featured-image { margin: 0; position: relative; }
/* アイキャッチは夜の色で作るので、暗くする加工はしない（1.0.3で外した） */
.yoru-post-card .wp-block-post-featured-image img,
.wp-block-latest-posts__featured-image img { transition: opacity .3s; }
.yoru-post-card:hover .wp-block-post-featured-image img { opacity: .92; }

/* カテゴリーは、コーラルの細い輪郭のラベル */
.wp-block-post-terms a {
	display: inline-block;
	padding: .1em .9em;
	border: 1px solid rgba(231, 156, 142, .55);
	border-radius: 99px;
	color: var(--wp--preset--color--coral);
	text-decoration: none;
	margin: 0 .3em .3em 0;
}
.wp-block-post-terms a:hover { background: rgba(231, 156, 142, .12); }
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }

/* サイドバー */
.yoru-sidebar h2,
.yoru-sidebar .wp-block-heading {
	font-family: var(--wp--preset--font-family--fell);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--mint);
	letter-spacing: .08em;
	border-bottom: 1px dashed #4A4453;
	padding-bottom: .5em;
	margin-bottom: .8em;
}
.yoru-sidebar ul { list-style: none; padding: 0; margin: 0; }
.yoru-sidebar li { border-bottom: 1px solid var(--wp--preset--color--dusk); padding: .55em 0; font-size: var(--wp--preset--font-size--small); }
.yoru-sidebar li:last-child { border-bottom: 0; }
.yoru-sidebar a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--bone); text-decoration: none; }
.yoru-sidebar a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--mint); }

/* ---------- 4. 記事本文 ---------- */
.entry-content h2,
.wp-block-post-content h2 {
	position: relative;
	padding-bottom: .6em;
	margin-top: 2.6em;
}
.entry-content h2::after,
.wp-block-post-content h2::after { /* 少しゆがんだ、手描きの線 */
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C40 2 70 9 110 5 S180 1 220 6 S300 9 340 4 S385 6 400 5' fill='none' stroke='%238CCFBF' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}
.entry-content h3,
.wp-block-post-content h3 { position: relative; padding-left: 1.7em; margin-top: 2em; }
.entry-content h3::before,
.wp-block-post-content h3::before { /* 小さな渦巻き */
	content: "";
	position: absolute;
	left: 0;
	top: .25em;
	width: 1.15em;
	height: 1.15em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12 c1 0 1.6 .8 1.4 1.7 c-.3 1.4 -2.2 1.8 -3.2 .9 c-1.6 -1.3 -1 -4 1 -4.7 c2.6 -.9 5.1 1.2 4.8 3.9 c-.3 3.3 -4.2 5 -7 3.3 c-3.6 -2.1 -3.4 -7.6 .4 -9.5 c4.4 -2.2 9.7 .9 9.6 5.9' fill='none' stroke='%23E79C8E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* トップの見出し・装飾用の見出しには線や渦巻きを付けない */
.wp-block-post-content .bu-catch::after,
.wp-block-post-content .bu-cta h3::before,
.wp-block-post-content .yoru-plain::after,
.wp-block-post-content .yoru-plain::before { display: none; }
.wp-block-post-content .bu-cta h3 { padding-left: 0; }

.wp-block-post-content strong,
.wp-block-post-content mark,
.wp-block-post-content .marker {
	background: linear-gradient(transparent 62%, rgba(140, 207, 191, .28) 62%);
	color: #F1EADD;
	font-weight: 700;
}
.wp-block-post-content a:where(:not(.wp-element-button)) { text-decoration-color: rgba(140, 207, 191, .45); text-underline-offset: 3px; }
.wp-block-post-content ul,
.wp-block-post-content ol { padding-left: 1.4em; }
.wp-block-post-content li::marker { color: var(--wp--preset--color--coral); }
.wp-block-post-content hr,
.wp-block-separator { border-color: var(--wp--preset--color--dusk); opacity: 1; }

/* 目次（functions.php が自動で差し込む） */
.yoru-toc {
	background: var(--wp--preset--color--night);
	border: 1px solid var(--wp--preset--color--dusk);
	border-radius: 22px 6px 20px 8px / 8px 20px 6px 22px;
	padding: 1.2em 1.6em;
	margin: 2em 0;
}
.yoru-toc__title { font-family: var(--wp--preset--font-family--fell); font-style: italic; color: var(--wp--preset--color--mint); letter-spacing: .12em; margin: 0 0 .4em; }
.yoru-toc ol { margin: 0; padding-left: 1.4em; font-size: var(--wp--preset--font-size--small); }
.yoru-toc ol ol { margin-top: .2em; }
.yoru-toc a { color: var(--wp--preset--color--bone); text-decoration: none; }
.yoru-toc a:hover { color: var(--wp--preset--color--mint); }

/* 表 */
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--small); }
.wp-block-table th { background: #262230; color: var(--wp--preset--color--bone-bright); }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--mint); }
.wp-block-table td { background: #1B1822; }
.wp-block-table th,
.wp-block-table td { border: 1px solid #3A3543; padding: .7em .9em; }

/* 記事の前後リンク */
.yoru-post-nav a { color: var(--wp--preset--color--bone); text-decoration: none; }
.yoru-post-nav a:hover { color: var(--wp--preset--color--mint); }

/* ---------- 5. トップページ用の部品 ---------- */
.bu-hero {
	text-align: center;
	padding: 2.2em 1.4em !important;
	background: var(--wp--preset--color--night);
	border: 1px solid #4A4453;
	border-radius: 22px 6px 20px 8px / 8px 20px 6px 22px;
}
.bu-kicker { font-family: var(--wp--preset--font-family--fell); font-style: italic; color: var(--wp--preset--color--coral); font-size: var(--wp--preset--font-size--small); letter-spacing: .12em; margin: 0; }
.bu-hero .bu-catch { font-size: var(--wp--preset--font-size--xx-large); margin: .3em 0 .5em; padding-bottom: .5em; }
.bu-hero .bu-catch::after { display: block !important; left: 10%; width: 80%; }
.bu-hero p:not(.bu-kicker) { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ash); }
.bu-more { text-align: center; }
.bu-more a { display: inline-block; padding: .7em 2em; border: 1px solid var(--wp--preset--color--mint); border-radius: 99px; text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.bu-more a:hover { background: rgba(140, 207, 191, .1); color: var(--wp--preset--color--mint); }
.bu-chips { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0 !important; }
.bu-chips li { margin: 0; }
.bu-chips li::marker { content: ""; }
.bu-chips a { display: inline-block; padding: .35em 1.1em; border: 1px solid #4A4453; border-radius: 99px; color: var(--wp--preset--color--bone); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.bu-chips a:hover { border-color: var(--wp--preset--color--mint); color: var(--wp--preset--color--mint); }
.bu-cta {
	text-align: center;
	padding: 2em 1.4em !important;
	background: linear-gradient(160deg, rgba(231, 156, 142, .10), rgba(140, 207, 191, .06)), var(--wp--preset--color--night);
	border: 1px solid var(--wp--preset--color--dusk);
	border-radius: 8px 22px 6px 20px / 20px 8px 22px 6px;
}
/* 最新の記事ブロック */
.wp-block-latest-posts.is-grid { gap: 1.2rem; padding: 0; }
.wp-block-latest-posts.is-grid > li { margin: 0 !important; padding: 0 0 1em; overflow: hidden; width: auto !important; }
.wp-block-latest-posts.is-grid.columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.wp-block-latest-posts__featured-image { margin: 0 0 .8em !important; }
.wp-block-latest-posts__featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wp-block-latest-posts__post-title { display: block; padding: 0 1em; font-family: var(--wp--preset--font-family--decol); font-weight: 700; color: var(--wp--preset--color--bone-bright); text-decoration: none; line-height: 1.6; }
.wp-block-latest-posts__post-title:hover { color: var(--wp--preset--color--mint); }
.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-excerpt { padding: 0 1.15em; color: var(--wp--preset--color--ash); font-size: var(--wp--preset--font-size--x-small); }
.wp-block-latest-posts__post-excerpt { font-size: var(--wp--preset--font-size--small); line-height: 1.8; margin-top: .4em; }
/* 抜粋は3行まで */
.wp-block-latest-posts__post-excerpt,
.yoru-post-card .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 6. 旧記事の直書きスタイルを夜色に合わせる ----------
   Cocoon時代に記事へ直接書いた明るい箱（background:#F7E6DE など）を、
   記事を1本ずつ直さなくても夜の色で表示するための上書き。 */
.wp-block-post-content [style*="background:#F7E6DE"],
.wp-block-post-content [style*="background: #F7E6DE"] {
	background: linear-gradient(160deg, rgba(231, 156, 142, .12), rgba(231, 156, 142, .04)), var(--wp--preset--color--night) !important;
	border: 1px solid rgba(231, 156, 142, .35);
}
.wp-block-post-content [style*="background:#ffffff"],
.wp-block-post-content [style*="background:#fff;"],
.wp-block-post-content [style*="background:#FFFFFF"],
.wp-block-post-content [style*="background:#FBF3EC"] { background: var(--wp--preset--color--night) !important; }
.wp-block-post-content [style*="#EADFD3"] { border-color: var(--wp--preset--color--dusk) !important; }
.wp-block-post-content [style*="color:#B85835"] { color: var(--wp--preset--color--coral) !important; }
.wp-block-post-content [style*="color:#736457"],
.wp-block-post-content [style*="color:#3F332B"],
.wp-block-post-content [style*="color:#2F2E2B"] { color: var(--wp--preset--color--ash) !important; }
.wp-block-post-content [style*="background:#BC5334"],
.wp-block-post-content [style*="background:#B85835"],
.wp-block-post-content [style*="background:#3E7A6B"],
.wp-block-post-content [style*="background:#4A6B5E"] { background: var(--wp--preset--color--coral) !important; color: #1A1418 !important; }
/* 体験談ボックス（#F7F0E6）と広告枠（#F5EDE3）も夜の箱に */
.wp-block-post-content [style*="background:#F7F0E6"] {
	background: linear-gradient(160deg, rgba(140, 207, 191, .10), rgba(140, 207, 191, .03)), var(--wp--preset--color--night) !important;
	border-left-color: var(--wp--preset--color--mint) !important;
}
.wp-block-post-content [style*="background:#F7F0E6"] > p:first-child { color: var(--wp--preset--color--bone-bright) !important; }
.wp-block-post-content [style*="background:#F5EDE3"] { background: var(--wp--preset--color--night) !important; }
.wp-block-post-content [style*="color:#4A3E34"] { color: var(--wp--preset--color--bone) !important; }
.wp-block-post-content [style*="color:#A2907F"] { color: var(--wp--preset--color--ash) !important; }
.wp-block-post-content [style*="color:#4A6B5E"],
.wp-block-post-content [style*="color:#3C5A4E"] { color: var(--wp--preset--color--mint) !important; }

/* ---------- 7. フッター ---------- */
.yoru-footer { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--ash); }
.yoru-footer a { color: var(--wp--preset--color--bone); text-decoration: none; }
.yoru-footer a:hover { color: var(--wp--preset--color--mint); }
.yoru-footer h2 { font-family: var(--wp--preset--font-family--fell); font-style: italic; font-weight: 400; color: var(--wp--preset--color--mint); font-size: var(--wp--preset--font-size--medium); letter-spacing: .08em; }
.yoru-footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--wp--preset--font-size--small); }
.yoru-footer li { padding: .35em 0; }
.yoru-footer .wp-block-latest-posts__post-title { padding: 0; font-family: inherit; font-weight: 400; color: var(--wp--preset--color--bone); }

/* ---------- 8. スマホ ---------- */
@media (max-width: 781px) {
	.yoru-main { border-radius: 14px; }
	.wp-block-latest-posts.is-grid.columns-2 { grid-template-columns: 1fr; }
	.yoru-header::before { width: 300px; }
	.bu-hero .bu-catch { font-size: var(--wp--preset--font-size--x-large); }
	.yoru-logo img { width: 84px !important; }
	.yoru-brand { gap: .9rem !important; }
	.yoru-brand .wp-block-site-title { font-size: 1.35rem; }
}

/* ---------- 9. 画面の幅に合わせて広がる ----------
   ブラウザの幅を広げると、本文・サイドバー・記事の並びがついてきて広がる。
   いちばん広くても1480pxまで（それ以上は読みにくいため） */
:root { --yoru-page: min(94vw, 1480px); }
main.wp-block-group.alignwide > .wp-block-columns,
.yoru-nav-bar > .wp-block-navigation,
.yoru-footer > .wp-block-columns,
.yoru-footer > .wp-block-group { max-width: var(--yoru-page) !important; margin-left: auto !important; margin-right: auto !important; }
main.wp-block-group.alignwide > .wp-block-columns > .wp-block-column:first-child { flex: 1 1 0 !important; min-width: 0; }
main.wp-block-group.alignwide > .wp-block-columns > .wp-block-column:last-child { flex: 0 0 clamp(280px, 24vw, 360px) !important; }
/* 最新の記事・記事一覧：幅が広いほど列が増える（2列 → 3列 → 4列） */
.wp-block-latest-posts.is-grid.columns-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.yoru-main .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
@media (max-width: 781px) {
	main.wp-block-group.alignwide > .wp-block-columns > .wp-block-column:last-child { flex-basis: 100% !important; }
}

/* ---------- 10. 運営者の紹介（トップの大きな一言と同じ書体で） ---------- */
.yoru-sidebar .yoru-profile { font-family: var(--wp--preset--font-family--decol); font-weight: 700; font-size: .95rem; line-height: 1.9; letter-spacing: .06em; color: var(--wp--preset--color--bone); margin: 0; }
.yoru-sidebar .yoru-profile + .yoru-profile { margin-top: .9em; }
.yoru-sidebar .yoru-profile__name { font-size: 1.35rem; color: var(--wp--preset--color--bone-bright); letter-spacing: .14em; }
.yoru-sidebar .yoru-profile__likes { font-size: .85rem; color: var(--wp--preset--color--ash); padding-top: .9em; border-top: 1px dashed #4A4453; }

/* トップの説明文・ご案内の箱も、同じ書体で（記事の本文はゴシックのまま） */
.bu-hero p:not(.bu-kicker),
.bu-cta p { font-family: var(--wp--preset--font-family--decol); font-weight: 700; line-height: 2; letter-spacing: .06em; }
.bu-hero p:not(.bu-kicker) { color: var(--wp--preset--color--bone); }