/* ============================================
HEADER MANUAL MOBILE STYLES
Mobile-specific styles - loaded conditionally via media query
============================================ */

.lqd-mobile-sec {
	display: none;
}

/* Show mobile header below 1200px (includes all tablets) */
@media (max-width: 1199px) {
	.lqd-mobile-sec {
		display: block;
	}
}

/* Mobile Header - TRANSPARENT BACKGROUND */
.lqd-mobile-sec-inner {
	padding: 8px 15px 8px 0px;
	background: transparent;
	position: relative;
	max-width: 100%;
	margin: 0 auto;
}

/* When admin bar is present, mobile section z-index should be below admin bar */
.admin-bar .lqd-mobile-sec {
	z-index: 99 !important;
}

/* Limit width only on small mobile devices */
@media (max-width: 480px) {
	.lqd-mobile-sec-inner {
		max-width: 100%;
	}
}

/* Mobile toggle button - NO BACKGROUND */
.lqd-mobile-sec .navbar-toggle {
	background: transparent;
	border: none;
	padding: 10px;
	cursor: pointer;
	width: auto;
	height: auto;
	min-width: 60px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hamburger SVG Icon - Bigger size */
.lqd-mobile-sec .navbar-toggle .hamburger-icon-svg {
	width: 35px;
	height: 35px;
}

/* Mobile header fixed height */
.lqd-mobile-sec {
	height: 82px;
}

.lqd-mobile-sec-inner {
	height: 82px;
	box-sizing: border-box;
}

.lqd-mobile-sec .navbar-toggle .bars {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Hamburger dengan panjang garis berbeda */
.lqd-mobile-sec .navbar-toggle .bars {
	gap: 6px;
	align-items: flex-start;
}

.lqd-mobile-sec .navbar-toggle .bars .bar {
	height: 2.5px;
	background: #fff;
	transition: all 0.3s ease;
	display: block;
	border-radius: 1px;
}

/* Garis atas: sedang (22px) */
.lqd-mobile-sec .navbar-toggle .bars .bar-top {
	width: 22px;
}

/* Garis tengah: panjang (28px) */
.lqd-mobile-sec .navbar-toggle .bars .bar-mid {
	width: 28px;
}

/* Garis bawah: pendek (18px) */
.lqd-mobile-sec .navbar-toggle .bars .bar-btm {
	width: 18px;
}

/* Tetap hamburger saat terbuka - tidak berubah jadi X */
.lqd-mobile-sec .navbar-toggle.active .bars .bar-top,
.lqd-mobile-sec .navbar-toggle.active .bars .bar-mid,
.lqd-mobile-sec .navbar-toggle.active .bars .bar-btm {
	transform: none;
	opacity: 1;
}

/* Mobile Search Icon - Putih & lebih tebal */
.mobile-search-icon {
	display: flex;
	align-items: center;
}

.mobile-search-icon .lqd-search-trigger {
	color: #fff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.mobile-search-icon .lqd-search-trigger i {
	font-weight: bold;
	-webkit-text-stroke: 0.5px;
}

/* Mobile nav container - Navy gelap background - FULL HEIGHT */
.lqd-mobile-sec-nav {
	background: var(--mobile-menu-bg, #001836);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.lqd-mobile-sec-nav.show {
	max-height: calc(100vh - 82px);
	height: calc(100vh - 82px);
	overflow-y: auto;
}

/* Mobile menu items */
.mobile-main-nav {
	list-style: none;
	padding: 10px 0;
	margin: 0;
}

.mobile-main-nav > li {
	border-bottom: none;
}

/* LEVEL 1 - Base styling */
.mobile-main-nav > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	color: var(--mobile-menu-text, #fff);
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	position: relative;
	transition: all 0.3s ease;
	font-family: var(--menu-font-family, 'Montserrat', sans-serif);
}

/* LEVEL 1 - Menu aktif kuning */
.mobile-main-nav > li.current-menu-item > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Arrow berubah warna saat current menu item */
.mobile-main-nav > li.current-menu-item > a .submenu-expander svg {
	fill: var(--mobile-active-text, #FFD900);
}

/* LEVEL 1 - TAMPILKAN ARROW jika punya submenu */
.mobile-main-nav > li.menu-item-has-children > a {
	padding-right: 50px;
}

.mobile-main-nav > li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mobile-menu-text, #fff);
	border-bottom: 2px solid var(--mobile-menu-text, #fff);
	transform: translateY(-50%) rotate(-45deg);
	transition: transform 0.3s ease;
	pointer-events: none;
}

/* Rotate arrow when open (level 1) */
.mobile-main-nav > li.open > a::after {
	transform: translateY(-70%) rotate(45deg);
}

/* Font berubah warna kuning saat accordion dibuka (level 1) */
.mobile-main-nav > li.open > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Arrow berubah warna kuning saat accordion dibuka (level 1) */
.mobile-main-nav > li.open > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Arrow berubah warna saat current menu item */
.mobile-main-nav > li.current-menu-item > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Hide SVG expander di mobile */
.mobile-main-nav > li.menu-item-has-children > a .submenu-expander {
	display: none !important;
}

/* LEVEL 2 - Show links */
.mobile-main-nav .sub-menu,
.mobile-main-nav .nav-item-children {
	display: none;
	list-style: none;
	padding: 5px 0;
	margin: 0;
	background: transparent;
}

.mobile-main-nav li.open > .sub-menu,
.mobile-main-nav li.open > .nav-item-children {
	display: block;
}

/* LEVEL 2 - Base styling dengan indentasi */
.mobile-main-nav .sub-menu > li > a,
.mobile-main-nav .nav-item-children > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 12px 35px;
	font-size: 16px;
	font-weight: 700;
	color: var(--mobile-menu-text, #fff);
	text-decoration: none;
	border-bottom: none;
	position: relative;
	font-family: var(--menu-font-family, 'Montserrat', sans-serif);
}

/* LEVEL 2 - Menu aktif kuning */
.mobile-main-nav .sub-menu > li.current-menu-item > a,
.mobile-main-nav .nav-item-children > li.current-menu-item > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Level 2 arrow berubah warna saat current menu item */
.mobile-main-nav .sub-menu > li.current-menu-item > a .submenu-expander svg,
.mobile-main-nav .nav-item-children > li.current-menu-item > a .submenu-expander svg {
	fill: var(--mobile-active-text, #FFD900);
}

/* LEVEL 2 - HIDE arrow jika TIDAK punya level 3 */
.mobile-main-nav .sub-menu > li:not(.menu-item-has-children) > a::after {
	display: none !important;
}

/* LEVEL 2 - SHOW arrow hanya yang punya level 3 */
.mobile-main-nav .sub-menu > li.menu-item-has-children > a {
	padding-right: 50px;
}

.mobile-main-nav .sub-menu > li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mobile-menu-text, #fff);
	border-bottom: 2px solid var(--mobile-menu-text, #fff);
	transform: translateY(-50%) rotate(-45deg);
	transition: transform 0.3s ease;
	pointer-events: none;
}

/* Rotate arrow when open (level 2) */
.mobile-main-nav .sub-menu > li.open > a::after {
	transform: translateY(-70%) rotate(45deg);
}

/* Font berubah warna kuning saat accordion dibuka (level 2) */
.mobile-main-nav .sub-menu > li.open > a,
.mobile-main-nav .nav-item-children > li.open > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Arrow berubah warna kuning saat accordion dibuka (level 2) */
.mobile-main-nav .sub-menu > li.open > a::after,
.mobile-main-nav .nav-item-children > li.open > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Level 2 arrow berubah warna saat current menu item */
.mobile-main-nav .sub-menu > li.current-menu-item > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Hide SVG expander di level 2 */
.mobile-main-nav .sub-menu > li.menu-item-has-children > a .submenu-expander {
	display: none !important;
}

/* LEVEL 3+ styling dengan indentasi lebih dalam */
.mobile-main-nav .sub-menu .sub-menu > li > a,
.mobile-main-nav .nav-item-children .nav-item-children > li > a {
	padding-left: 55px;
	font-size: 16px;
	font-weight: 700;
}

/* LEVEL 3 - Menu aktif kuning */
.mobile-main-nav .sub-menu .sub-menu > li.current-menu-item > a,
.mobile-main-nav .nav-item-children .nav-item-children > li.current-menu-item > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Level 3+ arrow berubah warna saat current menu item */
.mobile-main-nav .sub-menu .sub-menu > li.current-menu-item > a .submenu-expander svg,
.mobile-main-nav .nav-item-children .nav-item-children > li.current-menu-item > a .submenu-expander svg {
	fill: var(--mobile-active-text, #FFD900);
}

/* LEVEL 3 - Arrow handling */
.mobile-main-nav .sub-menu .sub-menu > li:not(.menu-item-has-children) > a::after {
	display: none !important;
}

.mobile-main-nav .sub-menu .sub-menu > li.menu-item-has-children > a {
	padding-right: 50px;
}

.mobile-main-nav .sub-menu .sub-menu > li.menu-item-has-children > a::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mobile-menu-text, #fff);
	border-bottom: 2px solid var(--mobile-menu-text, #fff);
	transform: translateY(-50%) rotate(-45deg);
	transition: transform 0.3s ease;
	pointer-events: none;
}

/* Level 3+ open state */
.mobile-main-nav .sub-menu .sub-menu > li.open > a::after {
	transform: translateY(-70%) rotate(45deg);
}

/* Font berubah warna kuning saat accordion dibuka (level 3+) */
.mobile-main-nav .sub-menu .sub-menu > li.open > a,
.mobile-main-nav .nav-item-children .nav-item-children > li.open > a {
	color: var(--mobile-active-text, #FFD900);
}

/* Arrow berubah warna kuning saat accordion dibuka (level 3+) */
.mobile-main-nav .sub-menu .sub-menu > li.open > a::after,
.mobile-main-nav .nav-item-children .nav-item-children > li.open > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Level 3+ arrow berubah warna saat current menu item */
.mobile-main-nav .sub-menu .sub-menu > li.current-menu-item > a::after {
	border-right-color: var(--mobile-active-text, #FFD900);
	border-bottom-color: var(--mobile-active-text, #FFD900);
}

/* Hide SVG expander di level 3 */
.mobile-main-nav .sub-menu .sub-menu > li.menu-item-has-children > a .submenu-expander {
	display: none !important;
}

/* Level 4+ */
.mobile-main-nav .sub-menu .sub-menu .sub-menu > li > a,
.mobile-main-nav .nav-item-children .nav-item-children .nav-item-children > li > a {
	padding-left: 75px;
	font-size: 16px;
	font-weight: 700;
}

/* Hover/Active states untuk semua level */
.mobile-main-nav li a:hover,
.mobile-main-nav li a:active,
.mobile-main-nav li a:focus {
	background: rgba(255,255,255,0.05);
}

/* Mobile logo */
.lqd-mobile-sec .navbar-brand img {
	width: 148.8px;
	height: 67.33px;
	max-height: none;
}

/* Logo on the right side for mobile */
.lqd-mobile-sec .mobile-logo-right {
	margin-left: auto;
}

/* ============================================
TABLET SPECIFIC STYLES (768px - 1199px)
============================================ */
@media (min-width: 768px) and (max-width: 1199px) {
	/* Full width header for tablet */
	.lqd-mobile-sec-inner {
		max-width: 100%;
		padding: 8px 25px;
	}
	
	/* Larger navbar brand for tablet */
	.lqd-mobile-sec .navbar-brand img {
		width: 180px;
		height: auto;
	}
	
	/* Larger hamburger for tablet */
	.lqd-mobile-sec .navbar-toggle {
		min-width: 70px;
		min-height: 70px;
	}
	
	/* Larger mobile menu text for tablet */
	.mobile-main-nav > li > a {
		padding: 18px 30px;
		font-size: 18px;
	}
}

/* Tablet Landscape specific */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
	.lqd-mobile-sec-inner {
		padding: 8px 40px;
	}
}

/* ============================================
MOBILE HEADER STICKY - Background on scroll
============================================ */
/* Default mobile header background - transparent */
.lqd-mobile-sec-inner {
	background: transparent;
	transition: background 0.3s ease;
}

/* Sticky mobile header - Navy background */
.lqd-mobile-sec.is-stuck .lqd-mobile-sec-inner {
	background: var(--header-sticky-bg, #001836);
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* Mobile header animation */
.lqd-mobile-sec.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	animation: stickySlideDown 0.4s ease;
}

/* When admin bar is present, stuck mobile section z-index should be below admin bar */
.admin-bar .lqd-mobile-sec.is-stuck {
	z-index: 99 !important;
}



@keyframes stickySlideDown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Gap helper */
.gap-2 {
	gap: 10px;
}