/* ==========================================================================
   HEADER — mpcom.id, matching dilacak.com's treatment
   Behavior: stays as-is (Astra's existing transparent-over-hero look) at
   the top of the page. Once scrolled past 80px, a JS-toggled class
   (.mp-header-solid on #masthead) switches it to a fixed, solid #0047AB
   bar with white text/logo, shrinking slightly — same accent color as
   dilacak.com's header, adapted to Astra's own markup.
   Revert: remove this file's <link> and the accompanying <script> in
   functions.php (or wherever they're enqueued).
   ========================================================================== */

#masthead {
  transition: background-color 0.25s ease;
}

#masthead.mp-header-solid {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #0047AB !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

#masthead.mp-header-solid .main-header-bar,
#masthead.mp-header-solid .main-header-bar-wrap,
#masthead.mp-header-solid .ast-primary-header-bar {
  background-color: #0047AB !important;
  transition: padding 0.25s ease;
}

/* shrink slightly once solid, same idea as dilacak.com's header */
#masthead.mp-header-solid .ast-primary-header-bar,
#masthead.mp-header-solid .ast-primary-header-bar .site-primary-header-wrap {
  min-height: 56px !important;
}
#masthead.mp-header-solid .main-header-menu > .menu-item {
  line-height: 56px !important;
}

/* menu text + toggle carets -> white */
#masthead.mp-header-solid .menu-link,
#masthead.mp-header-solid .ast-menu-toggle {
  color: #ffffff !important;
}
#masthead.mp-header-solid .menu-item:hover > .menu-link,
#masthead.mp-header-solid .current-menu-item > .menu-link,
#masthead.mp-header-solid .current-menu-ancestor > .menu-link {
  color: #3CBEAF !important;
}
#masthead.mp-header-solid .ast-menu-toggle svg path {
  fill: #ffffff !important;
}

/* logo -> white variant once solid; stays original at the top (transparent hero).
   Astra applies its own auto color filter to the logo (.site-logo-img img
   { filter:url(#ast-img-color-filter) }) — that filter was recoloring our
   white replacement, so it's explicitly disabled here. */
#masthead.mp-header-solid .custom-logo {
  content: url('https://mpcom.id/wp-content/uploads/2026/07/mpcom-logo-header-white.png?v=2') !important;
  filter: none !important;
}