/*
 theme.json で書けない細かい指定だけを置く場所。

 色・文字・余白・ブロックごとの見た目は theme.json が持っています。
 「ここだけ少し動かしたい」という調整をここに足してください。

 クラス名の決まり（BEM ＋ 状態クラス）

   .ip-block             かたまり（ブロック）。接頭辞 ip- は他プラグインとの衝突よけ
   .ip-block__element    その中の部品
   .ip-block--modifier   見た目違い
   .is-state             一時的な状態（JavaScript が付け外しする）
*/

/* スマホのときは、文字の大きさを一段ずつ下げる ------------------------- */

/*
 theme.json の「極小・小・中・大・特大・見出し」の目盛りを、そのまま
 1 つぶん小さいほうへずらす。個々の箇所を直して回らずに済むよう、
 変数そのものを差し替えている。

   中（1rem）    → 小（0.875rem）
   小（0.875rem） → 極小（0.75rem）
   … という具合。
*/

@media (max-width: 599px) {
	:root {
		--wp--preset--font-size--x-small: 0.625rem;
		--wp--preset--font-size--small: 0.6875rem;
		--wp--preset--font-size--medium: 0.8125rem;
		--wp--preset--font-size--large: 0.8125rem;
		--wp--preset--font-size--x-large: 1rem;
		--wp--preset--font-size--xx-large: 1.5rem;
	}
}

/* ページの骨格 ---------------------------------------------------------- */

/*
 中身が短いページ（404・絞り込みで 0 件など）でも、フッターが画面の下端に来るようにする。
 ページ全体を縦に積み、本文のところだけを伸ばして余りを埋める。

 100dvh はスマホのブラウザで、アドレスバーの出入りに合わせて変わる高さ。
 対応していないブラウザのために 100vh も書いておく。
*/
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* 記事カード ------------------------------------------------------------ */

.ip-card .wp-block-post-featured-image img {
	transition: opacity .25s ease, transform .4s ease;
}

.ip-card:hover .wp-block-post-featured-image img {
	opacity: .92;
	transform: scale(1.02);
}

/* 写真のはみ出しを角丸で切る */
.ip-card .wp-block-post-featured-image {
	overflow: hidden;
}

/* アイキャッチのない記事でも、カードの高さがそろうようにする。
   横並びの株カード（1 行 1 枚）では不要なので外す。 */
.ip-card:not(.ip-card--plant):not(.ip-card--post) {
	height: 100%;
}

/* ページの見出し -------------------------------------------------------- */

/* カテゴリー名の前に付く「カテゴリー: 」を消して、名前だけを見出しにする */
.ip-page-head .wp-block-query-title .wp-block-query-title__prefix {
	display: none;
}

/* 本文 ------------------------------------------------------------------ */

/* 写真の下のキャプションを小さく、控えめに */
.wp-block-image figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: center;
}

/* 記事内の画像は角を丸める（アイキャッチとそろえる） */
.wp-block-post-content .wp-block-image img {
	border-radius: 12px;
}

/* 前後の記事 ------------------------------------------------------------ */

.wp-block-post-navigation-link a {
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

/* 株・用土の項目表（iplants/data ブロック） ---------------------------- */

.ip-data {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ip-data__row {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 0 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ip-data__label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.9;
}

.ip-data__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* 画面が狭いときは、見出しと中身を縦に積む */
@media (max-width: 480px) {
	.ip-data__row {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* バッジ。カードの 1 段目（属・ブランド・購入先）と、項目の表で使う */
.ip-badge {
	display: inline-block;
	padding: 0.2em 0.75em;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none;
	white-space: nowrap;
}

/*
 属。その属の一覧へのリンク。
 若葉色に白抜きだと字が沈んで読めない（明暗の差が 3 倍しかない）ので、
 薄緑の地に深緑の字にしている（6 倍）。
*/
.ip-badge--genus {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}

.ip-badge--genus:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* ブランドと購入先。属と見分けがつくよう、地は敷かず枠線で出す。
   ブランドは破線、購入先は実線。どちらも押すと同じもので絞り込める。 */
.ip-badge--brand,
.ip-badge--shop {
	background: transparent;
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

.ip-badge--brand {
	border-style: dashed;
}

.ip-badge--shop {
	background: var(--wp--preset--color--surface);
}

/* つながっているもの（iplants/relations ブロック） -------------------- */

.ip-links {
	margin-top: var(--wp--preset--spacing--50);
}

.ip-links__title {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: .04em;
}

.ip-links__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ip-links__item {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.ip-links__item a {
	text-decoration: none;
}

.ip-links__item a:hover {
	text-decoration: underline;
}

/* 株の絞り込み（iplants/filter ブロック） ------------------------------ */

.ip-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.5rem;
}

.ip-filter__group {
	display: contents;
}

.ip-filter__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0.3em 0.9em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	white-space: nowrap;
}

.ip-filter__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.ip-filter__link.is-current {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ip-filter__count {
	color: var(--wp--preset--color--muted);
	font-size: 0.85em;
}

.ip-filter__link.is-current .ip-filter__count {
	color: inherit;
	opacity: .7;
}

/* 編集画面で、中身が空のときに出す案内 */
.ip-empty {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* 画面には出さず、読み上げと検索エンジンにだけ渡す ---------------------- */

/*
 画面に出ない見出しは場所を取らないのに、WordPress は「ブロックが並んだ」と見て
 次の要素に上余白を付ける。そのぶん本文がサイドバーより下にずれるので打ち消す。
*/
.ip-visually-hidden + * {
	margin-block-start: 0;
}

.ip-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 一覧のグリッドとカード ------------------------------------------------ */

/*
 iplants/plants・iplants/notes・iplants/tabs が出すカードの並び。
 JavaScript を使うタブは .is-ready が付くまで全部が縦に並ぶ。
*/

.ip-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

html:not(.js) .ip-tabs__list {
	display: none;
}

.js .ip-tabs:not(.is-ready) .ip-tabs__panel:not(:first-of-type) {
	display: none;
}

.ip-tabs__tab {
	padding: 0.45em 1.2em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ip-tabs__tab:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.ip-tabs__tab.is-current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ip-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.js .ip-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

html:not(.js) .ip-tabs__panel + .ip-tabs__panel {
	margin-top: var(--wp--preset--spacing--70);
}

/* 中身のグリッド。カードの形ごとに最小幅を変える */
.ip-tabs__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

/* 株のカードは横長（左に写真・右に名前）なので、1 行に 1 枚ずつ並べる。
   1 枚ずつが箱になったので、あいだは詰めてよい */
.ip-tabs__grid--plant {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

/* 記事も株と同じ横長のカードなので、1 行に 1 枚ずつ並べる */
.ip-tabs__grid--auto {
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

.ip-tabs__more {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-small);
}

.ip-tabs__more a {
	text-decoration: none;
}

.ip-tabs__more a:hover {
	text-decoration: underline;
}

.ip-tabs__empty {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* カード1枚 ------------------------------------------------------------- */

.ip-card__media {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.ip-card__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: opacity .25s ease, transform .4s ease;
}

.ip-card__media--square img {
	aspect-ratio: 1;
}

.ip-card__media--wide img {
	aspect-ratio: 3 / 2;
}

.ip-card:hover .ip-card__media img {
	opacity: .92;
	transform: scale(1.02);
}

.ip-card--plant:hover {
	border-color: var(--wp--preset--color--secondary);
}

.ip-card__body {
	display: grid;
	gap: 0.35rem;
}

.ip-card__meta {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

.ip-card--post .ip-card__meta {
	color: var(--wp--preset--color--muted);
}

/* カードの 1 段目。属・ブランド・購入先のバッジが並ぶ */
.ip-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
}

.ip-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/*
 一覧のカードの題は、目盛り（本文＝中）より一段小さくする。
 スマホでも読める下限があるので、目盛りに任せず数字で決めている。
*/
.ip-card--plant .ip-card__title,
.ip-card--post .ip-card__title {
	font-size: 0.875rem;
	line-height: 1.55;
}

@media (max-width: 599px) {
	.ip-card--plant .ip-card__title,
	.ip-card--post .ip-card__title {
		font-size: 0.8125rem;
	}
}

.ip-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ip-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.ip-card__sub {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* 株カードの最後の行に出す入手日。
   上の余白は .ip-card__body の gap だけにして、バッジ〜名前と同じ間隔にそろえる */
.ip-card__date {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
}

/* 記事のカード: 左に写真、右にカテゴリーとタイトル ------------------- */

.ip-card--post {
	/* 株のカードと同じ面 */
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	transition: border-color .15s ease;

	display: flex;
	gap: var(--wp--preset--spacing--40);
	/* 伸ばさない。カードの高さは「写真」と「文字」の高いほうで決まる */
	align-items: flex-start;
}

.ip-card--post:hover {
	border-color: var(--wp--preset--color--secondary);
}

/*
 写真は 128 × 96px（4:3）で固定。
 高さを本文に合わせると、タイトルが長いときに縦へ引き伸ばされるので合わせない。
 幅も高さも数字で決めているので、比率の計算に頼らず崩れない。
*/
.ip-card--post .ip-card__media {
	position: static;
	flex: 0 0 8rem;
	align-self: flex-start;
	margin-bottom: 0;
	border-radius: 10px;
	overflow: hidden;
}

.ip-card--post .ip-card__media img {
	position: static;
	inset: auto;
	display: block;
	width: 100%;
	height: 6rem;
	aspect-ratio: auto;
	object-fit: cover;
}

/* カテゴリー → タイトル → 日付 の順に上から積む */
.ip-card--post .ip-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 0.35rem;
}

/* カテゴリーのバッジ。属と同じ扱い（押すとその一覧へ） */
.ip-badge--category {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}

.ip-badge--category:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

@media (max-width: 599px) {
	.ip-card--post {
		gap: var(--wp--preset--spacing--30);
	}

	.ip-card--post .ip-card__media {
		flex-basis: 6rem;
	}

	.ip-card--post .ip-card__media img {
		height: 4.5rem;
	}
}

/* 株のカード: 左に写真、右に名前。
   grid ではなく flex。写真のない株では、名前が自然に左いっぱいに広がる */
.ip-card--plant {
	/* サイドバーのパネルと同じ面。1 株ずつが箱として立つ */
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	transition: border-color .15s ease;

	/*
	 カード 1 行ぶんの高さ。名前 1 段の行の高さにそろえてある。
	 バッジの行も入手日の行も、下でこの高さに合わせているので、
	 カードの中身は必ず「この行 × 段数」になる。
	*/
	--ip-row: calc(var(--wp--preset--font-size--medium) * 1.5);
	/* バッジ〜名前、名前〜入手日 のすき間。写真の高さもこの値から計算される */
	--ip-gap: 0.125rem;

	display: flex;
	gap: var(--wp--preset--spacing--40);
	/* 右側を写真と同じ高さまで伸ばす。入手日を下端に置くため */
	align-items: stretch;
}

/* バッジの行を 1 行ぶんの高さに収める（丸みのぶん、字は少し詰める） */
.ip-card--plant .ip-card__badges {
	min-height: var(--ip-row);
	align-items: center;
}

.ip-card--plant .ip-badge {
	padding-block: 0;
	line-height: 1.5;
}

/* 入手日の行もちょうど 1 行ぶん */
.ip-card--plant .ip-card__date {
	line-height: var(--ip-row);
}

/*
 写真の高さは「5 行ぶん」で固定する。
 バッジ 1 行 ＋ 名前 3 段 ＋ 入手日 1 行 ＝ 5 行、そのあいだのすき間が 2 つ
 （バッジ・名前・入手日 の 3 かたまりなので）。

 高さが決まっているので、幅は 4:3 の形から計算される。
 名前が短い株でも写真の大きさは変わらないので、一覧の見た目がそろう。
*/
/* 箱の角丸より少し小さくして、内側に収まって見えるようにする */
.ip-card--plant .ip-card__media {
	border-radius: 10px;
	position: relative;
	flex: 0 0 auto;
	width: auto;
	height: calc(var(--ip-row) * 5 + var(--ip-gap) * 2);
	aspect-ratio: 4 / 3;
	margin-bottom: 0;
}

/*
 写真は枠いっぱいに敷き詰める。
 絶対配置にするのは、写真の高さを枠の高さの計算に混ぜないため。
 （height: 100% のままだと、枠 ←→ 写真 で高さの決め方が堂々めぐりになる）
*/
.ip-card--plant .ip-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/*
 右側は縦に積む。バッジと名前は上から、入手日だけ下端に置く。
 （名前が 1 段の株でも、入手日が写真の下辺とそろう）
*/
.ip-card--plant .ip-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--ip-gap);
}

.ip-card--plant .ip-card__date {
	margin-top: auto;
}

/*
 スマホでは写真を正方形にする。
 幅が狭くて名前が折り返しやすく、本文の高さがカードごとにばらつくため、
 高さを本文に合わせると写真の形まで暴れてしまう。
 ここでは形をそろえるほうを優先する（align-self で伸びるのを止める）。
*/
@media (max-width: 599px) {
	.ip-card--plant {
		gap: var(--wp--preset--spacing--30);
	}

	/* スマホは正方形。高さは PC と同じ「5 行ぶん」 */
	.ip-card--plant .ip-card__media {
		aspect-ratio: 1;
	}

	/*
	 バッジと名前は折り返さず、横にスクロールさせる。
	 折り返すとカードの高さがばらつき、名前は | で決めた段組みも崩れるため。
	 名前は 3 段まとめて 1 つの枠をスクロールさせるので、段がずれない。
	*/
	.ip-card--plant .ip-card__badges,
	.ip-card--plant .ip-card__title .ip-name {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	.ip-card--plant .ip-card__title .ip-name {
		display: block;
	}

	.ip-card--plant .ip-name__line {
		white-space: nowrap;
	}

	/* スクロールの棒は出さない（iOS は触ったときだけ出る） */
	.ip-card--plant .ip-card__badges,
	.ip-card--plant .ip-card__title .ip-name {
		scrollbar-width: none;
	}

	.ip-card--plant .ip-card__badges::-webkit-scrollbar,
	.ip-card--plant .ip-card__title .ip-name::-webkit-scrollbar {
		display: none;
	}
}

/* ヘッダー（緑の帯） --------------------------------------------------- */

/*
 「スクロールしてもヘッダーを上に残す」を入れたときだけ効く。
 設定は カスタマイザー → ヘッダー設定。
*/
.ip-sticky-header .wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}

/* 管理バーが出ているときは、その下に貼り付く */
.admin-bar.ip-sticky-header .wp-site-blocks > header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.ip-sticky-header .wp-site-blocks > header {
		top: 46px;
	}
}


/*
 上段  ロゴ（左） ＋ 検索（右）
 下段  アイコン付きのメニュー 3 つ。項目の間に細い縦線

 ロゴが白文字なので、帯は緑（--wp--preset--color--band）で敷く。
 帯の中のリンク・アイコンはすべて白。
*/

.ip-header {
	padding-top: 0;
	padding-bottom: 0;
}

.ip-header a,
.ip-header .wp-block-navigation a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* --- 上段: ロゴと検索 --- */

/*
 PC ではロゴ・メニュー・検索が 1 行に並ぶ。
 スマホでは幅が足りないので、メニューだけ 2 行目に落とす（下の @media）。
*/
.ip-header__bar {
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	gap: var(--wp--preset--spacing--30);
}

.ip-header .wp-block-site-logo img {
	height: auto;
	max-width: min(100px, 32vw);
}

/* --- 下段: アイコン付きメニュー --- */

/*
 3 列固定だと、項目が 2 つのときに右端が空いてしまう。
 項目の数に関係なく、等幅で真ん中にまとまるようにする。
 （flex: 1 1 0 で均等に伸び、max-width で伸びすぎを止める）
*/
.ip-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.ip-nav__list {
	display: flex;
	/* PC はロゴが左なので、メニューは右端にそろえる */
	justify-content: flex-end;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-nav__list > li {
	position: relative;
	display: flex;
}

/*
 PC 用とスマホ用を画面幅で出し分ける。
 片方しか割り当てていないときは、同じものに両方のクラスが付く。
 その場合はどちらの幅でも出したいので、:not() で「専用のものだけ」隠す。

 どちらの規則も画面幅の条件の中に入れること。
 外に出すと、その幅でないときにも効いてしまう。
*/
@media (min-width: 600px) {
	.ip-nav--sp:not(.ip-nav--pc) {
		display: none;
	}
}

@media (max-width: 599px) {
	.ip-nav--pc:not(.ip-nav--sp) {
		display: none;
	}
}

.ip-nav__list a {
	position: relative;
	/* 右にそろえるので、幅は中身ぶんだけ。間隔は左右の余白で取る */
	flex: 0 0 auto;
	/* アイコンと文字は横並び */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.35rem 0.9rem;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: opacity .15s ease;
}

.ip-nav__list a:hover {
	opacity: .72;
}

/*
 項目のあいだの細い縦線。
 border だと項目の高さいっぱいに伸びてしまうので、真ん中だけに短く引く。
 長さは height で決まる。
*/
.ip-nav__list > li + li > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 1.15rem;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .35);
}

.ip-nav__icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.ip-nav__list .ip-nav__label {
	font-size: 0.75rem;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}

/* スマホでは文字と余白を少し詰める */
@media (max-width: 599px) {
	.ip-header__bar {
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
	}

	/* スマホでもロゴと同じ行に置く。幅が狭いので項目の左右を詰める */
	.ip-nav__list a {
		padding-inline: 0.5rem;
		gap: 0.3rem;
	}

	.ip-header .wp-block-site-logo img {
		max-width: min(86px, 30vw);
	}

	.ip-nav__icon {
		width: 17px;
		height: 17px;
	}

	.ip-nav__list .ip-nav__label {
		font-size: 0.6875rem;
	}

	.ip-nav__list > li + li > a::before {
		height: 1rem;
	}
}

/* 画面がとても狭いときは、長いラベルを折り返させる */
@media (max-width: 359px) {
	.ip-nav__list .ip-nav__label {
		white-space: normal;
	}
}

/* 長い植物名の段組み（names.php） --------------------------------------- */

/*
 タイトルに | を入れたところで折り返す。最大 3 段。
 3 段とも見た目は同じ（大きさ・太さ・色）。段が変わるだけで、扱いは変えない。
*/

.ip-name__line {
	display: block;
}


/* PC のときの 3 列（本文 2 列 ＋ サイドバー 1 列） --------------------- */

/*
 画面が広いときは、ページを 3 列ぶんに見立てて、本文（カードの一覧）を 2 列、
 サイドバーを 1 列にする。狭いときは WordPress が自動で縦に積むので、
 サイドバーは一覧の下に回る。
*/

.ip-layout {
	gap: var(--wp--preset--spacing--60);
}

/* タブレット以上: カードは 2 列に固定する（本文が 2 列ぶんの幅なので） */
@media (min-width: 782px) {
	.ip-layout__main .ip-tabs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 株も記事も横長のカードなので、2 列にせず 1 枚ずつ並べる */
	.ip-layout__main .ip-tabs__grid--plant,
	.ip-layout__main .ip-tabs__grid--auto {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 読みながらでもサイドバーが見えるように、スクロールに付いてくる */
	.ip-layout__side .ip-side {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/* スマホ: カードは 1 列。サイドバーは一覧の下 */
@media (max-width: 781px) {
	.ip-layout__main .ip-tabs__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ip-layout__side {
		margin-top: var(--wp--preset--spacing--70);
	}
}

/* サイドバーの中身 ------------------------------------------------------ */

.ip-side__title {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	letter-spacing: .04em;
}

.ip-side__box {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* 先頭の箱（株をしぼるパネル）は、パネル自身が枠を持つので線を引かない */
.ip-side > .ip-side__box:first-child {
	padding-top: 0;
	border-top: 0;
}

.ip-side__links {
	padding: 0;
	list-style: none;
}

.ip-side__links li + li {
	margin-top: 0.4rem;
}

.ip-side__links a {
	text-decoration: none;
}

.ip-side__links a:hover {
	text-decoration: underline;
}

/* サイドバーの中では、絞り込みのピルを詰めて出す */
.ip-side .ip-filter {
	gap: 0.35rem;
}

/* 一覧ページのカードも、本文 2 列ぶんの幅に合わせて 2 列にする */
@media (min-width: 782px) {
	.ip-layout__main .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.ip-layout__main .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ブランドで絞り込み中の表示 -------------------------------------------- */

.ip-brand-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.ip-brand-notice strong {
	font-weight: 700;
}

.ip-brand-notice__clear {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* サイドバーのピルも、カードのバッジと同じ見分け方にそろえる */
.ip-filter__link--brand {
	border-style: dashed;
}

.ip-filter__link--shop {
	background: var(--wp--preset--color--surface);
}

/* 押せると分かるようにする */
.ip-badge--brand:hover,
.ip-badge--shop:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ページ送り ------------------------------------------------------------ */

/*
 2 とおりの作りが混ざっている。どちらも同じ見た目にそろえる。
   .navigation.pagination        株の一覧・ノート（プラグインが出す）
   .wp-block-query-pagination    用土・カテゴリー・検索（テンプレートのブロック）
*/

.navigation.pagination,
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.navigation.pagination .nav-links,
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

/* 画面読み上げ用の見出しは出さない */
.navigation.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.navigation.pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	padding: 0.35em 0.8em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	text-decoration: none;
}

.navigation.pagination a.page-numbers:hover,
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* いま見ているページ */
.navigation.pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* 「…」は枠を付けない */
.navigation.pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0.35em 0.2em;
	border-color: transparent;
	color: var(--wp--preset--color--muted);
}

/* ブロックのほうは、前へ／次へを両端ではなく中央に寄せる */
.wp-block-query-pagination.is-content-justification-space-between {
	justify-content: center;
}

/* 株を探す入力欄 -------------------------------------------------------- */

/*
 入力欄と虫眼鏡をひとつの丸い枠に収める。
 ボタンを横に並べると、サイドバーの幅では折り返してしまうため。
*/

.ip-search {
	margin: 0;
}

/* 見出しとボタンの文字は読み上げにだけ渡す（形で分かるため） */
.ip-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ip-search__box {
	position: relative;
	display: flex;
	align-items: center;
}

.ip-search__field {
	width: 100%;
	min-width: 0;
	/* 右側は虫眼鏡のぶんだけ空ける */
	padding: 0.6em 2.9em 0.6em 1.1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	transition: border-color .15s ease;
}

.ip-search__field::placeholder {
	color: var(--wp--preset--color--muted);
}

.ip-search__field:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

/* Safari の検索欄に出る × 印を消す（枠の形が崩れるため） */
.ip-search__field::-webkit-search-decoration,
.ip-search__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ip-search__button {
	position: absolute;
	right: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ip-search__button:hover {
	background: var(--wp--preset--color--contrast);
}

.ip-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.ip-search__icon {
	width: 15px;
	height: 15px;
}

/* 株をしぼるパネル（iplants/plant-filters ブロック） ------------------- */

/*
 検索 ＋ 属 ＋ ブランド ＋ 購入先 をひとつの面にまとめる。
 かたまりの区切りは、細い線ではなく余白と小さな見出しで付ける。
*/

.ip-panel {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.ip-panel__groups {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	/* 検索欄との区切りは線を引かず、余白だけで付ける */
	margin-top: var(--wp--preset--spacing--40);
}

.ip-panel__group {
	display: grid;
	gap: 0.5rem;
}

.ip-panel__title {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1.4;
}

/*
 パネルの中のピルは、かたまりの見出しで意味が分かるので
 すべて同じ見た目にそろえる（破線・地色の作り分けはやめる）。
*/
.ip-panel .ip-filter {
	gap: 0.35rem;
}

.ip-panel .ip-filter__link {
	padding: 0.25em 0.8em;
	border-style: solid;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.ip-panel .ip-filter__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.ip-panel .ip-filter__link.is-current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}


/* サイドバーのプロフィール ---------------------------------------------- */

/*
 中身はカスタマイザー（外観 → カスタマイズ → iPlants 設定）で決める。
 絞り込みのパネル・株のカードと同じ面にそろえる。
*/
.ip-profile-box {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
}

.ip-profile {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

/* アイコンと名前は横並び */
.ip-profile__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.ip-profile__photo {
	flex: none;
	margin: 0;
}

.ip-profile__img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.ip-profile__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.4;
}

.ip-profile__bio {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ip-profile__more {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
}

.ip-profile__more a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ip-profile__more a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* フッター -------------------------------------------------------------- */

/*
 ヘッダーと同じ緑の帯。左に著作表示、右にメニュー。
 高さは中身ぶんに抑えてある（上下の余白は parts/footer.html の padding）。
*/

.ip-footer__bar {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.ip-copyright {
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .06em;
}

.ip-footer-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-footer-menu__list a {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	/* 英字は大文字で字間を空ける。日本語には効かないので、そのまま出る */
	text-transform: uppercase;
	letter-spacing: .12em;
	text-decoration: none;
	transition: opacity .15s ease;
}

.ip-footer-menu__list a:hover {
	opacity: .65;
}

/* 狭いときは縦に積む。メニューを先に、著作表示を後ろに */
@media (max-width: 599px) {
	.ip-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.ip-copyright {
		order: 2;
	}

	.ip-footer-menu {
		order: 1;
	}
}

/* 記事の日付とカテゴリー（iplants/post-meta ブロック） ------------------ */

.ip-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
}

.ip-post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0 0.9em;
}

.ip-post-meta__item:first-child {
	padding-left: 0;
}

/* 項目のあいだの細い縦線 */
.ip-post-meta__item + .ip-post-meta__item {
	border-left: 1px solid var(--wp--preset--color--line);
}

.ip-post-meta__icon {
	width: 13px;
	height: 13px;
	flex: none;
	opacity: .8;
}

.ip-post-meta a {
	color: inherit;
	text-decoration: none;
}

.ip-post-meta a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* 記事のアイキャッチは本文と同じ幅で、角はごく控えめに */
.ip-post-thumb img {
	border-radius: 6px;
}