/**
 * Infinity website header layout only.
 * Scoped to #sticky-header.infinity-site-header — does not alter global .container
 * or page body layouts (Free Demo, courses, etc.).
 */

#sticky-header.infinity-site-header > .infinity-site-header__container.container {
  max-width: 100%;
  width: 100%;
  padding-left: clamp(16px, 2.5vw, 40px);
  padding-right: clamp(16px, 2.5vw, 40px);
}

/* One horizontal row on desktop (≥ Bootstrap xl, where .tgmenu__main-menu is shown). */
@media (min-width: 1200px) {
  #sticky-header.infinity-site-header .tgmenu__wrap,
  #sticky-header.infinity-site-header .tgmenu__nav {
    width: 100%;
  }

  #sticky-header.infinity-site-header .tgmenu__nav {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  #sticky-header.infinity-site-header .logo {
    flex: 0 0 auto;
  }

  #sticky-header.infinity-site-header .tgmenu__navbar-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  #sticky-header.infinity-site-header .tgmenu__navbar-wrap > ul.navigation {
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 28px;
    margin-right: 12px;
  }

  #sticky-header.infinity-site-header .tgmenu__navbar-wrap > ul.navigation > li > a {
    white-space: nowrap;
    padding-left: 9px;
    padding-right: 9px;
  }

  #sticky-header.infinity-site-header .tgmenu__action {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 0;
  }

  #sticky-header.infinity-site-header .tgmenu__action > ul {
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Long student names: ellipsis; full name via title/aria-label on the link. */
  #sticky-header.infinity-site-header .infinity-site-header__student-name {
    display: block;
    max-width: min(12rem, 18vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep dropdowns above sticky header chrome; do not clip with overflow. */
  #sticky-header.infinity-site-header .tgmenu__navbar-wrap ul li .sub-menu {
    z-index: 100;
  }
}

/* Mid-desktop: slightly tighter nav so logo | links | actions stay one row. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  #sticky-header.infinity-site-header .tgmenu__navbar-wrap > ul.navigation {
    margin-left: 16px;
    margin-right: 8px;
  }

  #sticky-header.infinity-site-header .tgmenu__navbar-wrap > ul.navigation > li > a {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 15px;
  }

  #sticky-header.infinity-site-header .tgmenu__action > ul li.login-btn {
    margin-inline-start: 6px;
  }

  #sticky-header.infinity-site-header .tgmenu__action > ul li.login-btn a {
    padding: 10px 16px;
  }

  #sticky-header.infinity-site-header .infinity-site-header__student-name {
    max-width: min(9.5rem, 16vw);
  }
}

/* Below xl: existing mobile/tablet nav (toggler) — leave Bootstrap d-xl-flex alone.
   Ensure the header container still uses full width with comfortable padding. */
@media (max-width: 1199.98px) {
  #sticky-header.infinity-site-header .tgmenu__nav {
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
  }

  #sticky-header.infinity-site-header .tgmenu__action {
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  #sticky-header.infinity-site-header > .infinity-site-header__container.container {
    padding-left: 16px;
    padding-right: 16px;
  }
}