/* MG Core front-end styles. */
/*
 * 左右の余白は theme.json の styles.spacing.padding（ルートパディング）で管理する。
 * header / main / footer に左右paddingを直接指定すると、alignfull が画面端まで届かなくなる。
 */
.wp-site-blocks > header,
.wp-site-blocks > footer {
	padding-block: 1rem;
}

/* header / main / footer 間のblockGapを無効化（全幅セクションが隙間なく接するように） */
body .wp-site-blocks > * {
	margin-block-start: 0;
}

/* サイトロゴが出力されている場合は、視覚上の重複を避けるためサイトタイトルを視覚的にのみ隠す（スクリーンリーダーには残す）。 */
.site-branding:has(.wp-block-site-logo) .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
	/* Font：本文・UI用（実体は theme.json の fontFamilies。子テーマの変更も theme.json 側で行う） */
	--mega-font-base: var(--wp--preset--font-family--mega-base);

	/* Font：絶対フレーズ専用（「なくてはならない」存在へ）*/
	--mega-font-serif: var(--wp--preset--font-family--mega-serif);

	/* 非推奨：旧変数名（後方互換用）。新規コードでは --mega-font-* を使う */
	--font-base: var(--mega-font-base);
	--font-serif: var(--mega-font-serif);

	/* Colors（実体は theme.json の color.palette。変数名は後方互換のため維持） */
	--mega-color-primary: var(--wp--preset--color--mega-primary);
	--mega-color-secondary: var(--wp--preset--color--mega-secondary);
	--mega-color-text: var(--wp--preset--color--mega-text);
	--mega-color-white: var(--wp--preset--color--mega-white);
	--mega-color-gray: var(--wp--preset--color--mega-gray);
	--mega-color-light-gray: var(--wp--preset--color--mega-light-gray);

	/* Gradients */
	--mega-gradient-primary: var(--wp--preset--gradient--mega-primary);

	/* Spacing */
	--mega-space-xs: 8px;
	--mega-space-sm: 16px;
	--mega-space-md: 24px;
	--mega-space-lg: 40px;
	--mega-space-xl: 60px;
	--mega-space-2xl: 80px;

	/* Header */
	--mega-header-height-pc: 72px;
	--mega-header-height-sp: 72px;

	/* Button */
	--mega-btn-padding-y: 16px;
	--mega-btn-padding-x: 32px;
	--mega-btn-font-size: 14px;

	/* Section Padding */
	--mega-section-padding: clamp(40px, 4vw, 60px);
	--mega-section-padding-pt-pb: clamp(40px, 4vw, 60px);
	--mega-section-padding-pr-pl: clamp(40px, 4vw, 60px);

	/* Section banner-hero */
	--mega-hero-pt: clamp(120px, calc(6.4rem + 5.5vw), 208px);
	--mega-hero-pb: clamp(40px, calc(1.5rem + 5vw), 100px);
	--mega-hero-gap: clamp(32px, calc(1.65rem + 1.75vw), 60px);

	/* ============================================
     Area Colors（領域カラー）
     ブランディングガイド 1-3 カラーガイド／領域カラー に準拠
     
     変数名は「領域の実態」で命名。
     PHPクラス名（子テーマ側の acf-helpers.php）と色名が一致しないものに注意。
     
     PHPクラス → 変数の対応
       is-blue   → --mega-area-blue-*    DXサポート
       is-green  → --mega-area-green-*   空間デザイン
       is-pink   → --mega-area-orange-*  採用支援     ※クラス名と色が不一致
       is-yellow → --mega-area-pink-*    クリエイティブ ※クラス名と色が不一致
       is-purple → --mega-area-navy-*    システム開発  ※クラス名と色が不一致
       is-orange → --mega-area-red-*     ソーシャル    ※クラス名と色が不一致
       is-gray   → --mega-area-sky-*     本部          ※クラス名と色が不一致
     
     各変数のサフィックス
       -dark : ラベル文字・アイコン・区切り線など小要素に使用
       -mid  : 補助アクセント・トーン違い
       -pale : 背景・淡い面
  ============================================ */

	/* Blue Area ／ DXサポート ／ PHPクラス: is-blue */
	--mega-area-blue-dark: var(--wp--preset--color--mega-area-blue-dark);
	--mega-area-blue-mid: var(--wp--preset--color--mega-area-blue-mid);
	--mega-area-blue-pale: var(--wp--preset--color--mega-area-blue-pale);


	/* Green Area ／ 空間デザイン ／ PHPクラス: is-green */
	--mega-area-green-dark: var(--wp--preset--color--mega-area-green-dark);
	--mega-area-green-mid: var(--wp--preset--color--mega-area-green-mid);
	--mega-area-green-pale: var(--wp--preset--color--mega-area-green-pale);


	/* Orange Area ／ 採用支援 ／ PHPクラス: is-pink ※名前不一致 */
	--mega-area-orange-dark: var(--wp--preset--color--mega-area-orange-dark);
	--mega-area-orange-mid: var(--wp--preset--color--mega-area-orange-mid);
	--mega-area-orange-pale: var(--wp--preset--color--mega-area-orange-pale);


	/* Pink Area ／ クリエイティブ ／ PHPクラス: is-yellow ※名前不一致 */
	--mega-area-pink-dark: var(--wp--preset--color--mega-area-pink-dark);
	--mega-area-pink-mid: var(--wp--preset--color--mega-area-pink-mid);
	--mega-area-pink-pale: var(--wp--preset--color--mega-area-pink-pale);


	/* Navy Area ／ システム開発 ／ PHPクラス: is-purple ※名前不一致 */
	--mega-area-navy-dark: var(--wp--preset--color--mega-area-navy-dark);
	--mega-area-navy-mid: var(--wp--preset--color--mega-area-navy-mid);
	--mega-area-navy-pale: var(--wp--preset--color--mega-area-navy-pale);


	/* Red Area ／ ソーシャル ／ PHPクラス: is-orange ※名前不一致 */
	--mega-area-red-dark: var(--wp--preset--color--mega-area-red-dark);
	--mega-area-red-mid: var(--wp--preset--color--mega-area-red-mid);
	--mega-area-red-pale: var(--wp--preset--color--mega-area-red-pale);


	/* Sky Area ／ 本部 ／ PHPクラス: is-gray ※名前不一致 */
	--mega-area-sky-dark: var(--wp--preset--color--mega-area-sky-dark);
	--mega-area-sky-mid: var(--wp--preset--color--mega-area-sky-mid);
	--mega-area-sky-pale: var(--wp--preset--color--mega-area-sky-pale);

	/* ============================================
     Service Page Area Color Aliases
     サービスページの領域カラーエイリアス
     ページクラス名（子テーマ側 service-layout.php の page_class）と変数名を対応させる
  ============================================ */
	--mega-service-dx-support: var(--mega-area-blue-mid);
	/* .dx-support         */
	--mega-service-space-design: var(--mega-area-green-mid);
	/* .space-design       */
	--mega-service-recruit: var(--mega-area-orange-mid);
	/* .recruit-support    */
	--mega-service-creative: var(--mega-area-pink-mid);
	/* .creative           */
	--mega-service-system: var(--mega-area-navy-mid);
	/* .system-development */
	--mega-service-social: var(--mega-area-red-mid);
	/* .social             */
	--mega-service-headquarters: var(--mega-area-sky-mid);
	/* .headquarters       */
}

:root :where(.wp-block-code) {
	background-color: var(--mega-color-light-gray);
	font-weight: 300;
	padding: var(--wp--preset--spacing--40);
}

:where(.wp-block-paragraph,
	.wp-block-heading,
	.wp-block-list) {
	overflow-wrap: anywhere;
}

/* ============================================
   common
   ============================================ */

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

html {
	font-size: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
	font-family: inherit;
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* 絶対フレーズが入る要素に適用 */
.absolute-phrase {
	font-family: var(--mega-font-serif);
	font-weight: 400;
	/* Regular */
}

/* front-page */
.home {
	.wp-block-query {
		h2 {
			font-size: var(--wp--preset--font-size--medium);
			margin-block-end: var(--mega-space-xs);
		}

		li {
			margin-block-end: var(--mega-space-md);
		}
	}
}

/* 背景色付きの帯。画面端までの全幅表示は、ブロックの「全幅」（alignfull）と併用する。 */
.mega-align-full {
	background-color: var(--mega-color-light-gray);
	padding: 2rem 1rem;

	.wp-block-heading {
		margin-bottom: var(--mega-space-xs);
	}
}

/* ============================================
   Accessibility
   ============================================ */

/* キーボード操作時のフォーカス表示（:where() のため詳細度0。子テーマで上書きしやすい） */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--mega-color-primary);
	outline-offset: 2px;
}

/* 視差・動きを減らす設定のユーザーには、アニメーションとスムーズスクロールを止める */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================
   Breadcrumb（[mg_breadcrumb] ショートコード）
   ============================================ */

.mg-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.mg-breadcrumb li+li::before {
	content: "›";
	/* 区切り記号をスクリーンリーダーに読ませない（対応ブラウザのみ） */
	content: "›" / "";
	margin-inline-end: 0.5em;
}