/**
 * MEGA MENU — panel catalog desktop + accordion mobile.
 * Nguồn dữ liệu: WordPress menu `alo_catalog_menu` (xem inc/mega-menu.php).
 */

/* ============ Desktop trigger ============ */
/**
 * Panel neo vào CHÍNH `.alo-header`, KHÔNG neo vào <li> "Sản phẩm".
 *
 * Neo vào <li> (position:relative trên li) khiến panel lấy gốc toạ độ là
 * chiều rộng của một mục nav vài chục px; với `width:100vw` + `left:50%` nó
 * lệch hẳn ra ngoài viewport (đo thật: left 327px, width 1440px trên
 * viewport 1440 → tràn phải). Neo vào header thì `left:0/right:0` cho panel
 * đúng bề ngang header, còn `.alo-container` bên trong tự canh về 1220px
 * thẳng lề với nội dung trang (§3).
 */
/* `.alo-header` KHÔNG còn khai báo position ở đây (Homepage Polish 2027).
   Trước đây file này đặt `position: relative` và vì mega-menu.css load SAU
   header.css nên nó ghi đè `position: sticky` mới thêm → header không dính.
   `position: sticky` cũng tạo containing block cho phần tử absolute con,
   nên panel vẫn neo đúng vào header. Xem header.css. */
.alo-header__nav-item--mega { position: static; }

.alo-header__nav-link--mega {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.alo-header__nav-caret {
	display: inline-flex;
	transform: rotate(90deg); /* chevron-right -> xuống */
	transition: transform .18s ease;
}
.alo-header__nav-caret .alo-icon { width: 14px; height: 14px; }
.alo-header__nav-item--mega.is-open .alo-header__nav-caret { transform: rotate(-90deg); }
.alo-header__nav-item--mega.is-open > .alo-header__nav-link { color: var(--alo-color-primary); }

/* ============ Panel ============ */
.alo-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	transform: translateY(-4px);
	z-index: var(--alo-z-mega); /* trên nội dung trang, dưới overlay/cart drawer */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s;

	/**
	 * KHOẢNG HỞ HOVER (§9): panel dán sát `top:100%` và dùng PADDING-TOP để
	 * tạo khoảng cách thị giác với nav. Nếu dùng `margin-top`/`top: calc(...)`
	 * thì giữa nav và panel có vùng trống KHÔNG thuộc phần tử nào — chuột đi
	 * qua đó sẽ kích hoạt mouseleave và menu tự đóng. Padding giữ vùng đó nằm
	 * TRONG panel nên chuột không bao giờ rời khỏi cụm.
	 */
	padding-top: 10px;
}

.alo-header__nav-item--mega.is-open .alo-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.alo-mega__inner {
	background: var(--alo-color-surface);
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-lg);
	box-shadow: 0 10px 30px rgba(20, 45, 28, .07); /* rất nhẹ, đúng token mockup */
	padding: 28px 32px;
}

/* ============ Cột ============ */
.alo-mega__columns {
	display: grid;
	/* Số cột KHÔNG hard-code — tự chia theo số nhóm Owner tạo (§4). */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 28px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.alo-mega__column { min-width: 0; }

.alo-mega__heading {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--alo-color-border);
	font-size: 14px;
	font-weight: 700;
	color: var(--alo-color-text);
}
a.alo-mega__heading:hover { color: var(--alo-color-primary); }

.alo-mega__list,
.alo-mega__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.alo-mega__list > li + li { margin-top: 2px; }

.alo-mega__link {
	display: block;
	padding: 7px 8px;
	margin-left: -8px;
	border-radius: var(--alo-radius-sm);
	font-size: 14px;
	line-height: 1.45;
	color: var(--alo-color-text-muted);
}
.alo-mega__link:hover {
	color: var(--alo-color-on-soft);
	background: var(--alo-color-primary-soft);
}
.alo-mega__link--sub {
	padding-left: 20px;
	font-size: 13px;
}
.alo-mega__sublist { margin: 2px 0 4px; }

/* Trang đang xem (§15) — nhấn nhẹ, không nổi hơn hover. */
.alo-mega__link.is-current,
.alo-mega__heading.is-current {
	color: var(--alo-color-primary);
	font-weight: 600;
}

.alo-mega__link:focus-visible,
.alo-mega__heading:focus-visible,
.alo-header__nav-link--mega:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: 2px;
}

/* Panel là thứ của desktop — mobile dùng accordion trong drawer. */
@media (max-width: 1023px) {
	.alo-mega { display: none; }
	.alo-header__nav-caret { display: none; }
}

/* ============ Mobile accordion (trong drawer) ============ */
.alo-mobile-menu__group + .alo-mobile-menu__group {
	border-top: 1px solid var(--alo-color-border);
}

/* Hàng: nhãn là LINK riêng, nút chevron toggle riêng (§12) — không bắt
   người dùng bấm vào chữ để mở/đóng khi chữ cần điều hướng. */
.alo-mobile-menu__row {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.alo-mobile-menu__row > .alo-mobile-menu__link {
	flex: 1 1 auto;
	min-width: 0;
}

.alo-mobile-menu__link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 4px;
	font-size: 15px;
	color: var(--alo-color-text);
}
.alo-mobile-menu__link.is-current { color: var(--alo-color-primary); font-weight: 600; }

.alo-mobile-menu__toggle {
	flex: 0 0 48px;
	width: 48px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--alo-color-text-muted);
	cursor: pointer;
}
.alo-mobile-menu__toggle .alo-icon {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
	transition: transform .18s ease;
}
.alo-mobile-menu__toggle[aria-expanded="true"] .alo-icon { transform: rotate(-90deg); }
.alo-mobile-menu__toggle:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: -2px;
}

.alo-mobile-menu__sublist {
	margin: 0 0 6px;
	padding: 0 0 0 14px;
	list-style: none;
	border-left: 2px solid var(--alo-color-border);
}
.alo-mobile-menu__sublist[hidden] { display: none; }
.alo-mobile-menu__sublist .alo-mobile-menu__link {
	min-height: 44px;
	font-size: 14px;
	color: var(--alo-color-text-muted);
}
.alo-mobile-menu__sublist .alo-mobile-menu__sublist { padding-left: 12px; }