/* ==========================================================================
   HEADER — sticky, transparent, logo, nav, icons
   Override Kadence header builder via specificity bumps.
   ========================================================================== */

/* --- Header wrapper ------------------------------------------------------ */
.site-header {
	transition: background var(--bagus-dur) var(--bagus-ease),
	            box-shadow var(--bagus-dur) var(--bagus-ease);
}

/* Header height token → Kadence already applies via theme_mod,
   but we reinforce for our transparent/sticky JS logic. */
.site-header .site-header-row-container-inner {
	min-height: var(--bagus-header-h);
}

/* --- Logo (mountain mark + BAGUS wordmark) ------------------------------- */
.site-branding .brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--bagus-ink); /* currentColor untuk mark */
}
/* Mark gunung — mask-image agar mewarisi currentColor (adaptif ke status header) */
.site-branding .brand::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 23px;
	background-color: currentColor;
	-webkit-mask: var(--bagus-logo-mark) center / contain no-repeat;
	mask: var(--bagus-logo-mark) center / contain no-repeat;
	transition: background-color var(--bagus-dur) var(--bagus-ease);
}
.site-branding .site-title {
	font-family: var(--bagus-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bagus-ink);
	margin: 0;
	transition: color var(--bagus-dur) var(--bagus-ease);
}
.site-branding .custom-logo {
	max-height: 36px;
	width: auto;
}
/* Hide tagline */
.site-branding .site-description { display: none; }

/* --- Header account link (modul HTML: [bagus_account]) ------------------- */
.header-account {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--bagus-font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bagus-text);
	padding: 8px 14px;
	border: 1px solid var(--bagus-border-strong);
	border-radius: var(--bagus-radius-pill);
	transition: var(--bagus-transition);
	white-space: nowrap;
	text-decoration: none;
}
.header-account:hover { text-decoration: none; }
.header-account:hover {
	color: var(--bagus-ink);
	border-color: var(--bagus-ink);
	background: var(--bagus-cream);
}
.header-account .bagus-ic { width: 18px; height: 18px; }
.site-header .site-header-item { display: inline-flex; align-items: center; }

/* Inline icon base (dipakai juga di konten) */
.bagus-ic {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* --- Transparent header (on hero pages) ---------------------------------- */
.transparent-header .site-header {
	position: absolute;
	width: 100%;
	z-index: 1000;
	background: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
}
.transparent-header .site-branding .site-title,
.transparent-header .header-navigation .menu > li > a,
.transparent-header .header-cart-button,
.transparent-header .header-search-button {
	color: var(--bagus-on-dark);
}
.transparent-header .header-navigation .menu > li > a:hover,
.transparent-header .header-cart-button:hover,
.transparent-header .header-search-button:hover {
	color: var(--bagus-sand);
}

/* --- Sticky header (scrolled) -------------------------------------------- */
#masthead.item-is-fixed:not(.item-at-start) {
	background: var(--bagus-ink) !important;
	box-shadow: var(--bagus-shadow-header);
}
#masthead.item-is-fixed:not(.item-at-start) .site-branding .site-title {
	color: var(--bagus-on-dark);
}
#masthead.item-is-fixed:not(.item-at-start) .header-navigation .menu > li > a {
	color: var(--bagus-on-dark);
}
#masthead.item-is-fixed:not(.item-at-start) .header-navigation .menu > li > a:hover,
#masthead.item-is-fixed:not(.item-at-start) .header-navigation .current-menu-item > a {
	color: var(--bagus-sand);
}
#masthead.item-is-fixed:not(.item-at-start) .header-cart-button,
#masthead.item-is-fixed:not(.item-at-start) .header-search-button {
	color: var(--bagus-on-dark);
}
#masthead.item-is-fixed:not(.item-at-start) .header-cart-button:hover,
#masthead.item-is-fixed:not(.item-at-start) .header-search-button:hover {
	color: var(--bagus-sand);
}
/* Mark gunung jadi emas di header gelap (sticky / transparent) */
#masthead.item-is-fixed:not(.item-at-start) .site-branding .brand,
.transparent-header .site-branding .brand {
	color: var(--bagus-sand);
}
#masthead.item-is-fixed:not(.item-at-start) .site-branding .site-title,
.transparent-header .site-branding .site-title {
	color: var(--bagus-on-dark);
}
/* Account link di header gelap */
#masthead.item-is-fixed:not(.item-at-start) .header-account,
.transparent-header .header-account {
	color: var(--bagus-on-dark);
	border-color: rgba(241, 237, 228, 0.35);
}
#masthead.item-is-fixed:not(.item-at-start) .header-account:hover,
.transparent-header .header-account:hover {
	color: var(--bagus-ink);
	background: var(--bagus-sand);
	border-color: var(--bagus-sand);
}

/* --- Navigation ---------------------------------------------------------- */
.header-navigation .menu > li > a {
	font-family: var(--bagus-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: var(--bagus-space-2) var(--bagus-space-3);
	transition: color var(--bagus-dur) var(--bagus-ease);
}
.header-navigation .menu > li > a:hover,
.header-navigation .current-menu-item > a {
	color: var(--bagus-sand) !important;
}

/* Dropdown */
.header-navigation .sub-menu {
	background: var(--bagus-surface);
	border: 1px solid var(--bagus-border);
	border-radius: var(--bagus-radius-card);
	box-shadow: var(--bagus-shadow-card);
	padding: var(--bagus-space-2) 0;
	min-width: 200px;
}
.header-navigation .sub-menu li a {
	padding: var(--bagus-space-2) var(--bagus-space-5);
	font-size: var(--bagus-fs-small);
	color: var(--bagus-text);
}
.header-navigation .sub-menu li a:hover {
	background: var(--bagus-cream);
	color: var(--bagus-pine);
}

/* --- Cart badge ---------------------------------------------------------- */
.header-cart-wrap .header-cart-total {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
	border-radius: var(--bagus-radius-pill);
	background: var(--bagus-sand);
	color: var(--bagus-ink);
}
.header-cart-wrap .header-cart-button {
	position: relative;
}

/* Hide empty badge "0" */
.header-cart-total.header-cart-is-empty-true { display: none; }

/* --- Search modal (#search-drawer) --------------------------------------- */
/* NOTE: .search-toggle-open-container adalah pembungkus tombol toggle (±32px),
   BUKAN modal. Jangan beri background di sini (akan jadi kotak gelap). */
#search-drawer .search-field {
	font-size: 1.5rem;
	border: none;
	border-bottom: 2px solid var(--bagus-sand);
	background: transparent;
	color: var(--bagus-on-dark);
	border-radius: 0;
}
#search-drawer .search-field::placeholder {
	color: var(--bagus-on-dark-muted);
}

/* --- Mobile off-canvas / popup ------------------------------------------- */
.popup-drawer {
	background: var(--bagus-ink) !important;
}
.popup-drawer .drawer-inner .drawer-content {
	color: var(--bagus-on-dark);
}
.popup-drawer .mobile-navigation .menu li a {
	color: var(--bagus-on-dark);
	font-size: 1rem;
	padding: var(--bagus-space-3) 0;
	border-bottom: 1px solid var(--bagus-ink-3);
}
.popup-drawer .mobile-navigation .menu li a:hover {
	color: var(--bagus-sand);
}
.popup-drawer .drawer-header .drawer-toggle {
	color: var(--bagus-on-dark);
}
.popup-drawer .drawer-header .drawer-toggle:hover {
	color: var(--bagus-sand);
}

/* --- Mobile header ------------------------------------------------------- */
@media (max-width: 767px) {
	.site-header .site-header-row-container-inner {
		min-height: 64px;
	}
}

/* Header account chip — kontras lebih jelas (override) */
.header-account{background:var(--bagus-cream);color:var(--bagus-ink);border:1px solid var(--bagus-border-strong);padding:8px 16px}
.header-account:hover{background:var(--bagus-sand);border-color:var(--bagus-sand);color:var(--bagus-ink)}
#masthead.item-is-fixed:not(.item-at-start) .header-account,.transparent-header .header-account{background:transparent;color:var(--bagus-on-dark);border-color:rgba(241,237,228,.5)}
#masthead.item-is-fixed:not(.item-at-start) .header-account:hover,.transparent-header .header-account:hover{background:var(--bagus-sand);border-color:var(--bagus-sand);color:var(--bagus-ink)}

/* === BAGUS header overrides: chip Masuk + perbaikan sticky (logo & cart terlihat) === */
.header-account{background:var(--bagus-cream);color:var(--bagus-ink);border:1px solid var(--bagus-border-strong);padding:8px 16px}
.header-account:hover{background:var(--bagus-sand);border-color:var(--bagus-sand);color:var(--bagus-ink)}
.item-is-fixed:not(.item-at-start) .site-branding .brand{color:var(--bagus-sand)}
.item-is-fixed:not(.item-at-start) .site-branding .site-title{color:var(--bagus-on-dark)}
.item-is-fixed:not(.item-at-start) .header-navigation .menu > li > a{color:var(--bagus-on-dark)}
.item-is-fixed:not(.item-at-start) .header-navigation .current-menu-item > a,.item-is-fixed:not(.item-at-start) .header-navigation .menu > li > a:hover{color:var(--bagus-sand)}
.item-is-fixed:not(.item-at-start) .header-cart-button,.item-is-fixed:not(.item-at-start) .header-search-button,.item-is-fixed:not(.item-at-start) .header-cart-button svg,.item-is-fixed:not(.item-at-start) .header-search-button svg{color:var(--bagus-on-dark)!important;fill:var(--bagus-on-dark)!important}
.item-is-fixed:not(.item-at-start) .header-cart-wrap .header-cart-total{background:var(--bagus-sand);color:var(--bagus-ink)}
.item-is-fixed:not(.item-at-start) .header-account{background:transparent;color:var(--bagus-on-dark);border-color:rgba(241,237,228,.5)}
.item-is-fixed:not(.item-at-start) .header-account:hover{background:var(--bagus-sand);border-color:var(--bagus-sand);color:var(--bagus-ink)}