/**
 * PHARAON-HEADER-01 - smart header: hide on scroll down, reveal on scroll up.
 *
 * State lives on the real header only, the HFE container #header-sticky
 * (templates #14500 EN / #17783 VI). fxheader() in theme-script.js owns it:
 *
 *   .ph-header--smart      controller is running (absent in the Elementor editor)
 *   .fixed-header          the theme's existing pinned look, unchanged
 *   .ph-header--hidden     pinned and slid out above the viewport
 *   .ph-header--instant    one frame with no transform transition, so pinning
 *                          an off-screen header never plays a visible slide
 *
 * Every selector carries the #header-sticky id, so it outranks the theme and
 * Elementor rules it has to beat without !important.
 */

/* Pinned. The theme's .fixed-header already does this; two rules undo it:
   - inc/wpml-language-switcher.php sets `.header:has(...) { position: relative }`
     below 768px (to anchor the EN|VI pill), which silently stopped the header
     pinning on phones at all. Fixed is a containing block too, so the pill
     still lands where that rule puts it.
   - .admin-bar offsets are hard-coded (32 / 46 / 0px) and wrong between 601
     and 767px, where #wpadminbar is still fixed. The script measures the real
     bar into --ph-hdr-top instead. */
#header-sticky.ph-header--smart.fixed-header {
  position: fixed;
  top: var(--ph-hdr-top, 0px);
  /* The theme's smoothScroll entrance (translateY -40px -> 0, 500ms) would run
     every time the header pins - including the moment it pins already hidden,
     where it would drag the bar back into view. The slide below replaces it. */
  animation: none;
  transform: none;
  transition:
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hidden: its own height, plus whatever sits above it (the admin bar), plus
   32px so the 24px drop shadow leaves the viewport with it. No display or
   visibility change - keyboard focus that lands in the header brings it back
   (see fxheader), so the links stay reachable. */
#header-sticky.ph-header--smart.ph-header--hidden {
  transform: translate3d(0, calc(-100% - var(--ph-hdr-top, 0px) - 32px), 0);
  pointer-events: none;
}

#header-sticky.ph-header--smart.ph-header--instant {
  transition: none;
}

/* Sticky sub-navigators that sit under the pinned header follow it out of the
   viewport, instead of leaving a header-sized gap above themselves. The state
   is read from <html data-ph-header>, which the controller keeps in sync. */
html[data-ph-header="hidden"] .ph-company-profile .ph-profile-nav.is-visible {
  transform: translateY(calc(-1 * var(--ph-hdr-h, 128px)));
}
html[data-ph-header="hidden"] .ph-why-page .w-nav.is-visible {
  transform: translateY(calc(-1 * var(--w-hdr-h, 128px)));
}

@media (prefers-reduced-motion: reduce) {
  /* Still hides and returns - just without the slide. */
  #header-sticky.ph-header--smart.fixed-header {
    transition: none;
  }
}