/*
Theme Name: Dream Guild
Theme URI: https://dreamguild.jp
Author: Dream Guild Inc.
Description: ドリムギルド株式会社のコーポレートサイト用テーマ。トップページはフル画面の動画（1回再生・音なし）から始まり、再生完了後にヘッダーメニューが上から降りてくる。
Version: 0.2.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: dreamguild-theme
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------------
   0. リセット & 変数
------------------------------------------------- */
:root {
	--dg-color-bg: #ffffff;
	--dg-color-bg-dark: #0b0b10;
	--dg-color-hero-bg: #fefefe;
	--dg-color-surface: #f6f5f2;
	--dg-color-text: #16161a;
	--dg-color-muted: #6b6b72;
	--dg-color-border: #e3e1dc;
	--dg-color-accent: #16161a;
	--dg-font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
	--dg-container: 1120px;
	--dg-header-height: 76px;
	--dg-footer-height: 64px;
	--dg-header-drop: 1s;
}

@media (max-width: 782px) {
	:root {
		--dg-header-height: 60px;
		--dg-footer-height: 52px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--dg-color-bg);
	color: var(--dg-color-text);
	font-family: var(--dg-font-body);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

img,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	overflow: visible;
	clip: auto;
	background: #fff;
	color: #000;
}

/* -------------------------------------------------
   1. ヘッダー
------------------------------------------------- */
.dg-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dg-color-border);
}

.dg-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1440px;
	height: var(--dg-header-height);
	margin: 0 auto;
	padding: 0 32px;
}

.dg-site-branding {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
}

.dg-site-branding a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 8px 0;
}

.dg-site-branding img {
	display: block;
	width: auto;
	height: 100%;
	max-height: calc(var(--dg-header-height) - 16px);
}

.dg-site-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.dg-site-title a {
	text-decoration: none;
}

/* ナビゲーション */
.dg-nav__list {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-nav__list a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.dg-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.dg-nav__list a:hover::after,
.dg-nav__list a:focus-visible::after,
.dg-nav__list .current-menu-item > a::after,
.dg-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

/* ハンバーガー（モバイルのみ） */
.dg-nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.dg-nav-toggle__bar,
.dg-nav-toggle__bar::before,
.dg-nav-toggle__bar::after {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.3s ease, background-color 0.2s ease;
}

.dg-nav-toggle__bar {
	top: 21px;
}

.dg-nav-toggle__bar::before,
.dg-nav-toggle__bar::after {
	content: "";
	left: 0;
}

.dg-nav-toggle__bar::before {
	top: -7px;
}

.dg-nav-toggle__bar::after {
	top: 7px;
}

.dg-site-header.is-nav-open .dg-nav-toggle__bar {
	background: transparent;
}

.dg-site-header.is-nav-open .dg-nav-toggle__bar::before {
	transform: translateY(7px) rotate(45deg);
}

.dg-site-header.is-nav-open .dg-nav-toggle__bar::after {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 782px) {
	.dg-site-header__inner {
		padding: 0 16px;
	}

	.dg-nav-toggle {
		display: block;
	}

	.dg-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		padding: 8px 16px 20px;
		background: rgba(255, 255, 255, 0.98);
		border-bottom: 1px solid var(--dg-color-border);
	}

	.dg-site-header.is-nav-open .dg-nav {
		display: block;
	}

	.dg-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.dg-nav__list a {
		padding: 14px 4px;
		border-bottom: 1px solid var(--dg-color-border);
	}

	.dg-nav__list a::after {
		display: none;
	}
}

/* -------------------------------------------------
   2. トップページ：動画ヒーロー & ヘッダー降下演出
------------------------------------------------- */
/*
 * 動画は最終フレームでロゴが四辺いっぱいまで拡大し、背景はほぼ純白。
 * cover だと画面比率によってロゴの端が切れるため contain で全体を見せ、
 * 背景を動画と同じ白にして余白が目立たないようにしている。
 * 動画は画面(ヒーロー)の中央に置き、上下は高さの34%(ただしヘッダー/フッターの高さ以上)、
 * 左右は32.5%ずつ余白を取って小さく表示する(表示領域は幅35%×高さ32%)。
 * 動画の大きさを変えたいときはこの2つの余白を調整する。
 * 上下を同じ余白にするのは、中央に置くためと、ヘッダー・フッターが出てきても
 * 最終フレームの上下端と重ならないようにするため。
 */
.dg-hero {
	--dg-hero-video-inset-x: 32.5%;
	--dg-hero-video-inset-y: max(var(--dg-header-height), var(--dg-footer-height), 34%);
	position: relative;
	width: 100%;
	height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 320px;
	overflow: hidden;
	background: var(--dg-color-hero-bg);
}

.dg-hero__video {
	position: absolute;
	top: var(--dg-hero-video-inset-y);
	left: var(--dg-hero-video-inset-x);
	display: block;
	width: calc(100% - 2 * var(--dg-hero-video-inset-x));
	height: calc(100% - 2 * var(--dg-hero-video-inset-y));
	max-width: none;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

/* トップページではヘッダーを動画の上に重ねる（固定） */
.dg-site-header--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

body.admin-bar .dg-site-header--overlay {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .dg-site-header--overlay {
		top: 46px;
	}
}

/* フッターもトップページではヘッダーと対になる位置(画面下)に固定する */
.dg-site-footer--overlay {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

/*
 * 動画の再生が終わるまで、ヘッダーは上・フッターは下の画面外に隠しておく。
 * 再生が終わると body に dg-header-visible が付き、ヘッダーが降りると同時にフッターがせり上がる。
 * html.dg-js は <head> 内の同期スクリプトで付与しているため、JSが無効な環境では
 * このルールが効かず、どちらも最初から表示される。
 * 非表示中は visibility:hidden でキーボード操作・読み上げの対象からも外す。
 */
html.dg-js body.dg-intro:not(.dg-header-visible) .dg-site-header {
	visibility: hidden;
	transform: translateY(-100%);
}

html.dg-js body.dg-intro:not(.dg-header-visible) .dg-site-footer {
	visibility: hidden;
	transform: translateY(100%);
}

html.dg-js body.dg-intro.dg-header-visible .dg-site-header,
html.dg-js body.dg-intro.dg-header-visible .dg-site-footer {
	visibility: visible;
	transform: translateY(0);
	transition: transform var(--dg-header-drop) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	html.dg-js body.dg-intro.dg-header-visible .dg-site-header,
	html.dg-js body.dg-intro.dg-header-visible .dg-site-footer {
		transition: none;
	}
}

/* -------------------------------------------------
   3. 汎用コンテンツ
------------------------------------------------- */
.dg-main {
	min-height: 50vh;
}

.dg-container {
	max-width: var(--dg-container);
	margin: 0 auto;
	padding: 64px 24px;
}

.dg-entry + .dg-entry {
	margin-top: 64px;
}

.dg-entry__title {
	margin: 0 0 24px;
	font-size: 1.75rem;
	line-height: 1.4;
}

.dg-entry__title a {
	text-decoration: none;
}

.dg-entry__meta {
	margin: -12px 0 24px;
	color: var(--dg-color-muted);
	font-size: 0.875rem;
}

.dg-entry__content > *:first-child {
	margin-top: 0;
}

.dg-front-content .dg-container {
	padding-top: 96px;
	padding-bottom: 96px;
}

/* トップページはフッターが画面下に固定されるので、その下に潜らないよう余白を足す */
body.dg-intro .dg-front-content {
	padding-bottom: var(--dg-footer-height);
}

/* -------------------------------------------------
   4. フッター
------------------------------------------------- */
.dg-site-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--dg-footer-height);
	padding: 0 24px;
	background: var(--dg-color-bg-dark);
	color: #b8b8c0;
	font-size: 0.8125rem;
	text-align: center;
}

.dg-site-footer--overlay {
	height: var(--dg-footer-height);
}

.dg-site-footer p {
	margin: 0;
}