/*
 * Shared MTS header treatment.
 * The source page keeps ownership of its contextual navigation and menu logic;
 * this file only coordinates persistent positioning, spacing and scroll offsets.
 */
:root {
  --mts-header-height: 96px;
  --mts-header-bottom: var(--mts-header-height);
  --mts-header-surface: #090a0b;
}

html {
  scroll-padding-top: calc(var(--mts-header-height) + 12px);
}

/* Keep one offset mechanism: the root scroll padding includes header + gap.
   Some page styles set their own section margins, so explicitly neutralize
   those to avoid adding the header height twice. */
html :where([id]) {
  scroll-margin-top: 0 !important;
}

/* Main, service and blog shells share the Manrope mother-site header. */
.site-header {
  position: sticky !important;
  inset: 0 0 auto !important;
  z-index: 40;
  font-family: Manrope, sans-serif;
  background: var(--mts-header-surface);
  border-bottom-color: rgba(245, 245, 243, .19);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* The marketing and service pages were designed with their header over the
   hero. Cancel the sticky element's flow height to retain that exact spacing. */
body:not(.blog-site) .site-header {
  margin-bottom: calc(-1 * var(--mts-header-height));
}

.blog-site .site-header {
  margin-bottom: 0;
}

.site-header .header-inner {
  min-height: 96px;
}

/* Service pages reserved this space while their header was absolute. */
.service-main {
  padding-top: var(--mts-header-height) !important;
}

.service-page .site-header {
  margin-bottom: calc(-1 * var(--mts-header-height));
}

/* Portal / Academy / account shells use a separate compact family navigation. */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 106px;
  font-family: Manrope, sans-serif;
  background: var(--mts-header-surface);
  border-bottom-color: rgba(245, 245, 243, .19);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.portal-family {
  color: #fff;
  font-family: Manrope, sans-serif;
  font-weight: 700;
}

.portal-languages {
  flex-shrink: 0;
}

/* Promoter's local section nav and language controls remain untouched. Its
   existing fixed navbar is simply aligned with the shared shell treatment. */
.navbar {
  z-index: 40 !important;
  font-family: Manrope, sans-serif;
  background: rgba(9, 10, 11, .96) !important;
  border-bottom: 1px solid rgba(245, 245, 243, .19) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.navbar .nav-links {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  color: #fff;
}

.navbar .nav-links a {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 900px) {
  .site-header .primary-nav {
    top: var(--mts-header-bottom) !important;
    max-height: calc(100dvh - var(--mts-header-bottom));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .portal-header {
    gap: 12px;
  }

  /* The Promoter menu is a fixed overlay; start directly below its real header
     bottom and let long local section lists scroll independently. */
  .navbar .nav-links {
    top: var(--mts-header-bottom) !important;
    bottom: 0 !important;
    max-height: calc(100dvh - var(--mts-header-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 41 !important;
  }
}

@media (max-width: 760px) {
  .portal-header {
    min-height: 88px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .portal-family {
    gap: 8px 14px;
    font-size: 10px;
  }

  .portal-family a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 680px) {
  .site-header .header-inner {
    min-height: 72px;
  }

  .site-header .primary-nav {
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}