/*
Theme Name: ぱんな Official (scarre)
Template: twentytwentyfive
Description: TikTokライブ配信者「ぱんな」公式サイト用の Twenty Twenty-Five 子テーマ。
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: scarre
*/

body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
	line-break: strict;
}

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: center;
	--navigation-layout-justify: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.5rem;
	padding-top: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.25rem;
	font-weight: 700;
}

p,
li {
	text-wrap: wrap;
}

/* :where で詳細度を下げ、has-text-align-center などの指定を優先させる */
:where(.wp-block-post-content) p {
	text-align: justify;
}

.wp-block-details {
	padding: 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 1.25rem;
	font-weight: 700;
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 12px;
	background: var(--wp--preset--color--accent-5);
	color: inherit;
	font: inherit;
	font-size: max(16px, 1rem); /* 16px未満だとiPhoneで入力時に画面が拡大される */
	font-weight: 400;
}

.wpcf7-form textarea {
	height: 10em;
}

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

.scarre-required,
.scarre-optional {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.6em;
	border-radius: 999px;
	font-size: 0.75rem;
	vertical-align: middle;
}

.scarre-required {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent-5);
}

.scarre-optional {
	background: var(--wp--preset--color--accent-6);
}

.wpcf7-form .scarre-acceptance {
	font-size: 0.9375rem;
	text-align: center;
}

.wpcf7-form .scarre-acceptance label {
	display: inline;
	font-weight: 400;
}

.wpcf7-form .scarre-acceptance input[type="checkbox"] {
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.25em;
	vertical-align: -0.2em;
	accent-color: var(--wp--preset--color--accent-3);
}

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

.wpcf7-form .wpcf7-submit {
	display: block;
	margin: 1.5rem auto 0;
	padding: 0.9rem 3rem;
	border: 0;
	cursor: pointer;
}

.wp-element-button,
h1,
h2,
h3 {
	word-break: auto-phrase;
	text-wrap: balance;
}