/* PN Corporate — 移行対応CSS
   本文中に残る移行元 Kadence 由来のマークアップを、Kadence 無しで
   移行元と同じ見え方に戻すための規則だけを置く。

   ※ このファイルだけは REST API（global-styles）へも送って
      ZIP再アップなしでステージングへ即反映する（tools/push-css.py）。
      移行が完了し本文を整理したら、このファイルごと不要になる。
*/

/* ============================================================
   移行元 Kadence の残存マークアップへの対応
   本文中に残る Kadence 由来のクラスは、Kadence の CSS が無いと
   素の大きさで描画される。移行元と同じ見え方に戻す。
   ============================================================ */

/* アイコンSVG: 寸法属性を持たず CSS で大きさを決めていたため、
   放置すると画面幅いっぱいに描画される（移行元は font-size:40px・メイングリーン） */
.kb-svg-icon-wrap {
	display: block;
	font-size: 40px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.kb-svg-icon-wrap svg {
	width: 1em;
	height: 1em;
	display: block;
	margin-inline: auto;
}

.kt-svg-icons,
.wp-block-kadence-icon {
	text-align: center;
}

/* ボタン内のアイコンは文字サイズに合わせる */
.wp-block-button__link .kb-svg-icon-wrap,
.kt-btn-svg-icon {
	display: inline-flex;
	font-size: 1em;
	margin-inline-start: .4em;
	vertical-align: middle;
}

/* PC用とスマホ用の図解の出し分け。
   移行元は Kadence のレイアウト設定で切り替えていたが、その箱ごと外れたため
   両方が同時に表示されてしまう。ファイル名の規則（_s = スマホ用）で復元する。 */
@media (min-width: 768px) {
	.pn-main figure.wp-block-image:has(> img[src*="philo2_s"]),
	.pn-main figure.wp-block-image:has(> img[src*="philo_s"]) {
		display: none;
	}
}

@media (max-width: 767px) {
	.pn-main figure.wp-block-image:has(> img[src*="philo2."]),
	.pn-main figure.wp-block-image:has(> img[src*="philo."]) {
		display: none;
	}
}

/* ============================================================
   移行元サイトの独自見出しクラス
   Kadence ではなく、移行元の追加CSSで定義されていたもの。
   ※ 移行元の定義には `font-family: font-family: "noto-sans-jp", sans-serifserif;`
     という重複と綴り誤りがあり、実際には効いていなかった。
     ここでは本文フォント（Noto Sans JP）を継承させる形に直してある。
   ============================================================ */

h3.marked,
h5.marked,
h3.marked2,
.heading-1,
.heading-2,
.heading-3 {
	font-family: inherit;
	font-weight: 300;
}

h3.marked  { font-size: 24px; }
h5.marked  { font-size: 19px; text-align: center; }
h3.marked2 { font-size: 22px; }

/* 左に緑の縦棒が付く見出し */
.heading-1,
.heading-2 {
	padding: .5em .7em;
	border-left: 5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
}

.heading-2 { font-size: 20px; }

/* 両脇に斜めの緑線が入る中央見出し */
.heading-3 {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--foreground);
}

.heading-3::before,
.heading-3::after {
	content: "";
	width: 3px;
	height: 40px;
	background-color: var(--wp--preset--color--primary);
}

.heading-3::before { transform: rotate(-35deg); margin-right: 30px; }
.heading-3::after  { transform: rotate(35deg);  margin-left: 30px; }

/* ページとヘッダーの地の色。移行元は #f9faf4（surface）で、
   白い半透明ボックスなどの重ね表現はこの地の上で初めて見える。
   theme.json と parts/header.html にも同じ指定を入れてあるが、
   ZIP を入れ直すまでの間はここで効かせる。 */
body {
	background-color: var(--wp--preset--color--surface);
}

.pn-header {
	background-color: var(--wp--preset--color--surface) !important;
}

/* .heading-1 / .heading-2 は移行元では左寄せ。
   （テーマ初期に推測で中央寄せを入れていたのを打ち消す。
     ZIP を入れ直せば theme.css 側から消えるが、それまではここで上書きする） */
/* 詳細度を1つ上げてある（h3.xxx）。
   デプロイ済みZIPの theme.css が後から読まれるため、同じ詳細度では勝てない。 */
.pn-main h3.heading-1,
.pn-main h3.heading-2,
.pn-main h4.heading-1,
.pn-main h4.heading-2 {
	text-align: left;
}

/* ============================================================
   Contact Form 7
   CF7 の既定は size="40" の固定幅で、移行元のように幅いっぱいにならない。
   送信ボタンもテーマのボタン意匠に合わせる。
   ============================================================ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: .7em .9em;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 1rem;
}

.wpcf7-form textarea {
	min-height: 12em;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 1.4em;
	font-size: .95rem;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.wpcf7-form .wpcf7-submit {
	background-color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	padding: .9em 3em;
	width: auto;
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

/* 同意チェックの行は幅いっぱいにしない */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin-right: .4em;
}

/* ============================================================
   Info Box（アイコン＋見出し＋本文）
   ============================================================ */
.pn-infobox {
	text-align: center;
}

.pn-infobox-icon {
	margin-bottom: .8em;
}

.pn-infobox-icon svg {
	width: 1em;
	height: 1em;
}

/* ============================================================
   投稿一覧（Query Loop）のカード
   移行元 Kadence Post Grid の見た目に合わせる
   ============================================================ */
.pn-post-card {
	border-radius: 0;
}

.pn-post-card .wp-block-post-title {
	margin: 0 0 1em;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.6;
}

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

.pn-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.pn-post-card .taxonomy-category {
	margin: 0 0 .2em;
	letter-spacing: .04em;
}

.pn-post-card .taxonomy-category a {
	text-decoration: none;
}

/* 「詳しくはこちら」は移行元では緑の小さなボタン */
.pn-post-card .wp-block-read-more,
a.pn-readmore {
	background-color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 3px;
	color: var(--wp--preset--color--white);
	display: inline-block;
	font-size: .8rem;
	padding: .35em .9em;
	text-decoration: none;
}

.pn-post-card .wp-block-read-more:hover,
a.pn-readmore:hover {
	background-color: #555;
	border-color: #555;
	color: var(--wp--preset--color--white);
}

/* カード内の要素間を詰める（移行元はもっと密） */
.pn-post-card > * {
	margin-block: 0;
}

.pn-post-card .wp-block-post-title {
	margin: .1em 0 .7em;
}