/* public/page-studio-assets/runtimes/layout-sticky.css
   Runtime CSS for sticky layout behavior.
   Shared verbatim by SSR and builder canvas.

   CHANGED (2026-10, sticky dimensions preserved): the fixed element no
   longer forces `left: 0; right: 0; width: 100%`. It preserves the
   element's original rendered position and size, set inline by the
   runtime at fix time — see layout-sticky.js's _applyFixed(). This is
   what makes a nested flex (a menu inside a row) or a boxed-width flex
   (inside a centred wrapper) stick AT ITS OWN WIDTH rather than
   expanding to full viewport width, which was visually jumping the
   sticky bar out of its design slot and reading as "extra space before
   the flex."

   Only `position: fixed` and `z-index` remain in the stylesheet — every
   dimension comes from the runtime so it can measure the element before
   the layout context changes. */

@layer ps-components {

  .ps-sticky-fixed {
    position: fixed !important;
    z-index: 100;
    /* top / left / width / height set inline by the runtime */
  }

  /* Builder canvas: keep sticky elements in normal flow for editing.
     The runtime SKIPS attaching sticky behavior entirely when
     data-ps-builder-preview is present (see layout-sticky.js's
     _isBuilderPreview guard), so this rule is a defensive fallback for
     edge cases — e.g. sticky was already applied, then the preview
     attribute toggled on. Strips every inline dimension the runtime
     might have set so the element returns to pure flow layout. */
  [data-ps-builder-preview="true"] .ps-sticky-fixed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: revert !important;
    box-sizing: revert !important;
  }
}