/**
 * 集光市 Jiguang Market — Base Styles
 * -------------------------------------------------------------
 * 全站基礎樣式：Reset、排版基準、容器、按鈕、標籤、無障礙 Focus、
 * 響應式 gutter / section rhythm、prefers-reduced-motion。
 * 所有 class 以 .jgs- 為前綴，避免與 Elementor / 外掛衝突。
 */

/* --- Reset（輕量，尊重 Elementor 既有 normalize） --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: auto; /* 不強制 smooth scroll */
}

body {
	margin: 0;
	background-color: var(--jgs-background);
	color: var(--jgs-text);
	font-family: var(--jgs-font-body);
	font-size: var(--jgs-font-body);
	line-height: var(--jgs-leading-body);
	font-weight: var(--jgs-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--jgs-secondary);
	text-decoration: none;
	transition: color var(--jgs-duration-fast) var(--jgs-ease);
}

a:hover {
	color: var(--jgs-accent);
}

/* --- 標題排版 --- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--jgs-font-heading);
	color: var(--jgs-secondary);
	line-height: var(--jgs-leading-heading);
	font-weight: var(--jgs-weight-semibold);
	margin: 0 0 0.6em;
	letter-spacing: var(--jgs-tracking-tight);
}

h1 { font-size: var(--jgs-font-h1); }
h2 { font-size: var(--jgs-font-h2); }
h3 { font-size: var(--jgs-font-h3); }
h4 { font-size: var(--jgs-font-h4); }

p {
	margin: 0 0 1.2em;
}

/* 英文小標（Eyebrow / Kicker） */
.jgs-eyebrow {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-label);
	letter-spacing: var(--jgs-tracking-label);
	text-transform: uppercase;
	color: var(--jgs-accent);
	font-weight: var(--jgs-weight-semibold);
	display: inline-block;
	margin: 0 0 0.8em;
}

/* --- 容器 --- */
.jgs-container {
	width: 100%;
	max-width: var(--jgs-container-main);
	margin-inline: auto;
	padding-inline: var(--jgs-gutter);
}

.jgs-container--wide { max-width: var(--jgs-container-wide); }
.jgs-container--content { max-width: var(--jgs-container-content); }
.jgs-container--reading { max-width: var(--jgs-container-reading); }

/* --- Section rhythm --- */
.jgs-section {
	padding-block: var(--jgs-section-y);
}

/* --- 按鈕 --- */
.jgs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	font-weight: var(--jgs-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--jgs-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--jgs-duration-fast) var(--jgs-ease),
		background-color var(--jgs-duration-fast) var(--jgs-ease),
		color var(--jgs-duration-fast) var(--jgs-ease),
		border-color var(--jgs-duration-fast) var(--jgs-ease);
}

.jgs-btn:hover {
	transform: translateY(-1px);
}

.jgs-btn--primary {
	background-color: var(--jgs-primary);
	color: var(--jgs-primary-ink);
}

.jgs-btn--primary:hover {
	background-color: #EFC92F;
	color: var(--jgs-primary-ink);
}

.jgs-btn--secondary {
	background-color: var(--jgs-secondary);
	color: var(--jgs-white);
}

.jgs-btn--secondary:hover {
	background-color: var(--jgs-secondary-dark);
	color: var(--jgs-white);
}

.jgs-btn--ghost {
	background-color: transparent;
	color: var(--jgs-secondary);
	border-color: var(--jgs-border);
}

.jgs-btn--ghost:hover {
	border-color: var(--jgs-secondary);
	color: var(--jgs-secondary);
}

/* --- 標籤（分類 / 城市 / 狀態） --- */
.jgs-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-label);
	font-weight: var(--jgs-weight-medium);
	letter-spacing: 0.02em;
	padding: 5px 12px;
	border-radius: var(--jgs-radius-pill);
	background-color: var(--jgs-white);
	border: 1px solid var(--jgs-border);
	color: var(--jgs-muted);
}

.jgs-tag--accent {
	background-color: var(--jgs-accent-soft);
	border-color: transparent;
	color: var(--jgs-accent);
}

.jgs-tag--primary {
	background-color: var(--jgs-primary);
	border-color: transparent;
	color: var(--jgs-primary-ink);
}

/* 活動狀態顏色（以背景 + 文字雙重辨識，不單靠顏色） */
.jgs-status { font-weight: var(--jgs-weight-semibold); }
.jgs-status--upcoming { color: var(--jgs-info); }
.jgs-status--this-week { color: var(--jgs-accent); }
.jgs-status--ongoing { color: var(--jgs-success); }
.jgs-status--ended { color: var(--jgs-muted); }
.jgs-status--postponed,
.jgs-status--cancelled { color: var(--jgs-danger); }

/* --- 無障礙：可見 Focus --- */
:focus-visible {
	outline: 3px solid var(--jgs-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.jgs-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--jgs-secondary);
	color: var(--jgs-white);
	padding: 12px 20px;
	z-index: var(--jgs-z-modal);
	border-radius: 0 0 var(--jgs-radius-md) 0;
}

.jgs-skip-link:focus {
	left: 0;
	color: var(--jgs-white);
}

/* 螢幕閱讀器專用 */
.jgs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 響應式 gutter / section --- */
@media (max-width: 1024px) {
	:root {
		--jgs-gutter: var(--jgs-gutter-tablet);
		--jgs-section-y: var(--jgs-section-y-tablet);
	}
}

@media (max-width: 767px) {
	:root {
		--jgs-gutter: var(--jgs-gutter-mobile);
		--jgs-section-y: var(--jgs-section-y-mobile);
	}
}

/* --- 動畫 utility --- */
.jgs-fade-up {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--jgs-duration) var(--jgs-ease),
		transform var(--jgs-duration) var(--jgs-ease);
}

.jgs-fade-up.is-visible {
	opacity: 1;
	transform: none;
}

/* --- 尊重使用者減少動畫偏好 --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.jgs-fade-up {
		opacity: 1;
		transform: none;
	}
}