/**
 * Neitherori Astra Child · 主样式
 * 烟青月光调色板 - 水晶珠宝品牌
 *
 * 1. 设计令牌（CSS 变量）
 * 2. 字体系统
 * 3. 排版基础
 * 4. 间距系统
 * 5. 修复 Astra 反向配置
 * 6. 通用组件（按钮、卡片、表单）
 * 7. 头部、底部
 * 8. WooCommerce 定制
 * 9. 响应式断点统一
 * 10. 微动效
 */

/* ============================================
 * 1. 设计令牌（CSS 变量）
 * ============================================ */

:root {
	/* 调色板 - 烟青月光 */
	--nei-primary:        #1F3A4D;  /* 主色 - 深青墨 */
	--nei-primary-hover:  #2A5468;  /* 主色 hover - 中青 */
	--nei-primary-light:  #4A6A7E;  /* 主色浅 - 用于次级按钮 */
	--nei-secondary:      #B8C5CC;  /* 辅色 - 月光银 */
	--nei-accent:         #D4AF37;  /* 强调色 - 香槟金 */
	--nei-accent-light:   #E6C668;  /* 强调色浅 */

	/* 文字色 */
	--nei-text-primary:   #1A2332;  /* 文字主 - 墨青 */
	--nei-text-secondary: #5A6B7E;  /* 文字次 - 青灰 */
	--nei-text-muted:     #8B9AA8;  /* 文字弱 - 浅青灰 */
	--nei-text-inverse:   #FFFFFF;  /* 反白文字 */

	/* 背景色 */
	--nei-bg-primary:     #FFFFFF;  /* 主背景 - 纯白 */
	--nei-bg-secondary:   #F5F7F8;  /* 次背景 - 浅青灰 */
	--nei-bg-tertiary:    #EBEFF2;  /* 三级背景 */
	--nei-bg-dark:        #1F3A4D;  /* 深色背景 */

	/* 边框色 */
	--nei-border:         #E5EAEE;  /* 默认边框 */
	--nei-border-strong:  #C8D2DA;  /* 强边框 */
	--nei-border-accent:  #D4AF37;  /* 强调边框 */

	/* 阴影 - 用于卡片悬浮效果 */
	--nei-shadow-sm:      0 1px 2px rgba(31, 58, 77, 0.04);
	--nei-shadow-md:      0 2px 8px rgba(31, 58, 77, 0.06);
	--nei-shadow-lg:      0 8px 24px rgba(31, 58, 77, 0.10);
	--nei-shadow-xl:      0 16px 40px rgba(31, 58, 77, 0.14);

	/* 字体家族 */
	--nei-font-sans:      'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--nei-font-serif:     'Playfair Display', 'Noto Serif SC', Georgia, serif;
	--nei-font-mono:      'SF Mono', Monaco, Consolas, monospace;

	/* 字号 - 8px 基础栅格 */
	--nei-text-xs:        0.75rem;   /* 12px */
	--nei-text-sm:        0.875rem;  /* 14px */
	--nei-text-base:      1rem;      /* 16px */
	--nei-text-lg:        1.125rem;  /* 18px */
	--nei-text-xl:        1.25rem;   /* 20px */
	--nei-text-2xl:       1.5rem;    /* 24px */
	--nei-text-3xl:       2rem;      /* 32px */
	--nei-text-4xl:       2.5rem;    /* 40px */
	--nei-text-5xl:       3rem;      /* 48px */
	--nei-text-6xl:       3.5rem;    /* 56px */

	/* 行高 */
	--nei-leading-tight:  1.15;
	--nei-leading-snug:   1.3;
	--nei-leading-normal: 1.5;
	--nei-leading-relaxed: 1.65;
	--nei-leading-loose:  1.8;

	/* 字重 */
	--nei-weight-light:   300;
	--nei-weight-regular: 400;
	--nei-weight-medium:  500;
	--nei-weight-semibold: 600;
	--nei-weight-bold:    700;

	/* 间距 - 8px 基础栅格 */
	--nei-space-1:  0.25rem;  /* 4px */
	--nei-space-2:  0.5rem;   /* 8px */
	--nei-space-3:  0.75rem;  /* 12px */
	--nei-space-4:  1rem;     /* 16px */
	--nei-space-5:  1.5rem;   /* 24px */
	--nei-space-6:  2rem;     /* 32px */
	--nei-space-7:  3rem;     /* 48px */
	--nei-space-8:  4rem;     /* 64px */
	--nei-space-9:  6rem;     /* 96px */

	/* 圆角 */
	--nei-radius-sm:   4px;
	--nei-radius-md:   8px;
	--nei-radius-lg:   12px;
	--nei-radius-xl:   16px;
	--nei-radius-full: 9999px;

	/* 容器宽度 */
	--nei-container-max: 1200px;
	--nei-container-narrow: 800px;

	/* 动效 */
	--nei-transition-fast: 0.15s ease;
	--nei-transition-base: 0.25s ease;
	--nei-transition-slow: 0.4s ease;
}

/* ============================================
 * 2. 字体系统
 * ============================================ */

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: var(--nei-font-sans);
	font-weight: var(--nei-weight-regular);
	font-size: var(--nei-text-base);
	line-height: var(--nei-leading-relaxed);
	color: var(--nei-text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.entry-content :where(h1, h2, h3, h4, h5, h6) a,
.site-title,
.site-title a {
	font-family: var(--nei-font-sans);
	font-weight: var(--nei-weight-semibold);
	color: var(--nei-text-primary);
	letter-spacing: -0.02em;
	line-height: var(--nei-leading-snug);
}

/* 标题特殊处理 - 在 hero 区可以选用 Playfair Display */
.nei-serif,
.nei-serif h1,
.nei-serif h2,
.nei-serif h3,
.hero-title,
.hero-title h1,
.hero-title h2 {
	font-family: var(--nei-font-serif);
	font-weight: var(--nei-weight-semibold);
}

/* ============================================
 * 3. 排版基础
 * ============================================ */

/* 字号层级（更均衡） */
h1, .entry-content :where(h1), .entry-content :where(h1) a {
	font-size: clamp(2.5rem, 5vw, 3.5rem); /* 40-56px */
	line-height: var(--nei-leading-tight);
	font-weight: var(--nei-weight-semibold);
}

h2, .entry-content :where(h2), .entry-content :where(h2) a {
	font-size: clamp(1.75rem, 3.5vw, 2rem); /* 28-32px */
	line-height: var(--nei-leading-snug);
	font-weight: var(--nei-weight-semibold);
}

h3, .entry-content :where(h3), .entry-content :where(h3) a {
	font-size: clamp(1.375rem, 2.5vw, 1.5rem); /* 22-24px */
	line-height: var(--nei-leading-snug);
	font-weight: var(--nei-weight-semibold);
}

h4, .entry-content :where(h4), .entry-content :where(h4) a {
	font-size: var(--nei-text-xl); /* 20px */
	line-height: var(--nei-leading-normal);
	font-weight: var(--nei-weight-medium);
}

h5, .entry-content :where(h5), .entry-content :where(h5) a {
	font-size: var(--nei-text-lg); /* 18px */
	line-height: var(--nei-leading-normal);
	font-weight: var(--nei-weight-medium);
}

h6, .entry-content :where(h6), .entry-content :where(h6) a {
	font-size: var(--nei-text-base); /* 16px */
	line-height: var(--nei-leading-normal);
	font-weight: var(--nei-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* 正文 */
.entry-content p,
.entry-content li {
	font-size: var(--nei-text-base);
	line-height: var(--nei-leading-relaxed);
	color: var(--nei-text-primary);
}

.entry-content p + p {
	margin-top: var(--nei-space-5);
}

/* 链接 */
a {
	color: var(--nei-primary);
	text-decoration: none;
	transition: color var(--nei-transition-fast);
}

a:hover,
a:focus {
	color: var(--nei-primary-hover);
	text-decoration: underline;
}

/* 选中文字 */
::selection {
	background-color: var(--nei-primary);
	color: var(--nei-text-inverse);
}

/* ============================================
 * 4. 间距系统 - 修复 Astra 反向配置
 * ============================================ */

:root {
	/* 修复 Astra 间距变量反向配置 */
	--ast-container-default-xlg-padding: 4em;     /* 原 6.67em */
	--ast-container-default-lg-padding: 3em;      /* 原 5.67em */
	--ast-container-default-slg-padding: 2.5em;   /* 原 4.34em */
	--ast-container-default-md-padding: 2em;      /* 原 3.34em */
	--ast-container-default-sm-padding: 1.5em;    /* 原 6.67em ← 修复反向 */
	--ast-container-default-xs-padding: 1em;      /* 原 2.4em */
	--ast-container-default-xxs-padding: 0.5em;   /* 原 1.4em */
}

/* ============================================
 * 5. 颜色系统覆盖
 * ============================================ */

/* 覆盖 Astra 全局颜色变量 */
:root {
	--ast-global-color-0: var(--nei-primary);
	--ast-global-color-1: var(--nei-primary-hover);
	--ast-global-color-2: var(--nei-text-primary);
	--ast-global-color-3: var(--nei-text-secondary);
	--ast-global-color-4: var(--nei-bg-secondary);
	--ast-global-color-5: var(--nei-bg-primary);
	--ast-global-color-6: var(--nei-secondary);
	--ast-global-color-7: var(--nei-bg-dark);
	--ast-global-color-8: var(--nei-accent);
}

body {
	background-color: var(--nei-bg-primary);
	color: var(--nei-text-primary);
}

/* ============================================
 * 6. 通用组件
 * ============================================ */

/* 按钮 - 主按钮 */
.ast-button,
.elementor-button,
button.button,
input[type="submit"],
.button,
.button-primary {
	background-color: var(--nei-primary);
	color: var(--nei-text-inverse);
	border: 1px solid var(--nei-primary);
	border-radius: var(--nei-radius-md);
	padding: 0.75rem 1.75rem;
	font-family: var(--nei-font-sans);
	font-size: var(--nei-text-sm);
	font-weight: var(--nei-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--nei-transition-base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ast-button:hover,
.elementor-button:hover,
button.button:hover,
input[type="submit"]:hover,
.button:hover,
.button-primary:hover {
	background-color: var(--nei-primary-hover);
	border-color: var(--nei-primary-hover);
	color: var(--nei-text-inverse);
	transform: translateY(-1px);
	box-shadow: var(--nei-shadow-md);
	text-decoration: none;
}

/* 按钮 - 次按钮（描边） */
.elementor-button.elementor-button-outline,
.button-outline,
.ast-button-outline {
	background-color: transparent;
	color: var(--nei-primary);
	border: 1px solid var(--nei-primary);
}

.elementor-button.elementor-button-outline:hover,
.button-outline:hover,
.ast-button-outline:hover {
	background-color: var(--nei-primary);
	color: var(--nei-text-inverse);
}

/* 按钮 - 强调按钮（金色） */
.nei-button-accent,
.elementor-button.nei-button-accent {
	background-color: var(--nei-accent);
	border-color: var(--nei-accent);
	color: var(--nei-text-primary);
}

.nei-button-accent:hover {
	background-color: var(--nei-accent-light);
	border-color: var(--nei-accent-light);
	color: var(--nei-text-primary);
}

/* 表单输入 */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea,
select {
	font-family: var(--nei-font-sans);
	font-size: var(--nei-text-base);
	color: var(--nei-text-primary);
	background-color: var(--nei-bg-primary);
	border: 1px solid var(--nei-border-strong);
	border-radius: var(--nei-radius-md);
	padding: 0.625rem 1rem;
	transition: border-color var(--nei-transition-fast), box-shadow var(--nei-transition-fast);
	width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--nei-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(31, 58, 77, 0.1);
}

/* 卡片容器 */
.nei-card {
	background-color: var(--nei-bg-primary);
	border: 1px solid var(--nei-border);
	border-radius: var(--nei-radius-lg);
	padding: var(--nei-space-6);
	box-shadow: var(--nei-shadow-sm);
	transition: box-shadow var(--nei-transition-base), transform var(--nei-transition-base);
}

.nei-card:hover {
	box-shadow: var(--nei-shadow-lg);
	transform: translateY(-2px);
}

/* 分隔线 */
.nei-divider {
	height: 1px;
	background-color: var(--nei-border);
	border: none;
	margin: var(--nei-space-7) 0;
}

.nei-divider-accent {
	height: 2px;
	width: 60px;
	background-color: var(--nei-accent);
	border: none;
	margin: var(--nei-space-4) 0;
}

/* ============================================
 * 7. 头部、底部
 * ============================================ */

/*
 * 桌面端：透明 header，与 Hero 图完全融合
 * 移动端：保持独立背景，避免内容滚动时菜单看不清
 * 滚动后：半透明深色背景 + 模糊（让用户有"已进入"感）
 */

/* 顶部导航 - 桌面端透明 */
.site-header,
.ast-header-sticked {
	background-color: transparent;
	border-bottom: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 滚动后 - 半透明深色背景（深青墨） */
.site-header.nei-header-scrolled,
.ast-header-sticked.nei-header-scrolled {
	background-color: rgba(31, 58, 77, 0.92);
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* 导航链接 - 白色（与深色背景图对比） */
.main-header-menu .menu-link,
.ast-desktop .main-header-menu .menu-link {
	color: #ffffff;
	font-weight: var(--nei-weight-medium);
	font-size: var(--nei-text-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color var(--nei-transition-fast);
}

.main-header-menu .menu-link:hover,
.main-header-menu .menu-item:hover > .menu-link {
	color: var(--nei-accent);  /* 香槟金 hover */
	text-decoration: none;
}

/* 当前菜单项 - 香槟金 */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link {
	color: var(--nei-accent);
}

/* 购物车图标 - 白色 */
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart .ast-icon-shopping-cart,
.ast-site-header-cart .ast-woo-header-cart-info-wrap {
	color: #ffffff;
}

/* 移动端 - header 独立背景，避免内容滚动时看不清 */
@media (max-width: 768px) {
	.site-header,
	.ast-header-sticked,
	.ast-mobile-header-content,
	.ast-mobile-popup-content {
		background-color: var(--nei-bg-primary) !important;
		border-bottom: 1px solid var(--nei-border);
	}

	/* 移动端菜单文字恢复深色 */
	.main-header-menu .menu-link,
	.ast-mobile-header-content .menu-link {
		color: var(--nei-text-primary) !important;
	}

	/* 移动端购物车图标 */
	.ast-site-header-cart .ast-cart-menu-wrap,
	.ast-site-header-cart .ast-addon-cart-wrap {
		color: var(--nei-text-primary) !important;
	}
}

/* 底部 - 保持不变 */
.site-footer {
	background-color: var(--nei-bg-secondary);
	border-top: 1px solid var(--nei-border);
}

.site-footer a {
	color: var(--nei-text-secondary);
}

.site-footer a:hover {
	color: var(--nei-primary);
}

/* 减小 Footer 过大 padding */
.site-primary-footer-wrap {
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}

@media (max-width: 768px) {
	.site-primary-footer-wrap {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
}

/* ============================================
 * 8. 保护 Elementor Hero 区设计
 * ============================================ */

/*
 * 不动 Hero 区的 padding / 背景 / 标题位置
 * 既有的暗调深色水晶艺术图（"Premium Crystals, Direct from the Source"）的大留白氛围是品牌核心
 * 子主题不强制覆盖，由 Elementor 设计面板控制
 *
 * 仅在以下场景做最小干预：
 * 1. 移动端限制最大高度（避免长屏幕滚动）
 * 2. 移动端优化标题与按钮的可点击/可读
 */

@media (max-width: 768px) {
	/* 移动端 Hero 区限高，避免长内容 */
	.elementor-element-8o6wmyj,
	.elementor-element-957d0fb {
		min-height: 70vh !important;
	}
}

/* 中部 Section 减小 padding（原 100-120px 偏大） */
.elementor-element-oy74c6f {
	--padding-top: 80px !important;
	--padding-bottom: 80px !important;
}

/* ============================================
 * 9. 响应式断点统一
 * ============================================ */

/* 平板 (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
	:root {
		--nei-container-max: 100%;
	}
}

/* 平板竖屏及以下 (<= 768px) */
@media (max-width: 768px) {
	body {
		font-size: var(--nei-text-sm);
	}

	h1, .entry-content :where(h1) {
		font-size: clamp(1.75rem, 7vw, 2.25rem); /* 28-36px */
	}

	h2, .entry-content :where(h2) {
		font-size: clamp(1.5rem, 5vw, 1.75rem); /* 24-28px */
	}

	h3, .entry-content :where(h3) {
		font-size: var(--nei-text-xl); /* 20px */
	}

	/* 移动端按钮加大点击区域 */
	.ast-button,
	.elementor-button,
	.button {
		padding: 0.875rem 2rem;
		font-size: var(--nei-text-base);
	}

	/* 移动端卡片全宽 */
	.nei-card {
		padding: var(--nei-space-5);
	}
}

/* 手机 (<= 480px) */
@media (max-width: 480px) {
	:root {
		--nei-space-7: 1.5rem;
		--nei-space-8: 2rem;
		--nei-space-9: 3rem;
	}

	body {
		font-size: 13px;
	}

	.ast-button,
	.elementor-button,
	.button {
		display: flex;
		width: 100%;
	}

	/* 手机端隐藏 desktop-only 元素 */
	.nei-hide-mobile {
		display: none !important;
	}
}

/* 大屏 (>= 1440px) - 容器更宽 */
@media (min-width: 1440px) {
	:root {
		--nei-container-max: 1320px;
	}
}

/* ============================================
 * 10. 微动效
 * ============================================ */

/* 链接下划线动画 */
.entry-content a:not(.button):not(.elementor-button) {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size var(--nei-transition-base);
}

.entry-content a:not(.button):not(.elementor-button):hover {
	background-size: 100% 1px;
	text-decoration: none;
}

/* 图片悬浮效果 */
.entry-content img,
.wp-post-image {
	transition: transform var(--nei-transition-slow);
}

/* 滚动出现动画（CSS-only） */
@media (prefers-reduced-motion: no-preference) {
	.nei-fade-in {
		opacity: 0;
		transform: translateY(20px);
		animation: nei-fade-in 0.6s ease forwards;
	}

	@keyframes nei-fade-in {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* 焦点可见性 - 无障碍 */
*:focus-visible {
	outline: 2px solid var(--nei-accent);
	outline-offset: 2px;
}

/* 滚动条样式（Webkit） */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--nei-bg-secondary);
}

::-webkit-scrollbar-thumb {
	background: var(--nei-border-strong);
	border-radius: var(--nei-radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--nei-text-muted);
}

/* ============================================
 * 11. 工具类
 * ============================================ */

/* 文字对齐 */
.nei-text-center { text-align: center; }
.nei-text-left { text-align: left; }
.nei-text-right { text-align: right; }

/* 颜色工具类 */
.nei-text-primary { color: var(--nei-text-primary) !important; }
.nei-text-secondary { color: var(--nei-text-secondary) !important; }
.nei-text-muted { color: var(--nei-text-muted) !important; }
.nei-text-accent { color: var(--nei-accent) !important; }

.nei-bg-primary { background-color: var(--nei-bg-primary) !important; }
.nei-bg-secondary { background-color: var(--nei-bg-secondary) !important; }
.nei-bg-dark { background-color: var(--nei-bg-dark) !important; color: var(--nei-text-inverse); }

/* 间距工具类 */
.nei-mt-0 { margin-top: 0 !important; }
.nei-mt-4 { margin-top: var(--nei-space-4) !important; }
.nei-mt-6 { margin-top: var(--nei-space-6) !important; }
.nei-mt-8 { margin-top: var(--nei-space-8) !important; }

.nei-mb-0 { margin-bottom: 0 !important; }
.nei-mb-4 { margin-bottom: var(--nei-space-4) !important; }
.nei-mb-6 { margin-bottom: var(--nei-space-6) !important; }
.nei-mb-8 { margin-bottom: var(--nei-space-8) !important; }

.nei-pt-8 { padding-top: var(--nei-space-8) !important; }
.nei-pb-8 { padding-bottom: var(--nei-space-8) !important; }

/* 隐藏类 */
.nei-hidden { display: none !important; }
.nei-hide-mobile { display: initial; }
.nei-show-mobile { display: none; }

@media (max-width: 768px) {
	.nei-hide-mobile { display: none !important; }
	.nei-show-mobile { display: initial !important; }
}

/* 容器 */
.nei-container {
	max-width: var(--nei-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nei-space-4);
	padding-right: var(--nei-space-4);
}

.nei-container-narrow {
	max-width: var(--nei-container-narrow);
	margin-left: auto;
	margin-right: auto;
}
