/*
Theme Name: minamon child
Template: twentytwentyfive
Description: www.minamon-apps.com の子テーマ。親は Twenty Twenty-Five。
Version: 0.7.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: minamon-child
*/

/* 見た目の大部分は theme.json で決める。ここには theme.json で書けないものだけを置く */

/* 広告・PR の表示（ステルスマーケティング規制の表示） */
.minamon-pr-label {
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.1em 0.5em;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	opacity: 0.8;
}

/* フッターのリンクは指で押しやすい高さにする */
.minamon-footer-links .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.35rem 0;
}

/* 本文の見出し（h2）の左に緑の線 */
.wp-block-post-content h2.wp-block-heading {
	border-left: 4px solid var(--wp--preset--color--accent-1);
	padding-left: 0.6em;
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-post-content .minamon-hero h1,
.wp-block-post-content .minamon-hero h2 {
	border-left: 0;
	padding-left: 0;
	margin-top: 0;
}

/* 色の付いた囲み（「こんなこと、ありませんか」など） */
.minamon-box {
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40);
}

.minamon-box > h2.wp-block-heading {
	margin-top: 0;
}

/* 「できること」などのカード */
.minamon-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--30);
}

.minamon-card > :first-child {
	margin-top: 0;
}

.minamon-card h2.wp-block-heading {
	border-left: 0;
	padding-left: 0;
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.minamon-card h3.wp-block-heading {
	color: var(--wp--preset--color--accent-3);
}

/* よくある質問（開いて読む） */
.wp-block-details.minamon-faq {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-details.minamon-faq summary {
	font-weight: 700;
	cursor: pointer;
	padding: 0.4rem 0;
}

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

/* 見出しは日本語の文節で折り返す（対応していないブラウザでは今までどおり） */
h1,
h2,
h3 {
	word-break: auto-phrase;
}

/* スマートフォンで開くメニュー: 大きめの文字で左に並べる */
.minamon-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: var(--wp--preset--spacing--60);
}

.minamon-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	/* ナビに付く has-small-font-size が !important なので、開いたときだけ上書きする */
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700;
}

/* お問い合わせのフォーム（Contact Form 7） */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}

.wpcf7 input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	vertical-align: -0.15em;
	accent-color: var(--wp--preset--color--accent-1);
}

.wpcf7 .wpcf7-submit {
	padding: 0.75rem 2rem;
	border: 0;
	border-radius: 9999px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover {
	background: var(--wp--preset--color--accent-3);
}

.wpcf7 .wpcf7-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* サイト名の左にロゴ（minamon-apps のアイコン「かもめ」。minamon-apps の docs/brand/minamon-apps/kamome/favicon.svg） */
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}

.wp-block-site-title a::before {
	content: "";
	flex: none;
	width: 1.75em;
	height: 1.75em;
	background: url("assets/logo.svg?v=kamome") center / contain no-repeat;
}

/* ホームの先頭の画面の写真（スマートフォンの枠） */
.minamon-hero-shot img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.minamon-hero-shot img {
		max-width: 200px;
	}
}

/* カードの上の画面の写真 */
.minamon-card .minamon-shot {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.minamon-card .minamon-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--accent-6);
}

/* トップの取り組みのカードの絵: 4:3 の枠に、切り抜かずに収める（余りは砂色） */
.minamon-card .minamon-shot.is-wide img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--accent-2);
}

/* カードの下の「〜を見る」のリンク */
.minamon-card .minamon-card-link {
	margin-top: var(--wp--preset--spacing--20);
	font-weight: 700;
}

/* トップのブログの新着 */
.minamon-latest .wp-block-post {
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

/* トップの先頭の絵（ラッコとカモメ）は大きくしすぎない */
.minamon-hero .minamon-hero-art img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin-inline: auto;
}

/* キャラクターの紹介: 表情の一覧 */
.minamon-faces figure {
	margin: 0;
	text-align: center;
}

.minamon-faces img {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin-inline: auto;
	background: var(--wp--preset--color--accent-2);
	border-radius: 12px;
}

.minamon-faces figcaption {
	margin-top: 0.4em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

/* キャラクターの紹介: プロフィールの絵 */
.minamon-profile-art img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin-inline: auto;
}

/* アプリごとのページの一覧（parts/app-nav-*.html）。どのアプリのページかを示す */
.minamon-appnav {
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--accent-5);
}

.minamon-appnav .minamon-appnav-name {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--accent-3);
}

/* パンくずリスト（Yoast のブロック） */
.minamon-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}