/* ==========================================================================
   Mio Kaisaka - main.css
   theme.json で表現しきれない装飾のみをここに置く
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 日本語組版の基本調整
   -------------------------------------------------------------------------- */

body {
	font-feature-settings: "palt" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-feature-settings: "palt" 1;
	overflow-wrap: break-word;
	line-break: strict;
}

p {
	overflow-wrap: break-word;
	line-break: strict;
}

/* 段落の行末を揃えすぎないための調整 */
.wp-block-post-content p,
.entry-content p {
	text-align: left;
}

/* ヘッダー／本文／フッターの間に WordPress が自動で入れる余白を打ち消す。
   各セクションが自前で padding を持っているため、ここは 0 でよい。
   （theme.json の blockGap は本文内の余白として引き続き効く） */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   2. ヘッダー
   -------------------------------------------------------------------------- */

.mk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* すりガラスは擬似要素に逃がす。
   backdrop-filter を .mk-header 自身に付けると、スマホのメニュー
   （position:fixed）がヘッダーの箱に閉じ込められて開かなくなる。 */
.mk-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
}

.mk-header .wp-block-site-title a {
	text-decoration: none;
}

/* ナビゲーションのホバー時に細い下線を伸ばす */
.mk-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
}

.mk-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mk-header .wp-block-navigation-item__content:hover::after,
.mk-header .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* スマホのメニューボタンまわり
   ヘッダーを透明にしたぶん、開いたメニューの背景はここで明示する
   （コア側は background-color: inherit のため） */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: clamp(2rem, 8vw, 5rem);
}

/* ヘッダーのナビは右寄せだが、全画面メニューは左揃えのほうが読みやすい。
   コアは align-items にこの変数を使うが、変数は <ul> 自身
   （.wp-block-navigation.items-justified-right）でも再定義される。
   親だけに指定すると子で打ち消されるので、<ul> にも直接効かせる。 */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
}

/* <ul> が中身なりの幅に縮まないよう、明示的に広げる */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.6rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	letter-spacing: 0.16em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* --------------------------------------------------------------------------
   3. 見出しまわりの装飾
   -------------------------------------------------------------------------- */

/* 英字の小さなラベル（EN 表記） */
.mk-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	margin-bottom: 0.9em;
}

/* セクション見出し（中央・下に細い罫線） */
.is-style-mk-section-title {
	text-align: center;
	position: relative;
	padding-bottom: 1.1em;
	margin-bottom: 0;
}

.is-style-mk-section-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 1px;
	background-color: var(--wp--preset--color--accent-2);
	transform: translateX(-50%);
}

/* 縦の細い罫線をアクセントに使う見出し */
.mk-rule-left {
	border-left: 1px solid var(--wp--preset--color--accent-2);
	padding-left: 1.1em;
}

/* --------------------------------------------------------------------------
   4. カード・リスト
   -------------------------------------------------------------------------- */

.is-style-mk-card {
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50);
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.is-style-mk-card:hover {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* インタビュー記事カード：隣り合うカードの高さをそろえ、リンクを下端に落とす */
.mk-article-card {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* margin-top:auto でリンクを下端にそろえる。
   段落側にインラインの margin-top を持たせると打ち消されるので付けないこと。 */
.mk-article-card .mk-article-link {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: var(--wp--preset--spacing--40);
}

.mk-article-link a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--accent-2);
	padding-bottom: 0.25em;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.mk-article-link a::after {
	content: " →";
	letter-spacing: 0;
}

.mk-article-link a:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* 受賞歴リスト：黒丸を消し、年号を左に置いた行にする */
.is-style-mk-award-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.is-style-mk-award-list li {
	position: relative;
	padding: 0.95em 0 0.95em 1.5em;
	border-bottom: 1px solid var(--wp--preset--color--line);
	line-height: 1.85;
}

.is-style-mk-award-list li:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.is-style-mk-award-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 6px;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
}

/* 掲載誌リスト：受賞歴リストと同じ行組みで、誌名の下に掲載内容を小さく添える */
.mk-press-list .mk-press-detail {
	display: block;
	margin-top: 0.35em;
	font-size: 0.875rem;
	line-height: 1.9;
	color: var(--wp--preset--color--contrast-2);
}

/* 経歴などの2列表（年 / 内容） */
.mk-history {
	width: 100%;
	border-collapse: collapse;
}

.mk-history th,
.mk-history td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1em 0.5em;
	vertical-align: top;
	text-align: left;
	font-weight: 400;
}

.mk-history th {
	width: 7em;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.08em;
}

@media (max-width: 600px) {
	.mk-history th,
	.mk-history td {
		display: block;
		width: auto;
		border-bottom: none;
		padding: 0.2em 0;
	}
	.mk-history td {
		padding-bottom: 1.1em;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}
}

/* --------------------------------------------------------------------------
   5. 公演情報
   -------------------------------------------------------------------------- */

.mk-concert {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--50);
}

.mk-concert:last-of-type,
.mk-concert:has(+ :not(.mk-concert)) {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--50);
}

.mk-concert-date {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 4vw, 2rem);
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.mk-badge {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	line-height: 1;
	padding: 0.6em 1.1em;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.mk-badge.is-past {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast-2);
}

.mk-program {
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--wp--preset--color--contrast-2);
}

/* --------------------------------------------------------------------------
   6. 画像・動画
   -------------------------------------------------------------------------- */

.is-style-mk-zoom {
	overflow: hidden;
}

.is-style-mk-zoom img {
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.is-style-mk-zoom:hover img {
	transform: scale(1.045);
}

/* 動画サムネイル：中央に再生マークを重ねる */
.mk-video-thumb {
	position: relative;
	display: block;
	overflow: hidden;
}

.mk-video-thumb img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mk-video-thumb::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 62px;
	height: 62px;
	margin: -31px 0 0 -31px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	background: rgba(30, 28, 26, 0.28) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	transition: background-color 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.mk-video-thumb:hover img {
	transform: scale(1.05);
}

.mk-video-thumb:hover::after {
	background-color: rgba(154, 127, 79, 0.75);
	transform: scale(1.06);
}

/* YouTube 埋め込みを 16:9 に保つ */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	padding-top: 56.25%;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   7. ヒーロー（トップページ）
   -------------------------------------------------------------------------- */

.mk-hero {
	position: relative;
	min-height: min(86vh, 780px);
}

/* 覆いの濃さはブロックのグラデーション設定側で調整する（編集画面から変更可能） */

.mk-hero-name {
	font-family: var(--wp--preset--font-family--mincho);
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-indent: 0.22em;
}

.mk-hero-latin {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: 0.875rem;
}

/* サイト名（Mio Kaisaka Official Website）。
   文字数が多いので字間を詰め、狭い画面ではさらに小さくして1行に収める。 */
.mk-site-latin {
	letter-spacing: 0.18em;
}

@media (max-width: 600px) {
	.mk-site-latin {
		font-size: 0.75rem;
		letter-spacing: 0.13em;
	}
}

/* 下向きのスクロール案内 */
.mk-scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	width: 1px;
	height: 56px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
	transform: translateX(-50%);
	animation: mk-scroll 2.4s ease-in-out infinite;
}

@keyframes mk-scroll {
	0%   { opacity: 0; transform: translate(-50%, -14px); }
	40%  { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, 14px); }
}

@media (prefers-reduced-motion: reduce) {
	.mk-scroll-hint { animation: none; }
}

/* --------------------------------------------------------------------------
   8. スクロール時のフェードイン
   -------------------------------------------------------------------------- */

.mk-reveal-ready .mk-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mk-reveal-ready .mk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* 編集画面ではアニメーションを無効にする */
.editor-styles-wrapper .mk-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   9. お問い合わせフォーム（Contact Form 7）
   -------------------------------------------------------------------------- */

.wpcf7 {
	margin-top: var(--wp--preset--spacing--40);
}

.wpcf7 label {
	display: block;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	margin-bottom: 2rem;
	color: var(--wp--preset--color--contrast);
}

.wpcf7 .mk-required {
	display: inline-block;
	margin-left: 0.7em;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent-2);
	padding: 0.25em 0.6em;
	line-height: 1;
	vertical-align: 0.15em;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	box-sizing: border-box; /* これが無いと padding のぶん枠からはみ出す */
	width: 100%;
	margin-top: 0.7em;
	padding: 0.95em 1em;
	font-family: inherit;
	font-size: 1rem; /* iOS で拡大されないよう 16px 以上 */
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	transition: border-color 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236e675e'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 12px 8px;
	padding-right: 2.6em;
}

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

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base);
}

.wpcf7 input[type="submit"] {
	display: block;
	margin: var(--wp--preset--spacing--40) auto 0;
	min-width: 16em;
	padding: 1.2em 2.6em;
	font-family: inherit;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	cursor: pointer;
	transition: color 0.3s ease, background-color 0.3s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 input[type="submit"]:hover {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	color: #b3261e;
	margin-top: 0.5em;
}

.wpcf7 .wpcf7-response-output {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 1.1em 1.3em;
	font-size: 0.9375rem;
	border-width: 1px;
	border-color: var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--ivory);
}

.wpcf7 .wpcf7-spinner {
	margin: 1em auto 0;
	display: block;
}

/* 同意チェックボックス */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	margin-bottom: 0;
	font-size: 0.875rem;
	line-height: 1.8;
	cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.35em;
	width: 1.05em;
	height: 1.05em;
	accent-color: var(--wp--preset--color--accent);
	flex: none;
}

/* --------------------------------------------------------------------------
   10. フッター
   -------------------------------------------------------------------------- */

.mk-footer {
	border-top: 1px solid var(--wp--preset--color--line);
}

.mk-footer .wp-block-navigation {
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
}

.mk-copyright {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--contrast-2);
}

/* SNS アイコン */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--contrast-2);
	transition: color 0.3s ease, transform 0.3s ease;
}

.wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   11. アクセシビリティ / 印刷
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 1em 1.5em;
	z-index: 999;
}

@media print {
	.mk-header,
	.mk-footer,
	.wp-block-navigation {
		display: none !important;
	}
}

/* トップのお知らせ帯：メイン写真の下に1行で置く */
.mk-news-bar {
	margin-block-start: 0 !important;
	background-color: var(--wp--preset--color--ivory);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mk-news-bar .mk-news-label {
	display: inline-block;
	margin-right: 1em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.mk-news-bar .mk-nowrap {
	display: inline-block;
}

.mk-news-bar a {
	white-space: nowrap;
	text-underline-offset: 0.3em;
}

@media (max-width: 600px) {
	.mk-news-bar .mk-news-label {
		display: block;
		margin-right: 0;
	}
}

/* カード内のバッジは中身の幅にとどめる（flex の縦並びで横いっぱいに伸びるのを防ぐ） */
.mk-article-card .mk-badge {
	align-self: flex-start;
}

/* /media/#tv などで飛んだとき、固定ヘッダーの下に見出しが隠れないようにする */
#tv {
	scroll-margin-top: 80px;
}