@import "../../theme.scss";

// Sticky header, matching the approved mockup's `.topbar{position:sticky;top:0}`.
// The settings/grid-manager app has no inner scroll container (AppLayout's
// content area scrolls with the window), so sticky is relative to the
// document — offset by WP-admin's own fixed adminbar height, which pushes
// the whole page down in normal flow (html gets margin-top: 32px from WP
// core), not just the sticky calc already used elsewhere for min-height.
// Self-cancelling margin/padding gives the stuck state some breathing room
// without depending on the parent's own (responsive, breakpoint-varying)
// padding values.
.pageHeader-container {
  position: sticky;
  top: $wp-adminbar-height;
  z-index: $z-sticky;
  background: var(--sfsync-bg-surface-translucent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: $space-4 0;
  margin: -#{$space-4} 0 0;
  border-bottom: 1px solid $border-default;

  @media (max-width: 782px) {
    top: $wp-adminbar-height-mobile;
  }

  // WP core itself switches #wpadminbar from position:fixed to
  // position:absolute below this width (wp-admin/css/admin-bar.css), so it
  // scrolls away with the page instead of staying pinned - offsetting for
  // its height here would leave a matching gap of empty space once scrolled.
  @media (max-width: 600px) {
    top: 0;
  }
}

.pageHeader-breadcrumb {
  display: flex;
  align-items: center;
  gap: $space-2;
  margin-bottom: $space-2;
  font-size: $text-xs;
  color: $text-secondary;

  a {
    color: $text-secondary;
    text-decoration: none;

    &:hover {
      color: $secondary;
      text-decoration: underline;
    }
  }
}

.pageHeader-root {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: $space-4;
  margin-bottom: $space-6;

  h2,
  p {
    margin: 0;
  }

  h2 {
    font-size: $text-2xl;
    font-weight: $weight-semibold;
    color: $text-primary;
  }

  p {
    font-size: $text-sm;
    color: $text-secondary;
  }

  .pageHeader-info {
    display: flex;
    flex-direction: column;
    gap: $space-2;
  }

  .pageHeader-actionButtons {
    display: flex;
    align-items: center;
    gap: $space-2;
    flex-shrink: 0;
  }
}