/* v2.29 — full-width sticky header positioning fix.
   The previous sticky override inherited translateX(-50%) from an older
   full-bleed header rule. In sticky positioning that transform could shift
   half of the header outside the viewport. This file is intentionally loaded
   last and only corrects header geometry/alignment. */

/* Logged-in header: full viewport width, no translated offset. */
#main-header:not(.hidden),
#main-header.card-kid:not(.hidden) {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  width: 100vw !important;
  max-width: 100vw !important;

  /* Full-bleed from inside the centered #app container. */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  box-sizing: border-box !important;
  z-index: 1000 !important;
}

/* Desktop: logo left, role navigation centered, profile right. */
@media (min-width: 1101px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) minmax(0, auto) minmax(185px, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(16px, 2vw, 30px) !important;
    padding-left: clamp(24px, 3.5vw, 52px) !important;
    padding-right: clamp(24px, 3.5vw, 52px) !important;
  }

  #main-header > div:first-child {
    justify-self: start !important;
    margin: 0 !important;
  }

  #role-nav-shell {
    justify-self: center !important;
    margin: 0 !important;
  }

  #user-header-info {
    justify-self: end !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #mobile-menu-toggle,
  #main-header .mv-mobile-menu-toggle {
    display: none !important;
  }
}

/* Tablet keeps the existing collapsed-menu behavior, but never inherits the
   old translate/left breakout geometry. */
@media (max-width: 1100px) and (min-width: 769px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden) {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Mobile already uses flex/menu mode; only fix full-width sticky geometry. */
@media (max-width: 768px) {
  #main-header:not(.hidden),
  #main-header.card-kid:not(.hidden),
  #main-header:not(.hidden).is-menu-open {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}