/**
 * One sticky-navigation contract for the source-controlled header and Divi.
 *
 * Sticky positioning deliberately keeps the header in normal document flow,
 * preventing the first heading or WooCommerce notices from being obscured.
 * The script only identifies the active shell and publishes its measured height.
 */

:root {
  --tjp-admin-bar-offset: 0px;
  --tjp-native-top-header-height: 0px;
  --tjp-sticky-navigation-height: 0px;
  --tjp-sticky-scroll-offset: calc(
    var(--tjp-admin-bar-offset) +
    var(--tjp-native-top-header-height) +
    var(--tjp-sticky-navigation-height) +
    16px
  );
}

body.admin-bar {
  --tjp-admin-bar-offset: 32px;
}

html.tjp-sticky-navigation-ready {
  scroll-padding-top: var(--tjp-sticky-scroll-offset);
}

html.tjp-sticky-navigation-ready :where(main, #main-content, #et-main-area) :where([id]) {
  scroll-margin-top: var(--tjp-sticky-scroll-offset);
}

/* Source-controlled brand header. It is already in flow; this normalises offsets. */
.tjp-site-header.tjp-sticky-navigation {
  inset-inline: 0;
  position: sticky !important;
  top: var(--tjp-admin-bar-offset) !important;
  width: 100%;
  z-index: 99990;
}

/* A Divi Theme Builder header is the complete header shell and stays in flow. */
.et-l--header.tjp-sticky-navigation {
  inset-inline: 0;
  position: sticky !important;
  top: var(--tjp-admin-bar-offset) !important;
  width: 100%;
  z-index: 99990;
}

/*
 * Divi's classic fixed-navigation mode reserves padding because its header is
 * normally removed from flow. We convert the two native bars to sticky, so the
 * reservation must be removed to avoid an empty strip above page content.
 */
body.tjp-sticky-navigation-native-main #page-container {
  padding-top: 0 !important;
}

body.tjp-sticky-navigation-native-main #top-header.tjp-sticky-navigation__native-top {
  inset-inline: 0;
  position: sticky !important;
  top: var(--tjp-admin-bar-offset) !important;
  width: 100%;
  z-index: 99989;
}

body.tjp-sticky-navigation-native-main #main-header.tjp-sticky-navigation {
  inset-inline: 0;
  position: sticky !important;
  top: calc(var(--tjp-admin-bar-offset) + var(--tjp-native-top-header-height)) !important;
  width: 100%;
  z-index: 99990;
}

/* Keep every mobile menu usable inside the remaining viewport. */
@media (max-width: 980px) {
  .tjp-site-header.tjp-sticky-navigation .tjp-site-nav,
  .et-l--header.tjp-sticky-navigation .et_mobile_menu,
  #main-header.tjp-sticky-navigation .et_mobile_menu,
  #main-header.tjp-sticky-navigation #mobile_menu {
    max-height: calc(100dvh - var(--tjp-sticky-scroll-offset));
    overscroll-behavior: contain;
    overflow-y: auto;
  }
}

@media (max-width: 782px) {
  body.admin-bar {
    --tjp-admin-bar-offset: 46px;
  }
}

/* WordPress makes its toolbar absolute, rather than fixed, at this width. */
@media (max-width: 600px) {
  body.admin-bar {
    --tjp-admin-bar-offset: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tjp-site-header.tjp-sticky-navigation,
  .tjp-site-header.tjp-sticky-navigation .tjp-site-nav,
  .tjp-site-header.tjp-sticky-navigation .tjp-nav-toggle__icon i,
  .et-l--header.tjp-sticky-navigation,
  .et-l--header.tjp-sticky-navigation .et_mobile_menu,
  #main-header.tjp-sticky-navigation,
  #main-header.tjp-sticky-navigation .et_mobile_menu {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}