/**
 * MODULE: floating fixed header + footer navigation
 * Content scrolls; header/footer stay fixed on screen.
 * Edit only this file for nav chrome positioning.
 */
:root {
  --ltr-header-h: 64px;
  --ltr-footer-h: 56px;
}

/* Fixed floating header */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  width: 100%;
  max-width: 100vw;
  height: auto;
  min-height: var(--ltr-header-h);
  background: rgba(252, 249, 242, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(219, 229, 223, 0.9);
  box-shadow: 0 4px 24px rgba(24, 56, 43, 0.07);
}

.site-header .inner {
  min-height: var(--ltr-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  box-sizing: border-box;
}

/* Fixed floating footer */
.site-footer {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1090;
  width: 100%;
  max-width: 100vw;
  background: rgba(252, 249, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(219, 229, 223, 0.9);
  box-shadow: 0 -4px 24px rgba(24, 56, 43, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Page content clears fixed chrome and scrolls underneath */
body {
  padding-top: calc(var(--ltr-header-h) + 12px) !important;
  padding-bottom: calc(var(--ltr-footer-h) + 20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Optional spacer if template still has footer-spacer */
.footer-spacer {
  height: calc(var(--ltr-footer-h) + 8px);
}

/* Chat sits above fixed footer */
.nameli-chat,
#nameli-chat,
.ltr-chat {
  bottom: calc(var(--ltr-footer-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1200 !important; /* below .site-footer (1090) so footer links stay usable */
}
.site-footer { z-index: 1090 !important; }

@media (max-width: 640px) {
  :root {
    --ltr-header-h: 96px; /* wrapped nav */
    --ltr-footer-h: 88px;
  }
  .site-header .inner {
    flex-direction: column;
    align-items: stretch;
  }
  .site-header nav {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
  }
  .site-footer .inner {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 10px 12px;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header,
  .site-footer {
    background: rgba(252, 249, 242, 0.98);
  }
}