/* Fixed header, anchor clearance and mobile navigation. */

/* Keep the approved header geometry; only pin it and reserve anchor clearance. */

:root {
  --header-band-height: 112px;
  --header-clearance: 136px;
  --header-menu-top: 120px;
  --founder-anchor-bleed: 52px;
}

html {
  scroll-padding-top: var(--header-clearance);
}

.header-backdrop {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-band-height);
  z-index: 998;
  pointer-events: none;
  background: rgba(239,244,247,.95);
  border-bottom: 1px solid #CDD5E14D;
  box-shadow: 0 4px 18px #2530470A;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-header {
  position: fixed;
  z-index: 1000;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

main [id] {
  scroll-margin-top: 0;
}

#founder {
  scroll-margin-top: var(--founder-anchor-bleed);
}

/* scrollToContacts in main.js owns this special anchor. Its full-width
   background starts at y=0; the content clears the fixed header inside it. */

#contacts.contact-section-refresh {
  min-height: 100svh;
  padding-top: max(95px,var(--header-clearance));
}

.mobile-nav {
  position: fixed;
  top: var(--header-menu-top);
  z-index: 999;
  max-height: calc(100vh - var(--header-menu-top) - 16px);
  max-height: calc(100dvh - var(--header-menu-top) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding: 12px;
}

@media(max-width:800px) {
  :root {
    --header-clearance: 118px;
    --header-menu-top: 104px;
    --founder-anchor-bleed: 48px;
  }

  #contacts.contact-section-refresh {
    padding-top: max(65px,var(--header-clearance));
  }
}

@media(max-width:600px) {
  :root {
    --header-clearance: 112px;
    --header-menu-top: 98px;
  }

  #contacts.contact-section-refresh {
    padding-top: max(55px,var(--header-clearance));
  }
}

@media(min-width:2400px) {
  #contacts.contact-section-refresh {
    padding-top: max(115px,var(--header-clearance));
  }
}