/* ==========================================================
 * Platform HFE Nav Enhance
 * PAD 端（平板）單行展示 + 左右滑動
 *
 * 目標：viewport 768~1024 時，把 HFE nav widget 從原本的漢堡模式
 *       還原成「水平 nav，並可左右滑動」。
 *
 * 來源控制（要被覆蓋的）：
 *   .hfe-nav-menu__breakpoint-tablet 在 @media (max-width: 1024px) 下：
 *     - .hfe-nav-menu__layout-horizontal { visibility:hidden; opacity:0; height:0 }
 *     - .hfe-nav-menu__layout-horizontal .hfe-nav-menu { visibility:hidden; opacity:0 }
 *     - .hfe-nav-menu__toggle { display:block }（顯示漢堡）
 *     - .hfe-active-menu + nav 才顯示
 *
 * 重要：Elementor widget 實際 class 為
 *   .elementor-widget-hfe-navigation-menu  ← 不是 hfe-nav-menu
 * 也加上其他常見候選，避免找不到。
 * ========================================================== */

/* ----- Selector 通配（任何一種 HFE / Elementor Nav menu widget） ----- */
.enhance-target { /* placeholder, no rule */ }

/* 桌面/手機保留原狀 */
.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
	flex-wrap: wrap;
}

/* ---------- PAD 端 (768 ~ 1024) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {

	/* 主選單容器：永遠顯示 + 水平滾動 */
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal {
		position: relative !important;
		max-width: 100% !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	/* 隱藏 scrollbar */
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal::-webkit-scrollbar,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal::-webkit-scrollbar,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal::-webkit-scrollbar {
		display: none;
	}

	/* ul.hfe-nav-menu：單行 + 撐開 */
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		min-width: max-content !important;
		justify-content: flex-start !important;
	}

	/* 每個 li 不要被擠壓 */
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-hfe-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-hfe-nav-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-navigation-menu.hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal li,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal li {
		width: auto !important;
		margin: 0 !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}

	/* 隱藏漢堡按鈕 */
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu__toggle,
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__toggle,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu__toggle,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__toggle,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal .hfe-nav-menu__toggle,
	.elementor-widget-navigation-menu .hfe-nav-menu__toggle {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}

	/* Footer 選單：PAD 也全部顯示 */
	.phne-is-footer .hfe-nav-menu__layout-horizontal {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
		max-width: 100% !important;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		min-width: auto !important;
		gap: 8px 20px;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal li {
		width: auto !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		border: none !important;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal a {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		padding: 6px 12px;
		border: none !important;
		background: transparent !important;
	}
	.phne-is-footer .hfe-nav-menu__toggle {
		display: none !important;
	}

	/* 子選單（dropdown）：保持絕對定位 */
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal .sub-menu,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal .sub-menu,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal .sub-menu {
		position: absolute !important;
		height: auto !important;
		visibility: visible;
		opacity: 1;
		top: 100% !important;
		left: 0 !important;
		width: auto !important;
		min-width: 200px;
	}

	/* 漸層遮罩 */
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 32px;
		pointer-events: none;
		z-index: 5;
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal::before {
		left: 0;
		background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0));
	}
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal::after {
		right: 0;
		background: linear-gradient(to left, rgba(255,255,255,0.95), rgba(255,255,255,0));
	}
	.elementor-widget-hfe-navigation-menu.phne-can-scroll-left .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-hfe-nav-menu.phne-can-scroll-left .hfe-nav-menu__layout-horizontal::before,
	.elementor-widget-navigation-menu.phne-can-scroll-left .hfe-nav-menu__layout-horizontal::before {
		opacity: 1;
	}
	.elementor-widget-hfe-navigation-menu.phne-can-scroll-right .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-hfe-nav-menu.phne-can-scroll-right .hfe-nav-menu__layout-horizontal::after,
	.elementor-widget-navigation-menu.phne-can-scroll-right .hfe-nav-menu__layout-horizontal::after {
		opacity: 1;
	}

	/* 滑動中：cursor 與 hover 行為 */
	.elementor-widget-hfe-navigation-menu.phne-is-dragging,
	.elementor-widget-hfe-navigation-menu.phne-is-dragging *,
	.elementor-widget-hfe-nav-menu.phne-is-dragging,
	.elementor-widget-hfe-nav-menu.phne-is-dragging *,
	.elementor-widget-navigation-menu.phne-is-dragging,
	.elementor-widget-navigation-menu.phne-is-dragging * {
		cursor: grabbing !important;
		user-select: none;
	}
	.elementor-widget-hfe-navigation-menu.phne-is-dragging .hfe-nav-menu__layout-horizontal .hfe-nav-menu .menu-item-has-children:hover > .sub-menu,
	.elementor-widget-hfe-nav-menu.phne-is-dragging .hfe-nav-menu__layout-horizontal .hfe-nav-menu .menu-item-has-children:hover > .sub-menu,
	.elementor-widget-navigation-menu.phne-is-dragging .hfe-nav-menu__layout-horizontal .hfe-nav-menu .menu-item-has-children:hover > .sub-menu {
		visibility: hidden;
		opacity: 0;
	}
}

/* 行動端 < 768（手機）：保留原本漢堡模式 */
@media (max-width: 767px) {
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal {
		overflow-x: visible;
	}
}

/* 已移除偵錯輔助外框 */

/* 非行動端：隱藏行動端面板，防止從手機寬度拖回桌面時暴露 */
.phne-mobile-panel,
.phne-mobile-overlay {
	display: none;
}

/* ==========================================================
 * 行動端 < 768：完全仿 YouTube 左側抽屜（無頂部 header）
 *  - 從 header 底部開始，保留 logo 可見
 *  - 選項帶圖標、文字左對齊
 * ========================================================== */
@media (max-width: 767px) {
	/* 只隱藏原本 HFE 的水平 nav 清單，保留漢堡按鈕在原位 */
	.elementor-widget-hfe-navigation-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-hfe-nav-menu .hfe-nav-menu__layout-horizontal,
	.elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal {
		display: none !important;
	}

	/* Footer 選單：直接全部顯示，不使用漢堡 */
	.phne-is-footer .hfe-nav-menu__layout-horizontal {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		position: relative !important;
		overflow: visible !important;
		max-width: 100% !important;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		min-width: auto !important;
		gap: 8px 20px;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal li {
		width: auto !important;
		flex: 0 0 auto !important;
		white-space: nowrap !important;
		margin: 0 !important;
		border: none !important;
	}
	.phne-is-footer .hfe-nav-menu__layout-horizontal a {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		padding: 6px 12px;
		font-size: 14px;
		color: #222;
		text-decoration: none;
		border: none !important;
		background: transparent !important;
	}
	.phne-is-footer .hfe-nav-menu__toggle {
		display: none !important;
	}

	.phne-mobile-overlay {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 99998;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease;
	}
	.phne-mobile-overlay.phne-open {
		opacity: 1;
		visibility: visible;
	}

	.phne-mobile-panel {
		position: fixed;
		left: 0;
		bottom: 0;
		width: min(85%, 300px);
		max-width: 300px;
		background: #fff;
		z-index: 100000;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-right: 1px solid #e5e5e5;
	}
	.phne-mobile-panel.phne-open {
		transform: translateX(0);
	}

	.phne-mobile-nav {
		padding: 16px 12px 24px;
		flex: 1 1 auto;
	}
	.phne-mobile-nav ul,
	.phne-mobile-nav li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.phne-mobile-nav .menu-item {
		margin-bottom: 2px;
	}
	.phne-mobile-nav .sub-menu {
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding-left: 52px;
	}
	.phne-mobile-nav a {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 18px;
		padding: 11px 12px;
		font-size: 15px;
		line-height: 1.3;
		color: #0f0f0f;
		text-decoration: none;
		text-align: left !important;
		border-radius: 10px;
		transition: background 0.15s ease;
		width: 100%;
		box-sizing: border-box;
	}
	.phne-mobile-nav a:hover,
	.phne-mobile-nav a:focus {
		background: #f2f2f2;
	}
	.phne-mobile-nav .phne-menu-icon {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		color: #030303;
		fill: currentColor;
	}
	.phne-mobile-nav .phne-menu-icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	.phne-mobile-nav .sub-menu a {
		font-size: 14px;
		color: #333;
		padding: 9px 12px;
	}
	.phne-mobile-nav .sub-menu .phne-menu-icon {
		width: 20px;
		height: 20px;
		color: #606060;
	}

	body.phne-mobile-locked {
		overflow: hidden;
	}
}