/* ============================================================
   main.css — 全局排版 / 按钮 / 容器
   复刻 www.jasgood.com（Shopify Prestige）的基础观感。
   token 定义见 ../../style.css。
   ============================================================ */

/* --- 基础 --- */
body {
	font-family: var(--jg-font);
	font-size: var(--jg-text-base);
	font-weight: 400;
	color: rgb(var(--jg-ink));
	background: rgb(var(--jg-paper));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   标题 —— 主站最强的识别特征
   大写 + 0.08em 字距 + weight 400（不是粗体！）
   Prestige 靠"字距和留白"而不是"字重"制造层级，加粗会立刻不像。
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--jg-font);
	font-weight: var(--jg-heading-weight);
	letter-spacing: var(--jg-heading-tracking);
	text-transform: var(--jg-heading-transform);
	color: rgb(var(--jg-ink));
	line-height: 1.3;
	margin-top: 0;
}

h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: var(--jg-text-base); }
h6 { font-size: var(--jg-text-sm); }

/* ============================================================
   链接 —— 主站是"下划线跟随"而不是变色
   ============================================================ */
a {
	color: rgb(var(--jg-ink));
	text-decoration: none;
	transition: opacity .2s ease;
}
a:hover { opacity: .62; }

/* 正文里的链接保留下划线，否则读者认不出来 */
.entry-content a:not(.jg-btn) {
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgb(var(--jg-ink) / .35);
}
.entry-content a:not(.jg-btn):hover {
	opacity: 1;
	text-decoration-color: rgb(var(--jg-ink));
}

/* ============================================================
   按钮 —— 近黑实心 / 直角 / 大写宽字距
   主站没有圆角按钮，加了 border-radius 立刻出戏。
   ============================================================ */
.jg-btn,
.wp-block-button__link,
button:not(.jg-plain),
input[type="submit"] {
	display: inline-block;
	font-family: var(--jg-font);
	font-size: var(--jg-text-sm);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(var(--jg-paper));
	background: rgb(var(--jg-ink));
	border: 1px solid rgb(var(--jg-ink));
	border-radius: 0;
	padding: .9em 2em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.jg-btn:hover,
.wp-block-button__link:hover,
button:not(.jg-plain):hover,
input[type="submit"]:hover {
	background: transparent;
	color: rgb(var(--jg-ink));
	opacity: 1;
}

/* 次级按钮：暖灰底（主站 --button-background 的另一档） */
.jg-btn--soft {
	background: rgb(var(--jg-sand));
	border-color: rgb(var(--jg-sand));
	color: rgb(var(--jg-ink));
}
.jg-btn--soft:hover {
	background: transparent;
	border-color: rgb(var(--jg-ink));
}

/* 幽灵按钮：描边 */
.jg-btn--ghost {
	background: transparent;
	color: rgb(var(--jg-ink));
}
.jg-btn--ghost:hover {
	background: rgb(var(--jg-ink));
	color: rgb(var(--jg-paper));
}

/* ============================================================
   容器
   ============================================================ */
.jg-container {
	width: 100%;
	max-width: var(--jg-container-lg);
	margin-inline: auto;
	padding-inline: var(--jg-gutter);
}
.jg-container--md { max-width: var(--jg-container-md); }
.jg-container--sm { max-width: var(--jg-container-sm); }
.jg-container--xs { max-width: var(--jg-container-xs); }

.jg-section { padding-block: var(--jg-section-y); }

/* 反色区块（主站用它做 CTA 和页脚） */
.jg-invert {
	background: rgb(var(--jg-ink));
	color: rgb(var(--jg-paper));
}
.jg-invert h1, .jg-invert h2, .jg-invert h3,
.jg-invert h4, .jg-invert h5, .jg-invert h6,
.jg-invert a { color: rgb(var(--jg-paper)); }

/* ============================================================
   小工具类
   ============================================================ */
.jg-eyebrow {
	font-size: var(--jg-text-xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgb(var(--jg-muted));
}
.jg-rule {
	border: 0;
	border-top: 1px solid rgb(var(--jg-border-soft));
	margin-block: var(--jg-stack-gap);
}

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

::selection {
	background: rgb(var(--jg-ink));
	color: rgb(var(--jg-paper));
}

/* 键盘可达性：Blocksy 默认 focus 环在近黑背景上看不见 */
:focus-visible {
	outline: 2px solid rgb(var(--jg-ink));
	outline-offset: 2px;
}
.jg-invert :focus-visible { outline-color: rgb(var(--jg-paper)); }