/**
 * BuildBarn 全站壳层样式（body 基线 + 页面纵向节奏 + footer 结构 + a11y 壳件）。
 *
 * 约束：
 *   - 只依赖 buildbarn-tokens.css / buildbarn-components.css。
 *   - 不改 Porto 头部的结构与间距（头部布局由 buildbarn-header-porto-812.css 管）。
 *   - 本文件只提供「壳」的节奏与 a11y，不碰具体页面内容。
 *
 * 覆盖范围：
 *   01. Body 基线：字体、行高、渲染提示、smooth-scroll
 *   02. Skip link 默认位置（.bb-skip-link 已在 components 定义样式）
 *   03. Focus-visible 兜底：所有 <a>/<button> 获得统一 focus ring
 *   04. Sticky header 滚动阴影（body[data-scrolled="true"] 触发）
 *   05. #main 主内容最小高度 + 页面纵向节奏
 *   06. #footer 结构优化：列网格、标题间距、widget 留白、社交图标方格
 *   07. 打印样式：隐藏装饰、统一 A4 排版
 */

/* ============================================================
 * 01. Body 基线
 * ============================================================ */

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

html body {
	font-family: var(--bb-font-sans);
	font-size: var(--bb-fs-base);
	line-height: var(--bb-lh-normal);
	color: var(--bb-text-primary);
	background-color: var(--bb-bg-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html body h1,
html body h2,
html body h3,
html body h4 {
	font-family: var(--bb-font-display);
	color: var(--bb-text-primary);
	line-height: var(--bb-lh-snug);
	letter-spacing: -0.005em;
}
html body h1 { font-size: var(--bb-fs-4xl); line-height: var(--bb-lh-tight); font-weight: 600; }
html body h2 { font-size: var(--bb-fs-3xl); font-weight: 600; }
html body h3 { font-size: var(--bb-fs-2xl); font-weight: 600; }
html body h4 { font-size: var(--bb-fs-xl); font-weight: 600; }

html body p {
	line-height: var(--bb-lh-relaxed);
}

html body ::selection {
	background-color: rgba(122, 91, 63, 0.28);
	color: var(--bb-text-primary);
}

/* ============================================================
 * 02. Skip link 位置
 * ============================================================ */

.bb-skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: var(--bb-z-toast);
}
.bb-skip-link:focus,
.bb-skip-link:focus-visible {
	left: 16px;
}

/* ============================================================
 * 03. 全局 focus-visible（a11y 兜底）
 * ============================================================ */

html body a:focus-visible,
html body button:focus-visible,
html body [role="button"]:focus-visible,
html body summary:focus-visible {
	outline: none;
	box-shadow: var(--bb-focus-ring);
	border-radius: var(--bb-radius-xs);
}

/* ============================================================
 * 04. 滚动阴影（body[data-scrolled="true"] 由极小 JS 标记）
 * ============================================================ */

html body #header.sticky-header,
html body[data-scrolled="true"] #header {
	transition: box-shadow var(--bb-dur-base) var(--bb-ease);
}
html body[data-scrolled="true"] #header {
	box-shadow: var(--bb-shadow-sm);
}

/* ============================================================
 * 05. #main 结构
 * ============================================================ */

html body #main {
	min-height: 60vh;
}
html body .page-header,
html body .entry-header {
	padding-block: var(--bb-space-8) var(--bb-space-6);
}

/*
 * 主内容容器宽度对齐：让首页（.bb-home-container）与其它页面（Porto 默认
 * 的 .container 在 #main 内）在所有常用断点上保持同一最大宽度曲线：
 *
 *   - 1200px+ 视口：1320px（原本 Porto 分类页只有 1200，会比首页窄；
 *     首页今天也是 1320，这里主要是把分类页扩到 1320 和首页对齐。）
 *   - 1440px+ 视口：1440px（原本首页卡在 1320，会比 Porto 分类页的
 *     1440 窄 120px，这里把首页扩到 1440 和 Porto 对齐。）
 *
 * 只限定 `html body #main .container`，避免污染 header / footer / sidebar
 * 等其它不需要这个宽度的 .container 实例。对 `.bb-home-container` 直接
 * 提升权重为 `html body`，和 home-layout-v2.css 里的规则保持同一权重。
 */
@media (min-width: 1200px) {
	html body.archive #main .container,
	html body.single #main .container,
	html body.page #main .container,
	html body.woocommerce #main .container,
	html body.woocommerce-page #main .container,
	html body.blog #main .container,
	html body #main .container,
	html body.home .bb-home-container {
		max-width: 1320px;
	}
}

@media (min-width: 1440px) {
	html body.archive #main .container,
	html body.single #main .container,
	html body.page #main .container,
	html body.woocommerce #main .container,
	html body.woocommerce-page #main .container,
	html body.blog #main .container,
	html body #main .container,
	html body.home .bb-home-container {
		max-width: 1440px;
	}
}

/*
 * 05b. 非首页与首页「导航下面」视觉边界对齐。
 *
 * 背景（2026-04-18 实测，1440 / 1366 / 1280 / 1200 视口均复现）：
 *   - 首页正文块 .bb-home-container    → 1400 / 1320 / 1240 / 1160
 *   - 其他页 .porto-wrap-container.container → 1365 / 1245 / 1205 / 1128
 *   - 差距 30–75px，用户感知「其他页导航下面窄一圈」。
 *
 * 根因：非首页用 `#main > .container`，max-width 已对齐 1320/1440，
 * 但其内部 `.main-content.col-lg-12 > .wpb-content-wrapper > .vc_row >
 * .porto-wrap-container.container` 这串嵌套里，`.row` / `.col-lg-12` /
 * `.porto-wrap-container.container` 叠了三层 bootstrap gutter，最内层
 * 行级容器被多挤掉几十像素。
 *
 * 对齐做法：把**行级内容容器**撑满 `#main > .container` 的 content box：
 *   1) `.main-content` 在非首页不加 bootstrap 列 gutter。
 *   2) `.wpb-content-wrapper > .vc_row` / `.porto-wrap-container.container`
 *      在 `#main` 内不叠加额外左右 padding，宽度 = 父级 100%。
 *
 * 作用域严格限定 `body:not(.home) #main …`：不碰首页，不碰 header /
 * footer / sidebar / nav（它们不挂在 `#main` 下）。
 */
@media (min-width: 1200px) {
	/*
	 * 对齐曲线（实测 2026-04-18，4 个视口）：
	 *   首页 .bb-home-container   → 1440/1320/1240/1160
	 *   其他页 innerContainer (改前) → 1365/1245/1205/1128 （差 30–75px）
	 *
	 * 根因：首页 .bb-home-container 走「max-width + margin:auto」的
	 * 单容器模式，可突破父链 100% 宽度限制；其他页最内层
	 * `.porto-wrap-container.container` 受多层 `.container > .row > col >
	 * .wpb-content-wrapper > .vc_row.porto-inner-container` 的 padding/
	 * max-width 连环挤压，尤其 `.vc_row.porto-inner-container` 默认
	 * padding-left/right ≈ 25.6px，且 `.container` max-width:1320 会在
	 * 1200–1439 视口卡死父链。
	 *
	 * 做法（三步）：
	 *   1) 非首页 `#main > .container` 切成 fluid（max-width:none,
	 *      width:100%, padding:var(--porto-fluid-spacing)），曲线和首页
	 *      `#main > .container-fluid` 一致。max-width 1440 在 ≥1440 再卡。
	 *   2) `.vc_row.porto-inner-container` 的行级 padding 归零，消除
	 *      25.6px 外挤。
	 *   3) 真正的行级内容容器 `.porto-wrap-container.container` 走和
	 *      `.bb-home-container` 一致的 max-width: 1320 / 1440 曲线，
	 *      配合 margin:auto 居中，这样在小视口受父链限制、在大视口被
	 *      max-width 卡住，和首页像素级对齐。
	 *
	 * 作用域严格限定 `body:not(.home) #main .main-content …`：
	 *   - 首页 .container-fluid / .bb-home-container 不动。
	 *   - header / footer / popup 里的 .vc_row.porto-inner-container 不动。
	 *   - 分类页 col-lg-9 + col-lg-3 sidebar layout 不受影响（container
	 *     变 fluid 后 col-lg-9 仍占 75%，宽度仅微增）。
	 */
	html body:not(.home) #main > .container {
		max-width: none !important;
		width: 100% !important;
		padding-left: var(--porto-fluid-spacing, 20px) !important;
		padding-right: var(--porto-fluid-spacing, 20px) !important;
	}
	html body:not(.home) #main .main-content .wpb-content-wrapper > .vc_row.porto-inner-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	html body:not(.home) #main .main-content .wpb-content-wrapper > .vc_row.porto-inner-container > .porto-wrap-container.container {
		max-width: 1320px !important;
		width: auto !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (min-width: 1440px) {
	html body:not(.home) #main .main-content .wpb-content-wrapper > .vc_row.porto-inner-container > .porto-wrap-container.container {
		max-width: 1440px !important;
	}
}

/* ============================================================
 * 06. Footer 结构优化（颜色已在 site-ui 用 --bb-footer-* token 管）
 * ============================================================ */

html body #footer {
	font-family: var(--bb-font-sans);
	font-size: var(--bb-fs-sm);
	line-height: var(--bb-lh-normal);
}
html body #footer .footer-main {
	padding-block: clamp(32px, 5vw, 56px);
}
html body #footer .widget-title,
html body #footer h3,
html body #footer h4 {
	margin: 0 0 var(--bb-space-4);
	font-family: var(--bb-font-display);
	font-size: var(--bb-fs-lg);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--bb-footer-accent, #d2b293);
}
html body #footer .widget {
	margin-bottom: var(--bb-space-6);
}
html body #footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
html body #footer ul li {
	padding-block: 4px;
}
html body #footer a {
	transition: color var(--bb-dur-fast) var(--bb-ease);
}

/* Social icon squares */
html body #footer .footer-social a,
html body #footer .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 6px;
	border: 1px solid var(--bb-footer-divider, rgba(255, 255, 255, 0.14));
	border-radius: var(--bb-radius-sm);
	color: var(--bb-footer-link);
	transition: background-color var(--bb-dur-fast) var(--bb-ease),
		border-color var(--bb-dur-fast) var(--bb-ease),
		color var(--bb-dur-fast) var(--bb-ease);
}
html body #footer .footer-social a:hover,
html body #footer .social-icons a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--bb-footer-accent);
	color: var(--bb-footer-link-hover);
}

html body #footer .footer-bottom {
	padding-block: var(--bb-space-5);
	border-top: 1px solid var(--bb-footer-divider, rgba(255, 255, 255, 0.14));
	font-size: var(--bb-fs-xs);
	color: var(--bb-footer-muted);
}

/* ============================================================
 * 07. 打印
 * ============================================================ */

@media print {
	html body #header,
	html body #footer,
	html body .bb-sticky-cta,
	html body nav,
	html body .breadcrumbs,
	html body .pagination,
	html body #chatway-log,
	html body .trustindex-widget {
		display: none !important;
	}
	html body {
		color: #000 !important;
		background-color: #fff !important;
	}
	html body a {
		color: #000 !important;
		text-decoration: underline !important;
	}
	html body h1, html body h2, html body h3 {
		page-break-after: avoid;
	}
}