/* Scrolled state for fixed/transparent headers (JS adds .wpcl-header-scrolled) */
header.wpcl-header-scrolled,
[data-wpcl-sticky-header].wpcl-header-scrolled {
  /* Use the site token resolved into --wpcl-sticky-bg (often var(--ink)) */
  background-color: color-mix(
    in oklab,
    var(--wpcl-sticky-bg, var(--ink, #0a0e14)) 95%,
    transparent
  ) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

/* Common Tailwind padding shrink while scrolled (matches many Lovable headers) */
header.fixed.wpcl-header-scrolled.py-6,
header.wpcl-header-scrolled.py-6 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Fallback when color-mix unsupported */
@supports not (background-color: color-mix(in oklab, white 50%, black)) {
  header.wpcl-header-scrolled,
  [data-wpcl-sticky-header].wpcl-header-scrolled {
    background-color: var(--wpcl-sticky-bg, var(--ink, #0a0e14)) !important;
    opacity: 1;
  }
}