/*
 * Keep the primary navigation composition consistent at every breakpoint:
 * menu control on the left, Arkova wordmark on the right.
 */
body.arkova-v13 .nav-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  direction: ltr !important;
}

body.arkova-v13 .nav-wrap .arkova-menu-toggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  order: 1 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

body.arkova-v13 .nav-wrap .arkova-brand-link {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  order: 2 !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

@media (max-width: 640px) {
  body.arkova-v13 .nav-wrap {
    grid-template-columns: minmax(52px, 1fr) auto !important;
  }
}

/* The interactive controls live in the inner navigation container. */
.nav-wrap > .container.nav {
  display: grid !important;
  grid-template-columns: minmax(52px, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  direction: ltr !important;
}

.nav-wrap > .container.nav > .arkova-menu-toggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  order: 1 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
}

.nav-wrap > .container.nav > .brand {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  order: 2 !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}

.nav-wrap > .container.nav > .menu {
  grid-column: 1 / -1 !important;
}