/* ============================================================
   qhtaoli.cn 响应式适配补丁
   作用：让桌面固定宽度的老模板在手机/平板上正常显示
   原则：只覆盖必要属性，不改动原有视觉风格
   ============================================================ */

/* ---------- 1. 视口与基础 ---------- */
* {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

/* 允许表格里长内容换行，避免撑破布局 */
body {
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* 文章正文里的表格允许横向滚动 */
.content {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- 2. 中等屏幕（≤1200px） ---------- */
@media screen and (max-width: 1200px) {
	html body {
		width: auto !important;
		max-width: 100% !important;
		padding: 0 8px !important;
		margin: 0 auto !important;
		box-sizing: border-box;
		box-shadow: none !important;
	}
	.content {
		width: auto !important;
	}
}

/* ---------- 3. 平板（≤900px） ---------- */
@media screen and (max-width: 900px) {
	/* 侧栏改为整行显示在正文下方 */
	.sider,
	.homepage .sider,
	td.sider {
		display: block !important;
		width: auto !important;
		float: none !important;
		margin-top: 12px;
	}

	/* 主内容区与侧栏堆叠：把两列布局压成单列 */
	table[cellspacing="10"] > tbody > tr,
	table[cellspacing="10"] > tr {
		display: block;
	}

	table[cellspacing="10"] > tbody > tr > td,
	table[cellspacing="10"] > tr > td {
		display: block;
		width: auto !important;
	}

	td.main {
		display: block !important;
		width: auto !important;
	}

	/* 头部导航允许换行 */
	.nav .nav_global ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.nav .nav_global li {
		float: none !important;
	}
}

/* ---------- 4. 手机（≤640px） ---------- */
@media screen and (max-width: 640px) {
	html body {
		padding: 0 6px !important;
	}

	/* 正文字号略放大，手机可读 */
	td {
		font-size: 14px;
		line-height: 1.7;
	}
	.box ul li,
	.box ul li p {
		font-size: 14px;
		line-height: 1.7;
	}

	/* 标题不撑破 */
	.title td,
	.title strong {
		font-size: 15px;
	}

	/* 文章标题 */
	h1 {
		font-size: 18px !important;
		line-height: 1.5 !important;
	}

	/* 文章内的图片不溢出 */
	.content img,
	#text img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* 文章内表格：可横向滚动，不压缩变形 */
	#text table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	/* 顶部工具条链接之间收紧 */
	.top td {
		font-size: 12px;
		padding: 4px 2px;
	}
	.top table td {
		padding: 3px 4px;
	}

	/* 页脚链接换行居中 */
	.copyright,
	.copyright td {
		font-size: 12px;
		line-height: 1.9;
		text-align: center;
	}

	/* 按钮类元素触控友好 */
	.top .inputSub,
	input[type="submit"],
	input[type="button"] {
		min-height: 30px;
		padding: 0 10px;
	}

	/* 首页大横幅高度自适应 */
	img[src*="opensource"] {
		height: auto !important;
		max-height: 100px;
	}
}

/* ---------- 5. 超小屏（≤380px） ---------- */
@media screen and (max-width: 380px) {
	td {
		font-size: 13px;
	}
	h1 {
		font-size: 17px !important;
	}
}

/* ---------- 6. 强制覆盖模板内联的固定宽度 ---------- */
/* 模板里有 table:has(iframe[width=920]) td.sider{width:350px!important;max-width:none!important}
   这条规则会让侧栏无法收缩，必须用同等优先级 + 更高特异性覆盖 */
@media screen and (max-width: 1200px) {
	table:has(iframe[width="920"]) td.sider,
	table:has(iframe[width="920"]) td.sider:first-child,
	td.sider,
	.sider {
		width: auto !important;
		max-width: 100% !important;
		display: block !important;
		float: none !important;
	}

	/* 快捷通道固定 580px 高，移动端改自适应 */
	.quick {
		height: auto !important;
		min-height: 0 !important;
	}

	/* 所有表格允许收缩 */
	table {
		max-width: 100% !important;
	}

	/* iframe 类内容等比缩小 */
	iframe {
		max-width: 100% !important;
	}
}

@media screen and (max-width: 768px) {
	/* 侧栏在主内容下方，且占满宽度 */
	table:has(iframe[width="920"]) td.sider,
	td.sider {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
	}

	/* 快捷通道红色面板满宽自适应 */
	.quick {
		width: 100% !important;
		height: auto !important;
	}
	.quick .q-head {
		padding: 10px 8px 8px !important;
	}
	.quick .q-title {
		font-size: 18px !important;
	}
	.quick .q-grid a {
		min-height: 34px !important;
		font-size: 14px !important;
	}

	/* 表格布局改为自动，避免固定列宽 */
	table[width="920"],
	table[width="100%"] {
		width: 100% !important;
		table-layout: auto !important;
	}
}

/* ============================================================
   RQO-FIX2：覆盖 HTML width 属性（属性优先级高于 class 选择器）
   页面里有 td width="350"（侧栏）、td width="300"（6处）
   这些内联属性会让表格在手机上无法收缩
   ============================================================ */
@media screen and (max-width: 1200px) {
	/* 所有带固定像素宽度的单元格改为自适应 */
	td[width="350"],
	td[width="300"],
	td[width="230"],
	td[width="240"],
	td[width="250"],
	td[width="280"],
	td[width="320"],
	td[width="360"],
	td[width="400"],
	td[width="500"],
	td[width="600"],
	td[width="700"],
	td[width="920"] {
		width: auto !important;
		max-width: 100% !important;
	}

	/* 带固定宽度的表格改为全宽自适应 */
	table[width="920"],
	table[width="900"],
	table[width="800"],
	table[width="760"],
	table[width="700"],
	table[width="600"],
	table[width="500"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* 最主要的容器：body 本身 */
	html body {
		width: auto !important;
		max-width: 100vw !important;
		min-width: 0 !important;
	}

	/* 所有 table 允许收缩，禁止固定布局 */
	table {
		max-width: 100% !important;
	}
}

@media screen and (max-width: 768px) {
	/* 侧栏单独处理：整行显示 */
	td.sider,
	td[width="350"].sider,
	td[width="300"].sider {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	/* 双列布局压成单列 */
	td.sider + td,
	td + td.sider {
		display: block !important;
	}

	/* 快捷通道面板高度自适应 */
	.quick {
		width: 100% !important;
		height: auto !important;
	}
}