@import url('/assets/css/vmg-social-icons.css?v=20260822a');
@import url('/assets/css/skeleton-loader.css?v=20260822a');

/* VMG header/footer scroll behavior — single source of truth. */
.site-header.vmg-econship-header {
  z-index: 1200 !important;
  background: #fff;
}

.vmg-tier2-sentinel {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.vmg-tier2-spacer {
  display: block !important;
  width: 100% !important;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Real social icon assets: preserve circle dimensions, enlarge only artwork. */
.vmg-social-link .vmg-social-icon-img {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  max-width: 21px !important;
  max-height: 21px !important;
  object-fit: contain !important;
  flex: 0 0 21px !important;
}

.vmg-footer-social-img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
}

/* =========================================================
   MOBILE / TABLET
   Full header stays sticky while browsing.
   It retreats ONLY while the real final footer is visible.
   Removing that state restores it immediately.
   ========================================================= */
@media (max-width: 991px) {
  .site-header.vmg-econship-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translate3d(0,0,0) !important;
    transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease !important;
    will-change: transform;
  }

  .site-header.vmg-econship-header .vmg-nav-brand-row {
    min-height: 64px !important;
    max-height: 64px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .site-header.vmg-econship-header.vmg-footer-in-view:not(.vmg-menu-open) {
    transform: translate3d(0,calc(-100% - 2px),0) !important;
    pointer-events: none !important;
  }

  .site-header.vmg-econship-header:not(.vmg-footer-in-view),
  .site-header.vmg-econship-header.vmg-menu-open,
  body.menu-open .site-header.vmg-econship-header {
    transform: translate3d(0,0,0) !important;
    pointer-events: auto !important;
  }

  body.menu-open .site-header.vmg-econship-header.vmg-footer-in-view,
  .site-header.vmg-econship-header.vmg-menu-open.vmg-footer-in-view {
    transform: translate3d(0,0,0) !important;
    pointer-events: auto !important;
  }

  .vmg-mobile-socials .vmg-social-icon-img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
}

/* =========================================================
   DESKTOP
   Tier 1 is ordinary document flow.
   Tier 2 pins only when it physically reaches viewport top.
   Footer visibility makes Tier 2 retreat; footer exit restores it.
   ========================================================= */
@media (min-width: 992px) {
  .site-header.vmg-econship-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    overflow: visible !important;
  }

  .site-header.vmg-econship-header .vmg-nav-brand-row {
    min-height: 82px !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .site-header.vmg-econship-header .site-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: translate3d(0,0,0) !important;
    transition: transform 300ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease !important;
    will-change: transform;
  }

  .site-header.vmg-econship-header.vmg-tier2-pinned .site-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1300 !important;
    transform: translate3d(0,0,0) !important;
    box-shadow: 0 8px 24px rgba(4,12,23,.14) !important;
  }

  .site-header.vmg-econship-header.vmg-tier2-pinned.vmg-footer-in-view .site-nav {
    transform: translate3d(0,calc(-100% - 2px),0) !important;
    pointer-events: none !important;
  }

  .site-header.vmg-econship-header.vmg-tier2-pinned:not(.vmg-footer-in-view) .site-nav {
    transform: translate3d(0,0,0) !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   GO TO TOP
   This is intentionally driven by the exact SAME state that means
   the mobile header / desktop Tier 2 has actually retreated.
   Older JS is allowed to add/remove .visible; it cannot override this.
   ========================================================= */
.back-to-top,
.back-to-top.visible {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(16px) !important;
}

body.vmg-header-retreated .back-to-top,
body.vmg-header-retreated .back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body:not(.vmg-header-retreated) .back-to-top,
body:not(.vmg-header-retreated) .back-to-top.visible {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(16px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-header.vmg-econship-header,
  .site-header.vmg-econship-header .site-nav,
  .back-to-top {
    transition: none !important;
  }
}