/**
 * Global Styles for Kadence Child Theme
 * 
 * This file contains global styles that apply to the entire site.
 * Load order: Parent Theme → Global CSS → Module CSS (product.css, etc.)
 * 
 * Design Principles:
 * - Global fonts use rem for adaptive terminal
 * - Module fonts use rem or inherit (product description, summary, specs use 0.875rem ≈ 14px)
 * - Responsive media queries for tablet and mobile font adjustments
 * - Unified line-height for readability
 * - Modular CSS: product.css controls product module fonts, doesn't affect global.css
 * 
 * @package Kadence_Child
 * @since 1.0.0
 */

/* ========================================
   Root Font Size & Base Styles
   ======================================== */

/**
 * 设置根字体大小为 16px（浏览器默认）
 * 使用 rem 单位，1rem = 16px
 * 这样可以根据用户浏览器的字体大小设置自适应
 */
:root {
	font-size: 16px;
	line-height: 1.6;
	
	/* 颜色变量定义 */
	--color-bg: #ffffff;           /* 页面背景色：白色 */
	--color-button: #ff8c00;       /* 按钮颜色：橙色 */
	--color-button-hover: #ffd700; /* 按钮悬停：亮黄色 */
	--color-button-active: #cc7000; /* 按钮激活：深黄色 */
	--color-underline: #003d82;    /* 下划线颜色：深蓝色 */
}

/* ========================================
   Global Typography
   ======================================== */

/**
 * 全局字体设置
 * 使用 rem 单位，自适应终端
 */
html {
	background-color: var(--color-bg); /* 页面背景色：白色 */
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem; /* 16px */
	line-height: 1.6;
	color: #333;
	background-color: var(--color-bg); /* 页面背景色：白色 */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * 标题字体设置
 */
h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 1rem 0;
	color: #1a1a1a;
}

h1 { font-size: 2rem; }      /* 32px */
h2 { font-size: 1.75rem; }    /* 28px */
h3 { font-size: 1.5rem; }     /* 24px */
h4 { font-size: 1.25rem; }    /* 20px */
h5 { font-size: 1.125rem; }   /* 18px */
h6 { font-size: 1rem; }       /* 16px */

/**
 * 段落和文本元素
 */
p {
	margin: 0 0 1rem 0;
	line-height: 1.6;
}

a {
	color: #0073aa;
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: #005177;
}

a:active {
	color: #003d82;
}

/**
 * 列表样式
 */
ul, ol {
	margin: 0 0 1rem 0;
	padding-left: 1.5rem;
	line-height: 1.6;
}

li {
	margin-bottom: 0.5rem;
}

/* ========================================
   Container Width & Layout
   ======================================== */

/**
 * 页面内容容器宽度设置
 * 最大宽度：1440px
 * 居中对齐，响应式自适应
 */
.product-content {
	/* 产品单页内容容器 */
	position: relative;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	width: 100%;
	box-sizing: border-box;
}

.product-archive-content {
	/* 归档/分类页内容容器 - 只设置下方间距 */
	position: relative;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4rem;
	width: 100%;
	box-sizing: border-box;
}

/**
 * 内容区域内部容器
 * 用于嵌套布局控制
 */
.product-content > *,
.product-archive-content > * {
	max-width: 100%;
}

/* ========================================
   Style Isolation Containers
   ======================================== */

/* ========================================
   Module Base Styles
   ======================================== */

/**
 * 模块基础样式
 * 产品描述、摘要、参数表等使用 0.875rem（≈14px）
 * 这些样式在 product.css 中会被具体模块覆盖
 */
.product-content .product-description,
.product-content .product-summary,
.product-content .product-specs,
.product-archive-content .product-card-description {
	font-size: 0.875rem; /* 14px */
	line-height: 1.6;
}

/* ========================================
   Responsive Media Queries
   ======================================== */

/**
 * 超大屏幕（1920px 及以上）
 */
@media screen and (min-width: 1920px) {
	.product-content {
		max-width: 1440px;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.product-archive-content {
		max-width: 1440px;
	}
}

/**
 * 大桌面（1440px - 1919px）
 */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
	.product-content {
		max-width: 1440px;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.product-archive-content {
		max-width: 1440px;
	}
}

/**
 * 桌面（1280px - 1439px）
 */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	.product-content {
		max-width: 1280px;
		padding-left: 2rem;
		padding-right: 2rem;
	}
	
	.product-archive-content {
		max-width: 1280px;
	}
}

/**
 * 小桌面（1024px - 1279px）
 */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.product-content {
		max-width: 1024px;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.product-archive-content {
		max-width: 1024px;
	}
}

/**
 * 平板设备（768px - 1023px）
 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	:root {
		font-size: 15px; /* 微调根字体大小 */
	}
	
	.product-content {
		max-width: 100%;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.product-archive-content {
		max-width: 100%;
	}
	
	h1 { font-size: 1.875rem; }  /* 30px */
	h2 { font-size: 1.625rem; }  /* 26px */
	h3 { font-size: 1.375rem; }  /* 22px */
	h4 { font-size: 1.125rem; }  /* 18px */
	
	body {
		font-size: 0.9375rem; /* 15px */
		line-height: 1.65;
	}
	
	/* 模块字体微调 */
	.product-content .product-description,
	.product-content .product-summary,
	.product-content .product-specs,
	.product-archive-content .product-card-description {
		font-size: 0.8125rem; /* 13px */
		line-height: 1.65;
	}
}

/**
 * 手机设备（最大 767px）
 */
@media screen and (max-width: 767px) {
	:root {
		font-size: 14px; /* 进一步减小根字体大小 */
	}
	
	.product-content {
		max-width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.product-archive-content {
		max-width: 100%;
	}
	
	h1 { font-size: 1.75rem; }   /* 28px */
	h2 { font-size: 1.5rem; }    /* 24px */
	h3 { font-size: 1.25rem; }   /* 20px */
	h4 { font-size: 1.125rem; }  /* 18px */
	h5 { font-size: 1rem; }      /* 16px */
	h6 { font-size: 0.875rem; }  /* 14px */
	
	body {
		font-size: 0.875rem; /* 14px */
		line-height: 1.7;
	}
	
	/* 模块字体微调 */
	.product-content .product-description,
	.product-content .product-summary,
	.product-content .product-specs,
	.product-archive-content .product-card-description {
		font-size: 0.75rem; /* 12px */
		line-height: 1.7;
	}
	
	/* 移动端列表和段落间距调整 */
	p {
		margin-bottom: 0.875rem;
		line-height: 1.7;
	}
	
	ul, ol {
		margin-bottom: 0.875rem;
		padding-left: 1.25rem;
	}
}

/**
 * 小屏手机设备（最大 480px）
 */
@media screen and (max-width: 480px) {
	:root {
		font-size: 14px;
	}
	
	.product-content {
		max-width: 100%;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	
	.product-archive-content {
		max-width: 100%;
	}
	
	h1 { font-size: 1.5rem; }    /* 24px */
	h2 { font-size: 1.375rem; }  /* 22px */
	h3 { font-size: 1.125rem; }  /* 18px */
	
	body {
		font-size: 0.875rem; /* 14px */
		line-height: 1.75;
	}
	
	/* 模块字体进一步微调 */
	.product-content .product-description,
	.product-content .product-summary,
	.product-content .product-specs,
	.product-archive-content .product-card-description {
		font-size: 0.75rem; /* 12px */
		line-height: 1.75;
	}
}

/* ========================================
   Utility Classes
   ======================================== */

/**
 * 工具类：文本大小
 */
.text-small {
	font-size: 0.875rem; /* 14px */
	line-height: 1.6;
}

.text-xs {
	font-size: 0.75rem; /* 12px */
	line-height: 1.6;
}

.text-base {
	font-size: 1rem; /* 16px */
	line-height: 1.6;
}

.text-lg {
	font-size: 1.125rem; /* 18px */
	line-height: 1.6;
}

/**
 * 工具类：行高
 */
.line-height-tight {
	line-height: 1.3;
}

.line-height-normal {
	line-height: 1.6;
}

.line-height-relaxed {
	line-height: 1.8;
}

/* ========================================
   Button Styles
   ======================================== */

/**
 * 全局按钮样式
 * 按钮颜色：橙色
 * 悬停：亮黄色
 * 激活：深黄色
 */
button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: var(--color-button); /* 橙色 */
	border: 2px solid var(--color-button);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.button:hover {
	background-color: var(--color-button-hover); /* 亮黄色 */
	border-color: var(--color-button-hover);
	color: #1a1a1a;
	text-decoration: none;
	transform: translateY(-1px);
}

button:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
a.button:active {
	background-color: var(--color-button-active); /* 深黄色 */
	border-color: var(--color-button-active);
	color: #ffffff;
	transform: translateY(0);
}

button:focus,
.button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
a.button:focus {
	color: #ffffff;
	background-color: var(--color-button);
	border-color: var(--color-button);
	text-decoration: none;
	outline: 2px solid var(--color-underline);
	outline-offset: 2px;
}

/* 防止 a.button 在点击后因 :visited 或全局 a 样式变成蓝色 */
a.button:visited {
	color: #ffffff;
	background-color: var(--color-button);
	border-color: var(--color-button);
	text-decoration: none;
}

button:disabled,
.button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
a.button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========================================
   Accessibility
   ======================================== */

/**
 * 可访问性：支持用户字体大小设置
 * 如果用户设置了更大的字体，尊重用户选择
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/**
 * 高对比度模式支持
 */
@media (prefers-contrast: high) {
	body {
		color: #000;
	}
	
	a {
		color: #0000ee;
		text-decoration: underline;
	}
}