/* ----------------------------------------
   HFB Frontend CSS v2.1
   Spesifisitas tinggi agar tidak di-override tema
---------------------------------------- */

/* -- Reset -- */
#hfb-header *, #hfb-footer * { box-sizing: border-box !important; }
#hfb-header ul, #hfb-header ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* -- Container -- */
.hfb-container {
max-width: 1200px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
width: 100%;
}

/* -- Header z-index agar selalu di atas panel nav -- */
#hfb-header {
z-index: 9995 !important;
}

/* ----------------------------------------
   HEADER
---------------------------------------- */
#hfb-header {
width: 100% !important;
display: block !important;
float: none !important;
clear: both !important;
}

/* -- Baris Logo -- */
#hfb-header .hfb-logo-row {
display: flex !important;
align-items: center !important;
width: 100% !important;
padding-right: 0 !important;
}
#hfb-header .hfb-logo {
flex: 0 0 auto !important;
min-width: 0 !important;
}
#hfb-header .hfb-logo a {
display: inline-flex !important;
align-items: center !important;
text-decoration: none !important;
}
#hfb-header .hfb-logo img {
display: block !important;
height: auto !important;
max-height: 80px !important;
}
#hfb-header .hfb-logo-text {
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.3px !important;
color: inherit !important;
}

/* -- Hamburger Button -- */
#hfb-header .hfb-burger {
display: none !important;
flex-direction: column !important;
justify-content: center !important;
width: 44px !important; height: 44px !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
margin-left: auto !important;
margin-right: 0 !important;
z-index: 1001 !important;
}
#hfb-header .hfb-burger span {
display: block !important;
width: 24px !important; height: 2px !important;
background: #333333 !important;
margin: 2px 0 !important;
transition: all .3s ease !important;
}
#hfb-header .hfb-burger:hover span {
opacity: 0.7 !important;
}

/* -- Baris Menu -- */
#hfb-header .hfb-menu-row {
display: block !important;
position: relative !important;
clear: both !important;
}
#hfb-header .hfb-menu-row .hfb-container {
display: flex !important;
align-items: center !important;
}

/* -- Navigasi -- */
#hfb-header .hfb-nav { flex: 1 !important; }

/* Burger WAJIB tersembunyi di desktop */
#hfb-header .hfb-burger { display: none !important; }

#hfb-header .hfb-menu {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}

#hfb-header .hfb-menu > li {
position: relative !important;
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}

#hfb-header .hfb-menu li::marker {
content: "" !important;
font-size: 0 !important;
}

#hfb-header .hfb-menu li,
#hfb-header .hfb-menu li a {
list-style: none !important;
}

#hfb-header .hfb-menu a::before,
#hfb-header .hfb-menu a::after {
content: none !important;
display: none !important;
}

/* -- Link Menu Utama: ini yang terpenting -- */
#hfb-header .hfb-menu > li > a {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
white-space: nowrap !important;
line-height: 1.2 !important;
letter-spacing: 0.3px !important;
transition: color .2s ease, background-color .2s ease !important;
border: none !important;
outline: none !important;
}
#hfb-header .hfb-menu > li > a::before {
	content: none !important;
	display: none !important;
}

/* -- Dropdown -- */
#hfb-header .hfb-menu li ul {
display: none !important;
position: absolute !important;
top: 100% !important; left: 0 !important;
min-width: 200px !important;
background: #fff !important;
box-shadow: 0 4px 20px rgba(0,0,0,.14) !important;
border-radius: 0 !important;
z-index: 9998 !important;
padding: 6px 0 !important;
margin: 0 !important;
}
#hfb-header .hfb-menu li:hover > ul { display: block !important; }
#hfb-header .hfb-menu li ul li a {
display: block !important;
padding: 10px 20px !important;
color: #333 !important;
font-size: 13px !important;
font-weight: 400 !important;
background: transparent !important;
white-space: nowrap !important;
text-decoration: none !important;
}
#hfb-header .hfb-menu li ul li a::before {
	content: none !important;
	display: none !important;
}
#hfb-header .hfb-menu li ul li a:hover {
background: #f5f5f5 !important;
}

/* -- Burger (hamburger) -- */
#hfb-header .hfb-burger {
display: none;
background: none !important; border: none !important;
cursor: pointer; padding: 8px;
flex-direction: column; gap: 5px; z-index: 1001;
}
#hfb-header .hfb-burger span {
display: block; width: 24px; height: 2px;
background: #333333; border-radius: 2px;
transition: transform .3s, opacity .3s;
}
#hfb-header .hfb-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hfb-header .hfb-burger.open span:nth-child(2) { opacity: 0; }
#hfb-header .hfb-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- Overlay -- */
.hfb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
.hfb-overlay.show { display: block; }

/* -- Sticky -- */
#hfb-header.is-sticky {
position: fixed !important; top: 0 !important;
left: 0 !important; right: 0 !important;
z-index: 99998 !important;
animation: hfb-drop .3s ease;
}
.admin-bar #hfb-header.is-sticky { top: 32px !important; }
@media screen and (max-width:782px) {
.admin-bar #hfb-header.is-sticky { top: 0 !important; }
}
/* Mobile: admin-bar adalah absolute (scroll away), paksa top:0 */
@media (max-width: 782px) {
.admin-bar #hfb-header { top: 0 !important; }
}
@keyframes hfb-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Desktop: hide home button - ditempatkan di sini agar berlaku di desktop */
#hfb-header .hfb-home-btn { display: none !important; }

/* Desktop container styling - berlaku default */
#hfb-header .hfb-menu-row .hfb-container {
display: flex !important;
align-items: center !important;
}

/* Desktop nav - default */
#hfb-header .hfb-nav {
flex: 1 !important;
}

/* ----------------------------------------
   FOOTER
---------------------------------------- */
#hfb-footer { width: 100% !important; display: block !important; }
#hfb-footer .hfb-container { padding-top: 0 !important; padding-bottom: 0 !important; }

.hfb-footer-grid { display: grid !important; gap: 36px !important; }
.hfb-col-1 { grid-template-columns: 1fr !important; }
.hfb-col-2 { grid-template-columns: repeat(2,1fr) !important; }
.hfb-col-3 { grid-template-columns: repeat(3,1fr) !important; }
.hfb-col-4 { grid-template-columns: repeat(4,1fr) !important; }

.hfb-fcol-title {
font-size: 15px; font-weight: 600;
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 2px solid rgba(255,255,255,.15);
}
.hfb-fcol-body { font-size: 14px; line-height: 1.8; }
.hfb-fcol-body ul { list-style: none !important; padding: 0 !important; }
.hfb-fcol-body ul li { margin-bottom: 7px; }
.hfb-fcol-body ul li::before { content:"� "; opacity:.7; }

.hfb-copyright {
margin-top: 28px; padding-top: 20px; padding-bottom: 20px;
border-top: 1px solid rgba(255,255,255,.1);
font-size: 15px; font-weight: 500; text-align: center; opacity: 0.9;
}

/* ----------------------------------------
   MOBILE  = 768px
---------------------------------------- */
@media (max-width: 768px) {

/* Mobile: hapus marker titik/ikon sebelum teks menu */
#hfb-header .hfb-menu > li > a::before,
#hfb-header .hfb-menu li ul li a::before {
content: none !important;
display: none !important;
}

/* Cegah overflow horizontal dari style tema */
#hfb-header {
max-width: 100% !important;
overflow-x: clip !important;
}

/* Tampilkan hamburger di mobile - flush ke ujung kanan */
#hfb-header .hfb-burger {
display: flex !important;
position: absolute !important;
top: 50% !important;
right: 0 !important;
transform: translateY(-50%) !important;
margin: 0 !important;
flex: 0 0 44px !important;
z-index: auto !important;
}

/* Jaga tombol tetap di dalam batas container */
#hfb-header > .hfb-container {
padding-right: 16px !important;
}

/* Bagi ruang logo dan burger agar tidak saling dorong */
#hfb-header .hfb-logo-row {
justify-content: space-between !important;
gap: 12px !important;
min-width: 0 !important;
flex-wrap: nowrap !important;
position: relative !important;
}

#hfb-header .hfb-logo {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 52px) !important;
padding-right: 52px !important;
overflow: hidden !important;
}

#hfb-header .hfb-logo a {
display: inline-flex !important;
max-width: 100% !important;
min-width: 0 !important;
}

#hfb-header .hfb-logo-row .hfb-logo img {
width: auto !important;
max-width: calc(100vw - 96px) !important;
max-height: 52px !important;
height: auto !important;
}

#hfb-header .hfb-logo-text {
display: inline-block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

.hfb-container,
.hfb-logo-row .hfb-container,
.hfb-menu-row .hfb-container {
padding-left: 16px !important;
padding-right: 16px !important;
}

/* Menu horizontal scroll - default mobile */
#hfb-header .hfb-nav {
position: static !important;
flex: 1 !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
#hfb-header .hfb-nav::-webkit-scrollbar { display: none; }

/* Panel fullscreen - saat hamburger diklik */
/* z-index LEBIH RENDAH dari theme header (9999) agar hamburger tetap terlihat */
/* -- Tombol Close Panel -- */
#hfb-header .hfb-nav-close { display: none !important; }
@media (max-width: 768px) {
#hfb-header .hfb-nav.open .hfb-nav-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
top: 14px !important; right: 14px !important;
width: 40px !important; height: 40px !important;
background: rgba(255,255,255,.25) !important; border: none !important;
font-size: 28px !important; line-height: 1 !important;
cursor: pointer !important; color: #000 !important;
z-index: 10002 !important; padding: 0 !important;
border-radius: 4px !important;
transition: background .2s ease !important;
}
#hfb-header .hfb-nav.open .hfb-nav-close:hover {
background: rgba(255,255,255,.35) !important;
}
}

#hfb-header .hfb-nav.open {
position: relative !important;
position: fixed !important; top: 0 !important; right: 0 !important;
width: 100% !important; height: 100vh !important;
background: linear-gradient(135deg, rgb(221, 51, 51), rgb(33, 150, 243)) !important;
box-shadow: none !important;
overflow-x: hidden !important; overflow-y: auto !important;
padding: 0 !important;
z-index: 99990 !important;
}

/* Menu layout saat panel terbuka */
#hfb-header .hfb-nav.open .hfb-menu { flex-direction: column !important; align-items: stretch !important; margin: 0 !important; }
#hfb-header .hfb-nav.open .hfb-menu > li { border-bottom: 1px solid rgba(255,255,255,.25) !important; }
#hfb-header .hfb-nav.open .hfb-menu > li > a { 
	padding: 18px 24px !important; 
	font-size: 17px !important; 
	display: flex !important;
	align-items: center !important;
	color: #000 !important; 
	font-weight: 600 !important; 
}
#hfb-header .hfb-nav.open .hfb-menu > li > a::before { 
	content: none !important;
	display: none !important;
}
#hfb-header .hfb-nav.open .hfb-menu > li > a:hover { background: rgba(0,0,0,.1) !important; }

/* Submenu vertical layout saat panel terbuka */
#hfb-header .hfb-nav.open .hfb-menu li ul {
position: static !important;
display: none !important;
width: 100% !important;
background: rgba(0,0,0,.08) !important;
box-shadow: none !important;
padding: 0 !important; margin: 0 !important;
}
#hfb-header .hfb-nav.open .hfb-menu li.has-submenu-open > ul { display: block !important; }
#hfb-header .hfb-nav.open .hfb-menu li ul li { border: none !important; }
#hfb-header .hfb-nav.open .hfb-menu li ul li a {
padding: 12px 24px 12px 50px !important; 
font-size: 15px !important;
display: flex !important;
align-items: center !important;
color: rgba(0,0,0,.7) !important; 
font-weight: 500 !important;
transition: background .2s ease, color .2s ease !important;
}
#hfb-header .hfb-nav.open .hfb-menu li ul li a::before {
	content: none !important;
	display: none !important;
}
#hfb-header .hfb-nav.open .hfb-menu li ul li a:hover { background: rgba(0,0,0,.12) !important; color: #000 !important; }
}
#hfb-header .hfb-nav.mobile-scroll::-webkit-scrollbar {
display: none;
}

/* Menu row - ensure submenu not clipped */
#hfb-header .hfb-menu-row {
overflow: visible !important;
}

#hfb-header .hfb-menu-row .hfb-container {
overflow: visible !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu {
flex-direction: row !important; 
flex-wrap: nowrap !important;
min-width: max-content !important;
}

/* Item pertama (Home) - tidak shrink, fixed width di mobile scroll */
#hfb-header .hfb-nav.mobile-scroll .hfb-menu > li:first-child {
flex-shrink: 0 !important;
min-width: 80px !important;
border-right: 1px solid rgba(255,255,255,.15) !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu > li:first-child > a {
padding: 11px 10px !important;
justify-content: center !important;
}

/* Submenu di mode scroll horizontal */
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li {
position: relative !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li ul {
position: absolute !important;
top: 100% !important; left: 0 !important;
min-width: 220px !important;
background: #fff !important;
box-shadow: 0 4px 20px rgba(0,0,0,.14) !important;
border-radius: 0 !important;
z-index: 9998 !important;
padding: 4px 0 !important;
margin: 4px 0 0 0 !important;
display: none !important;
}
/* Tampilkan submenu saat parent punya class "has-submenu-open" */
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li.has-submenu-open > ul {
display: block !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li ul li a {
display: block !important;
padding: 10px 18px !important;
color: #333 !important;
font-size: 14px !important;
font-weight: 400 !important;
background: transparent !important;
white-space: nowrap !important;
text-decoration: none !important;
border: none !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li ul li a:hover {
background: #f5f5f5 !important;
}
#hfb-header .hfb-nav.mobile-scroll .hfb-menu li ul li a:hover {
background: #f5f5f5 !important;
}

.hfb-col-3, .hfb-col-4 { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width:480px) {
.hfb-footer-grid { grid-template-columns: 1fr !important; }
}

/* ════ FOOTER BRANDING ════ */
#hfb-footer .hfb-footer-branding {
	text-align: center;
	padding: 30px 0;
	border-top: 1px solid rgba(0,0,0,.1);
	margin-top: 30px;
	margin-bottom: 20px;
}
#hfb-footer .hfb-site-name {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: #333;
	letter-spacing: 0.5px;
}