/* Fractional Site Tweaks — header menu fullscreen overlay on mobile */
@media (max-width: 782px) {
  /* Force the header navigation overlay to fill the viewport and sit above sticky header */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important; /* modern mobile viewport unit */
    z-index: 99999 !important;
    background: var(--wp--preset--color--background, #fff) !important;
    padding: clamp(16px, 6vw, 28px) !important;
    overflow: auto !important;
  }

  /* Lock page scroll when menu is open (WP also toggles has-modal-open sometimes) */
  html.fst-menu-open,
  body.fst-menu-open,
  html.has-modal-open {
    overflow: hidden;
  }

  /* If any ancestor is sticky or transformed, neutralize while open (best effort) */
  html.fst-menu-open header,
  html.fst-menu-open [data-wp-theme-part="header"],
  html.fst-menu-open .wp-site-blocks > header,
  html.fst-menu-open .is-position-sticky {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* Optional: larger tap targets */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding-block: 0.75rem;
    font-size: 1.1rem;
  }
}

/* Nudge the responsive menu CLOSE button inward so it's fully visible (10px) */
@media (max-width: 782px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog__close {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    inset-inline-end: max(10px, env(safe-area-inset-right, 0px)) !important;
    transform: none !important;
    z-index: 100000 !important;
  }
  [dir="rtl"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
  [dir="rtl"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog__close {
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    inset-inline-start: max(10px, env(safe-area-inset-left, 0px)) !important;
  }
}