html body #navbar-main {
  background-color: #000;
  align-items: flex-start;
  gap: 0.5rem 1.5rem;
  padding: 0.5rem 1.5rem;
  min-height: var(--cma-header-height);
}

#navbar-main .navbar-brand {
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 5rem;
  height: auto;
  margin: 0;
  padding: 0;
}

#navbar-main .navbar-brand img {
  display: block;
  width: 100%;
  height: auto;
}

#navbar-main #CollapsingNavbar {
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  padding-top: 0.5rem;
}

#navbar-main #block-cma-mainnavigation {
  flex: 0 1 auto;
  margin-left: auto;
}

/* Desktop: centre the menu vertically in the bar; the logo stays top left. */
@media (min-width: 992px) {
  html body #navbar-main {
    align-items: center;
  }

  #navbar-main .navbar-brand {
    align-self: flex-start;
  }

  #navbar-main #CollapsingNavbar {
    align-items: center;
    padding-top: 0;
  }
}

#navbar-main #block-cma-mainnavigation .navbar-nav {
  justify-content: flex-end;
  flex-wrap: wrap;
}

#navbar-main .nav-link {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9375rem;
}

#navbar-main #block-cma-mainnavigation .nav-link {
  text-transform: uppercase;
}

#navbar-main .nav-link:hover,
#navbar-main .nav-link:focus-visible,
#navbar-main .nav-link.active {
  color: var(--cma-hot-pink);
}

#navbar-main #block-cma-account-menu {
  flex: 0 0 auto;
  border-left: 1px solid var(--cma-hot-pink);
  padding-left: 0.5rem;
}

#navbar-main #block-cma-account-menu .nav {
  justify-content: flex-end;
}

#navbar-main .navbar-toggler {
  margin-left: auto;
  margin-top: 0.75rem;
  border-color: #fff;
}

#navbar-main .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#page #main-wrapper {
  padding-top: var(--cma-header-height);
}

@media (max-width: 991.98px) {
  html body #navbar-main {
    padding-inline: 1rem;
  }

  #navbar-main #CollapsingNavbar {
    width: 100%;
    max-height: calc(100dvh - 10rem);
    overflow-y: auto;
    padding-top: 1rem;
  }

  #navbar-main #block-cma-mainnavigation {
    margin-left: 0;
  }

  #navbar-main #block-cma-mainnavigation .navbar-nav {
    align-items: flex-end;
  }

  #navbar-main #block-cma-account-menu {
    margin-top: 0.5rem;
    border-left: 0;
    border-top: 1px solid var(--cma-hot-pink);
    padding: 0.5rem 0 0;
  }
}

/* Retain the logo's space so menus stay still as branding changes. */
#navbar-main .navbar-brand {
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#navbar-main.is-scrolled .navbar-brand {
  transform: scale(0.7);
}

.cma-home-page:not(.cma-branding-ready) #navbar-main .navbar-brand,
.cma-home-page.cma-hero-in-view #navbar-main .navbar-brand {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Home: video starts at the top under a transparent header, which fades to dark grey on scroll. */
.cma-home-page #page #main-wrapper {
  padding-top: 0;
}

html body.cma-home-page #navbar-main {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Home logo size is set by global.js as the hero scrolls away; the bar grows with it so the menu stays centred. */
html body.cma-home-page #navbar-main {
  min-height: 0;
}

.cma-home-page #navbar-main .navbar-brand,
.cma-home-page #navbar-main.is-scrolled .navbar-brand {
  width: calc(5rem * var(--cma-brand-scale, 1));
  height: auto;
  max-height: none;
  transform: none;
  transition: opacity 0.2s ease;
}

html body.cma-home-page #navbar-main.is-scrolled,
html body.cma-home-page #navbar-main:has(.nav-link:hover, .nav-link:focus-visible),
html body.cma-home-page #navbar-main:has(.navbar-collapse.show, .navbar-collapse.collapsing) {
  background-color: #111;
}

@media (prefers-reduced-motion: reduce) {
  #navbar-main .navbar-brand,
  html body.cma-home-page #navbar-main {
    transition: none;
  }
}