/*
 * Qatreh real glass navigation — v5.29.4
 * Loaded as the final navbar authority so every page and palette gets a
 * genuinely translucent surface whose backdrop remains visibly blurred.
 */

html body.qatreh-wordpress-theme .site-header .navbar,
html body.qatreh-wordpress-theme .site-header .navbar:hover {
  background:
    linear-gradient(135deg, rgba(247, 255, 253, .66), rgba(198, 247, 234, .46)) !important;
  background-clip: padding-box !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow:
    0 14px 38px rgba(16, 58, 66, .13),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(255, 255, 255, .18) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) contrast(102%) !important;
  backdrop-filter: blur(28px) saturate(170%) contrast(102%) !important;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* Keep the selected palette visible through the light glass without making it opaque. */
html:not([data-qatreh-theme="dark"])[data-qatreh-palette]:not([data-qatreh-palette="qatreh"]) body.qatreh-wordpress-theme .site-header .navbar,
html:not([data-qatreh-theme="dark"])[data-qatreh-palette]:not([data-qatreh-palette="qatreh"]) body.qatreh-wordpress-theme .site-header .navbar:hover {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--q-surface) 66%, transparent),
      color-mix(in srgb, var(--q-primary-soft) 48%, transparent)
    ) !important;
  border-color: color-mix(in srgb, var(--q-primary) 18%, rgba(255, 255, 255, .68)) !important;
  box-shadow:
    0 14px 38px color-mix(in srgb, var(--q-primary) 12%, rgba(15, 38, 55, .12)),
    inset 0 1px 0 rgba(255, 255, 255, .68) !important;
}

html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar,
html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar:hover {
  color: var(--q-text, #eef5fb) !important;
  background:
    linear-gradient(135deg, rgba(20, 31, 48, .68), rgba(7, 15, 27, .52)) !important;
  background-clip: padding-box !important;
  border-color: rgba(190, 209, 234, .16) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .065),
    inset 0 -1px 0 rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(30px) saturate(145%) brightness(92%) !important;
  backdrop-filter: blur(30px) saturate(145%) brightness(92%) !important;
}

/* The menu button is part of the same glass surface on tablet and mobile. */
html body.qatreh-wordpress-theme .site-header .navbar .navbar-toggler {
  background: rgba(255, 255, 255, .34) !important;
  border-color: rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}

html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar .navbar-toggler {
  background: rgba(8, 16, 28, .34) !important;
  border-color: rgba(190, 209, 234, .13) !important;
}

@media (max-width: 991.98px) {
  html body.qatreh-wordpress-theme .site-header .navbar .navbar-collapse.mobile-nav-panel {
    background:
      linear-gradient(145deg, rgba(239, 255, 251, .76), rgba(255, 245, 250, .62)) !important;
    border-color: rgba(255, 255, 255, .74) !important;
    -webkit-backdrop-filter: blur(30px) saturate(165%) !important;
    backdrop-filter: blur(30px) saturate(165%) !important;
  }

  html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar .navbar-collapse.mobile-nav-panel {
    background:
      linear-gradient(145deg, rgba(18, 29, 46, .78), rgba(7, 14, 25, .64)) !important;
    border-color: rgba(190, 209, 234, .15) !important;
    -webkit-backdrop-filter: blur(32px) saturate(145%) brightness(90%) !important;
    backdrop-filter: blur(32px) saturate(145%) brightness(90%) !important;
  }
}

/* Readable fallback for browsers that do not implement backdrop-filter. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body.qatreh-wordpress-theme .site-header .navbar,
  html body.qatreh-wordpress-theme .site-header .navbar:hover {
    background: linear-gradient(135deg, rgba(247, 255, 253, .95), rgba(211, 250, 240, .94)) !important;
  }

  html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar,
  html[data-qatreh-theme="dark"] body.qatreh-wordpress-theme .site-header .navbar:hover {
    background: linear-gradient(135deg, rgba(20, 31, 48, .96), rgba(8, 16, 28, .96)) !important;
  }
}