/* ZHIHONG UI 2.0 — Header, Footer, controls and reusable cards. */
.zh-ui2-skip-link {
	background: var(--zh-ui2-white);
	border: 2px solid var(--zh-ui2-green);
	color: var(--zh-ui2-ink);
	inset-block-start: -8rem;
	inset-inline-start: 1rem;
	padding: 0.75rem 1rem;
	position: fixed;
	z-index: 10000;
}

.zh-ui2-skip-link:focus { inset-block-start: 1rem; }

.zh-ui2-header-shell {
	background: rgba(255, 255, 255, 0.97);
	border-block-end: 1px solid var(--zh-ui2-border);
	color: var(--zh-ui2-ink);
	min-block-size: var(--zh-ui2-header-height);
	position: relative;
	z-index: var(--zh-ui2-z-header);
}

.zh-ui2-header {
	display: flex;
	align-items: center;
	min-block-size: var(--zh-ui2-header-height);
}

.zh-ui2-brand { display: inline-flex; flex: 0 0 auto; inline-size: clamp(168px, 15vw, 218px); }
.zh-ui2-brand img { display: block; block-size: auto; inline-size: 100%; }

.zh-ui2-header-panel {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2.25rem);
	margin-inline-start: auto;
}

.zh-ui2-nav > ul {
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 1.4vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.zh-ui2-nav a {
	color: var(--zh-ui2-ink-soft);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.zh-ui2-nav a:hover { color: var(--zh-ui2-green); }
.zh-ui2-nav-contact-mobile { display: none; }

.zh-ui2-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.zh-ui2-header-language:empty { display: none; }

.zh-ui2-header-cta,
.zh-ui2-button {
	align-items: center;
	background: var(--zh-ui2-green);
	border: 1px solid var(--zh-ui2-green);
	border-radius: var(--zh-ui2-radius-sm);
	color: var(--zh-ui2-white);
	display: inline-flex;
	font-size: 0.87rem;
	font-weight: 780;
	justify-content: center;
	line-height: 1.2;
	min-block-size: 46px;
	padding: 0.85rem 1.15rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.zh-ui2-header-cta:hover,
.zh-ui2-button:hover { background: var(--zh-ui2-green-dark); border-color: var(--zh-ui2-green-dark); color: var(--zh-ui2-white); transform: translateY(-1px); }

.zh-ui2-button--ghost { background: transparent; color: var(--zh-ui2-green-dark); }
.zh-ui2-button--ghost:hover { color: var(--zh-ui2-white); }
.zh-ui2-button--light { background: var(--zh-ui2-white); border-color: var(--zh-ui2-white); color: var(--zh-ui2-green-deep); }
.zh-ui2-button--light:hover { background: var(--zh-ui2-surface); border-color: var(--zh-ui2-surface); color: var(--zh-ui2-green-deep); }
.zh-ui2-button--outline-light { background: transparent; border-color: rgba(255,255,255,.48); color: var(--zh-ui2-white); }
.zh-ui2-button--outline-light:hover { background: var(--zh-ui2-white); border-color: var(--zh-ui2-white); color: var(--zh-ui2-green-deep); }

.zh-ui2-text-link {
	color: var(--zh-ui2-green-dark);
	font-size: 0.88rem;
	font-weight: 780;
	text-decoration: none;
	white-space: nowrap;
}

.zh-ui2-text-link:hover { color: var(--zh-ui2-green); }

.zh-ui2-menu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--zh-ui2-ink);
	cursor: pointer;
	display: none;
	gap: 0.65rem;
	margin-inline-start: auto;
	padding: 0.6rem 0;
}

.zh-ui2-menu-toggle__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.zh-ui2-menu-toggle__icon { display: grid; gap: 4px; inline-size: 24px; }
.zh-ui2-menu-toggle__icon i { background: currentColor; block-size: 2px; display: block; inline-size: 100%; transition: transform 160ms ease, opacity 160ms ease; }

.zh-ui2-header-language .zhihong-language-switcher { margin: 0; position: relative; }
.zh-ui2-header-language .zhihong-language-switcher > summary {
	align-items: center;
	border: 1px solid var(--zh-ui2-border);
	border-radius: var(--zh-ui2-radius-sm);
	color: var(--zh-ui2-ink);
	cursor: pointer;
	display: flex;
	font-size: 0.78rem;
	font-weight: 800;
	justify-content: center;
	list-style: none;
	min-block-size: 42px;
	min-inline-size: 54px;
	padding: 0.6rem 0.75rem;
}

.zh-ui2-header-language .zhihong-language-switcher > summary::-webkit-details-marker { display: none; }
.zh-ui2-header-language .zhihong-language-switcher > summary::after { content: "⌄"; margin-inline-start: 0.4rem; }
.zh-ui2-header-language .zhihong-language-switcher[open] > summary { border-color: var(--zh-ui2-green); }
.zh-ui2-header-language .zhihong-language-switcher ul {
	background: var(--zh-ui2-white);
	border: 1px solid var(--zh-ui2-border);
	border-radius: var(--zh-ui2-radius-sm);
	box-shadow: var(--zh-ui2-shadow);
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	min-inline-size: 170px;
	padding: 0.45rem;
	position: absolute;
	z-index: 20;
}

.zh-ui2-header-language .zhihong-language-switcher li { margin: 0; }
.zh-ui2-header-language .zhihong-language-switcher :where(a, span) { border-radius: 3px; color: var(--zh-ui2-ink); display: block; font-size: 0.84rem; padding: 0.6rem 0.7rem; text-decoration: none; }
.zh-ui2-header-language .zhihong-language-switcher a:hover { background: var(--zh-ui2-surface); color: var(--zh-ui2-green-dark); }
.zh-ui2-header-language .zhihong-language-switcher a[aria-current="page"] { background: var(--zh-ui2-surface-deep); color: var(--zh-ui2-green-dark); }
.zh-ui2-header-language .zhihong-language-unavailable { color: #8a948e; cursor: not-allowed; }

.zh-ui2-footer { background: var(--zh-ui2-footer); color: rgba(255,255,255,.76); padding-block: clamp(4rem, 7vw, 6rem) 1.5rem; }
.zh-ui2-footer__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: minmax(300px, 1.5fr) repeat(2, minmax(170px, .55fr)); }
.zh-ui2-footer__brand { max-inline-size: 430px; }
.zh-ui2-footer__brand img { filter: brightness(0) invert(1); block-size: auto; inline-size: min(230px, 100%); }
.zh-ui2-footer__brand p { font-size: 0.95rem; line-height: 1.75; margin-block-start: 1.5rem; }
.zh-ui2-footer h2 { color: var(--zh-ui2-white); font-size: 0.76rem; letter-spacing: 0.12em; margin: 0 0 1.4rem; text-transform: uppercase; }
.zh-ui2-footer ul { display: grid; gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.zh-ui2-footer a { color: rgba(255,255,255,.76); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.zh-ui2-footer a:hover { color: var(--zh-ui2-white); }
.zh-ui2-footer__bottom { align-items: center; border-block-start: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; margin-block-start: 4rem; padding-block-start: 1.5rem; }
.zh-ui2-footer__bottom p { font-size: 0.8rem; margin: 0; }

.zhihong-service-dock { inset-block-end: max(1.25rem, env(safe-area-inset-bottom)); inset-inline-end: max(1.25rem, env(safe-area-inset-right)); position: fixed; z-index: var(--zh-ui2-z-dock); }
.zhihong-service-dock > summary { list-style: none; }
.zhihong-service-dock > summary::-webkit-details-marker { display: none; }
.zhihong-service-launcher {
	align-items: center;
	background: var(--zh-ui2-green);
	border: 2px solid var(--zh-ui2-white);
	border-radius: 999px;
	box-shadow: 0 12px 32px rgba(13, 63, 44, .26);
	color: var(--zh-ui2-white);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 800;
	gap: 0.45rem;
	justify-content: center;
	min-block-size: 56px;
	min-inline-size: 82px;
	padding: 0.75rem 1rem;
}
.zhihong-service-launcher__icon { display: inline-flex; }
.zhihong-service-launcher svg { fill: currentColor; block-size: 20px; inline-size: 20px; }
.zhihong-service-menu { background: var(--zh-ui2-white); border: 1px solid var(--zh-ui2-border); border-radius: var(--zh-ui2-radius-md); box-shadow: var(--zh-ui2-shadow); display: grid; gap: 0.25rem; inset-block-end: calc(100% + .75rem); inset-inline-end: 0; min-inline-size: 218px; padding: 0.5rem; position: absolute; }
.zhihong-service-menu__item { align-items: center; border-radius: 4px; color: var(--zh-ui2-ink); display: flex; font-size: 0.84rem; font-weight: 700; gap: 0.75rem; min-block-size: 44px; padding: 0.6rem 0.7rem; text-decoration: none; }
.zhihong-service-menu__item:hover { background: var(--zh-ui2-surface); color: var(--zh-ui2-green-dark); }
.zhihong-service-menu__icon { align-items: center; background: var(--zh-ui2-surface-deep); border-radius: 50%; display: inline-flex; justify-content: center; block-size: 32px; inline-size: 32px; }
.zhihong-service-menu__icon svg { fill: currentColor; block-size: 16px; inline-size: 16px; }