/*----------------------------------------*/
/*  Glass header (macOS Dock style)
/*  To revert: remove the glass-header.css <link> line in
/*  resources/views/layouts/app.blade.php
/*----------------------------------------*/

/* the pill itself: frosted glass */
.vl-header-area-1 .vkl-blur-bg-1 {
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 10px 30px rgba(11, 42, 91, 0.12);
}

/* sticky header: no white strip, the floating glass pill stays */
.header-sticky.vl-header-area-1 {
  background: transparent;
  box-shadow: none;
  padding-top: 12px;
}
.header-sticky.vl-header-area-1 .vkl-blur-bg-1 {
  background: rgba(255, 255, 255, 0.45);
}
@media (max-width: 1199px) {
  .header-sticky.vl-header-area-1 .vkl-blur-bg-1 {
    padding: 8px 20px;
  }
}
@media (max-width: 575px) {
  .header-sticky.vl-header-area-1 {
    padding: 8px 8px 0;
  }
}

/* browsers without backdrop-filter: use a solid, readable white */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vl-header-area-1 .vkl-blur-bg-1,
  .header-sticky.vl-header-area-1 .vkl-blur-bg-1 {
    background: rgba(255, 255, 255, 0.92);
  }
}