/*
 * 前台样式覆盖（英文版）
 * ------------------------------------------------------------------
 * 本文件由主题引入，加载顺序在所有原主题样式之后，
 * 因此可以安全地覆盖 /skin/css/ 下的规则，而无需改动原文件。
 *
 * 目前包含两项调整：
 *   1. 桌面端主导航整体右移，避免与左侧 Logo 重叠
 *   2. 留言表单提交按钮使用站内统一的 thm-btn 外观
 */


/* ==================================================================
 * 1. 桌面端主导航位置
 *
 * 原样式（mibooz.css 第 400-408 行）在 ≥1200px 时把导航层设为
 *   position: absolute; left: 0; width: 100%;
 * 并用 justify-content: center 居中。
 * 由于 Logo 同为绝对定位且层级更高（z-index 11 > 10），
 * 居中后的导航首项会被 Logo 压住（Home 只露出后半截）。
 *
 * 实测布局数据：
 *   · Logo 右边界固定在 293px
 *   · 菜单项之间有 60px 外边距（mibooz.css 第 536-539 行）
 *   · 整条菜单在原始间距下约 934px
 *   · 电话块在 <1600px 时被隐藏（mibooz.css 第 686-688 行）
 *
 * 解决办法：不再居中，让菜单从 Logo 右侧固定起点开始排布，
 * 并按屏幕宽度分档收放「左侧留白」与「菜单项间距」，
 * 保证 1200px 及以上的任何宽度都不与 Logo、搜索图标重叠。
 * ================================================================== */

/* ---- 大屏（≥1600px）：空间充裕，保留原菜单项间距 ---- */
@media (min-width: 1600px) {

	.main-menu-wrapper__main-menu {
		padding-left: 320px !important;
		padding-right: 200px !important;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	.main-menu .main-menu__list,
	.stricky-header .main-menu__list {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.main-menu .main-menu__list > li > a,
	.stricky-header .main-menu__list > li > a {
		white-space: nowrap;
	}
}

/* ---- 中屏（1400-1599px）：略收左侧留白 ---- */
@media only screen and (min-width: 1400px) and (max-width: 1599px) {

	.main-menu-wrapper__main-menu {
		padding-left: 310px !important;
		padding-right: 90px !important;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	.main-menu .main-menu__list,
	.stricky-header .main-menu__list {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.main-menu .main-menu__list > li > a,
	.stricky-header .main-menu__list > li > a {
		white-space: nowrap;
	}
}

/*
 * ---- 小屏桌面（1200-1399px）：需要靠压缩菜单项间距腾出空间 ----
 *
 * 此区间电话块已隐藏，右侧只需避开搜索图标。
 * 窗口最小 1200px 时：1200 - 300（左留白） - 40（右留白） = 860px 可用，
 * 而菜单在原始 60px 间距下需 934px，因此把项间距压到 32px，
 * 菜单收缩到约 770px，可稳定放下。
 */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {

	.main-menu-wrapper__main-menu {
		padding-left: 300px !important;
		padding-right: 40px !important;
		box-sizing: border-box;
		justify-content: flex-start;
	}

	.main-menu .main-menu__list,
	.stricky-header .main-menu__list {
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	/* 压缩菜单项间距（原为 60px） */
	.main-menu .main-menu__list > li + li,
	.stricky-header .main-menu__list > li + li {
		margin-left: 32px;
	}

	.main-menu .main-menu__list > li > a,
	.stricky-header .main-menu__list > li > a {
		white-space: nowrap;
	}
}


/* ==================================================================
 * 2. 留言表单提交按钮
 *
 * 模板里按钮的类名是 btn-1 btn-3 submit，但原主题样式中
 * 从未定义过 .btn-1 / .btn-3（这是原模板遗留的无效类名），
 * 于是按钮一直呈现浏览器默认外观（一个没有文字的小灰框）。
 *
 * 这里给按钮定义完整外观：主题蓝实心底 + 白字，
 * 与站内深色区块上的按钮风格一致，在白色表单区域中也清晰可见。
 * ================================================================== */
button.thm-btn,
button.submit.thm-btn {
	/* 按钮元素默认 inline-block，这里显式声明以覆盖浏览器默认样式 */
	display: inline-block;
	vertical-align: middle;

	/* 字体：与站内其他按钮统一 */
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;

	/* 尺寸 */
	padding: 10px 42px;
	min-width: 150px;

	/* 主题蓝实心按钮：白底页面上清晰可见 */
	background-color: var(--mibooz-primary);
	color: #ffffff;
	border: 2px solid var(--mibooz-primary);
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
	z-index: 1;

	transition: all 0.3s linear;
}

/* 悬停：反白，与站内按钮的交互反馈一致 */
button.thm-btn:hover,
button.submit.thm-btn:hover,
button.thm-btn:focus,
button.submit.thm-btn:focus {
	background-color: transparent;
	color: var(--mibooz-primary);
	border-color: var(--mibooz-primary);
}

/* 按钮内文字继承按钮颜色 */
button.thm-btn span,
button.submit.thm-btn span {
	color: inherit;
	position: relative;
	z-index: 2;
}

/*
 * .thm-btn:after 是用来做 hover 填充动画的伪元素，
 * 但本按钮已采用「实心蓝底」方案，该伪元素会挡住文字与背景，
 * 因此这里将其隐藏。
 */
button.thm-btn::after,
button.submit.thm-btn::after {
	display: none;
	content: none;
}

/* 表单里按钮上边距，避免紧贴验证码 */
form .col-12 button.thm-btn.submit {
	margin-top: 8px;
}

/* 窄屏适当收窄，避免按钮换行 */
@media (max-width: 575px) {
	button.thm-btn,
	button.submit.thm-btn {
		padding-left: 28px;
		padding-right: 28px;
		min-width: 0;
		width: 100%;
	}
}