/* 与旧版钰民站点保持一致，统一使用可合法商用的 Inter 字体；加载失败时回退到系统无衬线字体。 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --yumin-teal: #00a99d;
  --yumin-teal-dark: #008f86;
  --yumin-ink: #131c2c;
  --yumin-text: #20242b;
  --yumin-muted: #6e747a;
  --yumin-soft: #eefbfa;
  --yumin-shadow: 0 16px 36px rgba(10, 38, 45, .12);
  /*
   * 首屏内容轨道以 1920px PSD 画布的 1200px 为上限，并在 1024px 至 1920px
   * 之间按固定斜率连续收缩。窄于该区间时，由 20px 的两侧安全边距接管，
   * 防止纯 vw 比例将标题和描述压缩到不可读的宽度。
   */
  --yumin-hero-track-max: 1200px;
  --yumin-hero-track-fluid: clamp(944px, calc(28.5714vw + 651.4286px), var(--yumin-hero-track-max));
  --yumin-hero-track-gutter: 20px;
  --yumin-full-bleed-scrollbar-compensation: 7.5px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
/* Reason: 页头顶部留白按 PSD 舞台继续收窄，保留正文补偿与移动端独立高度。 */
body { --yumin-header-height: clamp(128px, 8.854167vw, 170px); padding-top: var(--yumin-header-height) !important; overscroll-behavior-y: none; color: var(--yumin-text); background: #fff; }
/* Reason: WordPress admin bar 已通过 html 的顶部偏移参与布局，正文不能再次把该高度计入页头补偿。 */
.yumin-main { margin-block-start: 0 !important; overflow: clip; }
/* Reason: FSE 默认区块间距会在固定页头与首屏之间制造空白，首页首块必须紧贴页头底部。 */
.yumin-main > .wp-block-post-content,
.yumin-main > .wp-block-post-content > :first-child { margin-block-start: 0 !important; }
.yumin-container,
.yumin-content-container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
/*
 * 首屏轨道只约束眉题、标题和描述的共同左基线；背景、遮罩、首屏高度以及
 * 页面专属的标题/描述最大宽度均继续由各自变体负责，避免正文容器被误收窄。
 */
.yumin-hero-track {
  width: min(
    calc(100% - var(--yumin-hero-track-gutter) * 2),
    var(--yumin-hero-track-fluid)
  );
  max-width: none;
  margin-inline: auto;
}
/*
 * Company 的全宽页面外壳以 100vw 绘制，并为 Windows 滚动条使用 7.5px
 * 的半宽补偿。首屏轨道需扣除完整滚动条宽度并反向偏移半宽，才能在所有
 * 响应式区间与普通页面基线重合；背景和正文模块不受此规则影响。
 */
.yumin-company-page .yumin-hero-track {
  width: min(
    calc(100% - var(--yumin-hero-track-gutter) * 2 - var(--yumin-full-bleed-scrollbar-compensation) * 2),
    var(--yumin-hero-track-fluid)
  );
}
.yumin-company-page:not(.yumin-company-page--global-presence) .yumin-company-hero__inner {
  left: calc(var(--yumin-full-bleed-scrollbar-compensation) * -1);
}
.yumin-site-header { position: fixed; z-index: 20; top: var(--wp-admin--admin-bar--height, 0px); right: 0; left: 0; background: #fff; }
.yumin-site-header__inner { position: relative; display: block; height: var(--yumin-header-height); min-height: 0; max-width: none; margin: 0 auto; padding: 0; container-type: inline-size; }
/* Reason: 页头按首页 PSD 1920px 画布定位；Logo 与导航是同一视觉舞台，不使用内容容器的两端分布。 */
.yumin-site-header .yumin-site-brand { position: absolute; top: clamp(22px, 2.083333cqw, 40px); left: clamp(28px, 2.81cqw, 54px); width: clamp(155px, 14.64cqw, 281px); }
.yumin-site-brand img { width: 100%; }
.yumin-site-header .wp-block-navigation { position: absolute; top: clamp(36px, 3.385417cqw, 65px); left: clamp(300px, 26.56cqw, 510px); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: clamp(16px, 1.30cqw, 25px); font-weight: 700; }
.yumin-site-header .wp-block-navigation__container { gap: clamp(28px, 4.06cqw, 78px); }
.yumin-site-header .wp-block-navigation-item { position: relative; }
.yumin-site-header .wp-block-navigation__container > .yumin-nav-is-current > a::after { position: absolute; top: clamp(31px, 2.604167cqw, 50px); left: 0; width: 100%; height: clamp(3px, .21cqw, 4px); content: ""; background: var(--yumin-teal); border-radius: 999px; }
/* Reason: PSD 将 Contact 作为页头唯一的行动入口，使用固定比例胶囊；按目标地址定位，避免菜单增删改变样式归属。 */
.yumin-site-header .wp-block-navigation-item > .wp-block-navigation-item__content[href$="/contact/"] { display: inline-flex; align-items: center; justify-content: center; width: clamp(138px, 12.05cqw, 232px); height: clamp(40px, 2.8125cqw, 54px); padding: 0; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #01afa5 0%, #00928e 100%); }
.yumin-site-header .wp-block-navigation-item > .wp-block-navigation-item__content[href$="/contact/"]:hover,
.yumin-site-header .wp-block-navigation-item.yumin-nav-is-current > .wp-block-navigation-item__content[href$="/contact/"] { color: #fff; background: linear-gradient(180deg, #01afa5 0%, #00928e 100%); }
.yumin-site-header .wp-block-navigation-item.yumin-nav-is-current > .wp-block-navigation-item__content[href$="/contact/"]::after { display: none; }
@media (min-width: 783px) {
  /* Reason: 导航本身绝对定位于 PSD 页头舞台；显式恢复 WP 桌面响应容器，避免被当作纵向弹层。 */
  .yumin-site-header .wp-block-navigation { width: clamp(660px, 66.2cqw, 1271px); height: auto; }
  .yumin-site-header .wp-block-navigation__responsive-container,
  .yumin-site-header .wp-block-navigation__responsive-container-content { position: static !important; display: block !important; width: 100%; height: auto; background: transparent; transform: none !important; }
  /* Reason: 一级菜单必须保持同一行；二级菜单由绝对定位脱离布局，不能把 Contact 挤到下一行。 */
  .yumin-site-header .wp-block-navigation__container { position: static !important; display: flex !important; flex-direction: row; flex-wrap: nowrap !important; justify-content: flex-start; transform: none !important; }
  .yumin-site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container { display: flex; visibility: hidden; opacity: 0; pointer-events: none; }
  .yumin-site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
  .yumin-site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container { visibility: visible; opacity: 1; pointer-events: auto; }
 }
@media (min-width: 783px) and (max-width: 1100px) {
  /* Reason: 窄桌面仍保留 PSD 的桌面页头，但压缩导航间距，避免 Contact 胶囊换行并撑高页头。 */
  .yumin-site-header .wp-block-navigation { left: 220px; width: calc(100% - 240px); }
  .yumin-site-header .wp-block-navigation__container { gap: 20px; flex-wrap: nowrap !important; }
  .yumin-site-header .wp-block-navigation-item > .wp-block-navigation-item__content[href$="/contact/"] { width: 138px; height: 40px; }
}
.yumin-site-header .wp-block-navigation a { color: #73777d; text-decoration: none; }
.yumin-site-header .wp-block-navigation .wp-block-navigation-item__content { color: #73777d; }
.yumin-site-header .wp-block-navigation a:hover,
.yumin-site-header .current-menu-item > a,
.yumin-site-header .yumin-nav-is-current > .wp-block-navigation-item__content { color: var(--yumin-teal); }
.yumin-site-brand { display: inline-flex; align-items: center; }
.yumin-site-brand img { display: block; height: auto; }
.yumin-site-footer { padding: 64px 40px 85px; border-top: 1px solid rgb(89, 91, 101); color: #fff; background: #131826; }
.yumin-site-footer__inner { width: 62.5vw; max-width: 1200px; margin: 0 auto; }
.yumin-site-footer .yumin-site-footer__columns { display: grid !important; grid-template-columns: 2fr 1fr 1fr !important; column-gap: 0; margin: 0; }
.yumin-site-footer__columns > .wp-block-column { margin: 0; }
.yumin-site-footer__contact .yumin-site-brand { width: 120px; padding: 8px 9px; margin: 0 0 18px; background: #fff; border-radius: 4px; }
.yumin-site-footer__company { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #fff; font-size: 14px; font-weight: 700; }
.yumin-site-footer__address { padding-left: 22px; margin: 0 0 12px; color: rgba(255,255,255,.58); font-size: 11px; line-height: 1.45; }
.yumin-site-footer__detail { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; }
.yumin-site-footer__icon { display: inline-flex; flex: 0 0 14px; width: 14px; color: var(--yumin-teal); line-height: 0; justify-content: center; }
.yumin-site-footer__icon svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
/* Reason: PSD 中 WhatsApp 使用纯对话气泡轮廓，不显示气泡内部的电话线条。 */
.yumin-site-footer__contact > p:nth-of-type(3) .yumin-site-footer__icon svg path:nth-child(2) { display: none; }
.yumin-site-footer__links h4 { margin: 2px 0 16px; color: #fff; font-size: 14px; font-weight: 700; }
.yumin-site-footer__navigation .wp-block-navigation__container { display: grid; gap: 12px; }
.yumin-site-footer__navigation .wp-block-navigation-item__content { padding: 0; color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none; }
.yumin-site-footer__navigation .wp-block-navigation-item__content:hover { color: #fff; }
.yumin-site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 74px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.yumin-site-footer__bottom p { margin: 0; color: rgba(255,255,255,.48); font-size: 11px; }
.yumin-site-footer__bottom a { color: rgba(255,255,255,.58); text-decoration: none; }
.yumin-site-footer__separator { margin-left: 24px; color: rgba(255,255,255,.58); }

@media (max-width: 1100px) {
  /* Reason: 1100px 以下无法可靠容纳完整桌面导航，统一切换为 WordPress 原生覆盖式菜单。 */
  body { --yumin-header-height: 88px; }
  .yumin-site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--yumin-header-height); min-height: var(--yumin-header-height); padding: 0 clamp(20px, 4vw, 48px); }
  .yumin-site-header .yumin-site-brand { position: static; flex: 0 1 auto; width: clamp(155px, 22vw, 220px); }
  .yumin-site-header .wp-block-navigation { position: static; width: auto; margin-left: auto; font-size: 18px; }
  .yumin-site-header .wp-block-navigation__responsive-container-open { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--yumin-teal); }
  .yumin-site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
  .yumin-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .yumin-site-header .wp-block-navigation__responsive-container.is-menu-open { position: fixed; z-index: 100000; top: var(--yumin-header-height); right: 0; bottom: 0; left: 0; display: flex !important; padding: 0 24px 32px !important; overflow-y: auto; background: #fff !important; color: var(--yumin-text) !important; }
  .yumin-site-header .wp-block-navigation__responsive-container-close { top: 18px; right: 20px; width: 40px; height: 40px; color: var(--yumin-teal); }
  .yumin-site-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
  .yumin-site-header .wp-block-navigation__responsive-close,
  .yumin-site-header .wp-block-navigation__responsive-dialog { width: 100%; max-width: none; }
  .yumin-site-header .wp-block-navigation__responsive-container-content { display: flex !important; align-items: stretch; flex-direction: column; flex-wrap: nowrap; padding-top: 74px !important; }
  .yumin-site-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container { display: flex !important; align-items: stretch; flex-direction: column; flex-wrap: nowrap; gap: 0 !important; width: 100%; }
  .yumin-site-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item { display: flex; flex-wrap: wrap; align-items: center; width: 100%; border-bottom: 1px solid #e8efee; }
  .yumin-site-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { flex: 1 1 auto; padding: 18px 0 !important; color: var(--yumin-text); font-size: 19px; line-height: 1.3; }
  .yumin-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { display: inline-flex; width: 36px; height: 36px; margin: 0; align-items: center; justify-content: center; color: var(--yumin-teal); }
  .yumin-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { position: static !important; flex: 0 0 100%; width: 100% !important; min-width: 0 !important; height: auto; padding: 0 0 12px 18px !important; border: 0; opacity: 1; visibility: visible; background: transparent; }
  .yumin-site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 10px 0 !important; color: var(--yumin-muted); font-size: 16px; }
  .yumin-site-header .wp-block-navigation__responsive-container-content .yumin-nav-is-current > .wp-block-navigation-item__content { color: var(--yumin-teal); }
  .yumin-site-header .wp-block-navigation__responsive-container-content .yumin-nav-is-current > .wp-block-navigation-item__content::after { display: none; }
  /* Reason: 移动端导航收进弹层，Contact 不占用桌面胶囊尺寸。 */
  .yumin-site-header .wp-block-navigation-item > .wp-block-navigation-item__content[href$="/contact/"] { display: block; width: auto; height: auto; padding: 18px 0 !important; border-radius: 0; color: var(--yumin-text); background: transparent; }
  .yumin-site-header .wp-block-navigation-item > .wp-block-navigation-item__content[href$="/contact/"]:hover,
  .yumin-site-header .wp-block-navigation-item.yumin-nav-is-current > .wp-block-navigation-item__content[href$="/contact/"] { color: var(--yumin-teal); background: transparent; }
}

@media (max-width: 782px) {
  body { --yumin-header-height: 72px; }
  .yumin-site-header .wp-block-navigation { font-size: 16px; }
  .yumin-site-header .yumin-site-brand { width: 155px; }
  .yumin-site-footer { padding: 48px 20px 28px; }
  .yumin-site-footer__inner { width: auto; }
  .yumin-site-footer .yumin-site-footer__columns { display: grid !important; grid-template-columns: 1fr !important; row-gap: 32px; }
  .yumin-site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 32px; }
}

@media (min-width: 390px) and (max-width: 782px) {
  /* Reason: 联系信息独占首行；390px 起两个链接组各有充足的可读宽度，可并排节省纵向空间。 */
  .yumin-site-footer .yumin-site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 32px; }
  .yumin-site-footer__contact { grid-column: 1 / -1; }
}

/*
 * 普通 Blog 文章使用独立阅读轨道：只约束模板壳层的宽度和高度，
 * 不设置正文区块的字号、行高、颜色或间距，确保后台编辑的排版可以原样发布。
 */
.yumin-article-main {
	min-height: max(360px, calc(100svh - var(--yumin-header-height) - 360px));
}

.yumin-article {
	width: min(800px, calc(100% - 40px));
	margin-right: auto;
	margin-left: auto;
	padding: clamp(48px, 5.5vw, 88px) 0 clamp(72px, 8vw, 128px);
}

.yumin-article__header {
	margin: 0 0 40px;
}

/* 标题和元信息是文章模板的一部分；正文区块的原有视觉设置不受影响。 */
.yumin-article__header .wp-block-post-title {
	margin: 0 0 18px;
}

.yumin-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	color: var(--yumin-muted);
}

.yumin-article__meta > * {
	margin: 0;
}

/* 媒体和长链接不得突破阅读轨道；该规则不改变区块在后台保存的尺寸与样式。 */
.yumin-article__content img,
.yumin-article__content video,
.yumin-article__content iframe {
	max-width: 100%;
	height: auto;
}

.yumin-article__content a,
.yumin-article__content td,
.yumin-article__content th {
	overflow-wrap: anywhere;
}

.yumin-article__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

/*
 * 图文文章使用可由 Gutenberg/经典 HTML 共同输出的语义类，形成接近长图文阅读的
 * 导语、引用和清单节奏；所有选择器限制在普通文章正文内，不影响其它页面区块。
 */
.yumin-article__content > p,
.yumin-article__content > ul,
.yumin-article__content > ol {
	color: #35434d;
	font-size: 18px;
	line-height: 1.9;
}

.yumin-article__content h2 {
	margin: 56px 0 18px;
	padding-left: 16px;
	border-left: 4px solid #00a99d;
	color: #153f3e;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.25;
}

.yumin-article__content .yumin-article-lead {
	margin: 0 0 34px;
	padding: 22px 24px;
	border-left: 3px solid #00a99d;
	color: #153f3e;
	background: #eefbfa;
	font-size: 20px;
	line-height: 1.75;
}

.yumin-article__content .yumin-article-visual {
	margin-top: 38px;
	margin-bottom: 38px;
}

.yumin-article__content figcaption {
	margin-top: 10px;
	color: #6b7780;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.yumin-article__content .yumin-article-callout,
.yumin-article__content .yumin-article-next-step {
	margin: 36px 0;
	padding: 26px 28px;
	border-radius: 2px;
	background: #f2f7f7;
}

.yumin-article__content .yumin-article-callout strong,
.yumin-article__content .yumin-article-next-step strong {
	display: block;
	margin-bottom: 8px;
	color: #00a99d;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.yumin-article__content .yumin-article-checklist {
	margin: 26px 0 0;
	padding: 22px 28px 22px 48px;
	border-top: 1px solid #d9e7e5;
	border-bottom: 1px solid #d9e7e5;
	color: #35434d;
	font-size: 18px;
	line-height: 1.8;
}

@media (max-width: 700px) {
	.yumin-article__content > p,
	.yumin-article__content > ul,
	.yumin-article__content > ol { font-size: 17px; }
	.yumin-article__content .yumin-article-lead { padding: 18px; font-size: 18px; }
	.yumin-article__content .yumin-article-callout,
	.yumin-article__content .yumin-article-next-step { padding: 20px; }
	.yumin-article__content h2 { margin-top: 44px; padding-left: 12px; }
}

/*
 * Contact 设计稿未交付期间只保留 Header、响应式空白内容区和 Footer。
 * 使用动态视口单位兜住短屏与移动浏览器地址栏，同时设置固定下限，避免空页面塌陷。
 */
body.yumin-contact-placeholder .yumin-main {
	min-height: max(420px, calc(100svh - var(--yumin-header-height) - 360px));
}

body.yumin-contact-placeholder .yumin-main > .wp-block-post-content:empty {
	min-height: inherit;
}

/* 作者在编辑器中显式选择宽幅或全宽时仍保留其意图，普通内容始终维持舒适阅读宽度。 */
.yumin-article__content > .alignwide {
	width: min(960px, calc(100vw - 80px));
	max-width: none;
	margin-right: auto;
	margin-left: auto;
}

.yumin-article__content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 700px) {
	/* 18px 移动端安全边距与后台编辑预览保持一致。 */
	.yumin-article {
		width: calc(100% - 36px);
		padding-top: 40px;
		padding-bottom: 72px;
	}

	.yumin-article__header {
		margin-bottom: 30px;
	}

	.yumin-article__content > .alignwide {
		width: calc(100vw - 36px);
	}

	body.yumin-contact-placeholder .yumin-main {
		min-height: max(360px, calc(100svh - var(--yumin-header-height) - 280px));
	}
}