/**
Theme Name: Astra Child
Author: 奶爸建站笔记
Author URI: https://blog.naibabiji.com
Description: 这是Astra子主题，请勿删除。同时Astra也勿删除，修改css和代码保存到这个主题里面，不会因为升级Astra主题而失效。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/* ==========================================================================
   首屏响应式修复  ·  2026-08-22
   问题诊断（实测数据）：
     - 页头 BOOK NOW 按钮容器仅 95px 宽，而 .ast-custom-button 左右 padding
       各 40px 就占 80px，只剩 15px 放文字 → "BOOK NOW" 逐字母竖排，高 125px，
       反过来把页头撑到 157px。
     - 导航 7 项需 ~999px，但容器锁死 1200px 后只分到 926px → 换行成两行。
     - hero 为 height:100vh，却排在页头「下方」，故 hero 底部恒比屏幕低一个
       页头高度；1900x850 下 BOOK NOW 与电话按钮完全落在屏外（超出 181px）。
     - hero 内图片组件固定 768x576，单项就吃掉 576px（内容合计 897px > 850px）。
   ========================================================================== */

/* --- 1. 页头按钮：禁止逐字母竖排（本次最关键的一条） ------------------- */
.ast-custom-button-link,
.ast-builder-button-wrap .ast-custom-button {
	white-space: nowrap;
}

/* padding 从 10px 40px 收到 10px 22px，按钮所需宽度由 175px 降到 ~139px */
.ast-builder-button-wrap .ast-custom-button {
	padding-left: 22px;
	padding-right: 22px;
}

/* --- 2. 大屏上让页头用足屏幕宽度，导航不再被迫换行 --------------------- */
/* 实测（1280px 宽）：页头网格 1200px = logo 119 + 导航 850 + 按钮 191，
   而导航单行天然需要 1032px（已含收紧后的内边距），缺口 182px。
   故单行导航要求网格 >= 119 + 1004 + 191 = 1314px，即视口 >= 1400px。
   低于 1400px 不强制单行：让导航自然换成两行，项目宽度完整、文字不折行。
   （页头总高不受影响 —— logo 86px 高于两行导航 60px，恒为 118px。）    */
@media (min-width: 1400px) {
	.ast-primary-header-bar .site-primary-header-wrap,
	.ast-primary-header-bar .ast-builder-grid-row-container-inner {
		max-width: 1500px;
	}
	.main-header-menu > .menu-item > .menu-link {
		padding-left: 11px;
		padding-right: 11px;
	}
	.main-header-menu {
		flex-wrap: nowrap;
	}
}

/* --- 3. 收紧导航项间距，7 项 + 按钮在 1200px 内也能单行排开 ------------ */


/* --- 4. hero 高度必须扣掉页头，否则底部内容恒被切 --------------------- */
:root {
	--yh-header-h: 128px;
}
@media (max-width: 921px) {
	:root {
		--yh-header-h: 125px;
	}
}

.elementor-element-5b7f622d.elementor-section-height-full {
	height: auto !important;
	min-height: calc(100vh - var(--yh-header-h)) !important;
}
/* svh 让移动端把浏览器地址栏的高度也算进去（支持的浏览器覆盖上一条） */
@supports (height: 100svh) {
	.elementor-element-5b7f622d.elementor-section-height-full {
		min-height: calc(100svh - var(--yh-header-h)) !important;
	}
}

/* --- 5. hero 图片按视口高度封顶，替代固定 576px ------------------------ */
.elementor-element-5b7f622d .elementor-widget-image img {
	max-height: 30vh;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

/* --- 6. 矮视口（笔记本 / 开了多条书签栏）再压缩组件间距 --------------- */
@media (max-height: 860px) and (min-width: 922px) {
	.elementor-element-5b7f622d .elementor-widget:not(:last-child) {
		margin-bottom: 12px !important;
	}
	.elementor-element-5b7f622d .elementor-widget-image img {
		max-height: 26vh;
	}
}

/* --- 7. 移动端 / 平板：内容实测 754px > 可用 731px，需再削高 -----------
   实测（375x812）：图片组件 267px + 标题 80 + 副标题 185 + 两按钮 102
   + 四段 20px 间距 = 754px。图片上限降到 20vh、间距减半，合计省约 145px，
   让真机（地址栏占掉 60-80px）也能完整看到电话按钮。                      */
@media (max-width: 921px) {
	.elementor-element-5b7f622d .elementor-widget-image img {
		max-height: 20vh;
	}
	.elementor-element-5b7f622d .elementor-widget:not(:last-child) {
		margin-bottom: 10px !important;
	}
}

/* --- 8. 恢复垂直居中 ---------------------------------------------------
   Elementor 原生规则是 section{height:100vh} + container{height:100%}。
   上面第 4 条把 section 改成 height:auto 后，容器的 height:100% 失去参照
   高度、退化为内容高度（实测平板上只有 586px，section 却是 943px），导致
   内容顶到上方、下方空出 357px。让容器继承 section 的 min-height 即可让
   Elementor 自己的 align-content:center 重新生效。                        */
.elementor-element-5b7f622d.elementor-section-height-full > .elementor-container {
	min-height: inherit;
}

/* --- 9. 页头高度分三档（均为浏览器实测值，非估算）---------------------
   375px 宽 → 页头 87px    （Astra 手机版页头）
   768px 宽 → 页头 125px   （Astra 平板版页头，logo 更大）
   ≥922px   → 页头 128px   （桌面版页头；2026-08 换成竖向新 logo 300x344，按 84px 宽渲染即 96px 高，比旧 logo 高 10px）
   此条放在文件末尾，让 ≤544px 时覆盖上面的 921px 档。                    */
@media (max-width: 544px) {
	:root {
		--yh-header-h: 87px;
	}
}

/* --- 10. 矮视口（小屏手机 / 真机地址栏占位后）------------------------
   实测 360x600：内容需 588px，可用仅 519px（600-81 页头），BOOK NOW 与
   电话按钮双双出屏。各元素实测：图片 120 / H2 31px字号占 81 /
   副标题 22px字号30px行高折5行占 185 / 两按钮 102 / 四段间距 40。
   按下列压缩共省约 111px → 内容 477px，留 42px 余量。                  */
@media (max-width: 921px) and (max-height: 780px) {
	.elementor-element-5b7f622d .elementor-widget-image img {
		max-height: 14vh;
	}
	.elementor-element-5b7f622d .elementor-widget-heading h1,
	.elementor-element-5b7f622d .elementor-widget-heading h2 {
		font-size: 26px !important;
		line-height: 1.15 !important;
	}
	.elementor-element-5b7f622d .elementor-widget-text-editor,
	.elementor-element-5b7f622d .elementor-widget-text-editor p {
		font-size: 17px !important;
		line-height: 1.4 !important;
	}
	.elementor-element-5b7f622d .elementor-widget:not(:last-child) {
		margin-bottom: 8px !important;
	}
}

/* --- 11. 极矮视口（手机横屏）------------------------------------------
   375px 高度内放不下 图片+标题+副标题+两按钮。此时隐藏 hero 图片
   （背景照片仍在，信息不丢），优先保证 BOOK NOW 与电话号码可见。      */
@media (max-height: 500px) {
	.elementor-element-5b7f622d .elementor-widget-image {
		display: none !important;
	}
	.elementor-element-5b7f622d .elementor-widget-text-editor,
	.elementor-element-5b7f622d .elementor-widget-text-editor p {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
	.elementor-element-5b7f622d .elementor-widget-heading h1,
	.elementor-element-5b7f622d .elementor-widget-heading h2 {
		font-size: 22px !important;
	}
	.elementor-element-5b7f622d .elementor-widget:not(:last-child) {
		margin-bottom: 6px !important;
	}
	/* 横屏下 hero 不必强撑满屏，按内容高度即可，避免底部溢出 */
	.elementor-element-5b7f622d.elementor-section-height-full,
	.elementor-element-5b7f622d.elementor-section-height-full > .elementor-container {
		min-height: 0 !important;
	}
}