/* Custom CSS Overrides for Apex International Academy Header */

html body #header .header-nav-main nav > ul > li,
html body #header .header-nav-main nav > ul > li > a,
html body #header .header-nav-main nav > ul > li > a *,
html body .school-nav .nav-link,
html body #mainNav li a {
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-transform: uppercase;
}

/* Active Page Highlight Indicator */
html body #header .header-nav-main nav > ul > li > a.active,
html body .school-nav .nav-link.active,
html body #mainNav li a.active {
  color: var(--school-gold) !important;
  font-weight: 700 !important;
  position: relative !important;
}

@media (min-width: 992px) {
  html body #header .header-nav-main nav > ul,
  html body .school-nav .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  html body #header .header-nav-main nav > ul > li,
  html body .school-nav .nav-link {
    flex-shrink: 0 !important;
  }

  html body #header .header-nav-main nav > ul > li > a,
  html body .school-nav .nav-link {
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
  }

  html body #header .header-nav-main nav > ul > li > a.active::after,
  html body .school-nav .nav-link.active::after,
  html body #mainNav li a.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 8px !important;
    right: 8px !important;
    height: 3px !important;
    background-color: var(--school-gold) !important;
    border-radius: 2px !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  html body #header .header-nav-main nav > ul > li > a,
  html body .school-nav .nav-link {
    font-size: 0.77rem !important;
    padding: 8px 5px !important;
  }
}

@media (max-width: 991.98px) {
  html body #header .header-nav-main nav > ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
  }
  html body #header .header-nav-main nav > ul > li {
    width: 100% !important;
  }
  html body #header .header-nav-main nav > ul > li > a,
  html body .school-nav .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
  }
}