/* Scroll-Aware Header Styles */

.scroll-aware-page {
  min-height: 100vh;
  position: relative;
}

.scroll-aware-page .Polaris-Frame {
  position: relative;
}

/* Target the Polaris Page header specifically */
.scroll-aware-page .Polaris-Page-Header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--p-color-bg-surface);
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}

/* Scrolled state - transparent with glass effect */
.scroll-aware-page.scrolled .Polaris-Page-Header {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .scroll-aware-page.scrolled .Polaris-Page-Header {
    background-color: rgba(18, 18, 18, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

/* Enhanced glass effect for better readability */
.scroll-aware-page.scrolled .Polaris-Page-Header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
  z-index: -1;
}

/* Ensure header content remains readable */
.scroll-aware-page.scrolled .Polaris-Page-Header .Polaris-Text,
.scroll-aware-page.scrolled .Polaris-Page-Header .Polaris-Button {
  color: var(--p-color-text);
  transition: color 0.3s ease;
}

/* Smooth animation for header actions */
.scroll-aware-page .Polaris-Page-Header .Polaris-ButtonGroup,
.scroll-aware-page .Polaris-Page-Header .Polaris-Button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: Hide header when scrolling down, show when scrolling up */
.scroll-aware-page.hide-on-scroll-down .Polaris-Page-Header {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-aware-page.hide-on-scroll-down.scrolling-down .Polaris-Page-Header {
  transform: translateY(-100%);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-aware-page .Polaris-Page-Header,
  .scroll-aware-page .Polaris-Page-Header .Polaris-ButtonGroup,
  .scroll-aware-page .Polaris-Page-Header .Polaris-Button {
    transition: none;
  }
  
  .scroll-aware-page.scrolled .Polaris-Page-Header {
    backdrop-filter: none;
  }
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .scroll-aware-page.scrolled .Polaris-Page-Header {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: none;
  }
  
  @media (prefers-color-scheme: dark) {
    .scroll-aware-page.scrolled .Polaris-Page-Header {
      background-color: rgba(18, 18, 18, 0.75);
    }
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .scroll-aware-page.scrolled .Polaris-Page-Header {
    background-color: var(--p-color-bg-surface);
    backdrop-filter: none;
    border-bottom: 2px solid var(--p-color-border);
  }
}

/* Ensure proper spacing for sticky header */
.scroll-aware-page .Polaris-Page {
  padding-top: 0;
}

/* Add subtle animation when transitioning */
.scroll-aware-page .Polaris-Page-Header > * {
  transition: opacity 0.2s ease;
}

.scroll-aware-page.scrolled .Polaris-Page-Header > * {
  opacity: 0.98;
}