@charset "UTF-8";

/*!
 * MUNI KYOTO - Base Styles
 * 責務：CSS 変数、タイポグラフィ、body・リンク・見出し等の基本要素、Gutenberg の最小調整
 * 入れないもの：ブラウザ差異の吸収（reset.css）、コンポーネント・ページ固有のスタイル
 * 依存：reset.css、google-font-poppins
 *
 * @package MUNIKYOTO_WP_THEME
 */

/* ==================================================
   CSS 変数定義
================================================== */

:root {
	/* カラー */
	--color-text-sub: #fff;
	--color-text-main: #333;
	--color-subtitle: #D4BFAF;
	--color-accent: #756B66;
	--color-accent-hover: #5E5652;
	--color-accent-glow: rgb(102 93 82 / .2);
	--color-bg-main: #FAFBF9;
	--color-bg-gray: #F2F2F2;
	--color-bg-emphasis: #F8F6F2;
	--color-bg-overlay: rgb(0 0 0 / .8);
	--color-link: #2A6F97;
	--color-text-shadow: rgb(0 0 0 / .7);
	--color-shadow-medium: rgb(0 0 0 / .15);
	--color-shadow-subtle: rgb(0 0 0 / .05);
	--color-card: #FAF6F2;
	--color-border: #E0E0E0;
	--color-header-bg: rgb(255 255 255 / .9);

	/* コンテナ幅 */
	--container-max-width: 110rem;

	/* 余白 */
	--spacing-unit-small: 0.8rem;
	--spacing-unit-medium: 1.6rem;
	--spacing-unit-large: 2.4rem;
	--spacing-unit-xlarge: 4rem;
	--section-padding-y: 6rem;
	--section-margin-bottom: 12rem;

	/* フォントサイズ */
	--font-size-base: 1.6rem;
	--font-size-small: 1.4rem;
	--font-size-xsmall: 1.2rem;
	--font-size-large: 1.8rem;
	--font-size-xl: 2.4rem;

	/* トランジション */
	--transition-speed-fast: 0.2s;
	--transition-speed-medium: 0.3s;
	--transition-speed-slow: 0.5s;
	--transition-timing-ease: ease;

	/* z-index（数値が大きいほど前面。ヘッダーは独立した重なりの文脈のため、ヘッダー内の値は外と比較できない） */
	--z-header: 800; /* PC ヘッダー */
	--z-header-sp: 1000; /* SP ヘッダー（sp-nav・ハンバーガー・ロゴを内包） */
	--z-sp-logo: 10001; /* SP ロゴ・ハンバーガー（通常時）。ヘッダー内部 */
	--z-lang-switcher: 900; /* 言語切替 */
	--z-lang-toggle: 910; /* 言語切替トグル */
	--z-lang-dropdown: 920; /* 言語切替ドロップダウン */
	--z-reserve-dropdown: 930; /* 予約ドロップダウン */
	--z-modal: 9999; /* モーダル（ヘッダーより前面） */
	--z-sp-footer: 99999; /* SP 固定予約バー（ヘッダーより前面。sp-nav 展開中も表示される） */
	--z-sp-nav: 100000; /* SP ナビ。ヘッダー内部の値で、画面全体ではモーダル・固定予約バーより背面 */
	--z-hamburger-open: 100001; /* ヘッダー内部で sp-nav より前面（× を見せる） */
	--z-reserve-menu: 100001; /* 予約メニュー */

	/* 行間 */
	--line-height-base: 1.8;
	--line-height-tight: 1.3;

	/* 角丸 */
	--border-radius-sm: 0.4rem;
	--border-radius-md: 0.8rem;
	--border-radius-lg: 1.6rem;

	/* ボーダー */
	--border-width: 0.1rem;
}

/* ==================================================
   基本要素
================================================== */

/* タップ時のハイライトを消す */
* {
	-webkit-tap-highlight-color: transparent;
}

html {
	font-size: 62.5%; /* 1rem = 10px */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: "游明朝", "Yu Mincho", serif;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
}

/* ==================================================
   タイポグラフィ
================================================== */

h1 {
	font-size: var(--font-size-xl);
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: var(--font-size-large);
}

h4 {
	font-size: var(--font-size-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	line-height: var(--line-height-tight);
	margin-top: 1em;
	margin-bottom: 1em;
}

td h4 {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

p {
	font-size: var(--font-size-base);
	margin-bottom: var(--spacing-unit-small);
}

/* MUNI KYOTO では strong を太字だけでなくアクセントカラーでも強調する（意図的な仕様） */
strong {
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.03em;
}

/* ==================================================
   Gutenberg
   ※ 見出しブロックは <h2 class="wp-block-heading"> と、要素自身にクラスが付く。
================================================== */

/*
 * functions.php の editor-color-palette「Accent」(#756B66) と、
 * テーマ変数 --color-accent を同期させる。
 * パレットの色を変えたら、:root の --color-accent も同じ値にすること。
 * 対象は見出しブロックのみ。
 */
.wp-block-heading.has-accent-color {
	color: var(--color-accent) !important;
}

/* ==================================================
   モバイル対応（768px 以下）
================================================== */

@media (max-width: 768px) {
	:root {
		--spacing-unit-medium: 1.2rem;
		--spacing-unit-large: 1.6rem;
		--spacing-unit-xlarge: 2.4rem;
		--section-margin-bottom: 6rem;
		--font-size-base: 1.4rem;
		--font-size-small: 1.3rem;
		--font-size-large: 1.6rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		line-height: 1.5;
		margin-top: 0.7em;
		margin-bottom: 0.7em;
	}

	h2 {
		font-size: 1.8rem;
	}

	p {
		margin-bottom: var(--spacing-unit-medium);
	}
}