/*
 * Footer layout for the hufu-theme/footer pattern.
 *
 * 颜色、字号、间距一律走 theme.json 令牌；这里只补 pattern 里不适合用
 * 静态标记表达的布局（列宽、换行、页脚列表的排版）。页脚用主题默认的
 * base 背景 + contrast 文字，所以这里不写死任何色值。
 *
 * 本主题没有全局 box-sizing: border-box，凡是自己设了宽度的元素都补上。
 */

.hufu-footer {
	box-sizing: border-box;
}

.hufu-footer__top {
	/* 核心 flex 布局的默认 align-items 是 center，短列会被压到中线。
	   即使编辑器里存的是 verticalAlignment: top，这里也再钉一次。 */
	align-items: flex-start;
	margin-block-end: var(--wp--preset--spacing--50);
}

/* 让品牌列吃掉剩余空间，两列导航就会并排靠右，而不是被 space-between
   拉开成三段、中间空出一大块。 */
.hufu-footer__brand {
	flex: 1 1 300px;
}

.hufu-footer__col {
	flex: 0 1 220px;
}

.hufu-footer h6 {
	margin: 0;
}

/* 页脚导航：pattern 里是显式的页面列表，用户也可能把它换成自定义菜单；
   两种形态都按同一套排版走 —— navigation-link 和页面列表项带的是
   同一个 .wp-block-navigation-item__content 类。 */
.hufu-footer .wp-block-navigation {
	/* 正文是 theme.json 里的 large，页脚导航降一档，避免和站点标题抢层级。 */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* 显式页面列表：去掉 ul 的默认缩进和圆点。 */
.hufu-footer .wp-block-page-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 项目间距交给导航区块自己的 blockGap，两种菜单形态才会一样。 */
.hufu-footer .wp-block-navigation-item {
	margin: 0;
}

.hufu-footer .wp-block-navigation-item__content {
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.hufu-footer .wp-block-navigation-item__content:hover,
.hufu-footer .wp-block-navigation-item__content:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hufu-footer .wp-block-separator {
	margin-block: var(--wp--preset--spacing--40);
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.hufu-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--30);
}

.hufu-footer__bottom p {
	margin: 0;
	opacity: 0.72;
}

.hufu-footer__bottom a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hufu-footer__bottom a:hover {
	opacity: 1;
}

/* 三列在 ~936px 以下放不下。别让 Follow 单独折到第二行最左边：
   先把品牌撑满一行，两个导航列再并排在下一行。 */
@media (max-width: 959px) {
	.hufu-footer__brand {
		flex: 1 1 100%;
	}

	.hufu-footer__col {
		flex: 1 1 200px;
	}
}

@media (max-width: 781px) {
	.hufu-footer__top {
		flex-direction: column;
		align-items: flex-start;
	}

	/* 纵向堆叠后 flex-basis 作用在「高度」上：不重置的话 brand 会占 300px 高，
	   下面留出一大块空白。 */
	.hufu-footer__brand {
		flex: 0 1 auto;
		width: 100%;
	}

	.hufu-footer__col {
		flex: 0 1 auto;
		width: 100%;
	}

	.hufu-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}