/**
 * Numen 前端体验层：响应式修复 + PC 美化 + 深浅色模式。
 *
 * 深色模式下 Elementor / 插件里的逐元素配色由 includes/numen-dark-css.php 自动推导，
 * 本文件只处理推导覆盖不到的部分：页面底色、logo 墙、表单、Cookie 提示条、主题切换按钮等。
 * 选择器一律按组件类型编写，不依赖 Elementor 元素 ID，后续改页面内容不会失效。
 */

/* ============ 设计变量 ============ */
:root {
	--nx-brand: #dd113a;
	--nx-ease: cubic-bezier(.2, .7, .2, 1);
	--nx-bg: #fff;
	--nx-surface: #fff;
	--nx-text: #1d2129;
	--nx-muted: #6b7280;
	--nx-border: rgba(15, 23, 42, .12);
	--nx-shadow: 0 14px 34px -16px rgba(15, 23, 42, .32);
	--nx-tile: transparent;
}

html[data-theme="dark"] {
	--nx-bg: #0c0d10;
	--nx-surface: #15171c;
	--nx-text: #e8eaed;
	--nx-muted: #a3aab6;
	--nx-border: rgba(255, 255, 255, .12);
	--nx-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85);
	--nx-tile: #f3f4f6;
	color-scheme: dark;
}

/* ============ 全局基础 ============ */
html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* 兜底：任何超宽元素都不产生横向滚动（clip 不会破坏吸顶效果） */
html,
body {
	overflow-x: clip;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(221, 17, 58, .22);
}

:focus-visible {
	outline: 2px solid var(--nx-brand);
	outline-offset: 3px;
}

.elementor-heading-title {
	text-wrap: balance;
}

.elementor-widget-text-editor p {
	text-wrap: pretty;
}

/* ============ PC 美化：交互细节 ============ */
.elementor-button,
.pp-info-box-container,
.elementor-flip-box,
.elementor-widget-gallery .e-gallery-image,
.pp-lc-logo img {
	transition: transform .3s var(--nx-ease), box-shadow .3s var(--nx-ease), filter .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease;
}

/* 吸顶页眉：滚动后加分隔线与投影（保留原有不透明黑底，半透明会与菜单自身的黑底形成接缝） */
#masthead .elementor-sticky--effects {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px -12px rgba(0, 0, 0, .6);
}

@media (hover: hover) {
	.elementor-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px -12px rgba(221, 17, 58, .65);
	}

	.pp-info-box-container:hover {
		transform: translateY(-4px);
	}

	.elementor-widget-flip-box:hover .elementor-flip-box {
		transform: translateY(-4px);
		box-shadow: var(--nx-shadow);
	}

	/* logo 墙：默认灰度，悬停恢复品牌色（仅浅色模式） */
	html:not([data-theme="dark"]) .elementor-widget-gallery .e-gallery-image,
	html:not([data-theme="dark"]) .pp-lc-logo img {
		filter: grayscale(1);
		opacity: .7;
	}

	html:not([data-theme="dark"]) .elementor-widget-gallery .e-gallery-item:hover .e-gallery-image,
	html:not([data-theme="dark"]) .pp-lc-logo:hover img {
		filter: none;
		opacity: 1;
	}
}

.elementor-button:active {
	transform: translateY(0);
}

/* ============ 响应式修复 ============ */
@media (max-width: 1024px) {
	/* logo 墙：平板 5 列，按 logo 原图 140×100 的比例显示 */
	.elementor-widget-gallery .e-gallery-grid {
		--columns: 5 !important;
		--aspect-ratio: 71.43% !important;
	}
}

@media (max-width: 767px) {
	/* logo 墙：手机 3 列（原为每行 1 个、放大到整屏宽） */
	.elementor-widget-gallery .e-gallery-grid {
		--columns: 3 !important;
	}

	/* PowerPack 左图标信息框：手机改为上下布局，正文不再被挤成窄条 */
	html .pp-info-box-left .pp-info-box {
		flex-direction: column;
	}

	html .pp-info-box-left .pp-info-box .pp-info-box-icon-wrap {
		margin: 0 0 14px;
	}

	/* 触控目标不小于 44px */
	.hfe-nav-menu .menu-item a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Cookie 提示条：底部卡片，文字更紧凑，不再盖住首屏大块内容 */
	#cookie-notice {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
		width: auto !important;
		min-width: 0 !important;
		border-radius: 14px;
		box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	}

	#cookie-notice .cookie-notice-container {
		padding: 14px 16px;
		font-size: 13px;
		line-height: 1.5;
	}
}

/* Cookie 提示条通用美化 */
#cookie-notice {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background-color: rgba(20, 22, 28, .92) !important;
}

/* 关闭按钮会被 Hello 主题的通用 button 样式套上红色边框，这里重置 */
#cookie-notice .cn-close-icon {
	border: 0;
	background: transparent;
}

#cookie-notice .cn-button {
	border-radius: 999px;
	padding: 8px 20px;
	background: var(--nx-brand) !important;
	color: #fff !important;
	border: 0;
}

/* ============ 主题切换按钮（由 numen-ux.js 插入页眉） ============ */
.nx-nav-wrap {
	flex-wrap: nowrap !important;
	align-items: center;
}

.nx-nav-wrap > .elementor-widget-navigation-menu {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}

.nx-theme-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-left: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .25s var(--nx-ease);
}

.nx-theme-toggle:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .4);
}

.nx-theme-toggle:active {
	transform: scale(.94);
}

.nx-theme-toggle svg {
	width: 18px;
	height: 18px;
}

.nx-theme-toggle--floating {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	margin: 0;
	background: rgba(20, 22, 28, .9);
}

/* 浅色时显示月亮（点击切到深色），深色时显示太阳 */
.nx-theme-toggle .nx-icon-sun,
html[data-theme="dark"] .nx-theme-toggle .nx-icon-moon {
	display: none;
}

html[data-theme="dark"] .nx-theme-toggle .nx-icon-sun {
	display: block;
}

/* 平板/手机：折叠菜单的固有宽度很大，导航组件必须占满剩余宽度而不是按内容收缩，
   否则会被撑出列外；汉堡按钮在组件内靠右，切换按钮紧随其后 */
@media (max-width: 1024px) {
	.nx-nav-wrap > .elementor-widget-navigation-menu {
		flex: 1 1 0;
	}

	.nx-theme-toggle {
		margin: 0 6px 0 12px;
	}
}

/* ============ 深色模式：自动推导覆盖不到的部分 ============ */
html[data-theme="dark"] body {
	background-color: var(--nx-bg);
	color: var(--nx-text);
}

/* logo 墙与媒体 logo：放在浅色圆角底板上，保留品牌原色与可读性 */
html[data-theme="dark"] .elementor-widget-gallery .e-gallery-grid {
	--hgap: 12px !important;
	--vgap: 12px !important;
}

html[data-theme="dark"] .elementor-widget-gallery .e-gallery-image {
	background-color: var(--nx-tile);
	border-radius: 12px;
}

html[data-theme="dark"] .pp-lc-logo {
	background-color: var(--nx-tile);
	border-radius: 12px;
	padding: 10px;
}

/* 表单控件 */
html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: var(--nx-surface) !important;
	color: var(--nx-text) !important;
	border-color: var(--nx-border) !important;
}

html[data-theme="dark"] ::placeholder {
	color: var(--nx-muted);
}

/* 文章正文里的表格、代码块、引用 */
html[data-theme="dark"] .elementor-widget-theme-post-content table td,
html[data-theme="dark"] .elementor-widget-theme-post-content table th {
	border-color: var(--nx-border);
}

html[data-theme="dark"] .elementor-widget-theme-post-content pre,
html[data-theme="dark"] .elementor-widget-theme-post-content code {
	background-color: var(--nx-surface);
	color: var(--nx-text);
}

html[data-theme="dark"] .elementor-widget-theme-post-content blockquote {
	border-color: var(--nx-brand);
	color: var(--nx-muted);
}

/* 区块编辑器调色板类（WP 核心以 !important 输出，不在自动推导的源文件里） */
html[data-theme="dark"] .has-black-color {
	color: var(--nx-text) !important;
}

html[data-theme="dark"] .has-white-background-color {
	background-color: var(--nx-surface) !important;
}

/* 文章正文可能带内联黑色文字（编辑器粘贴遗留），统一提亮 */
html[data-theme="dark"] .elementor-widget-theme-post-content [style*="color: #000"],
html[data-theme="dark"] .elementor-widget-theme-post-content [style*="color:#000"],
html[data-theme="dark"] .elementor-widget-theme-post-content [style*="color: rgb(0, 0, 0)"] {
	color: var(--nx-text) !important;
}

/* 下拉菜单与弹窗 */
html[data-theme="dark"] .hfe-nav-menu .sub-menu {
	box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9);
}