/*
 * ETheme-Block — Core 元素语义类（前后台均加载）。
 *
 * 服务于古腾堡基础块（标题 / 段落 / 图片）的语义化选项。
 *
 * 设计原则：
 * 除「标题角色」与「标题装饰」外，其余选项一律复用主题已有工具类
 * （.eth-text-* / .eth-max-w-* / .eth-aspect-* / .eth-radius-* / .eth-shadow-*），
 * 本文件不重复定义任何字号阶梯、宽度、比例、圆角、阴影。
 *
 * 关于标题装饰：绘制逻辑与 split 区块的标题装饰保持一致（同为伪元素实现），
 * 但使用独立的类名与变量 —— split 的样式表按需加载（仅页面存在该区块时），
 * 而基础块标题的装饰必须随时可用，故在此独立定义，避免跨区块的加载依赖。
 */

/* =========================================================
 * 1. 标题角色
 * ---------------------------------------------------------
 * 需要覆盖主题 `.eth-section h1–h6 { font-weight: … }` 的声明，
 * 故把作用域收敛到 .eth-section 内以取得足够特异性（0,2,0 > 0,1,1）。
 * 该选择器在前后台同样匹配：编辑器画布内标题也位于 .eth-section 之中。
 * ========================================================= */
.eth-section .etb-heading-role-primary {
	font-weight: var(--eth-fw-bold);
}

/* 副标题
 * 字号由本类决定，不继承 h 标签层级 —— 这样「副标题」在任何标题标签下
 * 都呈现同一层级的小号弱化样式，标签本身仍可用于维持文档大纲。 */
.eth-section .etb-heading-role-secondary {
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-medium);
	line-height: var(--eth-lh-heading);
	color: var(--eth-text-muted);
}

/* 标题角色只提供默认视觉；用户显式选择的字号必须优先。继续沿用既有
 * eth-text-* 保存类，避免改变 3.0.7 起已保存 Core Heading 的标记。 */
.eth-section .etb-heading-role-secondary.eth-text-l {
	font-size: var(--eth-text-l);
}

.eth-section .etb-heading-role-secondary.eth-text-xl {
	font-size: var(--eth-text-xl);
}

.eth-section .etb-heading-role-secondary.eth-text-2xl {
	font-size: var(--eth-text-2xl);
}

.eth-section .etb-heading-role-secondary.eth-text-3xl {
	font-size: var(--eth-text-3xl);
}

/* 与 Section Header 同源的受控标题色。仅在用户显式选择时输出类；
 * !important 用于确定性覆盖 Core 的内联自定义色，切回“自动”即恢复原值。 */
.wp-block-heading.etb-heading-color-theme {
	color: var(--eth-text-title, #111) !important;
}

.wp-block-heading.etb-heading-color-primary {
	color: var(--eth-primary, #4f46e5) !important;
}

.wp-block-heading.etb-heading-color-secondary {
	color: var(--eth-secondary, #0f766e) !important;
}

.wp-block-heading.etb-heading-color-dark {
	color: var(--eth-dark, #111) !important;
}

.wp-block-heading.etb-heading-color-light {
	color: var(--eth-light, #fff) !important;
}

/* =========================================================
 * 2. 标题装饰
 * ---------------------------------------------------------
 * 三种装饰：curve（单弧线）/ double-curve（双弧线）/ accent-line（强调线）。
 * 用 ::after / ::before 绘制，不改变标题自身的盒模型。
 * ========================================================= */
.etb-heading--decoration-curve,
.etb-heading--decoration-double-curve,
.etb-heading--decoration-accent-line {
	--etb-heading-decoration-color: var(--eth-primary);
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* 单弧线 */
.etb-heading--decoration-curve::after {
	content: "";
	display: block;
	width: 2.5em;
	height: 0.25rem;
	margin-top: var(--eth-space-2xs);
	border-bottom: 2px solid var(--etb-heading-decoration-color);
	border-radius: 0 0 50% 50%;
	pointer-events: none;
}

/* 双弧线：主弧 + 左侧偏移的副弧 */
.etb-heading--decoration-double-curve::after {
	content: "";
	display: block;
	width: 2.5em;
	height: 0.2rem;
	margin-top: var(--eth-space-2xs);
	border-bottom: 2px solid var(--etb-heading-decoration-color);
	border-radius: 0 0 50% 50%;
	pointer-events: none;
}

.etb-heading--decoration-double-curve::before {
	content: "";
	position: absolute;
	bottom: -0.2rem;
	left: var(--eth-space-2xs);
	width: 1.5em;
	height: 0.2rem;
	border-bottom: 2px solid var(--etb-heading-decoration-color);
	border-radius: 0 0 50% 50%;
	opacity: 0.6;
	pointer-events: none;
}

/* 强调线 */
.etb-heading--decoration-accent-line::after {
	content: "";
	display: block;
	width: 2.5em;
	height: 3px;
	margin-top: var(--eth-space-2xs);
	background: var(--etb-heading-decoration-color);
	border-radius: var(--eth-radius-full);
	pointer-events: none;
}

/* 装饰颜色（默认已在上面声明为主色） */
.etb-heading--decoration-color-inherit {
	--etb-heading-decoration-color: currentColor;
}

.etb-heading--decoration-color-secondary {
	--etb-heading-decoration-color: var(--eth-secondary);
}

.etb-heading--decoration-color-tertiary {
	--etb-heading-decoration-color: var(--eth-tertiary);
}

/* ETheme Core Group variations: stable semantic defaults on top of Core layout. */
.wp-block-group.eth-layout-stack {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--eth-content-gap, var(--eth-space-s, 1rem));
	width: 100%;
	min-width: 0;
}

.wp-block-group.eth-layout-row {
	display: flex;
	box-sizing: border-box;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--eth-content-gap, var(--eth-space-s, 1rem));
	align-items: center;
	width: 100%;
	min-width: 0;
}

.wp-block-group.eth-layout-row > * {
	margin-block: 0;
}