/*!
 * German Store Child 站点主样式（Blocksy 子主题样式入口）
 * ---------------------------------------------------------
 * 本文件是子主题全部真实样式的唯一维护入口。
 *
 * 设计基线：Blocksy（免费父主题）+ Garderobe Starter Site（Gutenberg 版）。
 * - 颜色一律引用 Blocksy 调色板 CSS 变量（var(--theme-palette-color-*)），
 *   不自定义任何色值，继承 Garderobe 视觉风格；
 * - 例外：gs-top-bar 与 gs-trust-bar 两条信息栏使用专用十六进制色值
 *   （深炭 #1a1a1a、白 #ffffff、浅暖灰 #f5f1ec、深字 #2b2b2b），
 *   保证 WCAG AA ≥ 4.5:1 对比度（调色板变量对比度不达标）；
 * - 字体、布局容器等继承 Blocksy/Garderobe 主题体系，不另设 font-family；
 * - 无外部资源：不引用任何外部字体、CDN 或统计/跟踪资源。
 *
 * 本文件不重复 Blocksy 已提供的基础样式（reset、无障碍处理等），
 * 也不覆盖父主题布局类。
 */

/* ------------------------------------------------------------------
 * 信任提示条（gs-trust-bar）
 * ------------------------------------------------------------------
 * 输出位置：页面头部下方、内容区之前，由 Blocksy 官方钩子
 * blocksy:content:before 渲染（见 functions.php 的 german_store_trust_bar）。
 * 视觉基调：私密、克制、现代、可信赖——浅暖灰底（#f5f1ec）+ 深色文字
 * （#2b2b2b），图标保留调色板 color-2 红色强调；背景/文字用专用色值
 * 保证 WCAG AA ≥ 4.5:1 对比度，不依赖调色板变量。
 * 信息不依赖颜色传达（图标 aria-hidden、文本为可读文字）。
 * ------------------------------------------------------------------ */

.gs-trust-bar {
	/* 浅暖灰底 + 深字：AA 对比度 ≈ 12.6:1 ≥ 4.5:1
	 * 计算：L(#2b2b2b)=0.0242，L(#f5f1ec)=0.8839，
	 * (0.8839+0.05)/(0.0242+0.05) ≈ 12.6:1 */
	background: #f5f1ec;

	/* 与内容区区分：与浅暖灰同系的略深分隔线（装饰性，非文本） */
	border-bottom: 1px solid #e3dcd0;

	/* 恢复文档流层级：z-index 由 100 降为 1（仅略高于普通内容），
	 * 避免覆盖移动端 Header 的品牌名/购物车/菜单按钮 */
	position: relative;
	z-index: 1;
}

.gs-trust-bar__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem; /* 三项居中排布，项间距适中 */
	margin: 0 auto;
	padding: 0.5rem 1rem;
	list-style: none;

	/* 与 Garderobe 内容容器对齐：继承 Blocksy 容器宽度变量；
	 * 若该变量不可用，回退到 Blocksy 默认容器宽度（1290px），
	 * 与页面容器保持一致的常规做法。 */
	max-width: var(--theme-container-width, 1290px);
}

.gs-trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;

	/* 略小于正文的字号与合适行高 */
	font-size: 0.875rem;
	line-height: 1.5;

	/* 深色文字（#2b2b2b）置于浅暖灰底（#f5f1ec），AA 对比度 ≈ 12.6:1 */
	color: #2b2b2b;

	/* 正常文档流层级（z-index: 1），不覆盖移动端 Header 控件 */
	position: relative;
	z-index: 1;
}

.gs-trust-bar__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;

	/* 图标使用调色板 color-2（主强调色），仅为装饰性点缀；
	 * 图标 aria-hidden，信息不依赖颜色传达 */
	color: var(--theme-palette-color-2);
}

.gs-trust-bar__icon svg {
	display: block;
}

/* 移动端（≤690px）：Header 文档流修复——断点对齐 Blocksy 移动断点
 * （Blocksy $breakpoints: md: 690px），仅在 Blocksy 实际切换移动布局的
 * 范围内生效。 */
@media (max-width: 690px) {
	/* Blocksy 透明 Header（theme mod header_placements 含 has_transparent_header）
	 * 在移动端仅将设备包装器 [data-device=mobile][data-transparent] 设为
	 * position:absolute（top/left/right:0）脱离文档流，使随后经
	 * blocksy:content:before 输出的 .gs-trust-bar 从页面顶部起排而与其重叠。
	 * Header 本体（#header.ct-header / .ct-header）从不被设 absolute，
	 * 这里只恢复其文档流（position:relative）；真正被设 absolute 的是
	 * 设备包装器，故对其单独清掉 top/left/right 偏移；
	 * 桌面端（>690px）透明 Header 的 absolute 现状保持不变。 */
	#header.ct-header,
	.ct-header {
		position: relative !important;
	}

	/* 精确覆盖 Blocksy transparent-state.scss 的移动端规则：
	 * [data-device='mobile'][data-transparent]{position:absolute;top:0;left:0;right:0} */
	#header.ct-header [data-device='mobile'][data-transparent] {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}
}

/* 移动端（≤768px）：三项两列布局——前两项一行、第三项独占下一行并居中；
 * 不使用横向滚动、不隐藏任何信任项。 */
@media (max-width: 768px) {
	.gs-trust-bar__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.25rem 1.25rem;
		padding: 0.375rem 0.875rem;
	}

	.gs-trust-bar__item {
		line-height: 1.45;
		justify-content: center; /* 各项在各自网格单元内居中 */
	}

	/* 第三项（Persönliche Beratung）独占第二行并居中 */
	.gs-trust-bar__item:last-child {
		grid-column: 1 / -1;
	}
}

/* 极窄屏（≤380px）：退化为单列，避免两列过窄 */
@media (max-width: 380px) {
	.gs-trust-bar__list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * 顶部提示条（gs-top-bar）
 * ------------------------------------------------------------------
 * 输出位置：页面最顶部、Header 之前，由 Blocksy 官方钩子
 * blocksy:header:before 渲染（见 functions.php 的 german_store_top_bar）。
 * 视觉基调：深炭底（#1a1a1a）+ 白字（#ffffff），专用色值保证
 * WCAG AA ≥ 4.5:1 对比度；字号略小、居中，窄屏自然换行；
 * 不引入任何新配色或字体。
 * ------------------------------------------------------------------ */

.gs-top-bar {
	/* 白字 / 深炭底：AA 对比度 ≈ 17.4:1 ≥ 4.5:1
	 * 计算：L(#1a1a1a)=0.0103，L(#ffffff)=1.0，
	 * (1.0+0.05)/(0.0103+0.05) ≈ 17.4:1 */
	color: #ffffff;
	background: #1a1a1a;
	/* 深炭体系内的分隔线（装饰性，非文本） */
	border-bottom: 1px solid #333333;

	/* 恢复文档流层级：z-index 由 100 降为 1，与信任条保持一致 */
	position: relative;
	z-index: 1;

	padding: 0.4rem 1rem;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* 移动端：收紧内边距，文本自然换行避免溢出 */
@media (max-width: 768px) {
	.gs-top-bar {
		padding: 0.375rem 0.75rem;
		line-height: 1.45;
	}
}

/* ------------------------------------------------------------------
 * 站点页脚底部行（gs-site-footer）
 * ------------------------------------------------------------------
 * 输出位置：页面最底部，由 Blocksy 官方钩子 blocksy:footer:after 渲染
 * （见 functions.php 的 german_store_footer）。footer_placements 已由
 * 公开预览整改迁移清空（columns → [[]]、移除 copyright 项），本行即
 * 页脚的实际内容：品牌名 + 三个真实链接 + 版权行。
 * 视觉基调：与信息栏同样克制——自身仍用调色板变量（color-6 次级文本、
 * color-7 分隔、color-8 背景），水平居中，窄屏自然换行；不引入任何
 * 新配色或字体。
 * ------------------------------------------------------------------ */

.gs-site-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 1.25rem 1rem;
	text-align: center;

	color: var(--theme-palette-color-6);
	background: var(--theme-palette-color-8);
	border-top: 1px solid var(--theme-palette-color-7);

	/* 与信息栏保持一致：z-index 由 100 降为 1 */
	position: relative;
	z-index: 1;
}

.gs-site-footer__nav {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.5rem;
}

.gs-site-footer__nav a {
	color: var(--theme-palette-color-6);
	text-decoration: none;
}

.gs-site-footer__nav a:hover {
	color: var(--theme-palette-color-2);
	text-decoration: underline;
}

/* 移动端：元素竖排换行，间距收紧，避免溢出 */
@media (max-width: 768px) {
	.gs-site-footer {
		gap: 0.375rem 1rem;
		padding: 1rem 0.75rem;
	}

	.gs-site-footer__nav {
		gap: 0.375rem 1rem;
	}
}

/* ------------------------------------------------------------------
 * 商品详情页 WhatsApp 咨询入口（gs-whatsapp-entry）
 * ------------------------------------------------------------------
 * 输出位置：woocommerce_after_add_to_cart_button（加购按钮下方、form 内），
 * 仅商品详情页。内联块级按钮，无 absolute/fixed 定位，移动端不遮挡
 * 价格/配置器/加购按钮。WhatsApp 绿底白字，对比度达标。
 * ------------------------------------------------------------------ */

.gs-whatsapp-entry {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;

	padding: 0.625rem 1rem;
	border-radius: 6px;

	background: #25d366;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
}

.gs-whatsapp-entry:hover,
.gs-whatsapp-entry:focus {
	color: #ffffff;
	background: #1eb955;
	text-decoration: none;
}

.gs-whatsapp-entry__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

@media (max-width: 390px) {
	.gs-whatsapp-entry {
		width: 100%;
		justify-content: center;
	}
}