/*
 * Glass Nav — visual-only class.
 *
 * Applied to an Elementor container that already controls its own sticky /
 * position / layout (via Motion Effects → Sticky in the editor). This rule
 * ONLY paints the background as frosted glass. Border, position, sizing,
 * and z-index are left untouched so the editor remains the source of truth
 * for layout behaviour.
 *
 * Required editor setup on the target container:
 *   - Background → None  (so this background-color is the only paint)
 *   - Border             (kept as-is; semi-transparent hairline is part of design)
 *   - Motion Effects → Sticky: Top (unchanged)
 *
 * --ch-bg comes from cinematic-hero.css (#071421), enqueued site-wide on
 * motion pages. Hex fallback guards any execution order edge case.
 */
.feat-glass-nav {
  background-color: color-mix(in oklch, var(--ch-bg, #071421) 86%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
}

/* Mobile: backdrop-filter is GPU-expensive on touch devices — solid fill instead */
@media (max-width: 768px) {
  .feat-glass-nav {
    background-color: var(--ch-bg, #071421);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Browsers without backdrop-filter support — solid fill, same hex */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .feat-glass-nav {
    background-color: var(--ch-bg, #071421);
  }
}

/* Reduced motion — drop the blur, keep the bar visible and solid */
@media (prefers-reduced-motion: reduce) {
  .feat-glass-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--ch-bg, #071421);
  }
}