/* ============================================================
   橘幼稚園 — スマホ メニュー（オーバーレイ）カスタマイズ
   1. 右から左へのスライドイン表示
   2. かわいらしいフォント（Zen Maru Gothic / 丸ゴシック）
   3. 各メニューを四角で囲い、タップ領域を明確化（margin確保）

   対象: WordPress ナビゲーションブロックのレスポンシブ
         オーバーレイ（.is-menu-open のときのみ）
   ============================================================ */

/* 既存メニューの has-zen-maru-gothic-font-family クラスを
   実際に効かせるためフォント変数を定義（フォント本体は functions.php で読込） */
:root {
	--wp--preset--font-family--zen-maru-gothic:
		"Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
}

/* ------------------------------------------------------------
   1. オーバーレイ背景（ディマー）＋右側パネル配置
   .wp-block-navigation を前置してコアより詳細度を上げ、確実に上書き
   ------------------------------------------------------------ */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	justify-content: flex-end; /* パネルを右側へ */
	padding: 0;
	background-color: rgba(77, 75, 72, 0.45); /* custom-brown の半透明 */
	animation: tk-mobmenu-backdrop 0.34s ease both;
}

/* 右からスライドインするパネル本体（responsive-close をパネル枠に） */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: min(82vw, 330px);
	max-width: 330px;
	margin-left: auto; /* 右寄せ */
	height: 100%;
	overflow-y: auto;
	background-color: var(--wp--preset--color--base-2, #ffffff);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
	animation: tk-mobmenu-slide-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: 84px 18px 32px; /* 上部は閉じるボタン分の余白 */
	height: auto;
}

/* スライドイン・背景フェードのキーフレーム */
@keyframes tk-mobmenu-slide-in {
	from {
		transform: translateX(100%);
		opacity: 0.3;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes tk-mobmenu-backdrop {
	from {
		background-color: rgba(77, 75, 72, 0);
	}
	to {
		background-color: rgba(77, 75, 72, 0.45);
	}
}

/* 閉じるボタン（×）の位置と色 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 26px;
	right: 18px;
	color: var(--wp--preset--color--accent-3, #d8613c);
}

/* ------------------------------------------------------------
   2 & 3. メニュー項目を縦並び・四角で囲い・余白を確保
   ------------------------------------------------------------ */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 10px; /* 各メニュー間の margin */
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	margin: 0;
}

/* 各メニューリンクを四角いボックスに（タップ領域を明確化） */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 11px 16px; /* タップ領域を保ちつつ少し小さめに */
	border: 2px solid #a9d3e6; /* ヘッダーの水色に合わせた境界線 */
	border-radius: 12px; /* 角丸で“かわいい四角” */
	background-color: var(--wp--preset--color--custom-blue, #ecf5f9); /* ヘッダーと同じ水色 */
	color: var(--wp--preset--color--custom-brown, #4d4b48);
	font-family: var(--wp--preset--font-family--zen-maru-gothic);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

/* 現在表示中のページのメニューを強調 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	background-color: #7fbdd6; /* 現在ページ: 水色を少し濃く */
	border-color: #7fbdd6;
	color: #ffffff;
}

/* タップ時のフィードバック */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
	transform: scale(0.97);
}

/* サブメニューがある場合のインデント調整 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 10px;
	margin-top: 10px;
	padding-left: 12px;
}

/* ============================================================
   ホーム: お知らせ サムネイルの縦幅をスマホで短く
   featured-image figure に inline で aspect-ratio:1(正方形) が付くため、
   スマホ幅(<=600px)で横長比率に上書きして縦を縮める(!importantでinline上書き)。
   .home でホームページのみに限定。
   ============================================================ */
@media (max-width: 600px) {
	.home .wp-block-post-featured-image {
		aspect-ratio: 16 / 9 !important;
		overflow: hidden;
	}

	.home .wp-block-post-featured-image a {
		display: block;
		height: 100%;
	}

	.home .wp-block-post-featured-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 画像カラム自体に aspect-ratio:1(正方形=約405px) が設定されており、
	   16:9 画像の下に余白が残る。当該カラムの縦横比を解除して画像にフィットさせる */
	.home .wp-block-column:has(.wp-block-post-featured-image) {
		aspect-ratio: auto !important;
		height: auto !important;
	}
}