/* === SHARATIM Glass Header Styling === */

/* Base header container */
header.glass-nav {
  position: fixed;        /* keeps header visible while scrolling */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;           /* ensure it stays above page content */
}

/* Glass background effect */
header.glass-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 22, 0.40);  /* semi-transparent tint (idle state) */
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 0;
}

/* Ensure header contents appear above the glass layer */
header.glass-nav > * {
  position: relative;
  z-index: 1;
}

/* On scroll — slightly darker background */
header.glass-nav.is-scrolled::before {
  background: rgba(9, 12, 22, 0.60);
}

/* Add padding to body so content doesn’t slide under the fixed header */
body.has-fixed-header {
  padding-top: var(--hdrH, 80px); /* dynamically updated by JS */
}

/* Optional: smooth transition on scroll color change */
header.glass-nav::before {
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

/* (Optional) tweak for very tall headers on mobile */
@media (max-width: 768px) {
  body.has-fixed-header {
    padding-top: var(--hdrH, 100px);
  }
}