/*
Theme Name: TourGator Theme
Theme URI: https://tourgator.jp
Author: TourGator / Bargator Inc.
Description: TourGator 専用テーマ。Bedrock + Gutenberg ブロックパターン + Tour CPT で構成。
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: tourgator
Tags: full-site-editing, block-patterns
*/

/* Theme styles are primarily defined via theme.json + per-pattern CSS.
   Place global resets / utility CSS for non-FSE areas below as needed. */

/* ============================================================================
 * デザイントークン（単一の真実の源 / single source of truth）
 * ----------------------------------------------------------------------------
 * サイト全体の色・影・トランジションをここに集約する。style.css は最初に・全ページで
 * 読み込まれ、他のすべてのスタイルシートが依存（deps）しているため、ここで定義した
 * カスタムプロパティは header.css / single-tour.css / archive-tour.css / tour-list.css /
 * cf7.css から参照できる。
 *
 * 色は theme.json の palette（--wp--preset--color--*）を一次情報とし、ここでは
 * セマンティックな別名（brand / ink / muted …）として束ねる。fallback リテラルは
 * WP のグローバルスタイルが出力されない文脈（編集前プレビュー等）への保険。
 *
 * Figma などのデザインツールへのトークン書き出しは theme.json + この :root を
 * 元データとする（docs/design-tokens.json / docs/figma-export.md 参照）。
 * ========================================================================== */
:root {
	/* --- Brand --- */
	--tg-color-brand: var(--wp--preset--color--brand-red, #d80000);
	--tg-color-brand-dark: var(--wp--preset--color--brand-red-dark, #b00000);
	--tg-color-brand-soft: rgba(216, 0, 0, 0.5);

	/* --- Neutral ramp --- */
	--tg-color-ink: var(--wp--preset--color--ink, #333333);
	--tg-color-muted: var(--wp--preset--color--muted, #666666);
	--tg-color-subtle: var(--wp--preset--color--subtle, #888888);
	--tg-color-soft: var(--wp--preset--color--soft, #f8f9fa);
	--tg-color-white: var(--wp--preset--color--white, #ffffff);
	--tg-color-black: var(--wp--preset--color--black, #000000);
	--tg-color-footer-bg: var(--wp--preset--color--footer-black, #111111);

	/* --- Surfaces / lines --- */
	--tg-color-bg: var(--tg-color-white);
	--tg-color-border: #e9ecef;
	--tg-color-border-soft: #ececec;

	/* --- Elevation --- */
	--tg-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
	--tg-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
	--tg-shadow-elevated: 0 15px 40px rgba(0, 0, 0, 0.1);

	/* --- Motion --- */
	--tg-transition: 0.25s ease;
}

/* ---- 共通スライダー矢印（見た目のみ）----
 * サイト内 3 箇所のスライダー矢印（ツアー写真 / HOME カード / HOME ヒーロー）の
 * 「赤い正方形ボタン＋白い FontAwesome シェブロン」という見た目をここに一元化する。
 * 記号は ASCII の < > や ❮ ❯ 装飾文字ではなく fa-chevron-* に統一。
 *
 * 配置（絶対配置 or ヒーローの flex 両端）・left/right オフセット・hover の移動方向・
 * サイズの微調整は各スライダーごとに事情が違うため、各箇所側で指定する。
 * ここは色・サイズ・中央寄せ・hover の色変化だけを持つ。 */
.tg-slider-arrow {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background-color: var(--tg-color-brand);
	color: var(--tg-color-white);
	border: 0;
	border-radius: 0;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	z-index: 20;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* FA chevron はグリフが em ボックス中央にあるため、flex 中央寄せと合わせて
 * 旧 ASCII 記号の「左寄り」が解消される。 */
.tg-slider-arrow:hover {
	background-color: var(--tg-color-brand-dark);
}