/**
 * Ethantheme Header / Footer 样式
 * ----------------------------------------------------
 * 依赖：tokens.css / components.css
 *
 * 结构：
 * .eth-header
 *   .eth-header__inner (eth-container, flex)
 *     .eth-header__logo
 *     .eth-header__nav
 *       .eth-menu (ul)
 *         .eth-menu-item (li)
 *           .eth-menu-link (a)
 *           .eth-menu-toggle (button, has-children 时出现)
 *           .eth-sub-menu (ul, 二级)
 *             .eth-sub-menu--nested (ul, 三级侧展开)
 *           .eth-mega-menu (div, mega menu 预留)
 *     .eth-header__actions
 *       .eth-header__cta (eth-btn)
 *     .eth-header__toggle (移动端汉堡)
 * .eth-modal (FluentForm 模态)
 * .eth-footer
 *   .eth-footer__inner
 *     .eth-footer__main (grid 4 col)
 *     .eth-footer__bottom
 */

/* =========================================================
 * 1. Header 容器
 * ========================================================= */
.eth-header {
	position: relative;
	z-index: var(--eth-z-header);
	background: var(--eth-bg-surface);
	border-bottom: 1px solid var(--eth-border);
	width: 100%;
}

.eth-header--sticky {
	position: sticky;
	top: 0;
	transition: box-shadow var(--eth-transition-m),
		background var(--eth-transition-m);
}

.eth-header--sticky.eth-header--scrolled {
	box-shadow: var(--eth-shadow-m);
}

/* 首页透明覆盖 Hero */
.eth-header--transparent {
	background: transparent;
	border-bottom-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.eth-header--transparent .eth-menu-link,
.eth-header--transparent .eth-header__logo-text,
.eth-header--transparent .eth-header__toggle span {
	color: var(--eth-light);
}

.eth-header--transparent.eth-header--scrolled {
	background: var(--eth-bg-surface);
	border-bottom-color: var(--eth-border);
}

.eth-header--transparent.eth-header--scrolled .eth-menu-link,
.eth-header--transparent.eth-header--scrolled .eth-header__logo-text,
.eth-header--transparent.eth-header--scrolled .eth-header__toggle span {
	color: var(--eth-text-title);
}

.eth-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eth-space-m);
	padding-block: var(--eth-space-xs);
	min-height: 6rem;
}

/* =========================================================
 * 2. Logo
 * ========================================================= */
.eth-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.eth-header__logo img {
	max-height: 4rem;
	width: auto;
}

.eth-header__logo-text {
	font-size: var(--eth-fs-h4);
	font-weight: var(--eth-fw-bold);
	color: var(--eth-text-title);
	text-decoration: none;
}

/* =========================================================
 * 3. 主导航
 * ========================================================= */
.eth-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.eth-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--eth-space-xs);
}

.eth-menu-item {
	position: relative;
	display: flex;
	align-items: center;
}

.eth-menu-link {
	display: flex;
	align-items: center;
	padding: 0.6em 0.9em;
	color: var(--eth-text-title);
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-medium);
	text-decoration: none;
	border-radius: var(--eth-radius-s);
	transition: color var(--eth-transition-s),
		background var(--eth-transition-s);
}

.eth-menu-link:hover,
.eth-menu-link[aria-current="page"] {
	color: var(--eth-primary);
	background: var(--eth-primary-5);
}

/* 子菜单展开按钮（桌面隐藏，移动端显示） */
.eth-menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	padding: 0.4em;
	cursor: pointer;
	color: inherit;
}

/* =========================================================
 * 4. 二级菜单（横向下拉）
 * ========================================================= */
.eth-sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--eth-bg-surface);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-m);
	box-shadow: var(--eth-shadow-l);
	padding: var(--eth-space-2xs);
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--eth-transition-s),
		visibility var(--eth-transition-s),
		transform var(--eth-transition-s);
	z-index: var(--eth-z-dropdown);
}

.eth-menu-item--has-children:hover > .eth-sub-menu,
.eth-menu-item--has-children:focus-within > .eth-sub-menu,
.eth-menu-item--has-children.is-expanded > .eth-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.eth-sub-menu .eth-menu-item {
	width: 100%;
}

.eth-sub-menu .eth-menu-link {
	padding: 0.5em 0.8em;
	width: 100%;
	border-radius: var(--eth-radius-s);
}

/* =========================================================
 * 5. 三级菜单（侧向展开）
 * ========================================================= */
.eth-sub-menu--nested {
	top: 0;
	left: 100%;
	transform: translateX(-8px);
	margin-left: var(--eth-space-2xs);
}

.eth-menu-item--has-children:hover > .eth-sub-menu--nested,
.eth-menu-item--has-children:focus-within > .eth-sub-menu--nested,
.eth-menu-item--has-children.is-expanded > .eth-sub-menu--nested {
	transform: translateX(0);
}

/* =========================================================
 * 6. Mega Menu 预留
 * --------------------------------------------------------
 * 当 .eth-menu-item--mega 存在时，.eth-mega-menu 容器全宽下拉
 * 实际内容由 filter 注入
 * ========================================================= */
.eth-menu-item--mega {
	position: static;
}

.eth-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--eth-bg-surface);
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-l);
	box-shadow: var(--eth-shadow-xl);
	padding: var(--eth-space-l);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--eth-transition-m),
		visibility var(--eth-transition-m),
		transform var(--eth-transition-m);
	z-index: var(--eth-z-dropdown);
}

.eth-menu-item--mega:hover > .eth-mega-menu,
.eth-menu-item--mega.is-expanded > .eth-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* =========================================================
 * 7. CTA 按钮
 * ========================================================= */
.eth-header__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--eth-space-xs);
}

.eth-header__cta {
	white-space: nowrap;
}

/* =========================================================
 * 8. 移动端汉堡按钮
 * ========================================================= */
.eth-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
}

.eth-header__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--eth-text-title);
	border-radius: 2px;
	transition: transform var(--eth-transition-s),
		opacity var(--eth-transition-s);
}

.eth-header__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.eth-header__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.eth-header__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
 * 9. 响应式（移动端）
 * --------------------------------------------------------
 * 992px 以下隐藏横向菜单，显示汉堡
 * 导航变为竖向抽屉
 * ========================================================= */
@media (max-width: 992px) {
	.eth-header__toggle {
		display: flex;
	}

	.eth-header__nav {
		position: fixed;
		top: 6rem;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--eth-bg-surface);
		flex-direction: column;
		justify-content: flex-start;
		padding: var(--eth-space-m);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--eth-transition-m);
		z-index: var(--eth-z-header);
	}

	.eth-header__nav.is-open {
		transform: translateX(0);
	}

	.eth-menu {
		flex-direction: column;
		width: 100%;
		gap: 0;
	}

	.eth-menu-item {
		width: 100%;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--eth-border);
	}

	.eth-menu-link {
		flex: 1;
		padding: var(--eth-space-xs) var(--eth-space-2xs);
		font-size: var(--eth-fs-body);
	}

	.eth-menu-toggle {
		display: flex;
	}

	/* 移动端子菜单不再 absolute，改为展开式 */
	.eth-sub-menu,
	.eth-sub-menu--nested {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding-left: var(--eth-space-m);
		display: none;
		width: 100%;
	}

	.eth-menu-item--has-children.is-expanded > .eth-sub-menu,
	.eth-menu-item--has-children.is-expanded > .eth-sub-menu--nested {
		display: block;
	}

	.eth-mega-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: var(--eth-space-s);
		display: none;
	}

	.eth-menu-item--mega.is-expanded > .eth-mega-menu {
		display: block;
	}

	.eth-header__actions {
		order: -1;
	}
}

@media (max-width: 768px) {
	.eth-header__inner {
		min-height: 5rem;
		padding-block: var(--eth-space-2xs);
	}

	.eth-header__nav {
		top: 5rem;
	}
}

/* =========================================================
 * 10. FluentForm 模态弹窗
 * ========================================================= */
.eth-modal {
	position: fixed;
	inset: 0;
	z-index: var(--eth-z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--eth-space-m);
}

.eth-modal.is-open {
	display: flex;
}

.eth-modal__overlay {
	position: absolute;
	inset: 0;
	background: hsla(0, 0%, 0%, 0.6);
	backdrop-filter: blur(4px);
}

.eth-modal__dialog {
	position: relative;
	background: var(--eth-bg-surface);
	border-radius: var(--eth-radius-l);
	box-shadow: var(--eth-shadow-xl);
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--eth-space-l);
	animation: eth-modal-in var(--eth-transition-m);
}

@keyframes eth-modal-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.eth-modal__close {
	position: absolute;
	top: var(--eth-space-s);
	right: var(--eth-space-s);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--eth-radius-full);
	background: var(--eth-dark-5);
	color: var(--eth-text-title);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--eth-transition-s);
}

.eth-modal__close:hover {
	background: var(--eth-dark-10);
}

.eth-modal__body {
	margin-top: var(--eth-space-s);
}

/* =========================================================
 * 11. Footer
 * ========================================================= */
.eth-footer {
	background: var(--eth-bg-muted);
	border-top: 1px solid var(--eth-border);
	padding-block: var(--eth-space-xl) var(--eth-space-l);
}

.eth-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-l);
}

.eth-footer__main {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--eth-space-l);
}

.eth-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-xs);
}

.eth-footer__brand img {
	max-height: 3.5rem;
	width: auto;
}

.eth-footer__desc {
	color: var(--eth-text-muted);
	font-size: var(--eth-fs-small);
}

.eth-footer__widget-title {
	font-size: var(--eth-fs-small);
	font-weight: var(--eth-fw-semibold);
	color: var(--eth-text-title);
	margin-bottom: var(--eth-space-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.eth-footer__widget ul,
.eth-footer__widget li {
	list-style: none;
	padding: 0;
	margin: 0;
}

.eth-footer__widget a {
	color: var(--eth-text-body);
	font-size: var(--eth-fs-small);
	text-decoration: none;
	padding: 0.3em 0;
	display: inline-block;
	transition: color var(--eth-transition-s);
}

.eth-footer__widget a:hover {
	color: var(--eth-primary);
}

.eth-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--eth-space-m);
	border-top: 1px solid var(--eth-border);
}

.eth-footer__copyright {
	color: var(--eth-text-muted);
	font-size: var(--eth-fs-xs);
	margin: 0;
}

.eth-footer__top {
	width: 40px;
	height: 40px;
	border: 1px solid var(--eth-border);
	border-radius: var(--eth-radius-full);
	background: var(--eth-bg-surface);
	color: var(--eth-text-title);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--eth-transition-s),
		color var(--eth-transition-s);
}

.eth-footer__top:hover {
	background: var(--eth-primary);
	color: var(--eth-light);
	border-color: var(--eth-primary);
}

@media (max-width: 768px) {
	.eth-footer__main {
		grid-template-columns: 1fr 1fr;
		gap: var(--eth-space-m);
	}

	.eth-footer__bottom {
		flex-direction: column;
		gap: var(--eth-space-s);
		text-align: center;
	}
}

@media (max-width: 480px) {
	.eth-footer__main {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
 * 12. Reusable Block 模式下的微调
 * --------------------------------------------------------
 * 当 Header/Footer 用 Reusable Block 时，移除默认 padding
 * 让用户在区块编辑器中完全控制布局
 * ========================================================= */
.eth-header--block .eth-header__inner,
.eth-footer--block {
	padding: 0;
}

.eth-header--block,
.eth-footer--block {
	background: transparent;
	border: 0;
}