/*
   The header as the October 2026 design draws it (mockup v10: css/home.css "Header di atas hero",
   css/subpage.css, css/header.css), on every page. Loaded after site.css and the page stylesheets.

   Mockup → here: #hdr = .site-header, .nav = nav.main-nav, .lang = .lang-switch, .lang-btn.on =
   .lang-btn.active, body.sh-page = a page with the white banner (.site--sub:has(.sh-white)).

   No Sign in in the header (client request, 30 Oct 2026, and again 3 Nov 2026): editors go to /login
   by its address. Once signed in they still get Admin and Sign out there (MainLayout).
*/

/* ---- Over the home hero, before scrolling ----------------------------------------------------
   No teal scrim, so the colour logo reads over the banner's sky. The language switch loses its pill
   and takes the menu's own type: EN, when active, teal and heavier; the other white. After scrolling
   the bar is white as before. */
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open)::before { opacity: 0; }
/* The current page and the hovered item stay white over the hero, on the faint white tile, as the
   mockup's genero-v4.css draws them — not site.css's yellow. */
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .nav-link.active,
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .nav-link:hover,
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .nav-item:hover .nav-link,
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .nav-item.open .nav-link { color: #fff; background: rgba(255, 255, 255, .16); }
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .nav-link.active { font-weight: 600; }
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .lang-switch { background: none; border-color: transparent; }
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .lang-knob { opacity: 0; }
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .lang-btn {
    font-size: .755rem; font-weight: 400; letter-spacing: .09em; color: #fff; padding-left: 9px; padding-right: 9px; min-width: 0;
}
.site:not(.site--sub) .site-header:not(.scrolled):not(.menu-open) .lang-btn.active { color: var(--teal); font-weight: 600; }

/* ---- Over a white banner, before scrolling ---------------------------------------------------
   Transparent over the pale band: the colour logo, the menu in grey, the current page heavier,
   the language switch without its pill. site.css's .site--sub rules draw the white bar every other
   sub-page keeps; these lift it only while a white banner is under the header. */
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open)::before { opacity: 0; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .brand img.logo-dark { display: block; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .brand img.logo-light { display: none; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .nav-link { color: #606060; text-shadow: none; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .nav-item:hover .nav-link,
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .nav-item.open .nav-link,
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .nav-link:hover { color: #2B2B2B; background: rgba(0, 0, 0, .04); }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .nav-link.active { color: #2B2B2B; font-weight: 600; background: transparent; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .lang-switch { background: none; border-color: transparent; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .lang-knob { opacity: 0; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .lang-btn {
    font-size: .755rem; font-weight: 400; letter-spacing: .09em; color: #606060; padding-left: 9px; padding-right: 9px; min-width: 0;
}
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .lang-btn.active { color: var(--teal); font-weight: 700; }
.site--sub:has(.sh-white) .site-header:not(.scrolled):not(.menu-open) .burger span { background: #606060; }

/* ---- Menu items spread evenly (client request, 29 Oct 2026) ---------------------------------
   Desktop only. The items fill the space between the logo and the language switch, the gaps all the
   same and following the width: logo → HOME, between items, and the last item → EN. The negative
   margins offset the links' own 8px padding and the language button's 9px, so the gaps between the
   words are equal. Above 1440 the header keeps its 1320px track (see wide-screen.css). */
@media (min-width: 1025px) {
    /* A row, not site.css's three-column grid that centres the menu between equal sides. */
    .site-header .navbar-inner { display: flex; align-items: center; }
    .site nav.main-nav { flex: 1 1 auto; margin-left: -8px; margin-right: -17px; justify-content: space-evenly; gap: 0; }
    .site .nav-right { margin-left: 0; gap: 12px; }
    .site nav.main-nav .nav-link { padding-left: 8px; padding-right: 8px; }
}