/* ==========================================================================
   龙钰机械 · 全站联系入口
   主体色取 Astra 全局色板 g1（--ast-global-color-1 = #045cb4），跟随主题
   深底 #0C1B2A 与站点页脚同色
   圆角 ≤ 12px，动效仅 hover 位移 + 渐隐（克制的工业感）
   ========================================================================== */

/* 吸底条高度。
   ⚠️ 必须定义在 :root 上，不能只定义在 .lycb 上 —— CSS 自定义属性只向下继承，
   body.lycb-on 里取不到 .lycb 的 --lycb-h，calc() 会整个失效（padding 静默变 0，
   底栏压住页脚）。这是本文件唯一一个容易踩的坑，改动时务必先量 getComputedStyle 验证。 */
:root {
	--lycb-h: 62px;
}

.lycb {
	--lycb-dark: #0C1B2A;                                  /* 与站点页脚同色 */
	--lycb-dark2: #16283C;                                 /* hover 用的浅一档 */
	--lycb-txt: #E8ECF2;                                   /* 深底上的常规文字 */

	/* 主体色：优先跟随 Astra 全局色板，主题改色本站也跟着变 */
	--lycb-accent: var(--ast-global-color-1, #045cb4);
	--lycb-accent-l: #1f74c9;                              /* 深底上的高亮档 */
	--lycb-accent-ink: #ffffff;                            /* 主体色上的文字 */
	--lycb-on-dark: #8cc8ff;                               /* 深底上的主体色文字（对比度 8.9:1） */

	/* 主按钮色 = 站点头部菜单的悬停渐变（青 → 绿）。
	   改这里一处即可，务必与 wp-custom-css 里 #ast-hf-menu-1 的 hover 渐变保持一致。 */
	--lycb-grad: linear-gradient(90deg, #22C6E8, #28D0B0);
	/* ⚠️ 这个渐变本身很亮（#22C6E8 相对亮度 0.47），白字压上去只有约 1.9:1，
	   必然看不清 —— 1.0.1 的金色事故就是这么来的。必须用深色字：
	   #0C1B2A 压 #22C6E8 = 8.6:1，压 #28D0B0 = 8.9:1，都过 AA。 */
	--lycb-grad-ink: #0C1B2A;
}

/* ---------- 移动端：底部吸底条（拇指区，始终可见） ---------- */
.lycb-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	height: var(--lycb-h);
	background: var(--lycb-dark);
	border-top: 1px solid rgba(76, 148, 224, 0.32);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
	/* 兼容 iPhone 底部安全区 */
	padding-bottom: env(safe-area-inset-bottom);
}

.lycb-bi {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	/* 去掉移动端点击高亮块 */
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
	color: var(--lycb-txt);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.5px;
	border: 0;
	background: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.lycb-bi .lycb-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
}

.lycb-bi .lycb-nm {
	font-weight: 600;
}

/* 主按钮（电话）= 菜单悬停渐变底 + 深色字。对比度 8.6~8.9:1，达 WCAG AA */
.lycb-bi--tel {
	color: var(--lycb-grad-ink);
	background: var(--lycb-grad);
	font-weight: 700;
}
.lycb-bi--tel .lycb-nm {
	font-weight: 700;
}
.lycb-bi--tel:active {
	filter: brightness(0.9);
}

/* 另外两个做分隔线 */
.lycb-bi--wx,
.lycb-bi--msg {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.09);
}
.lycb-bi--wx:active,
.lycb-bi--msg:active {
	background: var(--lycb-dark2);
}

/* ---------- 桌面端：右侧竖排悬浮 ---------- */
.lycb-side {
	display: none;
	position: fixed;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	flex-direction: column;
	gap: 8px;
}

.lycb-si {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 56px;
	height: 62px;
	border-radius: 10px;
	background: var(--lycb-dark);
	color: var(--lycb-txt);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.5px;
	border: 1px solid rgba(76, 148, 224, 0.3);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	/* 设计规范：hover 位移 4px */
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.lycb-si .lycb-ic {
	display: flex;
	height: 24px;
	align-items: center;
	justify-content: center;
}

.lycb-si .lycb-tx {
	font-weight: 600;
}

.lycb-si:hover,
.lycb-si:focus-visible {
	transform: translateX(-4px);
	background: var(--lycb-dark2);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	outline: none;
}

.lycb-si--tel {
	background: var(--lycb-grad);
	color: var(--lycb-grad-ink);
	border-color: rgba(34, 198, 232, 0.55);
}
/* 特异性与 .lycb-si:hover 相同，靠「写在文件更靠后」取胜（保持原有做法）。
   渐变不能被 hover 覆盖，所以用 filter 提亮。 */
.lycb-si--tel:hover,
.lycb-si--tel:focus-visible {
	background: var(--lycb-grad);
	filter: brightness(1.07);
}

/* ---------- 手机号清单（点「电话」弹出） ---------- */
.lycb-list {
	display: none;
	position: fixed;
	left: 50%;
	bottom: calc(var(--lycb-h) + 12px);
	transform: translateX(-50%);
	z-index: 10000;
	min-width: 172px;
	padding: 8px;
	border-radius: 12px;
	background: var(--lycb-dark);
	border: 1px solid rgba(34, 198, 232, 0.32);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36);
	/* 颜色只写在容器上，让里面 a[href^="tel:"] 的号码继承 ——
	   绝不给 a[href^="tel:"] 写 color，见文件下方注释 */
	color: var(--lycb-txt);
}

.lycb-list.is-open {
	display: block;
}

.lycb-list__hd {
	margin: 0;
	padding: 2px 8px 7px;
	font-size: 12px;
	letter-spacing: 1.5px;
	color: #93A6BC;
}

/* 号码行。
   ⚠️⚠️ color 必须写在这里，**不能只写在 .lycb-list 容器上让链接继承** ——
   主题（Astra / Rank Math 全局样式）给 `a` 元素本身设了 color，
   链接就永远不会继承容器的颜色，会渲染成正文蓝 #046BD2 压在深蓝面板上
   （实测 3.35:1，不达标）。这是「颜色只写在父级」这个直觉的坑。
   选择器用两级 .lycb-list .lycb-list__n = (0,2,0)，确保压过 .entry-content a 之类。
   仍然**不碰** a[href^="tel:"] 那条全局规则（特异性 (0,1,1) 更高，写了会反噬按钮）。 */
.lycb-list .lycb-list__n {
	display: block;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--lycb-txt);
	font-size: 16px;
	letter-spacing: 0.6px;
	text-align: center;
	transition: background-color 0.16s ease;
	-webkit-tap-highlight-color: transparent;
}

.lycb-list .lycb-list__n:hover,
.lycb-list .lycb-list__n:focus-visible {
	background: rgba(34, 198, 232, 0.18);
	color: #ffffff;
	outline: none;
}

/* ---------- 主题链接色接管（v1.1.2 修的真 bug）----------
   Astra / Rank Math 全局样式里有：
       a       { color: var(--ast-global-color-0) }
       a:hover { color: var(--ast-global-color-1) }   ← 亮蓝 #045cb4
   `a:hover` 特异性 (0,1,1)，**高于** .lycb-bi--tel 的 (0,1,0)。
   于是鼠标一移上去，主按钮就从深色字被改成亮蓝，压在青绿亮渐变上
   只剩 3.2:1（#045cb4 / #22C6E8），完全看不清 —— 而鼠标移上去
   恰恰是准备点击时的常态。「留言」按钮 hover 也一样掉到 2.6:1。
   正解：颜色挂在 `a.lycb-xx`（= 0,2,1）上，并把 normal/hover/focus
   三态一起写死，稳压 `a:hover`。这段千万别简化回 .lycb-bi--tel。 */
.lycb a.lycb-bi {
	color: var(--lycb-txt);
}
.lycb a.lycb-bi:hover,
.lycb a.lycb-bi:focus-visible {
	color: #ffffff;
}
.lycb a.lycb-si {
	color: var(--lycb-txt);
}
.lycb a.lycb-si:hover,
.lycb a.lycb-si:focus-visible {
	color: #ffffff;
}
/* 主按钮：深色字压亮渐变。三态都要写 */
.lycb a.lycb-bi--tel,
.lycb a.lycb-bi--tel:hover,
.lycb a.lycb-bi--tel:focus-visible {
	color: var(--lycb-grad-ink);
}
.lycb a.lycb-si--tel,
.lycb a.lycb-si--tel:hover,
.lycb a.lycb-si--tel:focus-visible {
	color: var(--lycb-grad-ink);
}

/* ---------- 在线留言表单 ---------- */
/* 面板本身：深底 + 细描边，和号码清单同一套视觉。
   输入框反过来用**浅底深字**（#F2F6FB 上 #0C1B2A ≈ 13:1）：
   深底上再放深色输入框会糊成一片，浅底还能顺手避开 select 原生箭头
   深底看不清的老问题（appearance:none 掉箭头 + 自绘）。 */
.lycb-form {
	display: none;
	position: fixed;
	/* 移动端默认位置：吸在底栏上方居中（桌面在 @media 里覆盖成侧边竖排） */
	left: 50%;
	bottom: calc(var(--lycb-h) + 12px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 10001;
	width: min(92vw, 372px);
	max-height: 78vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	border-radius: 14px;
	background: var(--lycb-dark);
	border: 1px solid rgba(34, 198, 232, 0.3);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.44);
	color: var(--lycb-txt);
}

.lycb-form.is-open {
	display: block;
}

.lycb-form__hd {
	position: relative;
	padding: 16px 18px 13px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.lycb-form__ti {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #ffffff;
}

.lycb-form__sub {
	margin: 5px 0 0;
	font-size: 12px;
	letter-spacing: 0.3px;
	color: #93A6BC;
}

.lycb-form__x {
	position: absolute;
	right: 7px;
	top: 9px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #93A6BC;
	font-size: 24px;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.lycb-form__x:hover,
.lycb-form__x:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	outline: none;
}

.lycb-form__bd {
	padding: 15px 18px 18px;
	margin: 0;
}
.lycb-form__bd[hidden] {
	display: none;
}

.lycb-form__row {
	margin: 0 0 13px;
}

.lycb-form__lb {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	letter-spacing: 0.4px;
	color: #B9C7D8;
}

.lycb-form__req {
	margin-left: 3px;
	color: #FF9A9A;
}

/* 蜜罐：移出屏幕而不是 display:none —— 机器人照样会填，真人也 tab 不到 */
.lycb-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ⚠️ 选择器用 `.lycb-form input.lycb-fld`（0,2,1），必须压过 Astra/Rank Math
   的 `input[type="text"]`（0,1,1）。只写 `.lycb-form input`（0,1,1）就是平局，
   谁的加载顺序靠后谁赢 —— 别赌这个。 */
.lycb-form input.lycb-fld,
.lycb-form select.lycb-fld,
.lycb-form textarea.lycb-fld {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: #0C1B2A;
	background: #F2F6FB;
	border: 1px solid #C9D6E4;
	border-radius: 9px;
	box-shadow: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lycb-form textarea.lycb-fld {
	min-height: 78px;
	resize: vertical;
}

/* select 去掉原生箭头后自己画一个（data URI 里的 < > # 必须百分号编码） */
.lycb-form select.lycb-fld {
	padding-right: 32px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230C1B2A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 12px 8px;
}

.lycb-form input.lycb-fld::placeholder,
.lycb-form textarea.lycb-fld::placeholder {
	color: #8A99AB;
}

.lycb-form input.lycb-fld:focus,
.lycb-form select.lycb-fld:focus,
.lycb-form textarea.lycb-fld:focus {
	outline: none;
	border-color: #22C6E8;
	box-shadow: 0 0 0 3px rgba(34, 198, 232, 0.22);
}

/* 红色错误条。只在有文字时出现（JS 切 is-on），别留一块空的色块 */
.lycb-form__err {
	display: none;
	margin: 0 0 13px;
	padding: 9px 12px;
	border-radius: 9px;
	background: rgba(214, 54, 56, 0.18);
	border: 1px solid rgba(255, 154, 154, 0.42);
	color: #FFC2C2;
	font-size: 13px;
	line-height: 1.55;
}
.lycb-form__err.is-on {
	display: block;
}

/* 提交按钮：跟主按钮同一套渐变 + 深色字（8.6~8.9:1） */
.lycb-form__sb {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--lycb-grad-ink);
	background: var(--lycb-grad);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.16s ease, opacity 0.16s ease;
}
.lycb-form__sb:hover {
	filter: brightness(1.07);
}
.lycb-form__sb:active {
	filter: brightness(0.92);
}
.lycb-form__sb[disabled] {
	filter: none;
	opacity: 0.55;
	cursor: default;
}

.lycb-form__note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.75;
	text-align: center;
	color: #93A6BC;
}

/* ⚠️ 面板里的链接颜色同样必须显式写、并且用两级选择器：
   主题 a{color} / a:hover{color:var(--ast-global-color-1)} 特异性 0,1,1，
   只写 .lycb-form__note a 是平局，靠加载顺序赌；写成两级 (0,2,1) 才稳赢。 */
.lycb-form .lycb-form__note a,
.lycb-form .lycb-form__ok-tx a {
	color: #8CD8F0;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.lycb-form .lycb-form__note a:hover,
.lycb-form .lycb-form__note a:focus-visible,
.lycb-form .lycb-form__ok-tx a:hover,
.lycb-form .lycb-form__ok-tx a:focus-visible {
	color: #ffffff;
}

/* 提交成功 */
.lycb-form__ok {
	padding: 24px 18px 20px;
	text-align: center;
}
.lycb-form__ok[hidden] {
	display: none;
}

.lycb-form__ok-ti {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #ffffff;
}
.lycb-form__ok-ti::before {
	content: "\2713";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	border-radius: 50%;
	background: #28D0B0;
	color: #0C1B2A;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	vertical-align: -2px;
}

.lycb-form__ok-tx {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.75;
	color: #B9C7D8;
}

.lycb-form__ok-bt {
	display: flex;
	gap: 10px;
}

.lycb-form__sb2 {
	flex: 1 1 0;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #E8ECF2;
	background: rgba(34, 198, 232, 0.14);
	border: 1px solid rgba(34, 198, 232, 0.4);
	border-radius: 9px;
	cursor: pointer;
	transition: background-color 0.16s ease;
}
.lycb-form__sb2:hover,
.lycb-form__sb2:focus-visible {
	background: rgba(34, 198, 232, 0.26);
	outline: none;
}
.lycb-form__sb2--g {
	color: #93A6BC;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.16);
}
.lycb-form__sb2--g:hover,
.lycb-form__sb2--g:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}

/* ---------- 复制成功提示 ---------- */
.lycb-tip {
	position: fixed;
	left: 50%;
	bottom: calc(var(--lycb-h) + 16px);
	transform: translateX(-50%) translateY(8px);
	z-index: 10000;
	max-width: 82vw;
	padding: 11px 18px;
	border-radius: 10px;
	background: var(--lycb-dark);
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.34);
	border: 1px solid rgba(76, 148, 224, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.lycb-tip.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* 深底上用浅一档的主体色，8.9:1 */
.lycb-tip b {
	color: var(--lycb-on-dark);
	font-size: 16px;
	letter-spacing: 0.5px;
}

/* ---------- 电话自动变成链接（JS 生成的 tel:） ----------
   ⚠️⚠️ 绝对不要在这里写 color！踩过两次，两次都出事：
   ① 特异性 a[href^="tel:"] = (0,1,1) 高于 .lycb-bi--tel = (0,1,0)，
      且本条在文件更靠后 —— 会把悬浮条/吸底条里拨号按钮的白色文字
      也一起改掉，1.0.1 版就是这样变成「金色底 + 金色字」，按钮里的字完全隐形。
   ② 正文里的电话同时出现在白底（需深色文字）和深蓝页脚（需浅色文字）两种背景，
      任何写死的颜色都必有一处看不清。
   正解：颜色交给上下文继承，只靠下划线 + 加粗表达「这里可以点」。 */
a[href^="tel:"] {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- 断点切换：≥922px 桌面 ---------- */
@media (min-width: 922px) {
	.lycb-bar {
		display: none;
	}
	.lycb-side {
		display: flex;
	}
	/* ⚠️ 桌面端刻意不给 body 加任何 padding。
	   之前写了 body.lycb-on{padding-bottom:0!important}，那是多余的 —— 桌面不需要给底栏留空，
	   而 !important 有覆盖主题 body padding 的风险，已删。 */
	/* 电脑端去掉「微信」：复制微信号在电脑上没用（粘不到手机），
	   还白占一格竖排位置。手机端保留。 */
	.lycb-si--wx {
		display: none;
	}
	.lycb-tip {
		bottom: auto;
		top: 50%;
		left: auto;
		right: 78px;
		transform: translateY(-50%) translateX(8px);
	}
	.lycb-tip.is-on {
		transform: translateY(-50%) translateX(0);
	}
	/* 号码清单挪到侧边竖排的左边（56px 宽 + 10px 间距 = 右 78px 处），
	   纵向居中对齐，和提示条同一个位置逻辑 */
	.lycb-list {
		left: auto;
		right: 78px;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%);
		min-width: 158px;
	}
	/* 留言表单同一位置逻辑。宽度放开一点，桌面鼠标不点手机表单 */
	.lycb-form {
		left: auto;
		right: 78px;
		bottom: auto;
		top: 50%;
		width: 356px;
		max-height: 86vh;
		transform: translateY(-50%);
	}
}

/* ---------- 移动端给 body 留出吸底条高度，防止遮挡页脚 ---------- */
@media (max-width: 921px) {
	body.lycb-on {
		padding-bottom: calc(var(--lycb-h) + env(safe-area-inset-bottom));
	}
}

/* ---------- 无障碍：尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
	.lycb-si,
	.lycb-bi,
	.lycb-list__n,
	.lycb-tip,
	.lycb-form,
	.lycb-form__sb,
	.lycb-form__sb2,
	.lycb-form__x,
	.lycb-fld {
		transition: none !important;
	}
	.lycb-si:hover,
	.lycb-si:focus-visible {
		transform: none;
	}
}