/*
Theme Name: Lightning Child
Description: 無料テーマLightning（現行G3世代）用の開発・カスタマイズ子テーマ
Author: Oishi Naoto
Template: lightning
Version: 0.1.0
Text Domain: lightning-child
*/

/* サイト固有のCSSは、目的ごとにコメントを付けて以下へ追加します。 */

/* 外部フォントへ依存しない子テーマ共通フォント。 */
html,
body {
	font-family: var(--lightning-child-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

/* 固定ページでフッターを非表示にした場合、フッター直前ウィジェットも非表示にします。 */
.lightning-child-hide-site-footer .site-body-bottom {
	display: none;
}

/* Lightning標準フッターの配色。値はカスタマイザー設定からCSS変数へ渡します。 */
.site-footer,
.lightning-child-block-site-footer {
	background-color: var(--lightning-child-footer-background, #ffffff);
	color: var(--lightning-child-footer-text, #333333);
}

:where(.site-footer, .lightning-child-block-site-footer) a {
	color: inherit;
}

/* コピーライトが空欄の場合は、空のコンテナが持つ余白も除去します。 */
.lightning-child-copyright-hidden .site-footer-copyright {
	display: none;
}

/* Lightning標準ヘッダーの基本配色。 */
.site-header,
.lightning-child-block-site-header {
	background-color: var(--lightning-child-header-background, #ffffff);
	color: var(--lightning-child-header-text, #333333);
}

.site-header-logo a,
.global-nav-list > li > a {
	color: var(--lightning-child-header-text, #333333);
}

:where(.lightning-child-block-site-header) a {
	color: inherit;
}

/* トップページの透過ヘッダー。親テーマのスクロール判定クラスを利用します。 */
.lightning-child-transparent-header:not(.header_scrolled) .site-header,
.lightning-child-transparent-header:not(.header_scrolled) .lightning-child-block-site-header {
	position: absolute;
	background-color: transparent;
	box-shadow: none;
}

.lightning-child-transparent-header:not(.header_scrolled) .site-header-logo a,
.lightning-child-transparent-header:not(.header_scrolled) .global-nav-list > li > a {
	color: var(--lightning-child-header-transparent-text, #ffffff);
}

.lightning-child-transparent-header:not(.header_scrolled) .lightning-child-block-site-header {
	color: var(--lightning-child-header-transparent-text, #ffffff);
}

/* Lightningが固定ヘッダーへ切り替えた後の背景色。 */
.header_scrolled .site-header {
	background-color: var(--lightning-child-header-scrolled-background, #ffffff);
}

/* WordPress標準のブロックテンプレートパーツ用ラッパー。 */
.lightning-child-block-site-header,
.lightning-child-block-site-footer {
	position: relative;
	width: 100%;
}

.lightning-child-block-site-header {
	z-index: 1000;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lightning-child-block-site-header .wp-block-group,
.lightning-child-block-site-footer .wp-block-group {
	box-sizing: border-box;
}

/* モバイルでのロゴ位置。 */
@media (max-width: 991px) {
	/* 透過ヘッダー上でもLightning標準のモバイルメニューボタンを見やすくします。 */
	.lightning-child-transparent-header:not(.header_scrolled) {
		--vk-mobile-nav-menu-btn-bg-src: var(--lightning-child-mobile-menu-button-light);
		--vk-mobile-nav-menu-btn-close-bg-src: var(--lightning-child-mobile-menu-close-light);
	}

	.lightning-child-mobile-logo-left .site-header-logo {
		text-align: left;
	}

	.lightning-child-mobile-logo-left .site-header-logo img {
		margin-right: auto;
		margin-left: 0;
	}

	.lightning-child-mobile-logo-center .site-header-logo {
		text-align: center;
	}

	.lightning-child-mobile-logo-center .site-header-logo img {
		margin-right: auto;
		margin-left: auto;
	}

	.lightning-child-mobile-logo-right .site-header-logo {
		text-align: right;
	}

	.lightning-child-mobile-logo-right .site-header-logo img {
		margin-right: 0;
		margin-left: auto;
	}
}