/*
 * Loaded on every page (templates/element/ui/next_styles.php). The public
 * header floats above the page as a rounded translucent bar, in the same
 * family as the «Мой Храм24» bottom navigation. It stays on screen while
 * scrolling, so it no longer runs into the content under it.
 * Only the header of the public layout (body > .wrapper > nav.navbar); the
 * temple pages, constructor sites and cabinets keep their own headers.
 */
html:root body.app-body:not(.body-admin):not(.h24-site) > .wrapper > nav.navbar {
  position: sticky;
  top: calc(var(--h24-space-xs) + env(safe-area-inset-top, 0px));
  z-index: 1030;
  margin: var(--h24-space-xs) var(--h24-space-sm) var(--h24-space-sm);
  width: auto;
  max-width: none;
  padding: 6px var(--h24-space-xs) 6px var(--h24-space-md);
  border: 1px solid var(--h24-color-border) !important;
  border-radius: var(--h24-radius-lg);
  background: color-mix(in srgb, var(--h24-color-surface) 82%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 6px 24px rgba(16, 32, 44, 0.12);
}

/* Dark: the plain surface is the page color, so the bar takes the stronger
   surface and a deeper shadow to stay visible. */
html[data-theme="dark"]:root body.app-body:not(.body-admin):not(.h24-site) > .wrapper > nav.navbar {
  background: color-mix(in srgb, var(--h24-color-surface-strong) 78%, transparent) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

@media (min-width: 992px) {
  html:root body.app-body:not(.body-admin):not(.h24-site) > .wrapper > nav.navbar {
    width: calc(100% - 2 * var(--h24-space-md));
    max-width: 1200px;
    margin: var(--h24-space-sm) auto var(--h24-space-md);
  }
}

/* --h24-header-offset: the room the floating header takes at the top of the
   screen. Anything that sticks to the top uses it instead of top: 0, and
   anchor jumps (scroll-padding) land below the header, not under it. */
html:has(> body.app-body:not(.body-admin):not(.h24-site) > .wrapper > nav.navbar) {
  --h24-header-offset: calc(72px + env(safe-area-inset-top, 0px));
  scroll-padding-top: calc(var(--h24-header-offset) + var(--h24-space-xs));
}

@media (min-width: 992px) {
  html:has(> body.app-body:not(.body-admin):not(.h24-site) > .wrapper > nav.navbar) {
    --h24-header-offset: calc(96px + env(safe-area-inset-top, 0px));
  }
}

/* «Мой Храм24» desktop bar sticks under the floating header, not behind it. */
@media (min-width: 900px) {
  html:root .personal-space-nav {
    top: var(--h24-header-offset, 96px);
    z-index: 1020;
  }
}

/* Prayer book: the contents bar sticks under the header. */
html:root .prayerbook-toc {
  top: calc(var(--h24-header-offset, 0px) + var(--h24-space-sm));
}