/* v2.17 — proportion pass: larger, calmer, and visually balanced on wide screens. */
@media (min-width: 1061px) {
  #main-header {
    position: relative;
    min-height: 116px !important;
    padding: 1rem 1.35rem !important;
    gap: 1rem !important;
    border: 1px solid rgba(255,255,255,.95) !important;
    border-bottom-width: 1px !important;
    border-radius: 30px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 18px 44px rgba(46,78,112,.10) !important;
  }

  /* Equal visual weight on both ends keeps the menu truly centered. */
  #main-header > div:first-child {
    flex: 0 0 178px !important;
    width: 178px !important;
    display: flex !important;
    align-items: center !important;
  }
  #main-header > div:first-child img {
    width: 168px !important;
    max-width: 168px !important;
    height: auto !important;
  }

  .mv-role-nav-shell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #student-nav:not(.hidden),
  #teacher-nav:not(.hidden) {
    width: 100% !important;
    max-width: 800px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    padding: .35rem !important;
    border-radius: 20px !important;
    background: #f8fbfd !important;
    border: 1px solid #eef3f7 !important;
  }

  #student-nav .mv-student-nav-btn,
  #teacher-nav button {
    flex: 0 1 auto !important;
    min-height: 56px !important;
    padding: .72rem .72rem !important;
    border-radius: 16px !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    gap: .5rem !important;
    letter-spacing: -.012em !important;
  }

  /* Give the icons a consistent visual mass instead of tiny standalone glyphs. */
  #teacher-nav button i,
  #student-nav .mv-student-nav-icon {
    width: 2rem !important;
    height: 2rem !important;
    flex: 0 0 2rem !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: .72rem !important;
    font-size: .86rem !important;
    background: #edf3f7 !important;
    color: #60758d !important;
  }
  #teacher-nav button:hover i,
  #student-nav .mv-student-nav-btn:hover .mv-student-nav-icon {
    background: #e3f5ff !important;
    color: #0284c7 !important;
  }
  #teacher-nav button.bg-brand-blue i,
  #student-nav .mv-student-nav-btn.is-active .mv-student-nav-icon {
    background: #dff4ff !important;
    color: #0284c7 !important;
  }

  #student-nav .mv-student-nav-btn.is-active,
  #teacher-nav button.bg-brand-blue {
    background: #ffffff !important;
    border-color: #ccecff !important;
    color: #0278b7 !important;
    box-shadow: 0 9px 22px rgba(14,165,233,.12) !important;
  }
  #student-nav .mv-student-nav-btn.is-active::after,
  #teacher-nav button.bg-brand-blue::after {
    left: 30% !important;
    right: 30% !important;
    bottom: -7px !important;
    height: 4px !important;
  }

  #user-header-info {
    flex: 0 0 178px !important;
    width: 178px !important;
    justify-content: flex-end !important;
    gap: .5rem !important;
  }
  #user-header-info > div:first-child {
    min-height: 58px !important;
    padding: .55rem .8rem !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 18px rgba(15,23,42,.045) !important;
  }
  #user-header-info > div:first-child > span {
    font-size: 1.65rem !important;
  }
  #user-header-info > div:first-child .text-left p:first-child {
    font-size: .86rem !important;
    line-height: 1.12 !important;
  }
  #user-header-info > div:first-child .text-left p:last-child {
    font-size: .7rem !important;
    line-height: 1.2 !important;
    margin-top: .18rem !important;
  }
  #user-header-info button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: .95rem !important;
  }
}

/* Medium landscape: preserve the same proportions, only compress slightly. */
@media (min-width: 769px) and (max-width: 1060px) {
  #main-header {
    min-height: 102px !important;
    padding: .85rem 1rem !important;
    gap: .55rem !important;
    border-radius: 27px !important;
  }
  #main-header > div:first-child {
    flex: 0 0 148px !important;
    width: 148px !important;
  }
  #main-header > div:first-child img {
    width: 142px !important;
    max-width: 142px !important;
  }
  #student-nav:not(.hidden), #teacher-nav:not(.hidden) {
    max-width: 670px !important;
    gap: .1rem !important;
    padding: .25rem !important;
    border-radius: 17px !important;
    background: #f8fbfd !important;
  }
  #student-nav .mv-student-nav-btn, #teacher-nav button {
    min-height: 50px !important;
    padding: .6rem .5rem !important;
    font-size: .78rem !important;
    gap: .28rem !important;
  }
  #teacher-nav button i,
  #student-nav .mv-student-nav-icon {
    width: 1.65rem !important;
    height: 1.65rem !important;
    flex-basis: 1.65rem !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: .62rem !important;
    background: #edf3f7 !important;
  }
  #user-header-info {
    flex: 0 0 148px !important;
    width: 148px !important;
    justify-content: flex-end !important;
  }
  #user-header-info > div:first-child {
    min-height: 50px !important;
    padding: .45rem .6rem !important;
  }
}

/* Mobile keeps the compact header, but improves the relationship between logo, profile and menu button. */
@media (max-width: 768px) {
  #main-header {
    min-height: 82px !important;
    padding: .72rem .82rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.95) !important;
    box-shadow: 0 12px 30px rgba(46,78,112,.09) !important;
  }
  #main-header > div:first-child img {
    width: 132px !important;
    max-width: 132px !important;
  }
  .mv-mobile-menu-toggle {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 14px !important;
    font-size: 1.08rem !important;
    background: #f4f9fc !important;
  }
  #main-header.is-menu-open #student-nav:not(.hidden),
  #main-header.is-menu-open #teacher-nav:not(.hidden) {
    padding: .8rem !important;
    gap: .48rem !important;
  }
  #main-header.is-menu-open #student-nav .mv-student-nav-btn,
  #main-header.is-menu-open #teacher-nav button {
    min-height: 56px !important;
    font-size: .93rem !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 540px) {
  #main-header > div:first-child img {
    width: 112px !important;
    max-width: 112px !important;
  }
}