/*
 * Parkland Site Tools — Sticky Header v1.1.0
 *
 * Uses a fixed header plus an automatically sized spacer.
 * This avoids the small visual vibration that can occur with position: sticky
 * inside dynamic Kadence/mobile header layouts.
 */

:root {
  --pnh-fixed-header-top: 0px;
}

/* Spacer keeps the document flow stable while the header is fixed. */
.pnh-sticky-header-spacer {
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

/* One chosen header target only. */
.pnh-sticky-header-target {
  position: fixed !important;
  top: var(--pnh-fixed-header-top) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99990 !important;

  /*
   * Force an opaque surface on all pages. Some Kadence inner-page headers
   * otherwise inherit a transparent background.
   */
  background: #fff !important;
  opacity: 1 !important;

  /* Reduce compositor/repaint jitter while scrolling. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: box-shadow .18s ease;
}

/* Also make common Kadence/mobile inner header wrappers opaque. */
.pnh-sticky-header-target,
.pnh-sticky-header-target #masthead,
.pnh-sticky-header-target .site-header,
.pnh-sticky-header-target .site-header-row-container-inner,
.pnh-sticky-header-target .site-main-header-wrap,
.pnh-sticky-header-target .site-bottom-header-wrap,
.pnh-sticky-header-target .pnh-mobile-nav__topbar,
.pnh-sticky-header-target .pnh-mobile-nav__primary-wrap,
.pnh-sticky-header-target .pnh-mobile-nav__secondary-shell,
.pnh-sticky-header-target .pnh-mobile-nav__search-panel {
  background-color: #fff !important;
}

.pnh-sticky-header-target.pnh-is-scrolled {
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}

/* Third-level modal always remains above the fixed header. */
.pnh-mobile-nav__modal {
  z-index: 999999 !important;
}

/* WordPress admin bar support. */
body.admin-bar {
  --pnh-fixed-header-top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --pnh-fixed-header-top: 46px;
  }
}

/* The complete Parkland mobile/tablet navigation remains one fixed unit. */
@media (max-width: 1199px) {
  body.pnh-sticky-header-enabled .pnh-mobile-nav.pnh-sticky-header-target {
    position: fixed !important;
    top: var(--pnh-fixed-header-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    opacity: 1 !important;
  }
}

/* Desktop Kadence header. */
@media (min-width: 1200px) {
  body.pnh-sticky-header-enabled .pnh-sticky-header-target {
    position: fixed !important;
    top: var(--pnh-fixed-header-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pnh-sticky-header-target {
    transition: none;
  }
}


/*
 * v1.1.1 — Mobile third-level modal viewport fix.
 *
 * The fixed mobile header previously used transform: translateZ(0).
 * A transformed ancestor changes the containing block for position:fixed
 * descendants, so the third-level modal could become positioned relative
 * to the header instead of the viewport and appear clipped at the top.
 *
 * Keep the compositor optimisation on tablet/desktop, but remove it only
 * on phone widths where the issue occurs.
 */
@media (max-width: 1023px) {
  body.pnh-sticky-header-enabled .pnh-mobile-nav.pnh-sticky-header-target {
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    overflow: visible !important;
  }

  body.pnh-sticky-header-enabled .pnh-mobile-nav__modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 999999 !important;
  }

  body.pnh-sticky-header-enabled .pnh-mobile-nav__panel {
    top: auto !important;
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    max-height: calc(100dvh - 32px) !important;
  }
}