/**
 * NEO base styles（全ページ共通）
 *
 * - 黒背景・白文字を基本とする. 差し色・グラデーション・発光表現は使わない.
 * - Lightning の CSS 変数で変更できる箇所は変数の上書きを優先し、
 *   色が直接指定されているものだけを個別に上書きする.
 * - Lightning 15.42.0 / VK All in One Expansion Unit 9.123.1 / VK Blocks 1.127.0 のソースで確認したセレクタを使用.
 * - トップページ固有のレイアウトはここに書かない（neo-front.css に書く）.
 */

/* ==========================================================================
   1. デザイントークン
   ========================================================================== */

:root {
	--neo-color-bg: #0a0a0a;
	--neo-color-surface: #161616;
	--neo-color-surface-hover: #222222;
	--neo-color-text: #f5f5f5;
	--neo-color-text-sub: #b3b3b3;
	--neo-color-text-muted: #8c8c8c;
	--neo-color-line: #2a2a2a;
	--neo-color-line-strong: #6b6b6b;
	--neo-color-button-bg: #f5f5f5;
	--neo-color-button-bg-hover: #d9d9d9;
	--neo-color-button-text: #0a0a0a;
	--neo-color-input-bg: #111111;
	--neo-focus-ring: 2px solid var(--neo-color-text);

	color-scheme: dark;
}

/* ==========================================================================
   2. Lightning / VK Mobile Nav の CSS 変数の上書き
   ========================================================================== */

:root {
	/* 文字 */
	--vk-color-text-body: var(--neo-color-text);
	--vk-color-text-header: var(--neo-color-text);
	--vk-color-text-light: var(--neo-color-text-sub);
	--vk-color-text-meta: var(--neo-color-text-muted);

	/* リンク */
	--vk-color-text-link: var(--neo-color-text);
	--vk-color-text-link-hover: var(--neo-color-text-sub);
	--vk-color-link-text: var(--neo-color-text);
	--vk-color-link-text-hover: var(--neo-color-text-sub);

	/* 背景 */
	--vk-color-header-bg: var(--neo-color-bg);
	--vk-color-footer-bg: var(--neo-color-bg);
	--vk-color-accent-bg: rgba(255, 255, 255, 0.04);

	/* 線 */
	--vk-color-border: var(--neo-color-line);
	--vk-color-border-hr: var(--neo-color-line);
	--vk-color-border-image: var(--neo-color-line);
	--vk-color-border-form: var(--neo-color-line-strong);

	/*
	 * キーカラー（カスタマイザーのインライン CSS より後に出力されるため、こちらが優先される）.
	 * 「キーカラーの背景 + 白文字」を前提とする部品があるため、白ではなく無彩色の濃いグレーにする.
	 */
	--vk-color-primary: #3a3a3a;
	--vk-color-primary-dark: #2e2e2e;
	--vk-color-primary-vivid: #4a4a4a;

	/* グローバルナビの開閉アイコン: Lightning 定義済みの白いアイコン変数を参照する */
	--g_nav_main_acc_icon_open_url: var(--g_nav_sub_acc_icon_open_url);
	--g_nav_main_acc_icon_close_url: var(--g_nav_sub_acc_icon_close_url);

	/* スマホメニューの開閉アイコン: Lightning 定義済みの白いアイコン変数を参照する */
	--vk-menu-acc-icon-open-black-bg-src: var(--vk-menu-acc-icon-open-white-bg-src);
	--vk-menu-acc-icon-close-black-bg-src: var(--vk-menu-acc-icon-close-white-bg-src);

	/*
	 * MENU ボタン（閉じる）: 黒版と同じ画像（vk-menu-close-*.svg）の白版を指す既存変数を参照する.
	 * MENU ボタン（開く）の白アイコンは inc/enqueue.php のインライン CSS で指定している.
	 */
	--vk-mobile-nav-menu-btn-close-bg-src: var(--vk-menu-acc-icon-close-white-bg-src);
}

/* ==========================================================================
   3. 基本
   ========================================================================== */

html,
body {
	background-color: var(--neo-color-bg);
	color: var(--neo-color-text);
}

::selection {
	background-color: var(--neo-color-text);
	color: var(--neo-color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--neo-color-text);
}

/* 本文中のリンクは色だけに頼らず下線で示す（ボタンは除く） */
.entry-body a:where(:not(.btn):not(.wp-block-button__link):not(.vk_button_link)) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.entry-body a:where(:not(.btn):not(.wp-block-button__link):not(.vk_button_link)):hover {
	text-decoration-thickness: 2px;
}

pre {
	background-color: var(--neo-color-surface);
	color: var(--neo-color-text);
	border: 1px solid var(--neo-color-line);
}

/* ==========================================================================
   4. フォーカス表示（キーボード操作）
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--neo-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   5. ヘッダー・グローバルナビ
   ========================================================================== */

/* origin3 スキンで background-color: #fff が直接指定されているため個別に上書き */
.site-header {
	background-color: var(--neo-color-bg);
	border-bottom: 1px solid var(--neo-color-line);
	box-shadow: none;
}

.site-header-logo a {
	color: var(--neo-color-text);
}

.global-nav-description {
	color: var(--neo-color-text-sub);
}

/* ホバー・現在地の下線（元はキーカラー） */
.global-nav-list > li:before {
	border-bottom-color: var(--neo-color-text);
}

/* サブメニュー（元はキーカラーの背景） */
.global-nav-list > li > ul.sub-menu,
.global-nav-list .sub-menu li.menu-item-has-children > ul.sub-menu {
	background-color: var(--neo-color-surface);
	box-shadow: none;
	border: 1px solid var(--neo-color-line);
}

.global-nav-list .sub-menu li a {
	border-bottom-color: var(--neo-color-line);
}

.global-nav-list .sub-menu li a:hover,
.global-nav-list .sub-menu li a:focus-within,
.global-nav-list .sub-menu li.menu-item-has-children:hover,
.global-nav-list .sub-menu li.menu-item-has-children:focus-within {
	background-color: var(--neo-color-surface-hover);
}

/* ==========================================================================
   6. スマホメニュー（vk-mobile-nav）
   ========================================================================== */

/* vk-mobile-nav-bright.css / Lightning 本体で白背景が直接指定されているため個別に上書き */
.vk-mobile-nav {
	background-color: var(--neo-color-bg);
	border-bottom-color: var(--neo-color-line);
	color: var(--neo-color-text);
}

.vk-mobile-nav nav ul li a {
	color: var(--neo-color-text);
	border-bottom: 1px solid var(--neo-color-line);
}

.vk-mobile-nav .widget,
.vk-mobile-nav .widget-title {
	color: var(--neo-color-text);
}

/* 開閉ボタン（アイコンは :root の変数で白に切り替え済み） */
.vk-menu-acc .acc-btn {
	border-color: rgba(255, 255, 255, 0.6);
}

/* MENU ボタン（元は白い半透明の背景 + 濃い枠） */
.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
	background-color: var(--neo-color-bg);
	border-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   7. ページヘッダー・パンくずリスト
   ========================================================================== */

/* 元はキーカラーの背景 + 白文字 */
.page-header {
	background-color: var(--neo-color-surface);
	color: var(--neo-color-text);
	border-bottom: 1px solid var(--neo-color-line);
}

.breadcrumb {
	background-color: var(--neo-color-bg);
	color: var(--neo-color-text-muted);
}

.breadcrumb a {
	color: var(--neo-color-text-sub);
}

.breadcrumb a:hover {
	color: var(--neo-color-text);
	text-decoration: underline;
}

/* ==========================================================================
   8. 本文の周辺
   ========================================================================== */

.site-body,
.site-body-bottom {
	background-color: var(--neo-color-bg);
}

/* 「台紙」表示が有効な場合（元は白背景） */
.main-section--base--on,
.sub-section--base--on {
	background-color: var(--neo-color-surface);
}

.entry-meta {
	color: var(--neo-color-text-muted);
}

/* Bootstrap のカード（アーカイブの投稿リストなど、元は白背景） */
.card {
	background-color: var(--neo-color-surface);
	border-color: var(--neo-color-line);
	color: var(--neo-color-text);
}

table th,
table td {
	border-color: var(--neo-color-line);
}

table thead th {
	background-color: var(--neo-color-surface);
}

/* ページ送り（ホバー時の背景が #efefef 直指定のため上書き） */
ul.page-numbers li a:hover {
	background-color: var(--neo-color-surface-hover);
}

.page-link dl .post-page-numbers {
	color: var(--neo-color-text-sub);
}

/* ==========================================================================
   9. ボタン
   ========================================================================== */

/* Bootstrap の .btn-primary（元は青）: 白背景 + 黒文字 */
.btn-primary,
.btn-primary:visited {
	color: var(--neo-color-button-text);
	background-color: var(--neo-color-button-bg);
	border-color: var(--neo-color-button-bg);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	color: var(--neo-color-button-text);
	background-color: var(--neo-color-button-bg-hover);
	border-color: var(--neo-color-button-bg-hover);
}

/* .btn-default のホバーは「リンク色の背景 + 白文字」のため、文字を黒にする */
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	color: var(--neo-color-bg);
}

/* ブロックエディタのボタン（利用者が色を指定していないもののみ）: 白背景 + 黒文字 */
.wp-block-button__link:not(.has-background):not(.has-text-color) {
	color: var(--neo-color-button-text);
	background-color: var(--neo-color-button-bg);
}

.wp-block-button__link:not(.has-background):not(.has-text-color):hover {
	background-color: var(--neo-color-button-bg-hover);
}

/* 枠線スタイル: 透明背景 + 白枠 + 白文字 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color) {
	color: var(--neo-color-text);
	background-color: transparent;
	border: 1px solid var(--neo-color-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
	background-color: var(--neo-color-surface-hover);
}

/* NEO 共通ボタン（トップページ・今後のイベントページなどで共通利用） */
.neo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.75rem 1.75rem;
	border: 1px solid var(--neo-color-text);
	border-radius: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
}

/* 主ボタン: 白背景 + 黒文字 */
.neo-button--primary,
.neo-button--primary:visited {
	color: var(--neo-color-button-text);
	background-color: var(--neo-color-button-bg);
	border-color: var(--neo-color-button-bg);
}

.neo-button--primary:hover {
	color: var(--neo-color-button-text);
	background-color: var(--neo-color-button-bg-hover);
	border-color: var(--neo-color-button-bg-hover);
}

/* 副ボタン: 透明背景 + 白枠 + 白文字 */
.neo-button--secondary,
.neo-button--secondary:visited {
	color: var(--neo-color-text);
	background-color: transparent;
	border-color: var(--neo-color-text);
}

.neo-button--secondary:hover {
	color: var(--neo-color-text);
	background-color: var(--neo-color-surface-hover);
}

/*
 * イベントの状態ラベル（NEO Core の status をクラス名に使う）.
 * 無彩色のみ. 塗り / 枠線の形の違いと文字で状態を示し、色だけに頼らない.
 */
.neo-status {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--neo-color-text);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--neo-color-text);
	background-color: transparent;
}

/* 開催中: 白背景 + 黒文字 */
.neo-status--ongoing {
	color: var(--neo-color-bg);
	background-color: var(--neo-color-text);
}

/* 開催予定: 透明背景 + 白枠 + 白文字（.neo-status の既定） */
.neo-status--upcoming {
	color: var(--neo-color-text);
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   イベントカード（トップページ・/events/ で共通利用）
   -------------------------------------------------------------------------- */

.neo-event-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--neo-color-surface);
	border: 1px solid var(--neo-color-line);
	color: var(--neo-color-text);
}

/* 画像（イベント自身のアイキャッチがある場合のみ出力. 16:9） */
.neo-event-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--neo-color-surface-hover);
}

.neo-event-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.neo-event-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.875rem;
	padding: 1.25rem;
}

.neo-event-card__status {
	margin: 0;
}

/* Lightning / スキンの h3 装飾（下線・疑似要素）を打ち消す */
.neo-event-card__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--neo-color-text);
	overflow-wrap: anywhere;
}

.neo-event-card__title::before,
.neo-event-card__title::after {
	content: none;
}

.neo-event-card__title a {
	color: var(--neo-color-text);
	text-decoration: none;
}

.neo-event-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.neo-event-card__datetime {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	line-height: 1.5;
}

.neo-event-card__date {
	font-size: 1rem;
	font-weight: 700;
}

.neo-event-card__time {
	font-size: 0.9375rem;
}

/* 料金（区分名は左・金額は右） */
.neo-event-card__prices {
	margin: 0;
	padding-top: 0.875rem;
	border-top: 1px solid var(--neo-color-line);
}

.neo-event-card__price {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.125rem;
}

.neo-event-card__price dt {
	margin: 0;
	font-weight: 400;
	color: var(--neo-color-text-sub);
}

.neo-event-card__price dd {
	margin: 0;
	font-weight: 700;
	color: var(--neo-color-text);
}

.neo-event-card__price-note {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--neo-color-text-sub);
	overflow-wrap: anywhere;
}

/*
 * ボタン: 2つなら横2分割、1つなら横幅いっぱい.
 * 非常に狭い画面では折り返して縦並びになる. カード下端にそろえる.
 */
.neo-event-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.neo-event-card__actions .neo-button {
	flex: 1 1 8rem;
	min-width: 0;
	padding-inline: 0.75rem;
}

/* ==========================================================================
   10. フォーム部品
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select,
.form-control {
	background-color: var(--neo-color-input-bg);
	color: var(--neo-color-text);
	border-color: var(--neo-color-line-strong);
}

::placeholder {
	color: var(--neo-color-text-muted);
	opacity: 1;
}

/* ==========================================================================
   11. フッター
   ========================================================================== */

/* 上線は元はキーカラー */
.site-footer {
	background-color: var(--neo-color-bg);
	color: var(--neo-color-text-sub);
	border-top-color: var(--neo-color-line);
}

.site-footer a,
.footer-nav-list a {
	color: var(--neo-color-text);
}

.site-footer a:hover,
.footer-nav-list a:hover {
	text-decoration: underline;
}

.site-footer-title,
.site-footer .widget-title {
	color: var(--neo-color-text);
}

.site-footer-copyright {
	color: var(--neo-color-text-muted);
}

/* ==========================================================================
   12. 個別の調整
   ========================================================================== */

/* 投稿者名を表示しない（旧 style.css から移動） */
.entry-meta-item-author {
	display: none;
}

/* ==========================================================================
   13. モバイル共通UI（MENU ボタン・ページ上部へ戻る・パンくず）
   ========================================================================== */

@media (max-width: 767px) {
	/*
	 * MENU ボタン: ページ左上に置き、スクロールするとヘッダーと一緒に画面外へ流れるようにする.
	 * Lightning は position: fixed（画面に固定）のため、スクロール中に本文の上へ重なる. それを absolute に変える.
	 * ボタンは body 直下に出力され位置の基準になる祖先がないため、基準はページ先頭になる.
	 * 画面端から少し離し（Lightning 既定は 5px）、サイズ（34px）・黒背景・白枠は既存のまま.
	 * メニューを開いている間（.menu-open）は閉じるボタンなので、メニューと一緒に画面へ固定する.
	 * 管理バー（767px 以下では 46px）がある場合は Lightning と同じく分だけ下げる.
	 */
	.vk-mobile-nav-menu-btn {
		position: absolute;
		top: 0.75rem;
		left: 0.75rem;
	}

	.vk-mobile-nav-menu-btn.menu-open {
		position: fixed;
	}

	.admin-bar .vk-mobile-nav-menu-btn {
		top: calc(46px + 0.75rem);
	}

	/*
	 * パンくず: 上下を少し広げ、長い文字列も折り返す（構造は変更しない）.
	 * 固定 MENU ボタン（左端 0.75rem〜0.75rem + 34px）の下を文字が通らないよう、左側に余白をとる.
	 */
	.breadcrumb .breadcrumb-list {
		padding-block: 0.625rem;
		padding-left: calc(0.75rem + 34px + 0.5rem - var(--vk-width-container-padding, 15px));
		line-height: 1.6;
		overflow-wrap: anywhere;
	}

	/*
	 * ExUnit「ページ上部へ戻る」ボタン: スマホでは表示しない（768〜991.98px は下の 32×32px で表示）.
	 * ExUnit の表示ルール「.scrolled .page_top_btn」（詳細度 0,2,0）より詳細度を上げて打ち消す（!important は使わない）.
	 */
	body .page_top_btn,
	body.scrolled .page_top_btn {
		display: none;
	}
}

/*
 * ExUnit「ページ上部へ戻る」ボタン（スマホ・タブレット）.
 * 長いページで上部へ戻る導線として残す（MENU＝左上、ページ上部へ戻る＝右下）.
 * 本文への重なりを減らすため、少し小さくし、画面の右下端へ寄せる. 下部のブラウザ UI（安全領域）を考慮する.
 * ExUnit の .page_top_btn（詳細度 0,1,0）の読み込み順に依存しないよう、詳細度を上げて指定する.
 */
@media (max-width: 991.98px) {
	body .page_top_btn {
		right: 0.75rem;
		bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
		width: 32px;
		height: 32px;
	}
}